{% extends 'katalog/base_katalog.html' %}{% load rp_format static %}
{% block content %}
<!-- HERO -->
<section class="bg-neutral-950 text-white overflow-hidden relative">
  <div class="blob" style="width:520px;height:520px;background:rgba(225,6,0,.5);top:-180px;right:-120px"></div>
  <div class="blob" style="width:380px;height:380px;background:rgba(255,255,255,.08);bottom:-200px;left:-100px;animation-delay:-6s"></div>
  <div class="max-w-6xl mx-auto px-4 py-16 md:py-24 relative grid md:grid-cols-5 gap-8 items-center">
    <div class="md:col-span-3">
      <div class="flex items-center gap-3 mb-6 hero-anim">
        <img src="{% if toko.logo %}{{ toko.logo.url }}{% else %}{% static 'img/logo_io.png' %}{% endif %}" onerror="this.onerror=null;this.src='{% static 'img/logo_io.png' %}'" class="w-14 h-14 rounded-full bg-white shadow-lg" alt="{{ toko.nama }}">
        <div><p class="font-black uppercase tracking-tight leading-none">{{ toko.nama }}</p><p class="text-red-500 text-[11px] font-bold tracking-[.25em] uppercase mt-1">{{ toko.tagline }}</p></div>
      </div>
      <h1 class="text-5xl md:text-7xl font-black leading-[.95] tracking-tight">
        <span class="block hero-anim" style="--d:.15s">Semua merek,</span>
        <span class="block hero-anim" style="--d:.3s"><span class="text-red-500">original,</span> ready</span>
        <span class="block hero-anim" style="--d:.45s">stock.</span>
      </h1>
      <p class="text-neutral-300 mt-6 max-w-xl text-base md:text-lg hero-anim" style="--d:.6s">{{ toko.deskripsi|default:"Pilih merek dan tipe, pesan online, bayar lewat transfer atau QRIS, lalu ambil di toko atau kami antar ke alamatmu." }}</p>
      <div class="flex flex-wrap gap-3 mt-8 hero-anim" style="--d:.75s">
        <a href="{% url 'katalog:katalog' %}" class="k-btn k-btn-red shine">Lihat Katalog <i class="fas fa-arrow-right"></i></a>
        {% if toko.wa_link %}<a href="{{ toko.wa_link }}" target="_blank" class="k-btn k-btn-ghost"><i class="fab fa-whatsapp"></i> Tanya via WhatsApp</a>{% endif %}
      </div>
      <div class="flex flex-wrap gap-6 mt-10 text-xs text-neutral-400 hero-anim" style="--d:.9s">
        <span><i class="fas fa-certificate text-red-500 mr-1.5"></i>100% original</span>
        <span><i class="fas fa-box-open text-red-500 mr-1.5"></i>Ready stock</span>
        {% if toko.bisa_kirim %}<span><i class="fas fa-motorcycle text-red-500 mr-1.5"></i>Bisa diantar</span>{% endif %}
        {% if toko.qris_aktif and toko.qris_gambar %}<span><i class="fas fa-qrcode text-red-500 mr-1.5"></i>Bayar QRIS</span>{% endif %}
      </div>
    </div>
    <div class="md:col-span-2 hidden md:block relative hero-anim" style="--d:.5s">
      {% with p=hero_produk %}{% if p %}
      <a href="{% url 'katalog:produk_detail' p.slug %}" class="block float">
        <div class="rounded-[32px] bg-white p-4 shadow-2xl rotate-[-4deg] hover:rotate-0 transition-transform duration-500">
          {% with f=p.foto_utama %}<img src="{% if f %}{{ f.gambar.url }}{% else %}{% static 'img/placeholder.svg' %}{% endif %}" class="w-full aspect-square object-cover rounded-3xl bg-neutral-100" alt="{{ p.nama_lengkap }}">{% endwith %}
          <div class="flex items-center justify-between mt-3 px-1 text-black"><div><p class="text-[11px] font-bold uppercase text-red-600">{{ p.merek.nama }}</p><p class="font-bold text-sm">{{ p.nama }}</p></div><p class="font-black">{{ p.harga|rp }}</p></div>
        </div>
      </a>
      <div class="absolute -top-5 -left-5 bg-red-600 text-white font-black text-sm px-4 py-2 rounded-2xl rotate-[-8deg] shadow-lg pop" style="animation-delay:1.1s">READY STOCK</div>
      {% endif %}{% endwith %}
    </div>
  </div>
