@extends('layouts.master')

@section('title', 'DigitalStore - High Quality Digital Products')

@push('styles')
<style>
    .hero-gradient {
        background: radial-gradient(circle at 0% 0%, #4f46e5 0%, #312e81 100%);
    }
    .product-card-premium:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px -12px rgba(79, 70, 229, 0.2);
    }
    .cat-btn:hover {
        background: #4f46e5;
        color: white;
        transform: translateY(-4px);
    }
    .cat-btn:hover .cat-icon-inner {
        background: rgba(255,255,255,0.2);
        color: white;
    }
    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
        100% { transform: translateY(0px); }
    }
    @keyframes float-delayed {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0px); }
    }
    .animate-float { animation: float 6s ease-in-out infinite; }
    .animate-float-delayed { animation: float-delayed 5s ease-in-out infinite; animation-delay: 1s; }
</style>
@endpush

@section('content')

{{-- HERO --}}
<section class="relative bg-slate-900 overflow-hidden" style="min-height: 420px;">
    {{-- Background glow --}}
    <div class="absolute inset-0 z-0">
        <div class="absolute top-0 right-0 w-[600px] h-[600px] bg-brand-500/15 rounded-full blur-[100px] -mr-64 -mt-64"></div>
        <div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-indigo-600/10 rounded-full blur-[80px] -ml-32 -mb-32"></div>
    </div>

    <div class="max-w-7xl mx-auto px-4 lg:px-8 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center py-12 lg:py-16">
            {{-- LEFT: Text --}}
            <div class="space-y-6 lg:space-y-7 text-center lg:text-left">
                <div class="inline-flex items-center gap-2 px-3 py-1.5 bg-white/5 border border-white/10 rounded-full mx-auto lg:mx-0">
                    <span class="flex h-1.5 w-1.5 rounded-full bg-green-400"></span>
                    <span class="text-slate-300 text-[10px] lg:text-xs font-700 uppercase tracking-widest">New products added weekly</span>
                </div>
                <h1 class="text-3xl sm:text-4xl lg:text-5xl font-900 text-white leading-tight">
                    Everything You Need <br class="hidden sm:block">for Your <span class="text-brand-500">Digital Success</span>
                </h1>
                <p class="text-sm lg:text-base text-slate-400 max-w-md mx-auto lg:mx-0 leading-relaxed font-500">
                    High-quality digital products to help you learn, create, and grow.
                </p>
                <div class="flex flex-wrap justify-center lg:justify-start gap-3 sm:gap-4">
                    <a href="{{ route('storefront.products') }}" class="h-12 px-6 sm:px-8 bg-brand-500 hover:bg-brand-600 text-white rounded-xl font-800 flex items-center gap-2 transition-all shadow-lg shadow-brand-500/30 text-sm sm:text-base">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                        Shop Now
                    </a>
                    <a href="#categories" class="h-12 px-6 sm:px-8 bg-white/5 hover:bg-white/10 border border-white/10 text-white rounded-xl font-800 flex items-center gap-2 transition-all text-sm sm:text-base">
                        Browse Categories
                    </a>
                </div>
                {{-- Trust badges --}}
                <div class="grid grid-cols-2 lg:flex lg:flex-wrap gap-4 sm:gap-8 pt-6 border-t border-white/5">
                    <div class="flex items-center gap-3 lg:gap-4">
                        <div class="text-brand-400 shrink-0">
                            <svg class="w-5 h-5 lg:w-6 lg:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        </div>
                        <div class="text-left">
                            <div class="text-white text-xs lg:text-sm font-800">Instant Download</div>
                            <div class="hidden sm:block text-slate-500 text-[10px] lg:text-[11px] font-600">Get your files instantly</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 lg:gap-4">
                        <div class="text-brand-400 shrink-0">
                            <svg class="w-5 h-5 lg:w-6 lg:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                        </div>
                        <div class="text-left">
                            <div class="text-white text-xs lg:text-sm font-800">Secure Payment</div>
                            <div class="hidden sm:block text-slate-500 text-[10px] lg:text-[11px] font-600">100% safe & secure</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 lg:gap-4 col-span-2 justify-center lg:justify-start">
                        <div class="text-brand-400 shrink-0">
                            <svg class="w-5 h-5 lg:w-6 lg:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div class="text-left">
                            <div class="text-white text-xs lg:text-sm font-800">Lifetime Access</div>
                            <div class="hidden sm:block text-slate-500 text-[10px] lg:text-[11px] font-600">Use forever, anytime</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- RIGHT: Device mockup --}}
            <div class="hidden lg:flex items-center justify-center relative">
                {{-- Laptop --}}
                <div class="relative w-full max-w-sm animate-float">
                    <div class="bg-slate-800 rounded-2xl p-2 border border-white/10 shadow-2xl">
                        <div class="bg-slate-700 rounded-t-xl h-5 flex items-center px-3 gap-1.5">
                            <span class="w-2.5 h-2.5 rounded-full bg-red-400/70"></span>
                            <span class="w-2.5 h-2.5 rounded-full bg-yellow-400/70"></span>
                            <span class="w-2.5 h-2.5 rounded-full bg-green-400/70"></span>
                        </div>
                        <img src="https://images.unsplash.com/photo-1558655146-d09347e92766?w=600&q=80" class="w-full rounded-b-xl" alt="Digital Products">
                    </div>
                    {{-- Floating badge --}}
                    <div class="absolute -bottom-5 -left-10 bg-white rounded-2xl px-4 py-3 shadow-2xl flex items-center gap-3 animate-float-delayed">
                        <div class="w-8 h-8 bg-brand-500 rounded-xl flex items-center justify-center">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                        </div>
                        <div>
                            <div class="text-[10px] text-slate-400 uppercase font-700">Purchase</div>
                            <div class="text-slate-900 font-900 text-sm">Completed!</div>
                        </div>
                    </div>
                    {{-- Glow --}}
                    <div class="absolute inset-0 bg-brand-500/10 blur-3xl rounded-full scale-110 -z-10"></div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- CATEGORIES --}}
