@extends('layouts.store')

@section('content')
<section class="relative min-h-[560px] md:h-[760px] overflow-hidden bg-surface" id="hero-slider">
    @forelse($slides as $index => $slide)
        <div class="hero-slide absolute inset-0 flex items-center transition-opacity duration-700 {{ $index === 0 ? 'opacity-100 z-10' : 'opacity-0 z-0' }}">
            <div class="absolute inset-0 w-full h-full z-0">
                <div class="absolute inset-0 bg-gradient-to-r from-surface via-surface/60 to-transparent z-10"></div>
                <img class="w-full h-full object-cover object-right" src="{{ $slide->image_url }}" alt="{{ $slide->title }}"/>
            </div>
            <div class="relative z-20 max-w-screen-2xl mx-auto px-5 md:px-8 w-full py-14">
                <div class="max-w-2xl space-y-6 md:space-y-8">
                    <div class="inline-flex items-center space-x-2 px-4 py-1.5 bg-primary-fixed text-on-primary-fixed-variant rounded-full text-xs md:text-sm font-semibold tracking-wide uppercase">
                        <span>Slide {{ $index + 1 }}</span>
                    </div>
                    <h1 class="text-4xl sm:text-5xl md:text-7xl font-headline font-extrabold text-primary leading-[1.1] tracking-tighter">{{ $slide->title }}</h1>
                    <p class="text-base md:text-xl text-on-surface-variant max-w-lg font-body leading-relaxed">{{ $slide->subtitle }}</p>
                    @if($slide->button_text && $slide->button_url)
                        <a href="{{ $slide->button_url }}" class="inline-flex bg-gradient-to-br from-primary to-primary-container text-on-primary px-8 md:px-10 py-4 md:py-5 rounded-md font-bold text-base md:text-lg shadow-xl shadow-primary/10 hover:scale-[1.02] transition-transform">
                            {{ $slide->button_text }}
                        </a>
                    @endif
                </div>
            </div>
        </div>
    @empty
        <div class="absolute inset-0 flex items-center justify-center text-primary font-bold">Add homepage slides from Admin panel.</div>
    @endforelse
</section>

<section class="bg-surface-container-low py-12 md:py-16">
    <div class="max-w-screen-2xl mx-auto px-5 md:px-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 border-t border-b border-outline-variant/10 py-8 md:py-12">
            <div class="flex items-center space-x-4">
                <div class="bg-primary-fixed/30 p-3 rounded-xl text-primary"><span class="material-symbols-outlined text-3xl">verified</span></div>
                <div><p class="font-headline font-bold text-primary">Authentic Quality</p><p class="text-xs text-on-surface-variant font-medium">Direct Heritage Sourcing</p></div>
            </div>
            <div class="flex items-center space-x-4">
                <div class="bg-primary-fixed/30 p-3 rounded-xl text-primary"><span class="material-symbols-outlined text-3xl">speed</span></div>
                <div><p class="font-headline font-bold text-primary">Express Shipping</p><p class="text-xs text-on-surface-variant font-medium">Pan-India Delivery</p></div>
            </div>
            <div class="flex items-center space-x-4">
                <div class="bg-primary-fixed/30 p-3 rounded-xl text-primary"><span class="material-symbols-outlined text-3xl">support_agent</span></div>
                <div><p class="font-headline font-bold text-primary">24/7 Assistance</p><p class="text-xs text-on-surface-variant font-medium">Khurana Family Promise</p></div>
            </div>
            <div class="flex items-center space-x-4">
                <div class="bg-primary-fixed/30 p-3 rounded-xl text-primary"><span class="material-symbols-outlined text-3xl">star</span></div>
                <div><p class="font-headline font-bold text-primary">4.9/5 Rating</p><p class="text-xs text-on-surface-variant font-medium">10,000+ Verified Reviews</p></div>
            </div>
        </div>
    </div>
</section>

