<x-front-layout>
@php
    $storeName = \App\Models\Setting::where('key', 'store_name')->value('value') ?? 'DigiShop';
    $storeDesc = \App\Models\Setting::where('key', 'store_description')->value('value') ?? 'Marketplace digital terbaik.';
@endphp
@section('title', $storeName . ' - ' . $storeDesc)

    {{-- ============================================================ --}}
    {{-- HERO SECTION --}}
    {{-- ============================================================ --}}
    @php
        $heroS = \App\Models\Setting::whereIn('key', [
            'hero_bg_color1',
            'hero_bg_color2',
            'hero_bg_angle',
            'hero_eyebrow',
            'hero_headline_1',
            'hero_headline_2',
            'hero_tagline',
            'hero_cta1_label',
            'hero_cta1_url',
            'hero_cta2_label',
            'hero_cta2_url',
            'hero_badge1',
            'hero_badge2',
            'hero_badge3',
        ])->pluck('value', 'key');

        $heroBgColor1 = $heroS['hero_bg_color1'] ?? '#ffffff';
        $heroBgColor2 = $heroS['hero_bg_color2'] ?? '#f3f4f6';
        $heroBgAngle = $heroS['hero_bg_angle'] ?? '135';
        $heroEyebrow = $heroS['hero_eyebrow'] ?? '';
        $heroH1 = $heroS['hero_headline_1'] ?? 'Temukan Produk Digital';
        $heroH2 = $heroS['hero_headline_2'] ?? 'Berkualitas Tinggi';
        $heroTagline = $heroS['hero_tagline'] ?? (\App\Models\Setting::where('key', 'store_description')->value('value') ?? 'Akses instan ke produk digital premium — dari template, e-book, hingga source code siap pakai.');
        $heroCta1Label = $heroS['hero_cta1_label'] ?? 'Lihat Katalog';
        $heroCta1Url = $heroS['hero_cta1_url'] ?? '#catalog';
        $heroCta2Label = $heroS['hero_cta2_label'] ?? '';
        $heroCta2Url = $heroS['hero_cta2_url'] ?? '';
        $heroBadge1 = $heroS['hero_badge1'] ?? 'Transaksi Aman & Terenkripsi';
        $heroBadge2 = $heroS['hero_badge2'] ?? 'Akses Instan Setelah Disetujui';
        $heroBadge3 = $heroS['hero_badge3'] ?? 'Unduh Tanpa Batas';
        $heroStoreName = \App\Models\Setting::where('key', 'store_name')->value('value') ?? 'DigiShop';
        $heroGradient = "linear-gradient({$heroBgAngle}deg, {$heroBgColor1}, {$heroBgColor2})";
    @endphp

    <div class="relative border-b border-gray-100 overflow-hidden" style="background: {{ $heroGradient }}">
        {{-- Dot Grid Pattern --}}
        <div class="absolute inset-0 opacity-[0.035]"
            style="background-image: radial-gradient(#6366f1 1px, transparent 1px); background-size: 24px 24px;"></div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 sm:py-20 text-center">
            {{-- Eyebrow label --}}
            <span
                class="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-indigo-600 bg-indigo-50 border border-indigo-100 px-3 py-1.5 rounded-full mb-6">
                <x-heroicon-s-bolt class="w-3.5 h-3.5" />
                {{ $heroEyebrow ?: ($heroStoreName . ' — Marketplace Digital') }}
            </span>

            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-black text-slate-900 tracking-tight leading-[1.1] mb-5">
                {{ $heroH1 }}<br>
                <span class="text-indigo-600">{{ $heroH2 }}</span>
            </h1>

            <p class="text-base sm:text-lg text-slate-500 max-w-2xl mx-auto mb-10 leading-relaxed">
                {{ $heroTagline }}
            </p>

            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                @if($heroCta1Label)
                    <a href="{{ $heroCta1Url ?: '#catalog' }}"
                        class="inline-flex items-center gap-2 px-7 py-3.5 text-sm font-bold text-white bg-slate-900 rounded-xl hover:bg-slate-700 transition shadow-sm">
                        <x-heroicon-s-squares-2x2 class="w-4 h-4" />
                        {{ $heroCta1Label }}
                    </a>
                @endif
                @if($heroCta2Label)
                    <a href="{{ $heroCta2Url ?: '#' }}"
                        class="inline-flex items-center gap-2 px-7 py-3.5 text-sm font-bold text-slate-700 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition shadow-sm">
                        {{ $heroCta2Label }}
                    </a>
                @endif
            </div>

            {{-- Trust Badges --}}
            @if($heroBadge1 || $heroBadge2 || $heroBadge3)
                <div class="mt-14 flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
                    @if($heroBadge1)
                        <div class="flex items-center gap-2 text-sm text-slate-500 font-medium">
                            <x-heroicon-s-shield-check class="w-4 h-4 text-green-500" /> {{ $heroBadge1 }}
                        </div>
                    @endif
                    @if($heroBadge2)
                        <div class="flex items-center gap-2 text-sm text-slate-500 font-medium">
                            <x-heroicon-s-bolt class="w-4 h-4 text-amber-500" /> {{ $heroBadge2 }}
                        </div>
                    @endif
                    @if($heroBadge3)
                        <div class="flex items-center gap-2 text-sm text-slate-500 font-medium">
                            <x-heroicon-s-arrow-path class="w-4 h-4 text-indigo-500" /> {{ $heroBadge3 }}
                        </div>
                    @endif
                </div>
            @endif
        </div>
    </div>

    {{-- ============================================================ --}}
    {{-- CATALOG SECTION --}}
    {{-- ============================================================ --}}
    <div id="catalog" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 pb-20">

        {{-- Header + Search --}}
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-10">
            <div>
                <h2 class="text-2xl font-extrabold text-slate-900 tracking-tight">Katalog Produk</h2>
                <p class="text-sm text-slate-500 mt-0.5">{{ $products->total() }} produk tersedia</p>
            </div>

            <form action="{{ route('home') }}" method="GET" class="flex gap-2 w-full sm:w-auto max-w-sm">
                @if(request('category'))
                    <input type="hidden" name="category" value="{{ request('category') }}">
                @endif
                <div class="relative flex-1">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <x-heroicon-o-magnifying-glass class="h-4 w-4 text-slate-400" />
                    </div>
                    <input type="text" name="q" value="{{ request('q') }}" placeholder="Cari produk..."
                        class="block w-full pl-9 pr-4 py-2.5 text-sm border border-gray-200 rounded-xl bg-white text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition">
                </div>
                <button type="submit"
                    class="px-4 py-2.5 text-sm font-bold text-white bg-indigo-600 rounded-xl hover:bg-indigo-700 transition shadow-sm">
                    Cari
                </button>
            </form>
        </div>

        <div class="flex flex-col lg:flex-row gap-8">

            {{-- ========== Sidebar Kategori ========== --}}
            @php
                $iconColors = [
                    'text-rose-500', 'text-amber-500', 'text-emerald-500', 'text-sky-500',
                    'text-violet-500', 'text-pink-500', 'text-teal-500', 'text-orange-500',
                    'text-cyan-500', 'text-fuchsia-500',
                ];
            @endphp
            <aside class="w-full lg:w-52 flex-shrink-0">
                <div class="sticky top-24">
                    <p class="text-[11px] font-black uppercase tracking-widest text-slate-400 mb-3 px-1">Kategori</p>
                    <nav class="space-y-0.5">
                        <a href="{{ route('home', request()->only('q')) }}"
                            class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-semibold transition-colors
                            {{ !request('category') ? 'bg-indigo-600 text-white' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900' }}">
                            <x-heroicon-o-squares-2x2 class="w-4 h-4 flex-shrink-0 {{ !request('category') ? '' : 'text-indigo-500' }}" />
                            Semua Produk
                        </a>
                        @foreach($categories as $cat)
                            @php $catColor = $iconColors[$loop->index % count($iconColors)]; @endphp
                            <a href="{{ route('home', ['category' => $cat->slug] + request()->only('q')) }}"
                                class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-semibold transition-colors
                                {{ request('category') == $cat->slug ? 'bg-indigo-600 text-white' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900' }}">
                                <x-dynamic-component :component="'heroicon-o-' . ($cat->icon ?: 'folder')"
                                    class="w-4 h-4 flex-shrink-0 {{ request('category') == $cat->slug ? '' : $catColor }}" />
                                {{ $cat->name }}
                            </a>
                        @endforeach
                    </nav>
                </div>
            </aside>

            {{-- ========== Product Grid ========== --}}
            <div class="flex-1 min-w-0">
                @if($products->count() > 0)
                    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5">
                        @foreach($products as $product)
                            <a href="{{ route('product.show', $product) }}"
                                class="group bg-white border border-gray-150 rounded-2xl overflow-hidden hover:shadow-lg hover:border-gray-200 transition-all duration-300 flex flex-col">

                                {{-- Thumbnail --}}
                                <div class="aspect-[16/10] w-full bg-slate-100 relative overflow-hidden">
                                    @if($product->thumbnail)
                                        <img src="{{ Storage::url($product->thumbnail) }}" alt="{{ $product->name }}"
                                            class="w-full h-full object-contain group-hover:scale-[1.03] transition-transform duration-500 p-2">
                                    @else
                                        <div class="w-full h-full flex items-center justify-center text-slate-300">
                                            <x-heroicon-o-photo class="w-14 h-14" />
                                        </div>
                                    @endif
                                </div>

                                {{-- Content --}}
                                <div class="p-5 flex-1 flex flex-col">
                                    @if($product->category)
                                        <span
                                            class="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest text-indigo-600 mb-2">
                                            <x-dynamic-component :component="'heroicon-s-' . ($product->category->icon ?: 'tag')"
                                                class="w-3 h-3" />
                                            {{ $product->category->name }}
                                        </span>
                                    @endif

                                    <h3
                                        class="text-sm font-bold text-slate-900 group-hover:text-indigo-600 transition-colors leading-snug line-clamp-2 mb-3">
                                        {{ $product->name }}
                                    </h3>

                                    <div class="mt-auto flex items-center justify-between pt-3 border-t border-gray-100">
                                        <p class="text-base font-extrabold text-slate-900">
                                            Rp{{ number_format($product->price, 0, ',', '.') }}
                                        </p>
                                        <span
                                            class="inline-flex items-center gap-1.5 text-xs font-bold text-indigo-600 bg-indigo-50 group-hover:bg-indigo-600 group-hover:text-white px-2.5 py-1.5 rounded-lg transition-colors">
                                            Beli
                                            <x-heroicon-o-arrow-right
                                                class="w-3.5 h-3.5 group-hover:translate-x-0.5 transition-transform" />
                                        </span>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>

                    <div class="mt-10">
                        {{ $products->links() }}
                    </div>
                @else
                    <div
                        class="flex flex-col items-center justify-center py-24 text-center bg-white border border-gray-100 rounded-2xl">
                        <x-heroicon-o-face-frown class="w-14 h-14 text-slate-200 mb-4" />
                        <h3 class="text-base font-bold text-slate-900 mb-1">Produk Tidak Ditemukan</h3>
                        <p class="text-sm text-slate-500 max-w-xs">Tidak ada produk yang sesuai dengan pencarian atau
                            kategori yang Anda pilih.</p>
                        @if(request('q') || request('category'))
                            <a href="{{ route('home') }}"
                                class="mt-6 inline-flex items-center gap-2 text-sm font-bold text-indigo-600 hover:underline">
                                <x-heroicon-o-arrow-path class="w-4 h-4" />
                                Reset Pencarian
                            </a>
                        @endif
                    </div>
                @endif
            </div>

        </div>
    </div>

    {{-- ============================================================ --}}
    {{-- VIDEO SHOWCASE SECTION --}}
    {{-- ============================================================ --}}
    @php
        $videoActive = \App\Models\Setting::where('key', 'video_section_active')->value('value') ?? '0';
        $videoTitle = \App\Models\Setting::where('key', 'video_title')->value('value') ?? 'Tampilan Sekilas Aplikasi';
        $videoDesc = \App\Models\Setting::where('key', 'video_description')->value('value') ?? 'Intip fitur-fitur keren di dalamnya.';
        $videoSource = \App\Models\Setting::where('key', 'video_source_type')->value('value') ?? 'youtube';
        $videoYtId = \App\Models\Setting::where('key', 'video_youtube_id')->value('value') ?? '';
        $videoFile = \App\Models\Setting::where('key', 'video_file')->value('value') ?? '';
    @endphp

    @if($videoActive === '1' && $videos->count() > 0)
    <div x-data="{ openModal: false, srcType: '', videoSrc: '' }" class="py-16 md:py-24 bg-white overflow-hidden border-t border-gray-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10 text-center">
            <h2 class="text-3xl font-extrabold text-slate-900 tracking-tight">Walkthrough Produk</h2>
            <p class="text-slate-500 mt-2 text-lg">Gambaran visual interaktif aplikasi dan template digital kami.</p>
        </div>

        <style>
            @keyframes slideRightToLeft {
                from { transform: translate3d(0, 0, 0); }
                to { transform: translate3d(calc(-384px * 4 - 2rem * 4), 0, 0); }
            }
            .scroller-track {
                display: flex;
                width: max-content;
                animation: slideRightToLeft 30s linear infinite;
                will-change: transform;
            }
            .scroller-track:hover {
                animation-play-state: paused;
            }
            .vid-card {
                width: 384px; /* w-96 */
            }
        </style>

        <!-- Marquee Container -->
        <div class="w-full relative py-4">
            <!-- Left Fade -->
            <div class="absolute left-0 top-0 bottom-0 w-16 md:w-32 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none"></div>
            <!-- Right Fade -->
            <div class="absolute right-0 top-0 bottom-0 w-16 md:w-32 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none"></div>

            <div class="scroller-track gap-8 px-4">
                {{-- Duplicate items for smooth infinite loop illusion --}}
                @php 
                    $displayVideos = $videos->count() < 4 ? $videos->concat($videos)->concat($videos)->concat($videos) : $videos->concat($videos);
                @endphp
                @foreach($displayVideos as $video)
                <div @click="
                        openModal = true; 
                        srcType = '{{ $video->source_type }}'; 
                        videoSrc = '{{ $video->source_type === 'youtube' ? 'https://www.youtube.com/embed/'.$video->youtube_id.'?autoplay=1&rel=0' : Storage::url($video->file_path) }}'; 
                    " 
                    class="vid-card flex-shrink-0 bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.06)] overflow-hidden border border-slate-200/60 flex flex-col group cursor-pointer transition-transform duration-300 hover:-translate-y-2">
                    
                    <!-- macOS Window Header Frame -->
                    <div class="h-10 bg-slate-50 flex items-center px-4 gap-2 border-b border-slate-200/60 z-10 w-full relative">
                        <div class="w-2.5 h-2.5 rounded-full bg-rose-400"></div>
                        <div class="w-2.5 h-2.5 rounded-full bg-amber-400"></div>
                        <div class="w-2.5 h-2.5 rounded-full bg-emerald-400"></div>
                        <div class="absolute inset-0 flex items-center justify-center font-semibold text-[10px] text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity">Klik untuk Play</div>
                    </div>

                    <!-- Video Thumbnail Container -->
                    <div class="relative w-full aspect-video bg-slate-900 border-b border-slate-100 overflow-hidden pointer-events-none">
                        @if($video->source_type === 'youtube' && $video->youtube_id)
                            <img src="https://img.youtube.com/vi/{{ $video->youtube_id }}/maxresdefault.jpg" 
                                onerror="this.src='https://img.youtube.com/vi/{{ $video->youtube_id }}/hqdefault.jpg'" 
                                alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity duration-500" loading="lazy">
                        @elseif($video->source_type === 'upload' && $video->file_path)
                            <video 
                                class="absolute inset-0 w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" 
                                preload="metadata" muted playsinline>
                                <source src="{{ Storage::url($video->file_path) }}#t=1" type="video/mp4">
                            </video>
                        @else
                            <div class="absolute inset-0 flex items-center justify-center text-slate-600 bg-slate-800">
                                <x-heroicon-o-play-circle class="w-12 h-12" />
                            </div>
                        @endif
                        
                        <div class="absolute inset-0 flex items-center justify-center bg-slate-900/20 group-hover:bg-transparent transition-colors duration-500">
                            <div class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white opacity-100 transition-opacity duration-500 shadow-lg"">
                                <x-heroicon-s-play class="w-5 h-5 ml-1" />
                            </div>
                        </div>
                    </div>

                    <!-- Text Info -->
                    <div class="p-5 flex-1 bg-white pointer-events-none">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-[10px] font-bold uppercase tracking-widest text-indigo-600 bg-indigo-50">
                                Walkthrough
                            </span>
                        </div>
                        <h3 class="text-lg font-bold text-slate-900 leading-tight mb-2 group-hover:text-indigo-600 transition-colors">
                            {{ $video->title }}
                        </h3>
                        @if($video->description)
                            <p class="text-sm text-slate-500 leading-relaxed line-clamp-2">
                                {{ $video->description }}
                            </p>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Pop-Up Modal -->
        <div x-show="openModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6" style="display: none;" x-cloak>
            <!-- Backdrop -->
            <div x-show="openModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" 
                class="absolute inset-0 bg-slate-900/80 backdrop-blur-sm" @click="openModal = false; videoSrc = ''"></div>

            <!-- Modal Content -->
            <div x-show="openModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
                class="relative bg-black rounded-2xl shadow-2xl overflow-hidden w-full max-w-5xl aspect-video border border-slate-700/50">
                
                <!-- Close Button -->
                <button @click="openModal = false; videoSrc = ''" class="absolute top-4 right-4 z-20 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white transition-colors backdrop-blur-md">
                    <x-heroicon-o-x-mark class="w-6 h-6" />
                </button>

                <!-- Video Frame Embed -->
                <div class="w-full h-full relative" x-show="openModal">
                    <template x-if="srcType === 'youtube'">
                        <iframe class="w-full h-full" :src="videoSrc" frameborder="0" allow="autoplay; encrypted-media; fullscreen" allowfullscreen></iframe>
                    </template>
                    <template x-if="srcType === 'upload'">
                        <video class="w-full h-full outline-none" controls autoplay :src="videoSrc"></video>
                    </template>
                </div>
            </div>
        </div>

    </div>
    @endif

</x-front-layout>