<section id="categories" class="py-16 bg-white">
    <div class="max-w-5xl mx-auto px-6 lg:px-8">
        <div class="text-center space-y-3 mb-10">
            <h2 class="text-2xl lg:text-3xl font-900 text-slate-900">Browse by Category</h2>
            <p class="text-sm text-slate-500 font-500">Find exactly what you need in our curated categories.</p>
        </div>
    </div>

    <style>
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            animation: marquee 40s linear infinite;
        }
        .pause-on-hover:hover .animate-marquee {
            animation-play-state: paused;
        }
    </style>

    <div class="max-w-full overflow-hidden py-4 pause-on-hover relative">
        {{-- Gradient Overlays --}}
        <div class="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-white via-white/80 to-transparent z-10"></div>
        <div class="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-white via-white/80 to-transparent z-10"></div>

        <div class="flex gap-4 animate-marquee whitespace-nowrap w-fit px-4">
            {{-- Triple the list for a much longer seamless loop --}}
            @foreach($categories->merge($categories)->merge($categories) as $index => $cat)
            @php
                $colors = ['bg-indigo-500', 'bg-rose-500', 'bg-emerald-500', 'bg-blue-500', 'bg-amber-500', 'bg-violet-500'];
                $color = $colors[$index % count($colors)];
            @endphp
            <a href="{{ route('storefront.category', $cat->slug) }}" class="flex items-center gap-4 bg-slate-50/50 rounded-2xl px-6 py-4 transition-all group border border-slate-100 hover:bg-white hover:shadow-xl hover:border-brand-500/20 min-w-[240px]">
                <div class="w-10 h-10 {{ $color }} rounded-xl flex items-center justify-center text-lg text-white shadow-lg shrink-0 group-hover:scale-110 transition-transform">
                    <span class="drop-shadow-sm">{{ $cat->icon ?? '📦' }}</span>
                </div>
                <div class="text-left">
                    <h3 class="text-sm font-800 text-slate-900 group-hover:text-brand-500 transition-colors leading-tight">{{ $cat->name }}</h3>
                    <p class="text-[9px] text-slate-400 font-700 tracking-wider uppercase mt-0.5">Explore</p>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>

@if($featuredProducts->isNotEmpty())
{{-- FEATURED PRODUCTS --}}
<section class="py-24 bg-slate-50">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-center justify-between mb-16 gap-6">
            <div class="text-center md:text-left space-y-2">
                <div class="flex items-center justify-center md:justify-start mb-2">
                    <span class="px-3 py-1 bg-brand-50 text-brand-500 rounded-full text-[10px] font-900 uppercase tracking-widest border border-brand-100 flex items-center gap-1.5">
                        <svg class="w-3 h-3" fill="currentColor" 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>
                        Editor's Choice
                    </span>
                </div>
                <h2 class="text-3xl lg:text-4xl font-900 text-slate-900">Featured Products</h2>
                <p class="text-slate-500 font-500">Hand-picked premium assets for your next project.</p>
            </div>
            <a href="{{ route('storefront.products', ['sort' => 'featured']) }}" class="h-10 px-5 bg-brand-50 text-brand-600 rounded-xl font-900 text-[12px] uppercase tracking-wider flex items-center gap-2 hover:bg-brand-600 hover:text-white hover:shadow-lg hover:shadow-brand-600/25 transition-all border border-brand-100 hover:border-brand-600">
                Featured Assets
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            @foreach($featuredProducts as $fp)
                @include('components.product-card', ['product' => $fp])
            @endforeach
        </div>
    </div>
