@extends('layouts.app')

@section('title', 'Produk Distro Lokal')
@section('active', 'home')

@section('content')
<!-- HERO -->
<section class="hero">
  <div class="container py-5">
    <div class="row align-items-center g-5 py-lg-4">
      <div class="col-lg-6">
        <span class="badge-soft mb-3 d-inline-block"><i class="bi bi-patch-check-fill text-primary me-1" aria-hidden="true"></i> Cotton Combed 24s–30s &amp; Desain Orisinal</span>
        <h1 class="mb-3">Produk Distro Lokal, <span class="text-primary">Bikin Pede</span> Seharian.</h1>
        <p class="lead mb-4">Kaos, kemeja, hoodie, jaket, denim, dan celana dengan bahan nyaman, sablon plastisol yang awet, dan potongan pas badan. Desain asli Bandung, harga tetap bersahabat.</p>
        <div class="d-flex flex-wrap gap-2 mb-4">
          <a href="{{ route('katalog') }}" class="btn btn-gradient btn-lg"><i class="bi bi-bag-heart me-2" aria-hidden="true"></i>Belanja Sekarang</a>
          <a href="#keunggulan" class="btn btn-outline-primary btn-lg">Kenapa {{ config('toko.nama') }}?</a>
        </div>
        <div class="d-flex flex-wrap gap-3">
          <span class="pill"><i class="bi bi-truck text-primary" aria-hidden="true"></i> @if(app(\App\Services\Shipping::class)->distanceMode())Pengiriman lokal hingga {{ config('toko.delivery.max_km') }} km @else Kirim ke seluruh Indonesia @endif</span>
          @if(app(\App\Services\Shipping::class)->distanceMode() && config('toko.delivery.free_threshold')>0)<span class="pill"><i class="bi bi-gift text-primary" aria-hidden="true"></i>Gratis ongkir mulai {{ rupiah(config('toko.delivery.free_threshold')) }}</span>@endif
          <span class="pill"><i class="bi bi-arrow-left-right text-primary" aria-hidden="true"></i> Tukar ukuran 7 hari</span>
        </div>
      </div>
      <div class="col-lg-6">
        <img src="{{ asset('assets/img/hero.webp') }}" alt="Koleksi kaos dan jaket distro {{ config('toko.nama') }} di rak toko" class="img-fluid hero-img w-100" width="1268" height="672" fetchpriority="high">
      </div>
    </div>
  </div>
</section>

<section class="section-sm home-categories"><div class="container">
  <div class="section-heading"><div><div class="eyebrow mb-2">Mulai dari gaya kamu</div><h2 class="mb-0">Jelajahi Kategori</h2></div><a class="text-link" href="{{ route('katalog') }}">Semua koleksi <i class="bi bi-arrow-right ms-1" aria-hidden="true"></i></a></div>
  <div class="category-grid">@foreach($categories as $category)<a class="category-tile" href="{{ route('katalog', ['kategori' => $category->slug]) }}"><img src="{{ $category->products->first()?->image_url ?? asset('assets/img/placeholder.webp') }}" width="180" height="150" alt="" loading="lazy"><span>{{ $category->name }}<i class="bi bi-arrow-up-right" aria-hidden="true"></i></span></a>@endforeach</div>
</div></section>

