{% extends "base.html" %}

{% block content %}

<!-- ============================================================
     HERO (navy, dua kolom: teks kiri, mockup laptop+hp kanan)
     ============================================================ -->
<section class="hero">
    <!-- dekorasi latar: pola titik + cahaya biru -->
    <div class="hero-bg" aria-hidden="true"></div>

    <div class="container hero-grid">
        <!-- Kiri: teks -->
        <div class="hero-copy">
            <span class="hero-eyebrow">Jasa Pembuatan Website</span>
            <h1>Jasa Pembuatan<br><span class="text-blue">Website</span> Profesional</h1>
            <p class="hero-desc">Kami membantu sekolah, pondok, UMKM, organisasi, dan bisnis
                memiliki website modern, responsive, dan mudah dikelola.</p>

            <ul class="hero-feats">
                <li>✦ Desain Modern</li>
                <li>✦ Responsive</li>
                <li>✦ Mudah Dikelola</li>
            </ul>

            <div class="hero-actions">
                <a class="btn btn-primary btn-lg"
                   href="{{ whatsapp_link(settings.whatsapp_number, settings.wa_default_text) }}"
                   target="_blank" rel="noopener">💬 Konsultasi via WhatsApp</a>
                <a class="btn btn-outline-light btn-lg" href="{{ url_for('katalog') }}">Lihat Katalog</a>
            </div>
        </div>

        <!-- Kanan: mockup laptop + smartphone (murni CSS) -->
        <div class="hero-visual" aria-hidden="true">
            <div class="mockup-laptop">
                <div class="mockup-bar">
                    <span class="dot dot-red"></span>
                    <span class="dot dot-yellow"></span>
                    <span class="dot dot-green"></span>
                    <span class="mockup-address">albabstore.id</span>
                </div>
                <div class="mockup-screen">
                    <div class="mini-nav"><span class="mini-logo">&lt;/&gt;</span>
                        <span class="mini-link"></span><span class="mini-link"></span><span class="mini-link"></span>
                        <span class="mini-btn"></span>
                    </div>
                    <div class="mini-hero">
                        <div class="mini-title"></div>
                        <div class="mini-title short"></div>
                        <div class="mini-line"></div>
                        <div class="mini-btn-row"><span class="mini-btn blue"></span><span class="mini-btn ghost"></span></div>
                    </div>
                    <div class="mini-cards">
                        <span class="mini-card"></span><span class="mini-card"></span><span class="mini-card"></span>
                    </div>
                </div>
                <div class="mockup-base"></div>
            </div>

            <div class="mockup-phone">
                <div class="phone-notch"></div>
                <div class="phone-head"></div>
                <div class="phone-block"></div>
                <div class="phone-block short"></div>
                <div class="phone-btn"></div>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     SECTION: LAYANAN (6 kartu)
     ============================================================ -->
<section class="section" id="layanan">
    <div class="container">
        <div class="section-head reveal">
            <span class="eyebrow">Layanan Kami</span>
            <h2>Layanan Pembuatan Website</h2>
            <p>Berbagai jenis website yang bisa kami buat untuk kebutuhan Anda.</p>
        </div>

        <div class="services-grid">
            <div class="service-card reveal">
                <span class="service-icon">
                    <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M22 10L12 5 2 10l10 5 10-5z"/><path d="M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5"/></svg>
                </span>
                <h3>Website Sekolah &amp; Pondok</h3>
                <p>Profil sekolah, data guru, program, berita, dan galeri — tampil resmi dan informatif.</p>
            </div>
            <div class="service-card reveal">
                <span class="service-icon">
                    <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 9l1.5-5h15L21 9"/><path d="M3 9v11h18V9"/><path d="M3 9h18"/><path d="M9 20v-6h6v6"/></svg>
                </span>
                <h3>Website UMKM &amp; Toko</h3>
                <p>Katalog produk, menu, dan order WhatsApp agar usaha Anda dikenal luas.</p>
            </div>
            <div class="service-card reveal">
                <span class="service-icon">
                    <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><path d="M12 12v4"/></svg>
                </span>
                <h3>Company Profile</h3>
                <p>Website profesional yang membangun citra dan kepercayaan perusahaan Anda.</p>
            </div>
            <div class="service-card reveal">
                <span class="service-icon">
                    <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18"/><path d="M16 15l-4-2v5l4-3z"/></svg>
                </span>
                <h3>Website Event</h3>
                <p>Halaman acara dengan agenda, pembicara, dan pendaftaran peserta.</p>
            </div>
            <div class="service-card reveal">
                <span class="service-icon">
                    <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
                </span>
                <h3>Landing Page</h3>
                <p>Halaman satu fokus untuk promosi produk atau layanan dengan ajakan bertindak.</p>
            </div>
            <div class="service-card reveal">
                <span class="service-icon">
                    <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
                </span>
                <h3>Sistem &amp; Aplikasi Web</h3>
                <p>Kebutuhan khusus seperti sistem informasi, aplikasi web, dan dashboard.</p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     SECTION: KATALOG / CONTOH HASIL WEBSITE (dari database)
     ============================================================ -->
<section class="section section-soft" id="contoh">
    <div class="container">
        <div class="section-head reveal">
            <span class="eyebrow">Portofolio Singkat</span>
            <h2>Contoh Hasil Website (Demo)</h2>
            <p>Lihat beberapa contoh website yang dapat kami buat.</p>
        </div>

        <div class="demo-grid">
            {% for product in products %}
            <article class="demo-card reveal">
                <a href="{{ url_for('product_detail', slug=product.slug) }}" class="demo-thumb">
                    <img src="{{ url_for('static', filename='images/' + product.thumbnail) }}"
                         alt="Preview {{ product.name }}" loading="lazy">
                    <span class="demo-cat">{{ product.category_name }}</span>
                </a>
                <div class="demo-body">
                    <h3><a href="{{ url_for('product_detail', slug=product.slug) }}">{{ product.name }}</a></h3>
                    <p class="demo-price">{{ rupiah(product.price) }}<small> mulai</small></p>
                    <div class="demo-actions">
                        <a class="btn btn-primary btn-sm"
                           href="{{ url_for('demo', slug=product.demo_slug) }}"
                           target="_blank" rel="noopener">Lihat Demo</a>
                        <a class="btn btn-outline btn-sm"
                           href="{{ url_for('product_detail', slug=product.slug) }}">Detail</a>
                    </div>
                </div>
            </article>
            {% endfor %}
        </div>

        <div class="section-cta reveal">
            <a class="btn btn-outline" href="{{ url_for('katalog') }}">Lihat Semua Katalog →</a>
        </div>
    </div>
</section>

<!-- Domain & hosting -->
{% include "partials/domain.html" %}

<!-- Timeline cara pemesanan -->
{% include "partials/timeline.html" %}

<!-- Ajakan bertindak -->
{% include "partials/cta.html" %}

{% endblock %}