</section>

<!-- MARQUEE -->
<div class="marquee bg-red-600 text-white font-black text-sm py-3 tracking-widest uppercase">
  <div class="marquee-track">
    {% for i in "1234" %}<span class="px-8">100% Original</span><span>•</span><span class="px-8">Ready Stock</span><span>•</span><span class="px-8">Bayar Transfer / QRIS</span><span>•</span><span class="px-8">Bisa Diantar</span><span>•</span><span class="px-8">Ambil di Toko</span><span>•</span>{% endfor %}
  </div>
</div>

<!-- MEREK -->
{% if merek_list %}
<section class="max-w-6xl mx-auto px-4 pt-12">
  <div class="flex items-end justify-between mb-5 reveal">
    <div><p class="text-xs font-bold tracking-widest text-red-600 uppercase">Belanja per merek</p><h2 class="text-3xl font-black tracking-tight">Merek Tersedia</h2></div>
  </div>
  <div class="grid grid-cols-3 md:grid-cols-6 gap-3">
    {% for m in merek_list %}
    <a href="{% url 'katalog:katalog' %}?merek={{ m.slug }}" class="reveal rounded-2xl border border-neutral-100 hover:border-black hover:-translate-y-1 hover:shadow-lg transition-all duration-300 p-4 flex flex-col items-center justify-center gap-2 bg-white" style="--d:{{ forloop.counter0 }}00ms">
      {% if m.logo %}<img src="{{ m.logo.url }}" class="h-10 object-contain" alt="{{ m.nama }}">{% else %}<span class="h-10 flex items-center font-black text-lg uppercase tracking-tight">{{ m.nama }}</span>{% endif %}
      <span class="text-[11px] text-neutral-500">{{ m.n }} tipe</span>
    </a>
    {% endfor %}
  </div>
</section>
{% endif %}

<!-- UNGGULAN -->
{% if unggulan %}
<section class="max-w-6xl mx-auto px-4 pt-14">
  <div class="flex items-end justify-between mb-6 reveal">
    <div><p class="text-xs font-bold tracking-widest text-red-600 uppercase">Pilihan kami</p><h2 class="text-3xl font-black tracking-tight">Produk Unggulan</h2></div>
    <a href="{% url 'katalog:katalog' %}" class="text-sm font-bold hover:text-red-600 transition">Semua produk &rarr;</a>
  </div>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">{% for p in unggulan %}{% include 'katalog/_card.html' %}{% endfor %}</div>
</section>
{% endif %}

<!-- KATEGORI -->
{% if kategori_list %}
<section class="max-w-6xl mx-auto px-4 pt-14">
  <h2 class="text-2xl font-black tracking-tight mb-5 reveal">Cari berdasarkan kategori</h2>
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
    {% for k in kategori_list %}<a href="{% url 'katalog:katalog' %}?kategori={{ k.slug }}" class="reveal rounded-2xl bg-neutral-100 hover:bg-neutral-950 hover:text-white hover:-translate-y-1 transition-all duration-300 p-5 text-center group" style="--d:{{ forloop.counter0 }}00ms"><p class="font-bold">{{ k.nama }}</p><p class="text-xs opacity-60 mt-0.5 group-hover:text-red-400">{{ k.n }} produk</p></a>{% endfor %}
  </div>
</section>
{% endif %}

