{% extends "base.html" %}

{% block title %}Portofolio | Albab Store{% endblock %}

{% block content %}

<!-- ============ JUDUL HALAMAN ============ -->
<section class="page-head">
    <div class="container">
        <h1>Portofolio</h1>
        <p>Beberapa contoh website yang pernah kami kerjakan.</p>
    </div>
</section>

<!-- ============ GRID PORTOFOLIO ============ -->
<section class="section">
    <div class="container">

        <div class="portfolio-grid">

            <article class="portfolio-card reveal">
                <img src="{{ url_for('static', filename='images/pondok.svg') }}" alt="Preview Website Pondok" loading="lazy">
                <div class="portfolio-body">
                    <span class="portfolio-cat">Sekolah &amp; Pondok</span>
                    <h2>Website Pondok</h2>
                    <p>Website profil pondok pesantren dengan program pendidikan, galeri santri, dan berita kegiatan.</p>
                    <a class="btn btn-primary btn-sm" href="{{ url_for('demo', slug='pondok') }}" target="_blank" rel="noopener">Lihat Demo</a>
                </div>
            </article>

            <article class="portfolio-card reveal">
                <img src="{{ url_for('static', filename='images/sekolah.svg') }}" alt="Preview Website Sekolah" loading="lazy">
                <div class="portfolio-body">
                    <span class="portfolio-cat">Sekolah &amp; Pondok</span>
                    <h2>Website Sekolah</h2>
                    <p>Website resmi sekolah lengkap dengan profil, data guru, program unggulan, dan berita.</p>
                    <a class="btn btn-primary btn-sm" href="{{ url_for('demo', slug='sekolah') }}" target="_blank" rel="noopener">Lihat Demo</a>
                </div>
            </article>

            <article class="portfolio-card reveal">
                <img src="{{ url_for('static', filename='images/toko-kopi.svg') }}" alt="Preview Website Toko Kopi" loading="lazy">
                <div class="portfolio-body">
                    <span class="portfolio-cat">UMKM</span>
                    <h2>Website Toko Kopi</h2>
                    <p>Website kedai kopi dengan menu digital, produk unggulan, dan order via WhatsApp.</p>
                    <a class="btn btn-primary btn-sm" href="{{ url_for('demo', slug='toko-kopi') }}" target="_blank" rel="noopener">Lihat Demo</a>
                </div>
            </article>

            <article class="portfolio-card reveal">
                <img src="{{ url_for('static', filename='images/company.svg') }}" alt="Preview Company Profile" loading="lazy">
                <div class="portfolio-body">
                    <span class="portfolio-cat">Company Profile</span>
                    <h2>Company Profile</h2>
                    <p>Website profil perusahaan dengan visi misi, layanan, dan portofolio klien.</p>
                    <a class="btn btn-primary btn-sm" href="{{ url_for('demo', slug='company-profile') }}" target="_blank" rel="noopener">Lihat Demo</a>
                </div>
            </article>

            <article class="portfolio-card reveal">
                <img src="{{ url_for('static', filename='images/event.svg') }}" alt="Preview Website Event" loading="lazy">
                <div class="portfolio-body">
                    <span class="portfolio-cat">Event</span>
                    <h2>Website Event</h2>
                    <p>Halaman acara dengan agenda, pembicara, dan informasi tiket yang menarik.</p>
                    <a class="btn btn-primary btn-sm" href="{{ url_for('demo', slug='event') }}" target="_blank" rel="noopener">Lihat Demo</a>
                </div>
            </article>

            <article class="portfolio-card reveal">
                <img src="{{ url_for('static', filename='images/landing-page.svg') }}" alt="Preview Landing Page" loading="lazy">
                <div class="portfolio-body">
                    <span class="portfolio-cat">Landing Page</span>
                    <h2>Landing Page Produk</h2>
                    <p>Landing page fokus konversi dengan fitur, harga, dan testimoni pelanggan.</p>
                    <a class="btn btn-primary btn-sm" href="{{ url_for('demo', slug='landing-page') }}" target="_blank" rel="noopener">Lihat Demo</a>
                </div>
            </article>

        </div>

        <!-- Ajakan bertindak -->
        <div class="section-cta reveal">
            <p>Ingin hasil seperti di atas untuk bisnis Anda?</p>
            <a class="btn btn-primary btn-lg"
               href="{{ whatsapp_link(settings.whatsapp_number, 'Halo Albab Store, saya ingin membuat website seperti di portofolio.') }}"
               target="_blank" rel="noopener">💬 Konsultasi Gratis</a>
        </div>
    </div>
</section>

{% endblock %}