@extends('layouts.app')

@section('title', $seo->meta_title ?: 'Natagara Shop — Marketplace Modern')
@section('description', $seo->meta_description ?: 'Marketplace terpercaya untuk produk digital dan fisik')

@if($seo->meta_keywords)
    @push('meta')
        <meta name="keywords" content="{{ $seo->meta_keywords }}">
    @endpush
@endif
@if($seo->og_image)
    @push('meta')
        <meta property="og:image" content="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($seo->og_image) }}">
    @endpush
@endif
@if($seo->location)
    @push('meta')
        <meta name="geo.placename" content="{{ $seo->location }}">
    @endpush
@endif

@section('content')

{{-- HERO --}}
@php
$featuredBanners = $heroBanners->isNotEmpty() ? $heroBanners : collect([
    (object)['title' => 'Belanja Mudah,',    'title2' => 'Semua Ada di Sini',   'subtitle' => 'Ribuan produk digital & fisik dari seller terpercaya',           'badge' => 'Marketplace #1',    'image' => null],
    (object)['title' => 'Produk Digital',    'title2' => 'Tanpa Batas',         'subtitle' => 'Ebook, kursus, software, template & lebih banyak lagi',           'badge' => 'Unggulan Digital',  'image' => null],
    (object)['title' => 'Elektronik',        'title2' => 'Harga Terbaik',       'subtitle' => 'Seller terverifikasi dengan garansi uang kembali',                'badge' => 'Trending Sekarang', 'image' => null],
    (object)['title' => 'Kursus Online,',    'title2' => 'Tingkatkan Skill-mu', 'subtitle' => 'Belajar dari instruktur berpengalaman kapan saja & di mana saja','badge' => 'Belajar & Berkembang','image' => null],
    (object)['title' => 'Gaming & Software,','title2' => 'Lisensi Resmi',       'subtitle' => 'Key asli langsung dikirim ke email kamu setelah bayar',           'badge' => 'Produk Digital',    'image' => null],
]);
$placeholderSeeds = [1080, 490, 773, 230, 658];

$row1Cards = $heroCards->isNotEmpty() ? $heroCards : collect([
    (object)['name' => 'Elektronik',    'image' => null],
    (object)['name' => 'Fashion',       'image' => null],
    (object)['name' => 'Kursus Online', 'image' => null],
    (object)['name' => 'Ebook',         'image' => null],
    (object)['name' => 'Software',      'image' => null],
    (object)['name' => 'Rumah & Dapur', 'image' => null],
    (object)['name' => 'Kesehatan',     'image' => null],
    (object)['name' => 'Template',      'image' => null],
]);
$cardPlaceholderSeeds = [367, 1062, 534, 240, 180, 431, 652, 119];
@endphp

{{--
    PEEK CAROUSEL LAYOUT (like Apple TV):
    - Featured: 1 card centered, tepi kiri+kanan terlihat card sebelumnya/sesudahnya
    - Rows: 3 cards, tepi kiri+kanan terlihat card sebelumnya/sesudahnya
    Semua ini pakai overflow:hidden + translateX; peek muncul karena track mulai di TENGAH set kedua.
--}}
<section
    style="background: #ffffff; padding: 0; height: 100dvh; overflow: hidden;"
    x-data="pakandHero()"
    x-init="init()"
