@extends('layouts.app')

@section('styles')
<style>
    .hero-gradient {
        background: linear-gradient(135deg, #ff6b9d 0%, #c44569 50%, #f8b500 100%);
        position: relative;
        overflow: hidden;
    }
    
    .hero-gradient::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="hearts" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><text x="10" y="15" text-anchor="middle" fill="rgba(255,255,255,0.1)" font-size="12">♥</text></pattern></defs><rect width="100" height="100" fill="url(%23hearts)"/></svg>');
        opacity: 0.3;
    }
    
    .category-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        position: relative;
    }
    
    .category-card:hover {
        transform: translateY(-15px) scale(1.05);
        box-shadow: 0 25px 50px rgba(233, 30, 99, 0.3);
    }
    
    .category-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, rgba(255, 107, 157, 0.8), rgba(196, 69, 105, 0.8));
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }
    
    .category-card:hover::before {
        opacity: 1;
    }
    
    .category-content {
        position: relative;
        z-index: 2;
    }
    
    .category-card:hover .category-content h3 {
        color: white;
        transform: translateY(-5px);
    }
    
    .category-card:hover .category-content i {
        color: white;
        transform: scale(1.2);
    }
    
    .featured-product {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    }
    
    .featured-product:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(233, 30, 99, 0.2);
    }
    
    .love-animation {
        animation: loveFloat 3s ease-in-out infinite;
    }
    
    @keyframes loveFloat {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-10px) rotate(5deg); }
    }
    
    .pulse-heart {
        animation: pulseHeart 2s ease-in-out infinite;
    }
    
    @keyframes pulseHeart {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
    
    .stats-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        transition: all 0.3s ease;
    }
    
    .stats-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }
    
    .floating-elements {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
    }
    
    .floating-element {
        position: absolute;
        opacity: 0.6;
        animation: floatUp 8s infinite linear;
    }
    
    @keyframes floatUp {
        0% {
            transform: translateY(100vh) rotate(0deg);
            opacity: 0;
        }
        10% {
            opacity: 0.6;
        }
        90% {
            opacity: 0.6;
        }
        100% {
            transform: translateY(-100px) rotate(360deg);
            opacity: 0;
        }
    }
    
    .cta-button {
        background: linear-gradient(45deg, #ff6b9d, #c44569);
        border: none;
        border-radius: 50px;
        padding: 15px 35px;
        color: white;
        font-weight: 600;
        font-size: 18px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(233, 30, 99, 0.4);
        color: white;
    }
    
    .cta-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }
    
    .cta-button:hover::before {
        left: 100%;
    }
</style>
@endsection

@section('content')
<!-- Floating Elements Background -->
<div class="floating-elements">
    <i class="floating-element fas fa-heart text-pink-400 text-2xl" style="left: 10%; animation-delay: 0s;"></i>
    <i class="floating-element fas fa-gift text-purple-400 text-xl" style="left: 20%; animation-delay: 2s;"></i>
    <i class="floating-element fas fa-heart text-red-400 text-lg" style="left: 30%; animation-delay: 4s;"></i>
    <i class="floating-element fas fa-star text-yellow-400 text-xl" style="left: 40%; animation-delay: 1s;"></i>
    <i class="floating-element fas fa-heart text-pink-500 text-2xl" style="left: 50%; animation-delay: 3s;"></i>
    <i class="floating-element fas fa-gem text-purple-500 text-lg" style="left: 60%; animation-delay: 5s;"></i>
    <i class="floating-element fas fa-heart text-red-500 text-xl" style="left: 70%; animation-delay: 1.5s;"></i>
    <i class="floating-element fas fa-gift text-pink-400 text-lg" style="left: 80%; animation-delay: 3.5s;"></i>
    <i class="floating-element fas fa-heart text-purple-400 text-2xl" style="left: 90%; animation-delay: 2.5s;"></i>
</div>

