@extends('store.layouts.app')

@section('title', 'Home')
@section('meta_description', 'Fresh groceries delivered – ' . ($store_name ?? config('app.name')))

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
    {{-- Location & Search Bar --}}
    <div class="mb-6 space-y-3">
        <div class="flex items-center gap-3 flex-wrap">
            <button type="button" class="trust-badge hover:shadow-md transition cursor-pointer group" onclick="alert('Location selector - Coming soon')">
                <i class="fas fa-map-marker-alt text-blinkit-green"></i>
                <span class="text-sm font-semibold text-gray-700 group-hover:text-blinkit-green">Deliver to</span>
                <span class="text-sm font-bold text-blinkit-green">Current Location</span>
                <i class="fas fa-chevron-down text-xs text-gray-400"></i>
            </button>
            <div class="flex-1 max-w-md">
                <form action="{{ route('products.index') }}" method="GET" class="relative">
                    <input type="search" name="search" value="{{ request('search') }}" 
                        placeholder="Search for products, brands, and more..."
                        class="input pl-12 pr-4 py-2.5 text-sm bg-white shadow-sm">
                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 bg-blinkit-green text-white px-4 py-1.5 rounded-lg text-sm font-semibold hover:bg-blinkit-green-dark transition">Search</button>
                </form>
            </div>
        </div>
        
        {{-- Trust Badges --}}
        <div class="flex flex-wrap items-center gap-3 text-xs sm:text-sm">
            <div class="trust-badge">
                <i class="fas fa-leaf text-green-500"></i>
                <span class="font-semibold text-gray-700">100% Fresh</span>
            </div>
            <div class="trust-badge">
                <i class="fas fa-clock text-blue-500"></i>
                <span class="font-semibold text-gray-700">10 Min Delivery</span>
            </div>
            <div class="trust-badge">
                <i class="fas fa-shield-alt text-purple-500"></i>
                <span class="font-semibold text-gray-700">Quality Assured</span>
            </div>
            <div class="trust-badge">
                <i class="fas fa-undo text-orange-500"></i>
                <span class="font-semibold text-gray-700">Easy Returns</span>
            </div>
        </div>
    </div>

    {{-- Hero Slider --}}
    @if($sliders->isNotEmpty())
    <section class="mb-8 rounded-3xl overflow-hidden shadow-xl border-2 border-blinkit-green/20">
        <div id="heroSlider" class="relative bg-gradient-to-r from-blinkit-green to-blinkit-green-dark aspect-[2.5/1] sm:aspect-[3.5/1] max-h-96">
            @foreach($sliders as $index => $slide)
            <div class="absolute inset-0 transition-opacity duration-700 {{ $index === 0 ? 'opacity-100 z-10' : 'opacity-0 z-0' }}" data-slide="{{ $index }}">
                @if($slide->image_path)
                <img src="{{ \App\Helpers\ImageHelper::urlOrPlaceholder($slide->image_path) }}" alt="{{ $slide->title }}" class="w-full h-full object-cover" onerror="this.style.display='none'">
                @else
                <div class="w-full h-full flex items-center justify-center" style="background: {{ $slide->background_color ?? 'linear-gradient(135deg, #00A651 0%, #008F45 100%)' }}">
                    <div class="text-center text-white px-6">
                        <h2 class="text-3xl sm:text-4xl md:text-5xl font-black mb-3 drop-shadow-lg">{{ $slide->title }}</h2>
                        @if($slide->subtitle)<p class="mt-2 text-lg sm:text-xl opacity-95 font-medium">{{ $slide->subtitle }}</p>@endif
                    </div>
                </div>
                @endif
                @if($slide->link_url)
                <a href="{{ $slide->link_url }}" class="absolute inset-0 z-20"></a>
                @endif
            </div>
            @endforeach
            @if($sliders->count() > 1)
            <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2 z-30">
                @foreach($sliders as $i => $s)
                <button type="button" class="w-3 h-3 rounded-full transition-all slider-dot {{ $i === 0 ? 'bg-blinkit-yellow shadow-md' : 'bg-white/60 hover:bg-white' }}" data-index="{{ $i }}" aria-label="Slide {{ $i+1 }}"></button>
                @endforeach
            </div>
            @endif
        </div>
    </section>
    @endif

    {{-- Quick Access Cards --}}
    <section class="mb-8 grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
        <a href="{{ route('products.index', ['search' => 'daily essentials']) }}" class="card p-4 sm:p-5 text-center group hover:border-blinkit-green/50 transition-all hover:shadow-card-hover bg-gradient-to-br from-blue-50 to-blue-100/50">
            <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto rounded-2xl bg-blue-500/20 flex items-center justify-center text-blue-600 group-hover:scale-110 transition-transform mb-3">
                <i class="fas fa-shopping-bag text-2xl sm:text-3xl"></i>
            </div>
            <span class="block font-bold text-gray-800 group-hover:text-blinkit-green transition text-sm">Daily Essentials</span>
        </a>
        <a href="{{ route('products.index', ['search' => 'fresh fruits']) }}" class="card p-4 sm:p-5 text-center group hover:border-blinkit-green/50 transition-all hover:shadow-card-hover bg-gradient-to-br from-green-50 to-green-100/50">
            <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto rounded-2xl bg-green-500/20 flex items-center justify-center text-green-600 group-hover:scale-110 transition-transform mb-3">
                <i class="fas fa-apple-alt text-2xl sm:text-3xl"></i>
            </div>
            <span class="block font-bold text-gray-800 group-hover:text-blinkit-green transition text-sm">Fresh Fruits</span>
        </a>
        <a href="{{ route('products.index', ['search' => 'dairy']) }}" class="card p-4 sm:p-5 text-center group hover:border-blinkit-green/50 transition-all hover:shadow-card-hover bg-gradient-to-br from-yellow-50 to-yellow-100/50">
            <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto rounded-2xl bg-yellow-500/20 flex items-center justify-center text-yellow-600 group-hover:scale-110 transition-transform mb-3">
                <i class="fas fa-cheese text-2xl sm:text-3xl"></i>
            </div>
            <span class="block font-bold text-gray-800 group-hover:text-blinkit-green transition text-sm">Dairy Products</span>
        </a>
        <a href="{{ route('categories.index') }}" class="card p-4 sm:p-5 text-center group hover:border-blinkit-green/50 transition-all hover:shadow-card-hover bg-gradient-to-br from-purple-50 to-purple-100/50">
            <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto rounded-2xl bg-purple-500/20 flex items-center justify-center text-purple-600 group-hover:scale-110 transition-transform mb-3">
                <i class="fas fa-th-large text-2xl sm:text-3xl"></i>
            </div>
            <span class="block font-bold text-gray-800 group-hover:text-blinkit-green transition text-sm">All Categories</span>
        </a>
    </section>

    {{-- Categories --}}
    <section class="mb-10">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl sm:text-3xl font-black text-gray-900">
                <span class="text-blinkit-green">Shop</span> by Category
            </h2>
            <a href="{{ route('categories.index') }}" class="text-blinkit-green font-bold text-sm hover:underline hidden sm:flex items-center gap-1">
                View All <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 gap-3 sm:gap-4">
            @foreach($categories as $cat)
            <a href="{{ route('categories.show', $cat->slug) }}" class="card p-4 sm:p-5 text-center group hover:border-blinkit-green/50 transition-all hover:shadow-card-hover animate-fade-in">
                @if($cat->image)
                <img src="{{ \App\Helpers\ImageHelper::urlOrPlaceholder($cat->image) }}" alt="{{ $cat->name }}" class="w-14 h-14 sm:w-16 sm:h-16 mx-auto rounded-2xl object-cover group-hover:scale-110 transition-transform shadow-sm" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                @else
                <div class="w-14 h-14 sm:w-16 sm:h-16 mx-auto rounded-2xl bg-gradient-to-br from-blinkit-green/10 to-blinkit-yellow/10 flex items-center justify-center text-blinkit-green group-hover:from-blinkit-green/20 group-hover:to-blinkit-yellow/20 transition">
                    <i class="fas fa-leaf text-xl sm:text-2xl"></i>
                </div>
                @endif
                <span class="mt-3 block font-bold text-gray-800 group-hover:text-blinkit-green transition text-xs sm:text-sm">{{ $cat->name }}</span>
            </a>
            @endforeach
        </div>
    </section>

    {{-- Featured --}}
    @if($featured->isNotEmpty())
    <section class="mb-10">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl sm:text-3xl font-black text-gray-900">
                <span class="text-blinkit-yellow">⭐</span> Featured Products
            </h2>
            <a href="{{ route('products.index', ['featured' => 1]) }}" class="text-blinkit-green font-bold text-sm hover:underline flex items-center gap-1">
                View All <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-5">
            @foreach($featured as $product)
            @include('store.components.product-card', ['product' => $product])
            @endforeach
        </div>
    </section>
    @endif

    {{-- Best Deals --}}
    @if($bestDeals->isNotEmpty())
    <section class="mb-10 bg-gradient-to-r from-red-50 via-orange-50 to-yellow-50 rounded-3xl p-6 sm:p-8 border-2 border-red-100/50">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h2 class="text-2xl sm:text-3xl font-black text-gray-900 mb-1 flex items-center gap-2">
                    <span class="text-red-500">🔥</span> Best Deals
                </h2>
                <p class="text-sm text-gray-600 font-medium">Limited time offers - Don't miss out!</p>
            </div>
            <a href="{{ route('products.index') }}" class="text-blinkit-green font-bold text-sm hover:underline hidden sm:flex items-center gap-1">
                View All <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-5">
            @foreach($bestDeals as $product)
            @include('store.components.product-card', ['product' => $product])
            @endforeach
        </div>
    </section>
    @endif

    {{-- Popular --}}
    @if($popular->isNotEmpty())
    <section class="mb-10">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl sm:text-3xl font-black text-gray-900">
                <span class="text-blinkit-green">🔥</span> Popular Now
            </h2>
            <a href="{{ route('products.index') }}" class="text-blinkit-green font-bold text-sm hover:underline flex items-center gap-1">
                View All <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-5">
            @foreach($popular as $product)
            @include('store.components.product-card', ['product' => $product])
            @endforeach
        </div>
    </section>
    @endif

    {{-- App download banner --}}
    <section class="mb-10 card overflow-hidden p-0 bg-gradient-to-r from-blinkit-green via-blinkit-green-dark to-blinkit-green text-white border-0 shadow-xl">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-6 p-6 sm:p-10">
            <div class="text-center sm:text-left">
                <h2 class="text-2xl sm:text-3xl font-black mb-2">📱 Get the App</h2>
                <p class="text-lg opacity-95 font-medium">Order faster, track deliveries, and get exclusive offers!</p>
            </div>
            <div class="flex gap-3">
                <a href="#" class="bg-white/20 hover:bg-white/30 backdrop-blur-sm px-6 py-3 rounded-xl font-bold transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                    <i class="fab fa-apple mr-2"></i>App Store
                </a>
                <a href="#" class="bg-white/20 hover:bg-white/30 backdrop-blur-sm px-6 py-3 rounded-xl font-bold transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                    <i class="fab fa-google-play mr-2"></i>Google Play
                </a>
            </div>
        </div>
    </section>

    {{-- Newsletter --}}
    <section class="mb-10 card p-6 sm:p-8 border-2 border-blinkit-green/30 bg-gradient-to-br from-blinkit-green/5 to-blinkit-yellow/5">
        <div class="max-w-2xl mx-auto text-center">
            <h2 class="text-2xl sm:text-3xl font-black text-gray-900 mb-2">📧 Subscribe to Newsletter</h2>
            <p class="text-gray-600 mb-6">Get exclusive deals, new product alerts, and special offers delivered to your inbox.</p>
            <form action="#" method="POST" class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
                @csrf
                <input type="email" name="email" placeholder="Enter your email" required class="input flex-1 bg-white border-2 border-blinkit-green/30 focus:border-blinkit-green">
                <button type="submit" class="btn-yellow whitespace-nowrap">Subscribe</button>
            </form>
        </div>
    </section>
</div>

@if($sliders->count() > 1)
@push('scripts')
<script>
(function(){
    const slides = document.querySelectorAll('#heroSlider [data-slide]');
    const dots = document.querySelectorAll('.slider-dot');
    if (slides.length < 2) return;
    let current = 0;
    function show(i) {
        current = (i + slides.length) % slides.length;
        slides.forEach((s, k) => { 
            s.classList.toggle('opacity-100', k === current); 
            s.classList.toggle('z-10', k === current); 
            s.classList.toggle('opacity-0', k !== current); 
            s.classList.toggle('z-0', k !== current); 
        });
        dots.forEach((d, k) => {
            d.classList.toggle('bg-blinkit-yellow', k === current);
            d.classList.toggle('bg-white/60', k !== current);
            d.classList.toggle('shadow-md', k === current);
        });
    }
    dots.forEach((d, i) => d.addEventListener('click', () => show(i)));
    setInterval(() => show(current + 1), 5000);
})();
</script>
@endpush
@endif
@endsection