<!-- CARA PESAN -->
<section class="max-w-6xl mx-auto px-4 pt-16">
  <div class="rounded-3xl bg-neutral-950 text-white p-8 md:p-12 relative overflow-hidden reveal">
    <div class="blob" style="width:300px;height:300px;background:rgba(225,6,0,.5);bottom:-120px;right:-60px"></div>
    <h2 class="text-3xl md:text-4xl font-black tracking-tight mb-8 relative">Cara pesan online</h2>
    <div class="grid md:grid-cols-4 gap-6 relative">
      <div class="reveal" style="--d:.1s"><div class="w-10 h-10 rounded-xl bg-red-600 text-white font-black flex items-center justify-center mb-3">1</div><p class="font-bold">Pilih merek, tipe & ukuran</p><p class="text-sm mt-1 text-white/70">Stok yang tampil adalah stok nyata di toko.</p></div>
      <div class="reveal" style="--d:.2s"><div class="w-10 h-10 rounded-xl bg-red-600 text-white font-black flex items-center justify-center mb-3">2</div><p class="font-bold">Ambil di toko atau diantar</p><p class="text-sm mt-1 text-white/70">Tandai lokasimu di peta, ongkir langsung terhitung{% if toko.biaya_packing %} + packing {{ toko.biaya_packing|rp }}{% endif %}.</p></div>
      <div class="reveal" style="--d:.3s"><div class="w-10 h-10 rounded-xl bg-red-600 text-white font-black flex items-center justify-center mb-3">3</div><p class="font-bold">Bayar transfer / QRIS</p><p class="text-sm mt-1 text-white/70">Upload bukti. Barang kami tahan {{ toko.batas_bayar_jam }} jam.</p></div>
      <div class="reveal" style="--d:.4s"><div class="w-10 h-10 rounded-xl bg-white text-black font-black flex items-center justify-center mb-3">4</div><p class="font-bold">Konfirmasi & terima</p><p class="text-sm mt-1 text-white/70">Kami cek bukti, lalu barang siap diambil atau dikirim.</p></div>
    </div>
  </div>
</section>

<!-- TERBARU -->
{% if terbaru %}
<section class="max-w-6xl mx-auto px-4 pt-16">
  <div class="flex items-end justify-between mb-6 reveal">
    <div><p class="text-xs font-bold tracking-widest text-red-600 uppercase">Baru masuk</p><h2 class="text-3xl font-black tracking-tight">Produk Terbaru</h2></div>
    <a href="{% url 'katalog:katalog' %}?sort=terbaru" class="text-sm font-bold hover:text-red-600 transition">Lihat semua &rarr;</a>
  </div>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">{% for p in terbaru %}{% include 'katalog/_card.html' %}{% endfor %}</div>
</section>
{% endif %}

<!-- LOKASI -->
<section class="max-w-6xl mx-auto px-4 pt-16">
  <div class="grid md:grid-cols-2 gap-6 items-center">
    <div class="reveal"><h2 class="text-3xl font-black tracking-tight">Mau cek fisik dulu?</h2><p class="text-neutral-600 mt-3">Mampir ke toko kami. Semua produk bisa dicoba langsung.</p>
      <div class="mt-5 space-y-2 text-sm">{% if toko.alamat %}<p><i class="fas fa-location-dot w-6 text-red-600"></i>{{ toko.alamat }}</p>{% endif %}{% if toko.jam_buka %}<p><i class="fas fa-clock w-6 text-red-600"></i>{{ toko.jam_buka }}</p>{% endif %}{% if toko.no_wa %}<p><i class="fab fa-whatsapp w-6 text-red-600"></i>{{ toko.no_wa }}</p>{% endif %}</div>
      <div class="flex flex-wrap gap-2 mt-6">{% if toko.wa_link %}<a href="{{ toko.wa_link }}" target="_blank" class="k-btn k-btn-wa"><i class="fab fa-whatsapp"></i> Chat WhatsApp</a>{% endif %}{% if toko.maps_link %}<a href="{{ toko.maps_link }}" target="_blank" class="k-btn k-btn-outline"><i class="fas fa-map-location-dot"></i> Buka di Maps</a>{% endif %}</div></div>
    <div class="reveal rounded-3xl bg-neutral-950 aspect-video flex items-center justify-center text-white relative overflow-hidden" style="--d:.15s">
      <div class="blob" style="width:260px;height:260px;background:rgba(225,6,0,.6);top:-80px;left:-60px"></div>
      <div class="text-center relative"><img src="{% if toko.logo %}{{ toko.logo.url }}{% else %}{% static 'img/logo_io.png' %}{% endif %}" onerror="this.onerror=null;this.src='{% static 'img/logo_io.png' %}'" class="w-24 h-24 rounded-full bg-white mx-auto float" alt=""><p class="font-black mt-4 text-xl uppercase">{{ toko.nama }}</p><p class="text-xs text-neutral-400">{{ toko.jam_buka }}</p></div>
    </div>
  </div>
</section>
{% endblock %}