@extends('layouts.app')
@section('title', 'AutoPart Online Store - Home')

@section('content')
<div class="bg-white">
    {{-- Hero + Category Sidebar --}}
    <div class="container mx-auto px-4 py-6">
        <div class="flex flex-col lg:flex-row gap-8 relative">
            {{-- Category Sidebar --}}
            <div class="hidden lg:block w-[280px] shrink-0">
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
                    <div class="bg-brand-dark text-white px-5 py-3.5 flex items-center space-x-2">
                        <i data-lucide="layout-grid" class="w-5 h-5"></i>
                        <span class="font-bold text-sm uppercase tracking-widest">Categories</span>
                    </div>
                    <ul class="divide-y divide-gray-100">
                        @foreach(['Engine Parts', 'Body Parts', 'Interior Accessories', 'Lighting', 'Wheels & Tires', 'Brakes & Rotors', 'Maintenance', 'Electrical'] as $cat)
                        <li>
                            <a href="{{ url('/shop?category=' . urlencode($cat)) }}" class="flex items-center justify-between px-5 py-3 text-sm text-gray-700 hover:text-brand-red hover:bg-red-50/50 transition-all group">
                                <span class="group-hover:translate-x-1 transition-transform">{{ $cat }}</span>
                                <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400 group-hover:text-brand-red"></i>
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            {{-- Hero Banner --}}
            <div class="flex-1 min-w-0">
                <div class="bg-brand-dark overflow-hidden relative min-h-[450px] flex items-center rounded-lg">
                    <div class="absolute inset-0 z-0 opacity-30 bg-cover bg-center mix-blend-overlay" style="background-image: url('{{ asset('images/bernd-dittrich-s21cj56_TuU-unsplash.jpg') }}')"></div>
                    <div class="px-6 py-12 md:py-16 md:px-16 z-10 relative w-full">
                        <div class="max-w-xl">
                            <span class="inline-block bg-brand-red text-white text-[10px] font-bold uppercase tracking-widest px-4 py-1.5 rounded-sm mb-6 shadow-lg shadow-red-500/30">New Generation</span>
                            <h1 class="text-5xl md:text-6xl font-extrabold text-white leading-[1.1] mb-6 drop-shadow-lg">
                                Power Up Your <span class="text-brand-red">Ride</span> Today
                            </h1>
                            <p class="text-gray-300 text-lg mb-8 max-w-md leading-relaxed">
                                Discover premium performance parts and accessories engineered to elevate your driving experience to the next level.
                            </p>
                            <div class="flex flex-col sm:flex-row gap-4">
                                <a href="{{ url('/shop') }}" class="bg-brand-red text-white font-bold text-sm px-8 py-4 uppercase tracking-widest hover:bg-white hover:text-brand-red transition-all duration-300 rounded shadow-lg hover:shadow-xl text-center">
                                    Shop Now
                                </a>
                                <a href="{{ url('/shop') }}" class="bg-transparent border-2 border-white/30 text-white font-bold text-sm px-8 py-4 uppercase tracking-widest hover:bg-white hover:text-brand-dark hover:border-white transition-all duration-300 rounded text-center">
                                    View Catalog
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4">
        {{-- Trust Badges --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16 mt-4">
            @php
                $badges = [
                    ['icon' => 'truck', 'title' => 'Free Shipping', 'sub' => 'On orders over $50'],
                    ['icon' => 'shield-check', 'title' => 'Secure Payment', 'sub' => '100% protected'],
                    ['icon' => 'rotate-ccw', 'title' => 'Easy Returns', 'sub' => '30-day guarantee'],
                    ['icon' => 'headphones', 'title' => '24/7 Support', 'sub' => 'Expert assistance'],
                ];
            @endphp
            @foreach($badges as $badge)
            <div class="flex items-center space-x-4 bg-white p-5 rounded-lg border border-gray-100 hover:shadow-lg hover:border-brand-red/30 transition-all group">
                <div class="w-12 h-12 bg-red-50 rounded-full flex items-center justify-center text-brand-red group-hover:bg-brand-red group-hover:text-white transition-colors shrink-0">
                    <i data-lucide="{{ $badge['icon'] }}" class="w-6 h-6"></i>
                </div>
                <div>
                    <h4 class="font-extrabold text-sm text-brand-dark">{{ $badge['title'] }}</h4>
                    <p class="text-xs text-gray-500">{{ $badge['sub'] }}</p>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Category Cards --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16 mt-8">
            @php
                $catCards = [
                    ['title' => 'Body Parts', 'items' => ['Bumpers', 'Doors', 'Fenders', 'Hoods'], 'img' => '35d5e7c26e97f4caea1ecb1fdcc08f6f.jpg'],
                    ['title' => 'Repair Parts', 'items' => ['Alternators', 'Starters', 'Batteries', 'Belts'], 'img' => '4f3fcc235517c529a7ed215699d5d630.jpg'],
                    ['title' => 'Wheels & Tires', 'items' => ['Alloy Wheels', 'Winter Tires', 'Steel Wheels', 'Hubcaps'], 'img' => 'zoshua-colah-kQzRZjrr6sw-unsplash.jpg'],
                ];
            @endphp
            @foreach($catCards as $card)
            <div class="relative bg-white border border-gray-200 rounded overflow-hidden group hover:shadow-xl transition-all h-[380px]">
                <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/40 to-transparent z-10"></div>
                <img src="{{ asset('images/' . $card['img']) }}" alt="{{ $card['title'] }}" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 group-hover:rotate-1 transition-all duration-700 ease-out">
                <div class="absolute inset-0 z-20 p-8 flex flex-col justify-end">
                    <div class="translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                        <h3 class="text-2xl font-extrabold text-white mb-6 drop-shadow-md">{{ $card['title'] }}</h3>
                        <ul class="space-y-3 mb-6 text-sm font-medium text-white/90">
                            @foreach($card['items'] as $item)
                            <li class="flex items-center space-x-3">
                                <span class="w-1.5 h-1.5 bg-brand-red rounded-full"></span>
                                <a href="{{ url('/shop?category=' . urlencode($item)) }}" class="hover:text-brand-red transition-colors">{{ $item }}</a>
                            </li>
                            @endforeach
                        </ul>
                        <a href="{{ url('/shop') }}" class="inline-flex items-center text-brand-red font-bold text-xs uppercase tracking-widest bg-white/10 px-4 py-2 rounded backdrop-blur-sm hover:bg-brand-red hover:text-white transition-all">
                            View All <i data-lucide="arrow-right" class="w-3.5 h-3.5 ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Trending Products + Sidebar --}}
        <div class="flex flex-col lg:flex-row gap-8 mb-16">
            {{-- Left Sidebar Widgets --}}
            <div class="hidden lg:block w-[280px] shrink-0 space-y-8">
                {{-- Weekend Deal --}}
                <div class="bg-white border text-center border-brand-red p-6 rounded relative overflow-hidden group hover:shadow-xl transition-shadow">
                    <div class="absolute top-0 right-0 bg-brand-red text-white text-[10px] font-bold px-2 py-1 uppercase tracking-widest z-10">Hot Deal</div>
                    <h3 class="font-extrabold text-xl mb-2 text-brand-dark mt-4">Weekend <span class="text-brand-red">Super Sale</span></h3>
                    <p class="text-sm text-gray-500 mb-6 font-medium">Up to 40% off on all items</p>
                    <div class="relative z-10 flex justify-center p-2 bg-white rounded-full mx-6 mb-6 shadow-[0_0_20px_rgba(228,30,38,0.1)]">
                        <img src="{{ asset('images/341fbb0976be66c1c36fd01a5b73ab10.jpg') }}" alt="Deal" class="w-24 h-24 object-contain mix-blend-multiply group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <div class="flex justify-center space-x-1 mb-6" id="countdown-widget"></div>
                    <a href="{{ url('/shop') }}" class="block w-full bg-brand-dark text-white font-bold py-3 text-sm tracking-widest uppercase hover:bg-brand-red transition-colors rounded">Shop Deal Now</a>
                </div>

                {{-- Latest Products Mini --}}
                <div class="bg-white border border-gray-100 p-6 rounded shadow-sm hover:shadow-lg transition-shadow">
                    <h3 class="font-extrabold text-lg uppercase tracking-wider mb-6 pb-2 border-b border-gray-100 relative">
                        Latest Products
                        <span class="absolute -bottom-[1px] left-0 w-12 h-0.5 bg-brand-red"></span>
                    </h3>
                    <div class="space-y-4">
                        @foreach($latestProducts->take(3) as $lp)
                        <div class="flex items-center space-x-4 group cursor-pointer border-b border-gray-50 pb-4 last:border-0 last:pb-0">
                            <div class="w-16 h-16 bg-gray-50 rounded p-1 border border-gray-100 group-hover:border-brand-red transition-colors overflow-hidden">
                                <img src="{{ $lp->image_path ? asset('images/' . $lp->image_path) : 'https://ui-avatars.com/api/?name=' . urlencode($lp->name) . '&size=64' }}" alt="{{ $lp->name }}" class="w-full h-full object-cover mix-blend-multiply group-hover:scale-110 transition-transform">
                            </div>
                            <div class="flex-1">
                                <a href="{{ url('/product/' . $lp->id) }}" class="text-sm font-bold text-gray-800 line-clamp-2 group-hover:text-brand-red transition-colors">{{ $lp->name }}</a>
                                <div class="flex space-x-0.5 text-yellow-400 my-1"><span class="text-[10px]">★★★★★</span></div>
                                <span class="text-brand-dark font-extrabold text-sm">${{ number_format($lp->price, 2) }}</span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{-- Testimonial --}}
                <div class="bg-gray-50 border border-gray-100 p-8 rounded text-center relative mt-12 overflow-visible">
                    <div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-brand-red text-white w-12 h-12 flex items-center justify-center rounded-full text-4xl font-serif leading-none shadow-lg">"</div>
                    <div class="pt-6">
                        <p class="text-sm text-gray-600 italic mb-6 leading-relaxed font-medium">Excellent service and fast delivery! The parts fit perfectly and my car is running like new. Will definitely buy again.</p>
                        <img src="https://ui-avatars.com/api/?name=John+Doe&background=0D8ABC&color=fff" alt="User" class="w-12 h-12 rounded-full border-2 border-white shadow-md ring-2 ring-gray-100 mx-auto mb-3">
                        <h5 class="font-bold text-brand-dark text-sm uppercase tracking-wide">John Doe</h5>
                        <span class="text-[10px] uppercase font-bold text-gray-400 tracking-wider">Verified Buyer</span>
                    </div>
                </div>
            </div>

            {{-- Main Content --}}
            <div class="flex-1 min-w-0">
                {{-- Trending Products --}}
                <div class="mb-16">
                    <div class="flex flex-col md:flex-row justify-between items-center mb-8 border-b border-gray-200 pb-4">
                        <h2 class="text-2xl font-extrabold text-brand-dark uppercase tracking-wider relative">
                            Trending <span class="text-brand-red">Products</span>
                            <span class="absolute -bottom-[17px] left-0 w-24 h-1 bg-brand-red"></span>
                        </h2>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                        @foreach($trendingProducts as $product)
                            @include('partials.product-card', ['product' => $product])
                        @endforeach
                    </div>
                </div>

                {{-- Promo Banners --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-16">
                    <div class="bg-gray-900 rounded overflow-hidden relative min-h-[240px] group cursor-pointer shadow-md hover:shadow-xl transition-all">
                        <img src="{{ asset('images/jack-lucas-smith-l9brPcxp-pM-unsplash.jpg') }}" alt="Promo 1" class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:scale-105 group-hover:opacity-70 transition-transform duration-700">
                        <div class="absolute inset-0 bg-gradient-to-r from-black via-black/80 to-transparent z-10"></div>
                        <div class="relative z-20 p-8 md:p-10 flex flex-col justify-center h-full max-w-[70%]">
                            <span class="inline-block bg-brand-red text-white font-bold text-[10px] uppercase tracking-widest px-3 py-1 rounded-sm mb-4 w-max shadow-lg">Save up to $50</span>
                            <h3 class="text-3xl font-extrabold text-white mb-6 leading-[1.1] drop-shadow-md">High Quality<br><span class="text-brand-red text-2xl">Engine Parts</span></h3>
                            <a href="{{ url('/shop') }}" class="inline-flex items-center text-white text-sm font-bold border-b-2 border-brand-red pb-1 self-start hover:text-brand-red transition-colors group/link mt-2">
                                Shop Collection <i data-lucide="arrow-right" class="w-3.5 h-3.5 ml-2"></i>
                            </a>
                        </div>
                    </div>
                    <div class="bg-brand-red rounded overflow-hidden relative min-h-[240px] group cursor-pointer shadow-md hover:shadow-xl transition-all">
                        <img src="{{ asset('images/manuel-e-sankitts-i2kOA2p0DTo-unsplash.jpg') }}" alt="Promo 2" class="absolute inset-0 w-full h-full object-cover opacity-60 mix-blend-multiply group-hover:scale-105 transition-transform duration-700">
                        <div class="absolute inset-0 bg-gradient-to-l from-gray-900 via-gray-900/40 to-transparent z-10"></div>
                        <div class="relative z-20 p-8 md:p-10 flex flex-col justify-center h-full items-end text-right ml-auto">
                            <span class="text-brand-dark font-extrabold text-[10px] uppercase tracking-widest mb-4 bg-white px-3 py-1 rounded-sm shadow-lg shadow-black/20">Best Seller</span>
                            <h3 class="text-3xl font-extrabold text-white mb-6 leading-[1.1] drop-shadow-md">Custom Wheels<br><span class="text-gray-200 text-2xl">& Tires Kit</span></h3>
                            <a href="{{ url('/shop') }}" class="inline-flex items-center text-white text-sm font-bold border-b-2 border-white pb-1 self-end hover:text-gray-300 hover:border-gray-300 transition-colors group/link mt-2">
                                Discover Now <i data-lucide="arrow-right" class="w-3.5 h-3.5 ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>

                {{-- Special Offers --}}
                @if($specialProduct)
                <div class="mb-16">
                    <h2 class="text-2xl font-extrabold text-brand-dark uppercase tracking-wider relative mb-8 pb-4 border-b border-gray-200">
                        Special <span class="text-brand-red">Offers</span>
                        <span class="absolute -bottom-[2px] left-0 w-16 h-1 bg-brand-red"></span>
                    </h2>
                    @php
                        $spDiscount = ($specialProduct->old_price && $specialProduct->old_price > $specialProduct->price) ? round((1 - $specialProduct->price / $specialProduct->old_price) * 100) : 0;
                        $spImg = $specialProduct->image_path ? asset('images/' . $specialProduct->image_path) : 'https://ui-avatars.com/api/?name=' . urlencode($specialProduct->name);
                    @endphp
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 bg-white border border-gray-100 rounded-lg p-8 shadow-[0_5px_30px_rgba(0,0,0,0.05)]">
                        <div class="flex items-center justify-center bg-gray-50 rounded-lg p-10 relative overflow-hidden group">
                            @if($spDiscount > 0)
                            <div class="absolute top-4 left-4 bg-brand-red text-white text-xs font-bold px-3 py-1 rounded z-10">-{{ $spDiscount }}% discount</div>
                            @endif
                            <img src="{{ $spImg }}" alt="Special" class="max-h-80 object-cover object-center relative z-10 group-hover:scale-105 transition-all duration-500 rounded-lg shadow-2xl mix-blend-multiply w-full">
                        </div>
                        <div class="flex flex-col justify-center py-4 px-2 lg:px-6">
                            <div class="flex space-x-1 text-yellow-500 mb-4"><span class="text-sm">★★★★★</span><span class="text-sm text-gray-400 ml-2 font-medium">(124 Reviews)</span></div>
                            <h3 class="text-3xl font-extrabold text-gray-800 mb-4 hover:text-brand-red transition-colors cursor-pointer leading-tight">{{ $specialProduct->name }}</h3>
                            <p class="text-gray-500 text-sm mb-8 leading-relaxed font-medium">{{ $specialProduct->description ?? 'Upgrade your vehicle with this premium product. Engineered for high performance and longevity.' }}</p>
                            <div class="flex items-end space-x-4 mb-8 bg-gray-50 p-4 rounded-lg self-start border border-gray-100">
                                <span class="text-4xl font-extrabold text-brand-red">${{ number_format($specialProduct->price, 2) }}</span>
                                @if($specialProduct->old_price)
                                <span class="text-xl text-gray-400 line-through pb-1 font-bold">${{ number_format($specialProduct->old_price, 2) }}</span>
                                @endif
                            </div>
                            <p class="font-extrabold text-xs uppercase tracking-widest text-gray-800 mb-4 flex items-center">
                                <span class="w-2 h-2 rounded-full bg-brand-red animate-pulse mr-2"></span>
                                Hurry Up! Offer ends in:
                            </p>
                            <div class="flex space-x-2 sm:space-x-3 mb-8" id="special-countdown"></div>
                            <a href="{{ url('/product/' . $specialProduct->id) }}" class="bg-brand-dark text-white font-bold py-4 px-10 rounded uppercase tracking-widest hover:bg-brand-red transition-colors w-full md:w-max shadow-[0_10px_20px_rgba(26,26,26,0.3)] hover:shadow-none hover:translate-y-1 block text-center">
                                View Offer Details
                            </a>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Countdown Timer
    function createCountdown(elementId, endTime) {
        const el = document.getElementById(elementId);
        if (!el) return;
        function update() {
            const now = Date.now();
            const dist = endTime - now;
            if (dist < 0) { el.innerHTML = '<span class="text-gray-500 font-bold">EXPIRED</span>'; return; }
            const d = Math.floor(dist / 86400000);
            const h = Math.floor((dist % 86400000) / 3600000);
            const m = Math.floor((dist % 3600000) / 60000);
            const s = Math.floor((dist % 60000) / 1000);
            const box = (val, label, color = 'bg-brand-dark') =>
                `<div class="${color} p-2 sm:p-3 rounded-md text-center w-14 sm:w-20 shadow-md">
                    <div class="text-lg sm:text-2xl font-black text-white">${String(val).padStart(2,'0')}</div>
                    <div class="text-[9px] sm:text-[10px] uppercase font-bold text-gray-400 tracking-wider">${label}</div>
                </div>`;
            const sep = '<div class="flex items-center text-xl font-bold text-gray-300">:</div>';
            el.innerHTML = box(d,'Days') + sep + box(h,'Hours') + sep + box(m,'Mins') + sep + box(s,'Secs','bg-brand-red');
        }
        update();
        setInterval(update, 1000);
    }
    const tomorrow = Date.now() + 86400000;
    const dealEnd = Date.now() + (2*86400000 + 15*3600000 + 45*60000);
    createCountdown('countdown-widget', tomorrow);
    createCountdown('special-countdown', dealEnd);
</script>
@endpush
@endsection