<div class="container mx-auto px-4">
    <!-- Hero Section -->
    <div class="hero-gradient rounded-3xl shadow-2xl overflow-hidden mb-16 relative">
        <div class="relative z-10 flex flex-col lg:flex-row items-center min-h-[500px]">
            <div class="lg:w-1/2 p-8 lg:p-16 text-center lg:text-left">
                <h1 class="text-4xl lg:text-6xl font-bold text-white mb-6 animate__animated animate__fadeInLeft">
                    Find Perfect Gifts for 
                    <span class="pulse-heart inline-block">❤️</span> 
                    Love
                </h1>
                <p class="text-xl text-white opacity-90 mb-8 animate__animated animate__fadeInLeft animate__delay-1s">
                    Discover unique and thoughtful gifts that will make your loved ones, couples, and friends feel cherished and appreciated.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start animate__animated animate__fadeInUp animate__delay-2s">
                    <a href="{{ route('products') }}" class="cta-button">
                        <i class="fas fa-shopping-bag mr-3"></i>Shop Now
                    </a>
                    <a href="{{ route('love-story.create') }}" class="cta-button" style="background: linear-gradient(45deg, #667eea, #764ba2);">
                        <i class="fas fa-book-heart mr-3"></i>Create Love Story
                    </a>
                </div>
            </div>
            <div class="lg:w-1/2 p-8 flex justify-center items-center">
                <div class="love-animation">
                    <div class="text-8xl lg:text-9xl text-white opacity-80">
                        <i class="fas fa-heart"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Stats Section -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16 animate__animated animate__fadeInUp">
        <div class="stats-card">
            <div class="text-4xl text-pink-500 mb-4">
                <i class="fas fa-heart"></i>
            </div>
            <h3 class="text-2xl font-bold text-gray-800 mb-2">1000+</h3>
            <p class="text-gray-600">Happy Couples</p>
        </div>
        <div class="stats-card">
            <div class="text-4xl text-purple-500 mb-4">
                <i class="fas fa-gift"></i>
            </div>
            <h3 class="text-2xl font-bold text-gray-800 mb-2">500+</h3>
            <p class="text-gray-600">Perfect Gifts</p>
        </div>
        <div class="stats-card">
            <div class="text-4xl text-yellow-500 mb-4">
                <i class="fas fa-star"></i>
            </div>
            <h3 class="text-2xl font-bold text-gray-800 mb-2">5.0</h3>
            <p class="text-gray-600">Customer Rating</p>
        </div>
    </div>
    
    <!-- Categories Section -->
    <div class="mb-16">
        <h2 class="text-4xl font-bold text-center mb-4 text-gray-800 animate__animated animate__fadeInDown">
            <i class="fas fa-heart text-pink-500 mr-3"></i>Shop by Category
        </h2>
        <p class="text-center text-gray-600 mb-12 text-lg animate__animated animate__fadeInDown animate__delay-1s">
            Choose the perfect category for your special someone
        </p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-8">
            @isset($categories)
                @foreach($categories as $category)
                <a href="{{ route('products', ['category' => $category->slug]) }}" class="group animate__animated animate__fadeInUp" style="animation-delay: {{ $loop->index * 0.2 }}s">
                    <div class="category-card h-48">
                        <div class="h-32 overflow-hidden">
                            <img src="{{ $category->image }}" alt="{{ $category->name }}" class="w-full h-full object-cover transition-transform group-hover:scale-110">
                        </div>
                        <div class="category-content p-4 text-center">
                            <div class="text-2xl mb-2 text-pink-500 transition-all duration-300">
                                @if($category->name == 'Love Gifts')
                                    <i class="fas fa-heart"></i>
                                @elseif($category->name == 'Couple Items')
                                    <i class="fas fa-users"></i>
                                @elseif($category->name == 'Friend Gifts')
                                    <i class="fas fa-user-friends"></i>
                                @elseif($category->name == 'Jewelry')
                                    <i class="fas fa-gem"></i>
                                @elseif($category->name == 'Personalized')
                                    <i class="fas fa-edit"></i>
                                @else
                                    <i class="fas fa-gift"></i>
                                @endif
                            </div>
                            <h3 class="font-bold text-gray-800 transition-all duration-300">{{ $category->name }}</h3>
                        </div>
                    </div>
                </a>
                @endforeach
            @else
                <div class="col-span-full text-center py-12">
                    <i class="fas fa-heart-broken text-6xl text-gray-300 mb-4"></i>
                    <p class="text-gray-500 text-lg">No categories found. Please check back later!</p>
                </div>
            @endisset
        </div>
    </div>
    
    <!-- Featured Products -->
    <div class="mb-16">
        <div class="flex justify-between items-center mb-8">
            <h2 class="text-4xl font-bold text-gray-800 animate__animated animate__fadeInLeft">
                <i class="fas fa-star text-yellow-500 mr-3"></i>Featured Products
            </h2>
            <a href="{{ route('products', ['sort' => 'popular']) }}" class="text-pink-600 hover:text-pink-800 font-semibold text-lg transition-colors animate__animated animate__fadeInRight">
                View All <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            @isset($featuredProducts)
                @foreach($featuredProducts as $product)
                <div class="featured-product animate__animated animate__fadeInUp" style="animation-delay: {{ $loop->index * 0.1 }}s">
                    <div class="relative overflow-hidden h-48">
                        <img src="{{ $product->image }}" alt="{{ $product->name }}" class="w-full h-full object-cover transition-transform hover:scale-110">
                        <div class="absolute top-3 right-3 bg-gradient-to-r from-pink-500 to-purple-600 text-white px-3 py-1 rounded-full text-sm font-semibold">
                            PKR {{ number_format($product->sale_price ?? $product->price, 0) }}
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-800 mb-2">{{ $product->name }}</h3>
                        <p class="text-gray-600 mb-4 line-clamp-2">{{ Str::limit($product->description, 80) }}</p>
                        <div class="flex justify-between items-center">
                            <a href="{{ route('products.show', $product->slug) }}" class="text-pink-600 hover:text-pink-800 font-semibold">
                                View Details <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                            <button onclick="addToCart({{ $product->id }})" class="bg-gradient-to-r from-pink-500 to-purple-600 text-white px-4 py-2 rounded-full hover:shadow-lg transition-all">
                                <i class="fas fa-heart mr-1"></i>Add
                            </button>
                        </div>
                    </div>
                </div>
                @endforeach
            @else
                <div class="col-span-full text-center py-12">
                    <i class="fas fa-gift text-6xl text-gray-300 mb-4"></i>
                    <p class="text-gray-500 text-lg">No featured products available. Please check back later!</p>
                </div>
            @endisset
        </div>
    </div>
    
    <!-- Call to Action Section -->
    <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-3xl p-12 text-center text-white mb-16 animate__animated animate__fadeInUp">
        <h2 class="text-4xl font-bold mb-4">
            <i class="fas fa-heart pulse-heart mr-3"></i>Ready to Find the Perfect Gift?
        </h2>
        <p class="text-xl mb-8 opacity-90">
            Browse our amazing collection and make someone special smile today!
        </p>
        <a href="{{ route('products') }}" class="cta-button bg-white text-purple-600 hover:bg-gray-100">
            <i class="fas fa-shopping-bag mr-3"></i>Start Shopping
        </a>
    </div>
</div>

<script>
// Add to cart function
function addToCart(productId) {
    $.ajax({
        url: '{{ route("cart.add") }}',
        method: 'POST',
        data: {
            product_id: productId,
            quantity: 1,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                showNotification('Product added to cart! ❤️', 'success');
                updateCartCount();
            } else {
                showNotification('Error adding product to cart', 'error');
            }
        },
        error: function() {
            showNotification('Error adding product to cart', 'error');
        }
    });
}

// Notification system
function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg text-white font-semibold animate__animated animate__fadeInRight ${
        type === 'success' ? 'bg-green-500' : 'bg-red-500'
    }`;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.classList.remove('animate__fadeInRight');
        notification.classList.add('animate__fadeOutRight');
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 500);
    }, 3000);
}

// Initialize cart count on page load
$(document).ready(function() {
    updateCartCount();
});
</script>
@endsection