>
    {{-- FEATURED CAROUSEL: 1 besar, peek kiri+kanan --}}
    <div class="overflow-hidden" style="margin-bottom: 10px;">
        <div x-ref="featured" class="flex" style="gap: 0px;">
            @php $bannersList = $featuredBanners->toArray(); @endphp
            @foreach(array_merge($bannersList, $bannersList, $bannersList) as $fi => $banner)
            @php
                $banner = (object) $banner;
                $imgSrc = $banner->image
                    ? Storage::url($banner->image)
                    : 'https://picsum.photos/seed/' . ($placeholderSeeds[$fi % count($placeholderSeeds)]) . '/1200/800';
            @endphp
            <div class="featured-card shrink-0 overflow-hidden relative sm:rounded-2xl" style="width:300px; height:300px; background:#e2e8f0; flex-shrink:0;">
                <img
                    src="{{ $imgSrc }}"
                    alt="{{ $banner->title }}"
                    class="absolute inset-0 w-full h-full object-cover"
                    loading="{{ $fi < 8 ? 'eager' : 'lazy' }}"
                >
                <div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.35) 100%);"></div>
                <div class="absolute inset-0 flex flex-col items-center justify-center text-center px-5 sm:px-10">
                    <h2 class="font-extrabold leading-tight mb-2 sm:mb-4" style="font-size: clamp(1.4rem, 5vw, 3.5rem);">
                        <span class="text-white">{{ $banner->title }}</span><br>
                        <span style="background:linear-gradient(135deg,rgb(45,212,191) 0%,#fff 130%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;">{{ $banner->title2 }}</span>
                    </h2>
                    <p class="text-white/55 leading-relaxed" style="font-size: clamp(0.8rem, 1.5vw, 1rem); max-width: 32ch;">{{ $banner->subtitle }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Dots indicator --}}
    <div class="flex gap-2 justify-center mb-3" aria-hidden="true">
        @foreach($featuredBanners as $di => $banner)
        <div
            class="rounded-full"
            :style="`width:${featuredIndex==={{ $di }} ? '16px' : '5px'}; height:5px; background:${featuredIndex==={{ $di }} ? '#0f172a' : 'rgba(0,0,0,0.2)'}; transition:all 0.3s ease;`"
        ></div>
        @endforeach
    </div>

    {{-- SMALL CARD ROW 1: scrolls right, peek kiri+kanan --}}
    <div class="overflow-hidden select-none" aria-hidden="true">
        <div x-ref="row1" class="flex" style="gap:8px;">
            @php $cardsList = $row1Cards->toArray(); @endphp
            @foreach(array_merge($cardsList, $cardsList, $cardsList) as $ci => $card)
            @php
                $card = (object) $card;
                $cardImgSrc = $card->image
                    ? Storage::url($card->image)
                    : 'https://picsum.photos/seed/' . ($cardPlaceholderSeeds[$ci % count($cardPlaceholderSeeds)]) . '/400/240';
            @endphp
            <div class="small-card shrink-0 rounded-2xl overflow-hidden relative pointer-events-none" style="width:100px; height:132px; background:#e2e8f0; flex-shrink:0;">
                <img src="{{ $cardImgSrc }}" alt="{{ $card->name }}" class="absolute inset-0 w-full h-full object-cover opacity-90" loading="lazy">
                <div class="absolute inset-0" style="background:linear-gradient(to top,rgba(0,0,0,0.55) 0%,transparent 60%);"></div>
                <p class="absolute bottom-0 left-0 right-0 px-2 pb-2 text-white font-semibold text-xs leading-snug">{{ $card->name }}</p>
            </div>
            @endforeach
        </div>
    </div>

</section>

