@extends('layouts.app')

@section('title', 'Home')

@section('content')
<!-- Hero Banner Slider -->
<section class="relative bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-800 text-white">
    <div class="container mx-auto px-4 py-16 md:py-24">
        <div class="grid md:grid-cols-2 gap-8 items-center">
            <div>
                <span class="inline-block px-3 py-1 bg-yellow-400 text-yellow-900 text-sm font-semibold rounded-full mb-4">B2B Procurement Made Easy</span>
                <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Your One-Stop Shop for Business Supplies</h1>
                <p class="text-xl text-blue-100 mb-8">Connect with verified suppliers, compare prices instantly, and get the best deals on PPE, office supplies, IT equipment, and more.</p>
                <div class="flex flex-wrap gap-4">
                    <a href="{{ route('products.index') }}" class="px-8 py-3 bg-white text-blue-700 font-semibold rounded-lg hover:bg-gray-100 transition shadow-lg">Shop Now</a>
                    <a href="{{ route('deals') }}" class="px-8 py-3 bg-yellow-400 text-yellow-900 font-semibold rounded-lg hover:bg-yellow-300 transition shadow-lg">View Deals</a>
                </div>
            </div>
            <div class="hidden md:block">
                <div class="relative">
                    <div class="absolute -top-4 -left-4 w-72 h-72 bg-blue-400 rounded-full opacity-20 blur-3xl"></div>
                    <div class="relative bg-white/10 backdrop-blur rounded-2xl p-8 border border-white/20">
                        <div class="grid grid-cols-2 gap-4">
                            <div class="bg-white/20 rounded-xl p-4 text-center">
                                <span class="text-3xl">🛡️</span>
                                <p class="mt-2 font-medium">PPE</p>
                            </div>
                            <div class="bg-white/20 rounded-xl p-4 text-center">
                                <span class="text-3xl">✏️</span>
                                <p class="mt-2 font-medium">Stationery</p>
                            </div>
                            <div class="bg-white/20 rounded-xl p-4 text-center">
                                <span class="text-3xl">💻</span>
                                <p class="mt-2 font-medium">IT Equipment</p>
                            </div>
                            <div class="bg-white/20 rounded-xl p-4 text-center">
                                <span class="text-3xl">🪑</span>
                                <p class="mt-2 font-medium">Furniture</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Wave decoration -->
    <div class="absolute bottom-0 left-0 right-0">
        <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 120L60 105C120 90 240 60 360 45C480 30 600 30 720 37.5C840 45 960 60 1080 67.5C1200 75 1320 75 1380 75L1440 75V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="#f9fafb"/>
        </svg>
    </div>
</section>

<!-- Trust Badges -->
<section class="bg-gray-50 py-8">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="flex items-center gap-3 p-4 bg-white rounded-xl shadow-sm">
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-blue-600" 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>
                    <p class="font-semibold text-gray-900">Verified Suppliers</p>
                    <p class="text-sm text-gray-500">100% Trusted</p>
                </div>
            </div>
            <div class="flex items-center gap-3 p-4 bg-white rounded-xl shadow-sm">
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                    </svg>
                </div>
                <div>
                    <p class="font-semibold text-gray-900">Flexible Payment</p>
                    <p class="text-sm text-gray-500">30-Day Terms</p>
                </div>
            </div>
            <div class="flex items-center gap-3 p-4 bg-white rounded-xl shadow-sm">
                <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-orange-600" 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>
                    <p class="font-semibold text-gray-900">Fast Delivery</p>
                    <p class="text-sm text-gray-500">Multiple Options</p>
                </div>
            </div>
            <div class="flex items-center gap-3 p-4 bg-white rounded-xl shadow-sm">
                <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                    </svg>
                </div>
                <div>
                    <p class="font-semibold text-gray-900">AI Recommendations</p>
                    <p class="text-sm text-gray-500">Smart Shopping</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Flash Deals Section -->
@if($dealOfDay)
<section class="py-8 bg-gradient-to-r from-red-500 to-orange-500">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center justify-between gap-6 text-white">
            <div class="flex items-center gap-4">
                <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center animate-pulse">
                    <svg class="w-8 h-8" 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>
                    <p class="text-sm font-medium text-orange-100">DEAL OF THE DAY</p>
                    <h3 class="text-2xl font-bold">{{ $dealOfDay->name }}</h3>
                    <p class="text-orange-100">{{ $dealOfDay->supplier->company_name }}</p>
                </div>
            </div>
            <div class="flex items-center gap-6">
                <div class="text-center">
                    <p class="text-4xl font-bold">R {{ number_format($dealOfDay->price, 2) }}</p>
                    @if($dealOfDay->compare_price)
                        <p class="text-orange-200 line-through">R {{ number_format($dealOfDay->compare_price, 2) }}</p>
                        <span class="inline-block mt-1 px-3 py-1 bg-white text-red-600 text-sm font-bold rounded-full">
                            {{ round((($dealOfDay->compare_price - $dealOfDay->price) / $dealOfDay->compare_price) * 100) }}% OFF
                        </span>
                    @endif
                </div>
                <a href="{{ route('products.show', $dealOfDay->id) }}" class="px-6 py-3 bg-white text-red-600 font-semibold rounded-lg hover:bg-gray-100 transition">
                    Grab Deal
                </a>
            </div>
        </div>
    </div>
</section>
@endif