<section class="bg-surface-container-low py-20 md:py-28">
    <div class="max-w-screen-2xl mx-auto px-5 md:px-8">
        <div class="flex justify-between items-end mb-12 md:mb-16">
            <div>
                <h2 class="text-3xl md:text-4xl font-headline font-extrabold text-primary tracking-tight">Best Sellers</h2>
                <p class="text-on-surface-variant font-medium mt-2">The most trusted tools for daily efficiency.</p>
            </div>
            <a href="{{ route('store.products') }}" class="hidden md:inline-flex bg-primary text-on-primary px-8 py-3 rounded-md font-bold">Shop All Products</a>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-14">
            @foreach($featuredProducts as $product)
                <div class="group flex flex-col">
                    <div class="relative aspect-[4/5] bg-surface-container-lowest overflow-hidden">
                        <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="{{ $product->image ?? 'https://picsum.photos/seed/default/800/600' }}" alt="{{ $product->name }}"/>
                        <div class="absolute top-4 right-4 bg-white px-3 py-1 font-headline font-extrabold text-primary text-lg">₹{{ number_format($product->price * 85, 0) }}</div>
                        <div class="absolute bottom-0 left-0 right-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                            <form action="{{ route('store.cart.add', $product) }}" method="POST">
                                @csrf
                                <button class="w-full bg-white/90 backdrop-blur-xl text-primary font-bold py-3 flex items-center justify-center gap-2 hover:bg-primary hover:text-white transition-all">
                                    <span class="material-symbols-outlined text-xl">shopping_basket</span>
                                    Quick Add
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="pt-6">
                        <div class="flex justify-between items-start">
                            <a href="{{ route('store.product', $product->slug) }}" class="text-lg font-headline font-bold text-primary group-hover:underline">{{ $product->name }}</a>
                            <span class="text-tertiary-container text-xs font-bold uppercase tracking-tighter">{{ $product->stock > 0 ? 'In Stock' : 'Sold Out' }}</span>
                        </div>
                        <p class="text-sm text-on-surface-variant mt-2">{{ $product->short_description }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="py-20 md:py-28 px-5 md:px-8 max-w-screen-2xl mx-auto">
    <div class="mb-12">
        <h2 class="text-3xl md:text-4xl font-headline font-extrabold text-primary tracking-tight">Curated Categories</h2>
        <div class="h-1.5 w-24 bg-primary-fixed mt-4"></div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 min-h-[560px]">
        <div class="md:col-span-2 group relative overflow-hidden rounded-xl">
            <img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuApT5wKO72TZcz2a9d4stlsYM9rg9ittOQcQ5ZRBgBURJoit_ONsRCLZ_SzpblPWEx74OjVLNXdVo9xTMyuZKcCZ8_wljBBItCaUSmKJMEdJMcnx21GAHV3nT0qTB3dmrbJ-svInRL5yuj_47rZoY59PkoN3X3bcF7rOgsm6tfHizERIL8TH_vItZdAXCjjKZUpliBUOC3ZgmGnKJPnwYTUqSuvbY-aupVs3bs0Vey3EegvwahQGOLbyP3RNMZlDUJ_S1tRsc35AYQ" alt="Massager category"/>
            <div class="absolute inset-0 bg-gradient-to-t from-primary/80 to-transparent flex flex-col justify-end p-8 md:p-12">
                <p class="text-primary-fixed font-bold uppercase tracking-widest text-xs md:text-sm mb-2">Restorative Wellness</p>
                <h3 class="text-white text-3xl md:text-5xl font-headline font-bold mb-5">Massagers</h3>
                <a class="inline-flex items-center gap-2 bg-white text-primary px-6 py-3 rounded-full font-bold w-fit hover:bg-primary-fixed transition-colors" href="{{ route('store.products') }}">
                    <span>Browse Collection</span>
                    <span class="material-symbols-outlined">chevron_right</span>
                </a>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-xl">
            <img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCAfvTq6SYVJEuHetbCXvGWWV0qBNB04L7yozmRPEhk5cKahK57fIqpDm2-TASuTqMyy4FzhnhG9sRC04Mw2QYNSSnd_yLVSCbeipn-s0oNvxyr9uTrKpBFubdTO2u88SCH2WHkFJiX805u7Z4buUIMgFLB4kvozXjG2DvQ4M5iprwiCLaEsdbFqyWO82li2MFi6Rpb0BQ8OHFWMuRcqLW5vpZQVPKO29eedknCDK1qHK5QUngQLa_I0FIw6VZEJtQdVaci-6z0MT0" alt="Mobile stands category"/>
            <div class="absolute inset-0 bg-gradient-to-t from-tertiary-container/80 to-transparent flex flex-col justify-end p-8 text-white">
                <h3 class="text-3xl font-headline font-bold mb-4">Mobile Stands</h3>
                <p class="text-white/80 mb-6">Precision engineering for workspace utility.</p>
                <a class="inline-flex items-center space-x-2 border border-white/30 backdrop-blur-sm px-6 py-3 rounded-full font-bold w-fit hover:bg-white/10 transition-colors" href="{{ route('store.products') }}">
                    <span>View All</span>
                </a>
            </div>
        </div>
    </div>
</section>

<section class="py-20 md:py-28 bg-surface">
    <div class="max-w-screen-2xl mx-auto px-5 md:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-center">
            <div>
                <h2 class="text-4xl md:text-5xl font-headline font-extrabold text-primary leading-tight">
                    Reliability handed down through <span class="text-primary-container">generations.</span>
                </h2>
                <div class="mt-10 space-y-8">
                    <div class="bg-white p-8 shadow-sm rounded-xl">
                        <div class="flex text-on-tertiary-container mb-4">
                            <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
                            <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
                            <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
                            <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
                            <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">star</span>
                        </div>
                        <p class="text-lg md:text-xl italic text-on-surface font-medium leading-relaxed">"The build quality is unmatched. Functional design that looks premium and lasts for years."</p>
                        <div class="mt-6 flex items-center gap-4">
                            <div class="w-12 h-12 rounded-full bg-primary-fixed"></div>
                            <div>
                                <p class="font-bold text-primary">Arjun Malhotra</p>
                                <p class="text-xs text-on-surface-variant uppercase tracking-widest">Verified Architect</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="relative">
                <div class="aspect-square rounded-xl overflow-hidden shadow-2xl">
                    <img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC__Dl-uWfnIbOSG9qVMI8QAfPUNijseIuRvlLYTPHVquhtzcyfIkoyPVC7SbkMKAU4Va7L1IVJYb15EXFz5CQ6T0AdTU8V-zUep5opYZjYbO2MUGMhzeAVNcS5NshvzI84UVz4H44ZhXfGGzpn3LIfi-jBQ3ntSS7NLkXaGw5xjaMlS0WT9M4VBUt3QHzVEYmcmEMYNLLuavbIh1Tmgjyd25MwFzu9Kw2ngnBBflqx-738098Dbu3aZzCBnBFTSGU2ZSriVm9Nx_8" alt="Khurana Store Heritage"/>
                </div>
                <div class="absolute -bottom-6 -left-4 md:-bottom-10 md:-left-10 bg-primary p-8 md:p-12 text-white rounded-md">
                    <p class="text-5xl md:text-6xl font-headline font-extrabold">25+</p>
                    <p class="uppercase tracking-[0.2em] font-bold text-primary-fixed text-xs md:text-sm">Years of Trust</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-20 md:py-24 bg-surface-container-low">
    <div class="max-w-screen-2xl mx-auto px-5 md:px-8">
        <div class="text-center max-w-3xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-headline font-extrabold text-primary">Frequently Asked Questions</h2>
            <p class="text-on-surface-variant mt-3">Everything you need to know before placing your order.</p>
        </div>
        <div class="mt-10 grid md:grid-cols-2 gap-4">
            <div class="bg-white rounded-xl p-6"><h3 class="font-bold text-primary">How fast is shipping?</h3><p class="text-sm text-on-surface-variant mt-2">Most orders are processed within 24 hours and delivered within 2-5 business days.</p></div>
            <div class="bg-white rounded-xl p-6"><h3 class="font-bold text-primary">Can I return products?</h3><p class="text-sm text-on-surface-variant mt-2">Yes, returns are accepted within 7 days for unused products in original packaging.</p></div>
            <div class="bg-white rounded-xl p-6"><h3 class="font-bold text-primary">How do I track my order?</h3><p class="text-sm text-on-surface-variant mt-2">Use your order ID in the footer track section to check latest shipment updates.</p></div>
            <div class="bg-white rounded-xl p-6"><h3 class="font-bold text-primary">Do products include warranty?</h3><p class="text-sm text-on-surface-variant mt-2">Selected products include manufacturer warranty. Details are listed on product pages.</p></div>
        </div>
    </div>
</section>

<section class="py-20 md:py-24 bg-primary text-white">
    <div class="max-w-screen-xl mx-auto px-5 md:px-8 text-center">
        <h2 class="text-3xl md:text-5xl font-headline font-extrabold">Join 10,000+ Happy Customers</h2>
        <p class="text-emerald-100 mt-4 max-w-2xl mx-auto">Get product drops, premium offers, and utility guides delivered straight to your inbox.</p>
        <form class="mt-8 max-w-xl mx-auto flex flex-col sm:flex-row gap-3">
            <input type="email" placeholder="Enter your email" class="flex-1 px-4 py-3 rounded-md text-slate-900 border-0 focus:ring-2 focus:ring-emerald-200">
            <button class="px-6 py-3 rounded-md bg-emerald-300 text-primary font-bold">Subscribe</button>
        </form>
    </div>
</section>

<footer class="bg-emerald-50 dark:bg-emerald-950 w-full border-t border-emerald-100 dark:border-emerald-900">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-12 px-5 md:px-12 py-16 w-full max-w-screen-2xl mx-auto">
        <div class="space-y-6">
            <div class="text-xl font-bold text-emerald-900 dark:text-emerald-100">Khurana General Store</div>
            <p class="text-emerald-700/80 dark:text-emerald-300/70 text-sm leading-relaxed">Elevating daily life through architectural utility and heritage-driven quality.</p>
        </div>
        <div class="space-y-6">
            <h4 class="font-bold text-emerald-900 dark:text-emerald-50 text-sm uppercase tracking-widest">Shop</h4>
            <ul class="space-y-4">
                <li><a class="text-emerald-700/80 hover:text-emerald-900 transition block text-sm" href="{{ route('store.products') }}">All Products</a></li>
                <li><a class="text-emerald-700/80 hover:text-emerald-900 transition block text-sm" href="{{ route('store.cart') }}">Cart</a></li>
            </ul>
        </div>
        <div class="space-y-6">
            <h4 class="font-bold text-emerald-900 dark:text-emerald-50 text-sm uppercase tracking-widest">Support</h4>
            <ul class="space-y-4">
                <li><a class="text-emerald-700/80 hover:text-emerald-900 transition block text-sm" href="#">Privacy Policy</a></li>
                <li><a class="text-emerald-700/80 hover:text-emerald-900 transition block text-sm" href="#">Shipping Info</a></li>
            </ul>
        </div>
        <div class="space-y-6">
            <h4 class="font-bold text-emerald-900 dark:text-emerald-50 text-sm uppercase tracking-widest">Track Order</h4>
            <form class="flex" method="GET" action="{{ route('store.track') }}">
                <input class="bg-white border-none text-sm w-full focus:ring-1 focus:ring-emerald-900 rounded-l-md" placeholder="Order ID / Tracking No" type="text" name="order_number"/>
                <button class="bg-emerald-900 text-white px-4 rounded-r-md"><span class="material-symbols-outlined">search</span></button>
            </form>
        </div>
    </div>
</footer>
@push('scripts')
<script>
(() => {
  const slides = document.querySelectorAll('#hero-slider .hero-slide');
  if (slides.length <= 1) return;
  let active = 0;
  setInterval(() => {
    slides[active].classList.add('opacity-0');
    slides[active].classList.remove('opacity-100', 'z-10');
    slides[active].classList.add('z-0');
    active = (active + 1) % slides.length;
    slides[active].classList.remove('opacity-0', 'z-0');
    slides[active].classList.add('opacity-100', 'z-10');
  }, 5000);
})();
</script>
@endpush
@endsection