@extends('layouts.app')

@section('title', 'PreOrder - Group Buying Platform')

@section('content')
<style>
.hero-gradient {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
}
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.floating {
    animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.glow-button {
    background: linear-gradient(45deg, #22c55e, #16a34a);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
    transition: all 0.3s ease;
}
.glow-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.6);
}
</style>

<div class="relative overflow-hidden min-h-screen">
    <div class="hero-gradient absolute inset-0"></div>
    <div class="absolute inset-0 opacity-20">
        <div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl"></div>
        <div class="absolute bottom-20 right-10 w-96 h-96 bg-white/20 rounded-full blur-3xl"></div>
        <div class="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-400/20 rounded-full blur-3xl"></div>
    </div>
    
    <div class="relative container-custom py-16 md:py-24">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div class="text-center lg:text-left">
                <div class="inline-flex items-center px-4 py-2 glass-card rounded-full text-white text-sm font-medium mb-6">
                    <i class="fas fa-bolt text-yellow-400 mr-2"></i> Best Prices Guaranteed
                </div>
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
                    Shop Together,<br><span class="text-cyan-300">Save Together</span>
                </h1>
                <p class="text-xl text-white/80 mb-8 max-w-xl mx-auto lg:mx-0">
                    Join group buying campaigns for international products at wholesale prices. The more we order, the more you save.
                </p>
                <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
                    <a href="{{ route('products') }}" class="glow-button px-8 py-4 text-white font-bold rounded-2xl flex items-center">
                        <i class="fas fa-shopping-bag mr-2"></i> Browse Products
                    </a>
                    <a href="{{ route('product-requests') }}" class="px-8 py-4 glass-card text-white font-bold rounded-2xl hover:bg-white/20 transition-all">
                        <i class="fas fa-plus-circle mr-2"></i> Request Product
                    </a>
                </div>
                
                <div class="flex items-center justify-center lg:justify-start space-x-8 mt-10">
                    <div class="text-center">
                        <div class="text-3xl md:text-4xl font-bold text-white">500+</div>
                        <div class="text-white/70 text-sm">Products</div>
                    </div>
                    <div class="w-px h-12 bg-white/30"></div>
                    <div class="text-center">
                        <div class="text-3xl md:text-4xl font-bold text-white">10K+</div>
                        <div class="text-white/70 text-sm">Happy Users</div>
                    </div>
                    <div class="w-px h-12 bg-white/30"></div>
                    <div class="text-center">
                        <div class="text-3xl md:text-4xl font-bold text-white">50K+</div>
                        <div class="text-white/70 text-sm">Orders</div>
                    </div>
                </div>
            </div>
            
            <div class="hidden lg:block floating">
                <div class="relative">
                    <div class="w-80 h-80 mx-auto bg-white/10 rounded-full flex items-center justify-center">
                        <div class="w-64 h-64 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center">
                            <i class="fas fa-shopping-cart text-white text-5xl"></i>
                        </div>
                    </div>
                    <div class="absolute -top-4 -right-4 glass-card px-4 py-2 rounded-xl">
                        <i class="fas fa-gift text-cyan-300 mr-2"></i> Up to 40% Off
                    </div>
                    <div class="absolute -bottom-4 -left-4 glass-card px-4 py-2 rounded-xl">
                        <i class="fas fa-truck text-cyan-300 mr-2"></i> Free Shipping
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <svg class="absolute bottom-0 left-0 right-0" viewBox="0 0 1440 120" fill="none">
        <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 class="section-padding">
    <div class="container-custom">
        <div class="text-center mb-12">
            <span class="inline-block px-4 py-1.5 bg-blue-100 text-blue-600 text-sm font-semibold rounded-full mb-4">How It Works</span>
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Start Shopping in 4 Easy Steps</h2>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-white rounded-3xl p-8 shadow-lg hover:shadow-xl transition-all text-center group relative overflow-hidden">
                <div class="absolute top-0 right-0 w-20 h-20 bg-blue-50 rounded-bl-full -mr-10 -mt-10"></div>
                <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                    <i class="fas fa-search text-white text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl text-gray-900 mb-3">1. Browse Products</h3>
                <p class="text-gray-500">Explore curated selection of international products at wholesale prices.</p>
            </div>
            <div class="bg-white rounded-3xl p-8 shadow-lg hover:shadow-xl transition-all text-center group relative overflow-hidden">
                <div class="absolute top-0 right-0 w-20 h-20 bg-green-50 rounded-bl-full -mr-10 -mt-10"></div>
                <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                    <i class="fas fa-hand-holding-heart text-white text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl text-gray-900 mb-3">2. Pair & Reserve</h3>
                <p class="text-gray-500">Reserve your quantity before the pairing deadline to lock in price.</p>
            </div>
            <div class="bg-white rounded-3xl p-8 shadow-lg hover:shadow-xl transition-all text-center group relative overflow-hidden">
                <div class="absolute top-0 right-0 w-20 h-20 bg-purple-50 rounded-bl-full -mr-10 -mt-10"></div>
                <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                    <i class="fas fa-credit-card text-white text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl text-gray-900 mb-3">3. Make Payment</h3>
                <p class="text-gray-500">Complete payment via bank transfer after order generation.</p>
            </div>
            <div class="bg-white rounded-3xl p-8 shadow-lg hover:shadow-xl transition-all text-center group relative overflow-hidden">
                <div class="absolute top-0 right-0 w-20 h-20 bg-orange-50 rounded-bl-full -mr-10 -mt-10"></div>
                <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                    <i class="fas fa-truck text-white text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl text-gray-900 mb-3">4. Track Delivery</h3>
                <p class="text-gray-500">Track shipment from origin to delivery with real-time updates.</p>
            </div>
        </div>
    </div>
