@extends('layouts.app')

@section('title', 'GTGStore - Tempatnya App Premium')
@section('description', 'Aplikasi premium murah dan terpercaya untuk content creator, pelajar, pecinta film, dan profesional.')
@section('canonical', route('storefront.index'))

@section('content')

{{-- ============ HERO / HOME ============ --}}
<section
    id="home"
    class="storefront-hero relative overflow-hidden scroll-mt-16"
    data-storefront-entrance-root
>
    <div class="storefront-hero-decoration pointer-events-none" aria-hidden="true">
        <div class="storefront-hero-orb storefront-hero-orb-one"></div>
        <div class="storefront-hero-orb storefront-hero-orb-two"></div>

        <svg
            class="storefront-leaf storefront-leaf-left"
            viewBox="0 0 180 260"
            fill="none"
        >
            <path
                d="M34 244C45 184 62 128 118 40"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
            />
            <path d="M70 166C34 150 21 122 25 91C57 98 78 119 70 166Z" fill="currentColor"/>
            <path d="M91 119C77 81 89 50 113 27C131 57 125 91 91 119Z" fill="currentColor"/>
            <path d="M53 205C26 197 11 178 8 153C35 154 55 169 53 205Z" fill="currentColor"/>
        </svg>

        <svg
            class="storefront-leaf storefront-leaf-right"
            viewBox="0 0 180 260"
            fill="none"
        >
            <path
                d="M34 244C45 184 62 128 118 40"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
            />
            <path d="M70 166C34 150 21 122 25 91C57 98 78 119 70 166Z" fill="currentColor"/>
            <path d="M91 119C77 81 89 50 113 27C131 57 125 91 91 119Z" fill="currentColor"/>
            <path d="M53 205C26 197 11 178 8 153C35 154 55 169 53 205Z" fill="currentColor"/>
        </svg>
    </div>

    <div class="storefront-hero-inner relative max-w-6xl mx-auto px-5 sm:px-8 pt-10 sm:pt-14 pb-12 sm:pb-16">
        <div class="grid sm:grid-cols-[0.94fr_1.06fr] gap-10 sm:gap-14 items-center">
            <div class="storefront-hero-copy">
                <span class="storefront-eyebrow storefront-entrance-eyebrow">
                    Tempatnya App Premium
                </span>

                <h1 class="storefront-hero-title storefront-hero-title-split storefront-entrance-title">
                    <span>Aplikasi premium,</span>
                    <strong>lebih hemat.</strong>
                </h1>

                <p class="storefront-hero-description storefront-entrance-description">
                    Akun resmi, proses pembelian jelas, dan dukungan admin saat kamu membutuhkannya.
                </p>

                <div class="storefront-hero-actions storefront-entrance-actions mt-6 flex flex-wrap items-center gap-3">
                    <a href="#produk" class="storefront-primary-button storefront-hero-action-button">
                        Lihat Produk

                        <svg
                            class="w-4 h-4"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="m9 18 6-6-6-6"
                            />
                        </svg>
                    </a>

                    <a href="https://wa.me/{{ config('services.whatsapp.admin_number') }}"
                       target="_blank"
                       rel="noopener"
                       class="storefront-secondary-button storefront-hero-action-button">
                        Tanya Admin

                        <svg
                            class="w-4 h-4"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            aria-hidden="true"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M8 10h.01M12 10h.01M16 10h.01M21 12a8 8 0 0 1-8 8H7l-4 2 1.25-4A8 8 0 1 1 21 12Z"
                            />
                        </svg>
                    </a>
                </div>

            </div>

            <div class="relative storefront-hero-visual storefront-entrance-visual">
                <div class="storefront-character-glow"></div>

                <img
                    src="{{ asset('images/hero-illustration.png') }}"
                    alt="Ilustrasi pelanggan menikmati layanan aplikasi premium"
                    class="relative w-full h-auto storefront-character-image"
                    width="500"
                    height="500"
                    decoding="async"
                    fetchpriority="high"
                >
            </div>
        </div>
    </div>
</section>


{{-- ============ PRODUK PILIHAN ============ --}}
@php($homepageFeaturedProducts = $featuredProducts->take(4))
<section id="produk" class="storefront-products storefront-featured-products storefront-home-band">
    <div class="storefront-home-shell">
        <div class="reveal storefront-home-section-header storefront-home-section-header-featured">
            <h2 class="storefront-section-title storefront-section-title-split">
                <span>Produk pilihan</span>
                <strong>untukmu.</strong>
            </h2>
        </div>

        @if ($homepageFeaturedProducts->isNotEmpty())
            <div class="storefront-featured-grid storefront-home-featured-grid reveal">
                @foreach ($homepageFeaturedProducts as $product)
                    @include('storefront.partials.product-card', [
                        'product' => $product,
                        'context' => 'featured',
                        'imagePriority' => $loop->first,
                    ])
                @endforeach
            </div>
        @else
            <div class="storefront-empty-state storefront-featured-empty reveal">
                Belum ada produk aktif saat ini.
            </div>
        @endif

        <div class="storefront-catalog-action reveal">
            <a href="{{ route('storefront.products') }}" class="storefront-catalog-button">
                Lihat Semua Produk
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14m-5-5 5 5-5 5"/>
                </svg>
            </a>
        </div>
    </div>