<script>
function pakandHero() {
    return {
        featuredIndex: 0,

        // Featured carousel state
        fPos: 0, fStep: 0, fInitPos: 0,
        fSetCount: {{ $featuredBanners->count() }},

        // Small card row state
        r1Pos: 0,
        rStep: 0, rInitPos: 0,
        rSetCount: {{ $row1Cards->count() }},

        DURATION: 1200,
        PAUSE: 4000,

        init() {
            this.$nextTick(() => {
                const sW = this.$el.offsetWidth;

                // --- Featured carousel ---
                const isMobile = sW < 640;
                const fPeek = isMobile ? 0 : Math.round(sW * 0.09);
                const fGap  = isMobile ? 0 : 12;
                const fCardW = sW - 2 * fPeek - (isMobile ? 0 : 2 * fGap);
                this.fStep = fCardW + fGap;
                this.$refs.featured.style.gap = fGap + 'px';
                // Initial position: center on first card of set2 (card at index fSetCount).
                // For card k centered: card left edge = (sW - fCardW) / 2
                // Card k left in container = k * fStep - fInitPos = (sW - fCardW) / 2
                // fInitPos = k * fStep - (sW - fCardW) / 2
                const fCenterOffset = Math.round((sW - fCardW) / 2);
                this.fInitPos = this.fSetCount * this.fStep - fCenterOffset;
                this.fPos = this.fInitPos;

                // --- Small card row ---
                // Show 3 cards + peek on each side
                const sPeek = isMobile ? Math.round(sW * 0.04) : Math.round(sW * 0.075);
                const sGap  = 8;
                const sCardW = Math.floor((sW - 2 * sPeek - 4 * sGap) / 3);
                const sCardH = Math.floor(sCardW * 0.6);
                this.rStep = sCardW + sGap;
                const sCenterOffset = Math.round((sW - sCardW) / 2);
                this.rInitPos = this.rSetCount * this.rStep - sCenterOffset;
                // Start at last card of set2 so row can scroll left (opposite to featured)
                this.r1Pos = (this.rSetCount * 2 - 1) * this.rStep - sCenterOffset;

                // featured card height fills remaining vertical space
                const sectionH = this.$el.offsetHeight;
                const dotsH = 17 + (isMobile ? 12 : 12); // dot row + margin-bottom
                const fCardH = sectionH - 10 - dotsH - sCardH - (isMobile ? 8 : 10);

                this.$el.querySelectorAll('.featured-card').forEach(el => {
                    el.style.width  = fCardW + 'px';
                    el.style.height = fCardH + 'px';
                });
                this.$el.querySelectorAll('.small-card').forEach(el => {
                    el.style.width  = sCardW + 'px';
                    el.style.height = sCardH + 'px';
                });

                // Set initial positions without animation
                [
                    [this.$refs.featured, this.fPos],
                    [this.$refs.row1,     this.r1Pos],
                ].forEach(([el, pos]) => {
                    el.style.transition = 'none';
                    el.style.transform  = `translateX(-${pos}px)`;
                });

                requestAnimationFrame(() => requestAnimationFrame(() => {
                    const t = `transform ${this.DURATION}ms cubic-bezier(0.4,0,0.2,1)`;
                    this.$refs.featured.style.transition = t;
                    this.$refs.row1.style.transition     = t;
                    setTimeout(() => this.tick(), this.PAUSE);
                }));
            });
        },

        snap(el, pos) {
            el.style.transition = 'none';
            el.style.transform  = `translateX(-${pos}px)`;
            requestAnimationFrame(() => requestAnimationFrame(() => {
                el.style.transition = `transform ${this.DURATION}ms cubic-bezier(0.4,0,0.2,1)`;
            }));
        },

        tick() {
            const delay = this.DURATION + 50;

            // Featured: advance right (next card slides in from right)
            this.fPos += this.fStep;
            this.$refs.featured.style.transform = `translateX(-${this.fPos}px)`;
            this.featuredIndex = (this.featuredIndex + 1) % this.fSetCount;
            if (this.fPos >= this.fInitPos + this.fSetCount * this.fStep) {
                setTimeout(() => {
                    this.fPos -= this.fSetCount * this.fStep;
                    this.snap(this.$refs.featured, this.fPos);
                }, delay);
            }

            // Row 1: scroll left (opposite direction to featured)
            this.r1Pos -= this.rStep;
            this.$refs.row1.style.transform = `translateX(-${this.r1Pos}px)`;
            if (this.r1Pos < this.rInitPos) {
                setTimeout(() => {
                    this.r1Pos += this.rSetCount * this.rStep;
                    this.snap(this.$refs.row1, this.r1Pos);
                }, delay);
            }

            setTimeout(() => this.tick(), this.PAUSE + this.DURATION);
        },
    };
}
</script>

{{-- KATEGORI --}}
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
    <div class="flex items-center justify-between mb-5 sm:mb-8">
        <div>
            <h2 class="text-xl sm:text-2xl font-bold text-gray-900">Jelajahi Kategori</h2>
            <p class="text-gray-500 mt-0.5 text-sm sm:mt-1">Temukan produk sesuai kebutuhan kamu</p>
        </div>
    </div>
    <div class="grid grid-cols-4 sm:grid-cols-4 lg:grid-cols-6 gap-2 sm:gap-3">
        @foreach($categories as $category)
            <a href="{{ route('categories.show', $category) }}" class="group flex flex-col items-center gap-1.5 p-2.5 sm:p-4 bg-white rounded-2xl border border-gray-100 hover:border-teal-200 hover:shadow-md transition-all text-center">
                <div class="w-12 h-12 bg-teal-50 group-hover:bg-teal-100 rounded-xl flex items-center justify-center transition-colors">
                    @if($category->icon)
                        <span class="text-2xl leading-none">{{ $category->icon }}</span>
                    @else
                        <svg class="w-6 h-6 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                        </svg>
                    @endif
                </div>
                <span class="text-xs font-medium text-gray-700 group-hover:text-teal-600 transition leading-tight">{{ $category->name }}</span>
            </a>
        @endforeach
    </div>