<!-- Categories Section -->
<section class="py-12 bg-white">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">Shop by Category</h2>
                <p class="text-gray-500">Find everything your business needs</p>
            </div>
            <a href="{{ route('categories') }}" class="text-blue-600 hover:text-blue-700 font-medium flex items-center gap-1">
                View All
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
            @foreach($categories as $category)
                <a href="{{ route('products.index', ['category' => $category->slug]) }}" class="group">
                    <div class="bg-gray-50 rounded-2xl p-4 text-center hover:bg-blue-50 hover:shadow-lg transition-all duration-300 group-hover:-translate-y-1">
                        <div class="w-16 h-16 mx-auto mb-3 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-xl flex items-center justify-center group-hover:from-blue-200 group-hover:to-indigo-200 transition">
                            <span class="text-3xl">
                                @switch($category->icon)
                                    @case('shield') 🛡️ @break
                                    @case('pencil') ✏️ @break
                                    @case('armchair') 🪑 @break
                                    @case('laptop') 💻 @break
                                    @case('spray-can') 🧹 @break
                                    @case('wrench') 🔧 @break
                                    @case('zap') ⚡ @break
                                    @default 📦
                                @endswitch
                            </span>
                        </div>
                        <p class="font-medium text-gray-700 group-hover:text-blue-600 text-sm">{{ $category->name }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>

<!-- Featured Products -->
<section class="py-12 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">Featured Products</h2>
                <p class="text-gray-500">Handpicked for your business</p>
            </div>
            <a href="{{ route('products.index', ['featured' => 1]) }}" class="text-blue-600 hover:text-blue-700 font-medium flex items-center gap-1">
                View All
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
            @foreach($featuredProducts as $product)
                @include('components.product-card', ['product' => $product])
            @endforeach
        </div>
    </div>
</section>

<!-- Trending Products -->
<section class="py-12 bg-white">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between mb-8">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                    <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                    </svg>
                </div>
                <div>
                    <h2 class="text-2xl font-bold text-gray-900">Trending Now</h2>
                    <p class="text-gray-500">Most popular this week</p>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            @foreach($trendingProducts as $product)
                <a href="{{ route('products.show', $product->id) }}" class="group">
                    <div class="bg-gray-50 rounded-xl p-3 hover:shadow-lg transition-all duration-300 group-hover:-translate-y-1">
                        <div class="aspect-square bg-white rounded-lg mb-3 flex items-center justify-center overflow-hidden">
                            @if($product->image_url)
                                <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="w-full h-full object-cover">
                            @else
                                <span class="text-4xl text-gray-300">📦</span>
                            @endif
                        </div>
                        <p class="text-xs text-gray-500 truncate">{{ $product->supplier->company_name }}</p>
                        <p class="font-medium text-sm text-gray-800 line-clamp-2 group-hover:text-blue-600">{{ $product->name }}</p>
                        <p class="text-blue-600 font-bold mt-1">R {{ number_format($product->price, 2) }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>

<!-- Price Comparison Banner -->
<section class="py-12 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center justify-between gap-8">
            <div class="flex items-center gap-6">
                <div class="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center">
                    <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/>
                    </svg>
                </div>
                <div>
                    <h2 class="text-3xl font-bold mb-2">Compare Prices Instantly</h2>
                    <p class="text-indigo-100 text-lg">Find the best deals from multiple suppliers with our AI-powered comparison tool</p>
                </div>
            </div>
            <a href="{{ route('compare') }}" class="px-8 py-4 bg-white text-indigo-600 font-semibold rounded-xl hover:bg-gray-100 transition shadow-lg flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                Start Comparing
            </a>
        </div>
    </div>
</section>

<!-- Recent Products -->
<section class="py-12 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">Just Arrived</h2>
                <p class="text-gray-500">Latest products from our suppliers</p>
            </div>
            <a href="{{ route('products.index', ['sort' => '-created_at']) }}" class="text-blue-600 hover:text-blue-700 font-medium flex items-center gap-1">
                View All
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
            @foreach($recentProducts as $product)
                @include('components.product-card', ['product' => $product])
            @endforeach
        </div>
    </div>
</section>

<!-- Become a Supplier CTA -->
<section class="py-16 bg-gray-900 text-white">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto text-center">
            <span class="inline-block px-4 py-1 bg-blue-600 text-sm font-semibold rounded-full mb-4">FOR SUPPLIERS</span>
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Grow Your Business with ProcureHub</h2>
            <p class="text-xl text-gray-300 mb-8">Join our network of verified suppliers and reach thousands of businesses. Low commission rates, flexible delivery options, and dedicated support.</p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="{{ route('register', ['type' => 'supplier']) }}" class="px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition">
                    Register as Supplier
                </a>
                <a href="#" class="px-8 py-3 border border-gray-600 text-gray-300 font-semibold rounded-lg hover:bg-gray-800 transition">
                    Learn More
                </a>
            </div>
            <div class="grid grid-cols-3 gap-8 mt-12 pt-12 border-t border-gray-800">
                <div>
                    <p class="text-4xl font-bold text-blue-400">500+</p>
                    <p class="text-gray-400">Active Suppliers</p>
                </div>
                <div>
                    <p class="text-4xl font-bold text-blue-400">10K+</p>
                    <p class="text-gray-400">Products Listed</p>
                </div>
                <div>
                    <p class="text-4xl font-bold text-blue-400">5%</p>
                    <p class="text-gray-400">Commission Rate</p>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection