{% extends "base.html" %}

{% block title %}{{ product.name }} | Albab Store{% endblock %}

{% block content %}

<!-- ============ DETAIL PRODUK ============ -->
<section class="section">
    <div class="container">

        <!-- Breadcrumb -->
        <nav class="breadcrumb reveal" aria-label="Breadcrumb">
            <a href="{{ url_for('index') }}">Beranda</a> /
            <a href="{{ url_for('katalog') }}">Katalog</a> /
            <span>{{ product.name }}</span>
        </nav>

        <div class="detail-grid">
            <!-- Kiri: preview besar -->
            <div class="detail-preview reveal">
                <img src="{{ url_for('static', filename='images/' + product.thumbnail) }}"
                     alt="Preview {{ product.name }}" loading="lazy">
                <span class="demo-cat">{{ product.category_name }}</span>
            </div>

            <!-- Kanan: informasi -->
            <div class="detail-info reveal">
                <span class="eyebrow">{{ product.category_name }}</span>
                <h1>{{ product.name }}</h1>
                <p class="detail-price">{{ rupiah(product.price) }}<small> mulai</small></p>
                <p class="detail-desc">{{ product.description }}</p>

                <!-- Fitur -->
                <h2 class="detail-sub">Fitur Website</h2>
                <ul class="detail-features">
                    {% for feature in features %}
                        <li>✓ {{ feature.feature }}</li>
                    {% else %}
                        <li>Fitur menyesuaikan kebutuhan.</li>
                    {% endfor %}
                </ul>

                <!-- Teknologi -->
                {% if product.technology %}
                <h2 class="detail-sub">Teknologi</h2>
                <div class="tech-chips">
                    {% for tech in product.technology.split(",") %}
                        <span class="tech-chip">{{ tech.strip() }}</span>
                    {% endfor %}
                </div>
                {% endif %}

                <!-- Aksi -->
                <div class="detail-actions">
                    <a class="btn btn-primary btn-lg"
                       href="{{ url_for('demo', slug=product.demo_slug) }}"
                       target="_blank" rel="noopener">👀 Lihat Demo</a>
                    <a class="btn btn-outline btn-lg"
                       href="{{ whatsapp_link(settings.whatsapp_number, 'Halo ' ~ store_name ~ ', saya tertarik dengan ' ~ product.name ~ '.') }}"
                       target="_blank" rel="noopener">🛒 Pesan Website</a>
                </div>
                <p class="detail-wa-note">Pesan via WhatsApp langsung terisi otomatis. 👆</p>
            </div>
        </div>

        <!-- Produk lain di kategori yang sama -->
        {% if related %}
        <div class="related">
            <h2 class="section-title">Produk Lainnya</h2>
            <div class="demo-grid">
                {% for item in related %}
                <article class="demo-card reveal">
                    <a href="{{ url_for('product_detail', slug=item.slug) }}" class="demo-thumb">
                        <img src="{{ url_for('static', filename='images/' + item.thumbnail) }}"
                             alt="Preview {{ item.name }}" loading="lazy">
                    </a>
                    <div class="demo-body">
                        <h3><a href="{{ url_for('product_detail', slug=item.slug) }}">{{ item.name }}</a></h3>
                        <p class="demo-price">{{ rupiah(item.price) }}<small> mulai</small></p>
                        <div class="demo-actions">
                            <a class="btn btn-primary btn-sm"
                               href="{{ url_for('demo', slug=item.demo_slug) }}"
                               target="_blank" rel="noopener">Lihat Demo</a>
                            <a class="btn btn-outline btn-sm"
                               href="{{ url_for('product_detail', slug=item.slug) }}">Detail</a>
                        </div>
                    </div>
                </article>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</section>

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

{% endblock %}