@extends('layouts.app')

@section('title', 'Pehunt | Home')

@section('content')
<div class="space-y-12">
    <section class="grid lg:grid-cols-2 gap-8 items-center bg-white rounded-3xl p-8 shadow-sm">
        <div class="space-y-6">
            <div class="inline-flex items-center gap-2 rounded-full bg-slate-100 px-4 py-2 text-slate-600 text-sm">
                <span class="font-semibold">Flash Offers</span>
                <span class="text-slate-500">Free shipping on orders over ₹1000</span>
            </div>
            <h1 class="text-4xl font-bold text-slate-900">India's fashion marketplace for men, women and accessories.</h1>
            <p class="text-slate-600 max-w-xl">Browse trending collections, flash deals and curated special picks with fast support and secure checkout.</p>
            <div class="flex flex-wrap gap-3">
                <a href="{{ route('category.show', 'women-clothing') }}" class="rounded-full bg-slate-900 px-6 py-3 text-white hover:bg-slate-800">Shop Women</a>
                <a href="{{ route('category.show', 'men-clothing') }}" class="rounded-full border border-slate-300 px-6 py-3 text-slate-700 hover:bg-slate-100">Shop Men</a>
            </div>
        </div>
        <div class="relative rounded-[32px] overflow-hidden bg-slate-100">
            <img src="https://images.unsplash.com/photo-1520962929440-0b4f2f3a9df0?auto=format&fit=crop&w=1000&q=80" alt="Fashion" class="w-full h-full object-cover">
            <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950/80 to-transparent p-6 text-white">
                <p class="text-sm uppercase tracking-[0.3em]">Best style picks</p>
                <p class="mt-2 text-xl font-semibold">New arrivals for your wardrobe</p>
            </div>
        </div>
    </section>

    <section class="grid md:grid-cols-3 gap-4">
        <div class="rounded-3xl bg-white p-6 shadow-sm">
            <h2 class="text-xl font-semibold mb-3">Special Picks</h2>
            <p class="text-slate-600">Curated products for premium daily style.</p>
        </div>
        <div class="rounded-3xl bg-white p-6 shadow-sm">
            <h2 class="text-xl font-semibold mb-3">Flash Deals</h2>
            <p class="text-slate-600">Limited-time savings and deep discounts.</p>
        </div>
        <div class="rounded-3xl bg-white p-6 shadow-sm">
            <h2 class="text-xl font-semibold mb-3">Best Sellers</h2>
            <p class="text-slate-600">Most loved items by our customers.</p>
        </div>
    </section>

    <section class="space-y-6">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-semibold">Special Pick</h2>
                <p class="text-slate-500">Handpicked products with top ratings.</p>
            </div>
            <a href="{{ route('category.show', 'women-clothing') }}" class="text-slate-700 hover:text-slate-900">View all</a>
        </div>

        <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
            @foreach($specialPicks as $product)
            <article class="rounded-3xl bg-white p-5 shadow-sm hover:shadow-md transition">
                <div class="relative overflow-hidden rounded-3xl">
                    <img src="{{ $product->image }}" alt="{{ $product->name }}" class="h-48 w-full object-cover">
                    @if($product->discount_percent)
                        <span class="absolute left-4 top-4 rounded-full bg-slate-900 px-3 py-1 text-xs text-white">-{{ $product->discount_percent }}%</span>
                    @endif
                </div>
                <div class="mt-4 space-y-3">
                    <p class="text-sm text-slate-500">{{ $product->category->name }}</p>
                    <h3 class="text-lg font-semibold"><a href="{{ route('product.show', $product->slug) }}">{{ $product->name }}</a></h3>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-900 font-bold">₹{{ number_format($product->display_price, 2) }}</p>
                            @if($product->sale_price)
                                <p class="text-sm text-slate-500 line-through">₹{{ number_format($product->price, 2) }}</p>
                            @endif
                        </div>
                        <span class="rounded-full bg-emerald-50 px-3 py-1 text-sm text-emerald-700">{{ number_format($product->rating, 1) }} ★</span>
                    </div>
                </div>
            </article>
            @endforeach
        </div>
    </section>

    <section class="space-y-6">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-semibold">Flash Deal</h2>
                <p class="text-slate-500">Hot discounts that are running now.</p>
            </div>
            <div class="rounded-full bg-slate-100 px-4 py-2 text-slate-700">00 Days 00 Hrs 00 Min 00 Sec</div>
        </div>

        <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
            @foreach($flashDeals as $product)
            <article class="rounded-3xl bg-white p-5 shadow-sm hover:shadow-md transition">
                <div class="relative overflow-hidden rounded-3xl">
                    <img src="{{ $product->image }}" alt="{{ $product->name }}" class="h-48 w-full object-cover">
                    <span class="absolute left-4 top-4 rounded-full bg-rose-600 px-3 py-1 text-xs text-white">Flash</span>
                </div>
                <div class="mt-4 space-y-3">
                    <p class="text-sm text-slate-500">{{ $product->category->name }}</p>
                    <h3 class="text-lg font-semibold"><a href="{{ route('product.show', $product->slug) }}">{{ $product->name }}</a></h3>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-900 font-bold">₹{{ number_format($product->display_price, 2) }}</p>
                            @if($product->sale_price)
                                <p class="text-sm text-slate-500 line-through">₹{{ number_format($product->price, 2) }}</p>
                            @endif
                        </div>
                        <span class="rounded-full bg-slate-100 px-3 py-1 text-sm">{{ number_format($product->rating, 1) }} ★</span>
                    </div>
                </div>
            </article>
            @endforeach
        </div>
    </section>

    <section class="space-y-6">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-semibold">Popular Brands & Best Sellers</h2>
                <p class="text-slate-500">Top-rated products to browse now.</p>
            </div>
            <a href="{{ route('category.show', 'men-clothing') }}" class="text-slate-700 hover:text-slate-900">Browse all</a>
        </div>

        <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
            @foreach($bestSellers as $product)
            <article class="rounded-3xl bg-white p-5 shadow-sm hover:shadow-md transition">
                <div class="relative overflow-hidden rounded-3xl">
                    <img src="{{ $product->image }}" alt="{{ $product->name }}" class="h-48 w-full object-cover">
                </div>
                <div class="mt-4 space-y-3">
                    <p class="text-sm text-slate-500">{{ $product->category->name }}</p>
                    <h3 class="text-lg font-semibold"><a href="{{ route('product.show', $product->slug) }}">{{ $product->name }}</a></h3>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-900 font-bold">₹{{ number_format($product->display_price, 2) }}</p>
                            @if($product->sale_price)
                                <p class="text-sm text-slate-500 line-through">₹{{ number_format($product->price, 2) }}</p>
                            @endif
                        </div>
                        <span class="rounded-full bg-slate-100 px-3 py-1 text-sm">{{ number_format($product->rating, 1) }} ★</span>
                    </div>
                </div>
            </article>
            @endforeach
        </div>
    </section>

    <section class="grid gap-6 md:grid-cols-3">
        @foreach($categories as $category)
            <a href="{{ route('category.show', $category->slug) }}" class="group rounded-3xl overflow-hidden bg-white shadow-sm hover:shadow-md transition">
                <img src="{{ $category->image }}" alt="{{ $category->name }}" class="h-48 w-full object-cover transition duration-500 group-hover:scale-105">
                <div class="p-5">
                    <h3 class="text-xl font-semibold">{{ $category->name }}</h3>
                    <p class="mt-2 text-slate-500">{{ $category->description }}</p>
                </div>
            </a>
        @endforeach
    </section>

    <section class="bg-gradient-to-r from-slate-900 to-slate-700 rounded-3xl p-10 text-white grid gap-8 md:grid-cols-3">
        <div>
            <p class="text-sm uppercase tracking-[0.3em] text-slate-300">Trusted Service</p>
            <h2 class="mt-4 text-3xl font-semibold">Secure payments, fast support, and guaranteed returns.</h2>
        </div>
        <div class="space-y-4">
            <div>
                <p class="text-sm text-slate-300">Free Worldwide Shipping</p>
            </div>
            <div>
                <p class="text-sm text-slate-300">Money Back Guarantee</p>
            </div>
        </div>
        <div class="space-y-4">
            <div>
                <p class="text-sm text-slate-300">24/7 Customer Support</p>
            </div>
            <div>
                <p class="text-sm text-slate-300">Secure Online Payments</p>
            </div>
        </div>
    </section>
</div>
@endsection