<!-- KEUNGGULAN -->
<section class="section" id="keunggulan">
  <div class="container">
    <div class="text-center mb-5">
      <div class="eyebrow mb-2">Kenapa pilih kami</div>
      <h2>Dibuat untuk Gaya &amp; Nyaman Sehari-hari</h2>
    </div>
    <div class="row g-4">
      @foreach ([
        ['bi-wind', 'Bahan Adem', 'Cotton combed pilihan yang lembut, menyerap keringat, dan tetap nyaman di cuaca panas.'],
        ['bi-palette', 'Desain Orisinal', 'Artwork dibuat sendiri oleh tim desain lokal. Bukan desain pasaran, rilis terbatas.'],
        ['bi-droplet-half', 'Sablon Awet', 'Sablon plastisol &amp; rubber berkualitas yang tidak mudah retak walau sering dicuci.'],
        ['bi-rulers', 'Ukuran Lengkap', 'Pilihan ukuran baju dan celana. Cek varian dan panduan pada setiap produk.'],
      ] as [$icon, $judul, $teks])
      <div class="col-6 col-lg-3">
        <div class="card-soft p-4 h-100">
          <div class="feature-icon mb-3"><i class="bi {{ $icon }}" aria-hidden="true"></i></div>
          <h3 class="h5 mb-2">{{ $judul }}</h3>
          <p class="text-muted-soft mb-0 small">{!! $teks !!}</p>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

<!-- PRODUK UNGGULAN -->
<section class="section-sm">
  <div class="container">
    <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
      <div>
        <div class="eyebrow mb-2">Paling dicari</div>
        <h2 class="mb-0">Produk Unggulan</h2>
      </div>
      <a href="{{ route('katalog') }}" class="btn btn-light-blue">Lihat semua <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
    </div>
    @if ($unggulan->isEmpty())
      <div class="card-soft p-5 text-center">
        <i class="bi bi-box-seam display-5 text-primary mb-3 d-block" aria-hidden="true"></i>
        <h3 class="h5">Produk segera hadir</h3>
        <p class="text-muted-soft mb-0">Koleksi baru sedang kami siapkan. Cek lagi sebentar lagi, ya!</p>
      </div>
    @else
      <div class="row g-4">
        @foreach ($unggulan as $product)
          <div class="col-6 col-lg-3">
            @include('partials.product-card', ['product' => $product])
          </div>
        @endforeach
      </div>
    @endif
  </div>
</section>

<section class="section-sm"><div class="container">
  <div class="section-heading"><div><div class="eyebrow mb-2">Baru di katalog</div><h2 class="mb-0">Koleksi Terbaru</h2></div><a class="btn btn-light-blue" href="{{ route('katalog', ['sort' => 'baru']) }}">Lihat koleksi <i class="bi bi-arrow-right ms-1" aria-hidden="true"></i></a></div>
  <div class="row g-4">@forelse($terbaru as $product)<div class="col-6 col-lg-3">@include('partials.product-card')</div>@empty<div class="col-12"><p class="text-muted-soft mb-0">Koleksi baru sedang disiapkan.</p></div>@endforelse</div>
</div></section>

<section class="section-sm"><div class="container"><div class="style-story">
  <div class="style-story-image"><img src="{{ asset('assets/img/products/gallery/kaos-basic-heavyweight-5.webp') }}" alt="Inspirasi gaya kasual dengan kaos basic Kultura" width="700" height="700" loading="lazy"></div>
  <div class="style-story-copy"><div class="eyebrow mb-2">Pilih dengan lebih yakin</div><h2>Gaya santai. Ukuran yang pas.</h2><p class="text-muted-soft">Mulai dari kaos basic, padukan dengan denim atau chino. Periksa bahan, varian, dan panduan ukuran pada detail produk sebelum memilih.</p><div class="story-checks"><span><i class="bi bi-rulers" aria-hidden="true"></i>Panduan ukuran di detail produk</span><span><i class="bi bi-heart" aria-hidden="true"></i>Simpan pilihan lewat Favorit</span><span><i class="bi bi-chat-dots" aria-hidden="true"></i>Tanyakan ukuran sebelum checkout</span></div><div class="d-flex flex-wrap gap-2 mt-4"><a class="btn btn-primary" href="{{ route('katalog') }}">Cari gaya kamu</a><a class="btn btn-outline-primary" href="https://wa.me/{{ config('toko.whatsapp') }}?text={{ rawurlencode('Halo, boleh bantu saya memilih ukuran produk?') }}" target="_blank" rel="noopener">Konsultasi ukuran</a></div><p class="small text-muted-soft mt-3 mb-0">Foto katalog merupakan ilustrasi demo. Cocokkan detail barang dengan toko.</p></div>
</div></div></section>

<!-- CARA ORDER -->
<section class="section">
  <div class="container">
    <div class="text-center mb-5">
      <div class="eyebrow mb-2">Mudah &amp; cepat</div>
      <h2>Belanja Hanya 4 Langkah</h2>
    </div>
    <div class="row g-4">
      @foreach ([
        ['1', 'Pilih Produk &amp; Ukuran', 'Telusuri katalog, pilih ukuran yang pas, lalu masukkan ke keranjang.'],
        ['2', 'Checkout', 'Isi alamat pengiriman dan pilih metode pembayaran.'],
        ['3', 'Bayar &amp; Konfirmasi', 'Bayar lewat Virtual Account atau QRIS, lalu unggah bukti pembayaran.'],
        ['4', 'Pesanan Dikirim', 'Pesanan kami packing rapi dan kirim sampai ke depan pintu kamu.'],
      ] as [$no, $judul, $teks])
      <div class="col-md-6 col-lg-3">
        <div class="card-soft p-4 h-100">
          <div class="feature-icon mb-3 fw-bold" aria-hidden="true">{{ $no }}</div>
          <h3 class="h5 mb-2">{!! $judul !!}</h3>
          <p class="text-muted-soft small mb-0">{{ $teks }}</p>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

<section class="section-sm"><div class="container"><div class="faq-layout">
  <div><div class="eyebrow mb-2">Sebelum checkout</div><h2 class="mb-3">Ada yang ingin ditanyakan?</h2><p class="text-muted-soft">Jawaban singkat untuk belanja yang lebih tenang. Detail kebijakan tetap mengikuti ketentuan toko.</p><a class="text-link" href="{{ route('informasi', 'syarat') }}">Baca syarat belanja <i class="bi bi-arrow-right ms-1" aria-hidden="true"></i></a></div>
  <div class="faq-list">
    <details open><summary>Bagaimana menentukan ukuran?</summary><p>Periksa panduan ukuran di halaman produk dan bandingkan dengan pakaian yang biasa dipakai. Hubungi toko bila masih ragu.</p></details>
    <details><summary>Bagaimana ongkir dihitung?</summary><p>@if(app(\App\Services\Shipping::class)->distanceMode())Ongkir mengikuti titik tujuan dalam radius {{ config('toko.delivery.max_km') }} km. @if(config('toko.delivery.free_threshold') > 0)Gratis ongkir berlaku mulai subtotal {{ rupiah(config('toko.delivery.free_threshold')) }} dalam area layanan.@endif @else Ongkir mengikuti layanan dan tujuan yang dipilih saat checkout. @endif Tinjau kutipan final sebelum membuat pesanan.</p></details>
    <details><summary>Apakah unggah bukti berarti pembayaran selesai?</summary><p>Belum. Admin memeriksa penerimaan dana terlebih dahulu. Pantau status dan riwayat pada halaman pesanan kamu.</p></details>
    <details><summary>Bagaimana mengajukan tukar ukuran?</summary><p>Hubungi toko dengan kode pesanan. Syarat, waktu dan biaya penukaran mengikuti <a href="{{ route('informasi', 'retur') }}">kebijakan retur dan tukar ukuran</a>.</p></details>
  </div>
</div></div></section>

<!-- CTA -->
<section class="section-sm">
  <div class="container">
    <div class="p-4 p-md-5 rounded-xl text-center text-white" style="background:linear-gradient(135deg,#2b6fe0,#13408f)">
      <h2 class="text-white mb-2">Siap upgrade isi lemari?</h2>
      <p class="opacity-75 mb-4">Temukan pilihan yang cocok, simpan favorit, dan cek ukuran sebelum checkout.</p>
      <a href="{{ route('katalog') }}" class="btn btn-light btn-lg text-primary fw-semibold">Mulai Belanja</a>
    </div>
  </div>
</section>
@endsection