</section>

{{-- PRODUK TERLARIS --}}
@if($featuredProducts->isNotEmpty())
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-14">
    <div class="flex items-center justify-between mb-8">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Produk Terlaris</h2>
            <p class="text-gray-500 mt-1">Paling banyak dibeli bulan ini</p>
        </div>
        <a href="{{ route('products.index') }}?sort=terlaris" class="text-sm font-semibold text-teal-600 hover:text-teal-800 flex items-center gap-1 transition">
            Lihat Semua <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        </a>
    </div>
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
        @foreach($featuredProducts as $product)
            <x-product-card :product="$product"/>
        @endforeach
    </div>
</section>
@endif

{{-- PRODUK TERBARU --}}
@if($newArrivals->isNotEmpty())
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-14">
    <div class="flex items-center justify-between mb-8">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Produk Terbaru</h2>
            <p class="text-gray-500 mt-1">Baru ditambahkan hari ini</p>
        </div>
        <a href="{{ route('products.index') }}?sort=terbaru" class="text-sm font-semibold text-teal-600 hover:text-teal-800 flex items-center gap-1 transition">
            Lihat Semua <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        </a>
    </div>
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
        @foreach($newArrivals as $product)
            <x-product-card :product="$product"/>
        @endforeach
    </div>
</section>
@endif

{{-- TOKO UNGGULAN --}}
@if($featuredStores->isNotEmpty())
<section class="bg-white border-t border-b border-gray-100 py-14">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">Toko Unggulan</h2>
                <p class="text-gray-500 mt-1">Seller terbaik dengan rating tertinggi</p>
            </div>
            <a href="{{ route('stores.index') }}" class="text-sm font-semibold text-teal-600 hover:text-teal-800 flex items-center gap-1 transition">
                Lihat Semua <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </a>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
            @foreach($featuredStores as $store)
            <a href="{{ route('stores.show', $store) }}" class="group flex flex-col items-center gap-3 p-4 bg-gray-50 hover:bg-teal-50 rounded-2xl border border-gray-100 hover:border-teal-200 transition text-center">
                <div class="w-14 h-14 rounded-xl overflow-hidden bg-gray-200 flex items-center justify-center shrink-0">
                    @if($store->logo)
                        <img src="{{ Storage::url($store->logo) }}" alt="{{ $store->name }}" class="w-full h-full object-cover">
                    @else
                        <svg class="w-7 h-7 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    @endif
                </div>
                <div>
                    <p class="text-sm font-semibold text-gray-800 group-hover:text-teal-600 transition leading-tight">{{ $store->name }}</p>
                    <div class="flex items-center justify-center gap-1 mt-1">
                        <svg class="w-3 h-3 text-amber-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                        <span class="text-xs text-gray-500">{{ number_format($store->rating, 1) }}</span>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- CTA --}}
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <div class="bg-gray-900 rounded-3xl p-6 sm:p-10 lg:p-14 text-center">
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white mb-3 sm:mb-4">Punya produk untuk dijual?</h2>
        <p class="text-gray-400 text-base sm:text-lg mb-6 sm:mb-8 max-w-xl mx-auto">Bergabung sebagai seller dan mulai hasilkan uang. Jual produk digital atau fisik dengan mudah.</p>
        <a href="{{ auth()->check() ? route('seller.apply') : route('register') }}" class="inline-flex items-center gap-2 px-6 sm:px-8 py-3 sm:py-4 bg-teal-600 text-white font-semibold rounded-xl hover:bg-teal-700 transition text-base sm:text-lg">
            Daftar Jadi Seller
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
        </a>
    </div>
</section>

@endsection