</section>
@endif

@if($trendingProducts->isNotEmpty())
{{-- TRENDING PRODUCTS --}}
<section class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-center justify-between mb-16 gap-6">
            <div class="text-center md:text-left space-y-2">
                <div class="flex items-center justify-center md:justify-start gap-3 mb-2">
                    <span class="px-3 py-1 bg-rose-50 text-rose-500 rounded-full text-[10px] font-900 uppercase tracking-widest border border-rose-100 flex items-center gap-1.5">
                        <span class="relative flex h-2 w-2">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-2 w-2 bg-rose-500"></span>
                        </span>
                        Hot Trending
                    </span>
                </div>
                <h2 class="text-3xl lg:text-4xl font-900 text-slate-900">Trending Now</h2>
                <p class="text-slate-500 font-500">The most popular digital assets being downloaded right now.</p>
            </div>
            <a href="{{ route('storefront.products', ['sort' => 'trending']) }}" class="h-10 px-5 bg-slate-50 text-slate-600 rounded-xl font-900 text-[12px] uppercase tracking-wider flex items-center gap-2 hover:bg-brand-500 hover:text-white hover:shadow-lg hover:shadow-brand-500/25 transition-all border border-slate-200 hover:border-brand-500">
                Trending Assets
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            @foreach($trendingProducts as $tp)
                @include('components.product-card', ['product' => $tp])
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- WHY US --}}
<section class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-6 lg:px-8 text-center">
        <h2 class="text-3xl lg:text-4xl font-900 text-slate-900 mb-20">Why Creator Choose Us?</h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
            @php
                $reasons = [
                    ['icon' => '☁️', 'title' => 'Instant Download', 'desc' => 'Get access to your digital files immediately after payment.'],
                    ['icon' => '🔒', 'title' => 'Secure Payment', 'desc' => 'We use enterprise-grade encryption for all transactions.'],
                    ['icon' => '⭐', 'title' => 'Curated Quality', 'desc' => 'Every product is manually reviewed by our expert team.'],
                    ['icon' => '🎧', 'title' => 'Expert Support', 'desc' => 'Our support team is always ready to help you succeed.']
                ];
            @endphp
            @foreach($reasons as $r)
            <div class="space-y-6">
                <div class="w-20 h-20 bg-brand-50 rounded-[2rem] flex items-center justify-center text-4xl mx-auto shadow-sm">
                    {{ $r['icon'] }}
                </div>
                <h3 class="text-xl font-900 text-slate-900">{{ $r['title'] }}</h3>
                <p class="text-slate-500 leading-relaxed font-500">{{ $r['desc'] }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- NEWSLETTER --}}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24">
    <div class="bg-brand-500 rounded-[2rem] sm:rounded-[3rem] p-8 sm:p-12 lg:p-20 relative overflow-hidden flex flex-col lg:flex-row items-center gap-8 lg:gap-12 shadow-2xl shadow-brand-500/30">
        <div class="absolute top-0 right-0 w-[400px] h-[400px] bg-white/10 rounded-full -mr-48 -mt-48"></div>
        <div class="absolute bottom-0 left-0 w-[300px] h-[300px] bg-white/5 rounded-full -ml-32 -mb-32"></div>
        
        <div class="relative z-10 flex-1 space-y-4 sm:space-y-6 text-center lg:text-left">
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-900 text-white">Join 10,000+ Creators</h2>
            <p class="text-brand-100 text-base lg:text-xl font-500">Get the latest products and exclusive deals directly in your inbox.</p>
        </div>
        
        <div class="relative z-10 w-full lg:max-w-md">
            <form action="{{ route('newsletter.subscribe') }}" method="POST" class="flex flex-col sm:flex-row gap-3 sm:gap-4 p-2 sm:p-3 bg-white rounded-2xl sm:rounded-3xl shadow-xl">
                @csrf
                <input type="email" name="email" placeholder="Email address" class="flex-grow bg-transparent border-none focus:ring-0 px-4 py-3 sm:py-0 text-slate-900 font-600 text-sm sm:text-base" required>
                <button type="submit" class="bg-brand-500 text-white px-8 py-3 sm:py-4 rounded-xl sm:rounded-2xl font-800 hover:bg-brand-600 transition-all shadow-lg shadow-brand-500/20 text-sm sm:text-base">Subscribe</button>
            </form>
        </div>
    </div>
</div>

@endsection