</section>

<section class="section-padding bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 text-white">
    <div class="container-custom">
        <div class="flex items-center justify-between mb-10">
            <div>
                <span class="inline-block px-4 py-1.5 bg-cyan-500/20 text-cyan-300 text-sm font-semibold rounded-full mb-2">Limited Time</span>
                <h2 class="text-3xl md:text-4xl font-bold">Hot Pairings</h2>
            </div>
            <a href="{{ route('products') }}" class="hidden md:flex items-center space-x-2 text-cyan-300 font-semibold hover:text-white transition-all">
                <span>View All</span>
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>

        @if($activeProducts->isEmpty())
            <div class="text-center py-16 bg-white/10 rounded-3xl backdrop-blur">
                <div class="w-20 h-20 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-box-open text-4xl text-white/50"></i>
                </div>
                <p class="text-white/70 text-lg">No active products available at the moment.</p>
            </div>
        @else
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                @foreach($activeProducts as $product)
                <a href="{{ route('products.show', $product) }}" class="bg-white rounded-3xl shadow-xl overflow-hidden card-hover group">
                    <div class="relative h-48 bg-gray-100 overflow-hidden">
                        @if($product->images->first())
                            <img src="{{ asset('storage/' . $product->images->first()->image_path) }}" 
                                 alt="{{ $product->name }}" 
                                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                        @else
                            <div class="w-full h-full flex items-center justify-center">
                                <i class="fas fa-image text-4xl text-gray-400"></i>
                            </div>
                        @endif
                        <div class="absolute top-3 left-3">
                            <span class="px-3 py-1.5 bg-blue-600 text-white text-xs font-semibold rounded-full">
                                {{ $product->shipping_type }}
                            </span>
                        </div>
                        <div class="absolute top-3 right-3">
                            <span class="px-3 py-1.5 bg-red-500 text-white text-xs font-semibold rounded-full flex items-center">
                                <i class="fas fa-clock mr-1.5"></i> <span class="countdown-timer" data-deadline="{{ $product->pairing_deadline }}"></span>
                            </span>
                        </div>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-gray-900 mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors">{{ $product->name }}</h3>
                        <div class="flex items-center justify-between">
                            <div>
                                <span class="text-2xl font-bold text-blue-600">₦{{ number_format($product->markup_price, 0) }}</span>
                            </div>
                            <span class="text-sm text-gray-500"><i class="fas fa-clock mr-1"></i> {{ $product->estimated_days }} days</span>
                        </div>
                    </div>
                </a>
                @endforeach
            </div>
        @endif
        
        <div class="text-center mt-8 md:hidden">
            <a href="{{ route('products') }}" class="inline-flex items-center space-x-2 text-cyan-300 font-semibold">
                <span>View All Products</span>
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>

<section class="section-padding bg-gray-50">
    <div class="container-custom">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white rounded-2xl p-8 shadow-lg text-center">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-shipping-fast text-blue-600 text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl text-gray-900 mb-2">Fast Shipping</h3>
                <p class="text-gray-500">Express AIR shipping available with real-time tracking.</p>
            </div>
            <div class="bg-white rounded-2xl p-8 shadow-lg text-center">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-shield-alt text-green-600 text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl text-gray-900 mb-2">Secure Payments</h3>
                <p class="text-gray-500">Your payments are protected and secure with us.</p>
            </div>
            <div class="bg-white rounded-2xl p-8 shadow-lg text-center">
                <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-headset text-purple-600 text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl text-gray-900 mb-2">24/7 Support</h3>
                <p class="text-gray-500">We're here to help anytime you need.</p>
            </div>
        </div>
    </div>
</section>

<section class="section-padding bg-gradient-to-br from-blue-600 to-blue-800 text-white">
    <div class="container-custom text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Start Saving?</h2>
        <p class="text-xl text-white/80 mb-10">Join thousands of smart shoppers who are already saving on international products.</p>
        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="{{ route('register') }}" class="px-8 py-4 bg-white text-blue-600 font-bold rounded-2xl hover:shadow-2xl hover:scale-105 transition-all duration-300">
                Create Free Account
            </a>
            <a href="{{ route('products') }}" class="px-8 py-4 bg-white/20 text-white font-bold rounded-2xl hover:bg-white/30 transition-all duration-300 border border-white/30">
                Browse Products
            </a>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
function updateCountdowns() {
    document.querySelectorAll('.countdown-timer').forEach(timer => {
        const deadline = new Date(timer.dataset.deadline).getTime();
        const now = new Date().getTime();
        const diff = deadline - now;
        
        if (diff <= 0) {
            timer.textContent = 'Closed';
            return;
        }
        
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        
        if (days > 0) {
            timer.textContent = days + 'd ' + hours + 'h';
        } else if (hours > 0) {
            timer.textContent = hours + 'h ' + minutes + 'm';
        } else {
            timer.textContent = minutes + 'm';
        }
    });
}

updateCountdowns();
setInterval(updateCountdowns, 60000);
</script>
@endpush