</section>

{{-- ============ KEUNGGULAN ============ --}}
<section id="keunggulan" class="storefront-benefits storefront-home-band storefront-home-band-muted">
    <div class="storefront-home-shell">
        <div class="reveal storefront-home-section-header">
            <h2 class="storefront-section-title storefront-section-title-split">
                <span>Belanja aman,</span>
                <strong>proses jelas.</strong>
            </h2>
        </div>

        <div class="storefront-home-section-content storefront-benefit-strip">
            @foreach ([
                ['title' => '100% Legal & Aman', 'desc' => 'Metode pembayaran resmi, bukan hasil carding atau hack. Akun aman dari banned.', 'icon' => 'shield'],
                ['title' => 'Instan 1–5 Detik', 'desc' => 'Produk otomatis terkirim langsung begitu pembayaran QRIS terkonfirmasi.', 'icon' => 'bolt'],
                ['title' => 'Garansi Full', 'desc' => 'Akun bermasalah sebelum waktunya? Chat admin, langsung diperbaiki atau diganti.', 'icon' => 'badge'],
                ['title' => 'Harga Bersahabat', 'desc' => 'Solusi digital hemat, cocok untuk pelajar sampai profesional.', 'icon' => 'wallet'],
            ] as $i => $f)
            <article class="reveal storefront-benefit-card" style="transition-delay: {{ $i * 60 }}ms">
                <div class="storefront-benefit-icon">
                    @switch($f['icon'])
                        @case('shield')
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6l7-3Z"/></svg>
                            @break
                        @case('bolt')
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z"/></svg>
                            @break
                        @case('badge')
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="m9 12 2 2 4-4M12 3l2.5 1.5L17.5 4l1 3 2.5 1.5L20 11l1 3-2.5 1.5-1 3-3-.5L12 20l-2.5-2-3 .5-1-3-2.5-1.5L4 11l-1-2.5L5.5 7l1-3 3 .5L12 3Z"/></svg>
                            @break
                        @default
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v2M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Zm12 5h4"/></svg>
                    @endswitch
                </div>
                <div>
                    <h3 class="storefront-benefit-title">{{ $f['title'] }}</h3>
                    <p class="storefront-benefit-description">{{ $f['desc'] }}</p>
                </div>
            </article>
            @endforeach
        </div>
    </div>
</section>

{{-- ============ TESTIMONI ============ --}}
<section id="testimoni" class="storefront-testimonials storefront-home-band">
    <div class="storefront-home-shell">
        <div class="reveal storefront-home-section-header">
            <h2 class="storefront-section-title storefront-section-title-split">
                <span>Cerita pelanggan,</span>
                <strong>bukti layanan.</strong>
            </h2>
        </div>

        @php($visibleTestimonials = array_slice($testimonials, 0, 3))
        <div class="storefront-home-section-content storefront-testimonial-layout">
            @foreach ($visibleTestimonials as $i => $t)
            <article class="reveal storefront-testimonial-card" style="transition-delay: {{ $i * 60 }}ms">
                <blockquote class="storefront-testimonial-quote">&ldquo;{{ $t['quote'] }}&rdquo;</blockquote>
                <footer class="storefront-testimonial-person">
                    <div class="storefront-testimonial-avatar" aria-hidden="true">{{ $t['initial'] }}</div>
                    <div>
                        <p class="storefront-testimonial-name">{{ $t['name'] }}</p>
                        <p class="storefront-testimonial-role">{{ $t['role'] }}</p>
                    </div>
                </footer>
            </article>
            @endforeach
        </div>
    </div>
</section>

{{-- ============ FAQ ============ --}}
<section id="faq" class="storefront-faq storefront-home-band storefront-home-band-faq">
    <div class="storefront-home-shell storefront-faq-layout">
        <div class="reveal storefront-faq-copy">
            <h2 class="storefront-section-title storefront-section-title-split">
                <span>Pertanyaan penting,</span>
                <strong>jawaban jelas.</strong>
            </h2>
        </div>

        <div class="storefront-faq-list">
            @foreach ($faqs as $faq)
            <details class="faq-item reveal storefront-faq-item">
                <summary>
                    <span class="storefront-faq-question">{{ $faq['q'] }}</span>
                    <svg class="faq-chevron storefront-faq-chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6"/>
                    </svg>
                </summary>
                <p class="storefront-faq-answer">{{ $faq['a'] }}</p>
            </details>
            @endforeach
        </div>

        <div class="reveal storefront-faq-cta">
            <p>Masih ada yang ingin ditanyakan?</p>

            <a href="https://wa.me/{{ config('services.whatsapp.admin_number') }}"
               target="_blank"
               rel="noopener"
               class="storefront-primary-button">
                Chat Admin via WhatsApp
            </a>
        </div>
    </div>
</section>

@endsection