@extends('layouts.app')

@section('title', 'Home')

@section('content')
<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-[#f5f0e8] via-[#e8ddd0] to-[#d4c4b0] text-[#453a2f] py-12 md:py-16 lg:py-24 overflow-hidden">
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-10 left-10 w-32 h-32 bg-[#9d8566] rounded-full blur-3xl"></div>
        <div class="absolute bottom-10 right-10 w-40 h-40 bg-[#c97d60] rounded-full blur-3xl"></div>
    </div>
    <div class="container mx-auto px-4 text-center relative z-10">
        <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-serif font-bold mb-4 md:mb-6 text-[#524438]">Welcome to Sweet Delights</h1>
        <p class="text-base sm:text-lg md:text-xl lg:text-2xl mb-6 md:mb-10 text-[#645443] font-light px-2">Freshly baked artisanal treats made with love, every single day</p>
        <a href="{{ route('products.index') }}" class="bg-[#7d6a52] text-white px-6 md:px-8 lg:px-10 py-3 md:py-4 rounded-full font-semibold hover:bg-[#9d8566] transition-all transform hover:scale-105 shadow-lg hover:shadow-xl inline-block text-sm md:text-base">
            Explore Our Bakery
        </a>
    </div>
</section>

<!-- Sale Banner -->
@php
    $saleCount = \App\Models\Product::where('availability', true)
        ->whereNotNull('sale_price')
        ->whereColumn('sale_price', '<', 'price')
        ->count();
@endphp
@if($saleCount > 0)
<section class="py-8 md:py-12 bg-gradient-to-r from-[#c97d60] to-[#b86a4f] text-white">
    <div class="container mx-auto px-4 text-center">
        <div class="max-w-3xl mx-auto">
            <h2 class="text-4xl md:text-5xl font-serif font-bold mb-4 animate-pulse">🎉 Special Sale! 🎉</h2>
            <p class="text-xl mb-6 opacity-95">Don't miss out on {{ $saleCount }} amazing deals!</p>
            <a href="{{ route('products.sale') }}" class="bg-white text-[#c97d60] px-6 md:px-8 py-3 md:py-4 rounded-full font-semibold hover:bg-[#f5f0e8] transition-all shadow-lg hover:shadow-xl transform hover:scale-105 inline-block text-sm md:text-base">
                Shop Sale Items →
            </a>
        </div>
    </div>
</section>
@endif

<!-- Featured Products -->
<section class="py-8 md:py-12 lg:py-16 bg-white">
    <div class="container mx-auto px-4">
        <h2 class="text-4xl md:text-5xl font-serif font-bold mb-12 text-center text-[#524438]">Featured Delights</h2>
        @if($featuredProducts->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($featuredProducts as $product)
                    <x-product-card :product="$product" />
                @endforeach
            </div>
        @else
            <p class="text-center text-gray-500">No featured products available at the moment.</p>
        @endif
    </div>
</section>

<!-- Testimonials -->
@if($testimonials->count() > 0)
<section class="bg-[#faf8f5] py-8 md:py-12 lg:py-16">
    <div class="container mx-auto px-4">
        <h2 class="text-4xl md:text-5xl font-serif font-bold mb-12 text-center text-[#524438]">What Our Customers Say</h2>
        <div class="relative max-w-6xl mx-auto">
            <!-- Testimonials Slider -->
            <div class="testimonials-slider overflow-hidden">
                <div class="testimonials-track flex transition-transform duration-500 ease-in-out" id="testimonials-track">
                    @foreach($testimonials as $index => $testimonial)
                        <div class="testimonial-slide min-w-full px-4">
                            <div class="bg-white p-8 rounded-2xl shadow-md hover:shadow-xl transition-shadow border border-[#e8ddd0] max-w-2xl mx-auto">
                                <div class="flex items-center gap-2 mb-4">
                                    <div class="text-[#c97d60] text-4xl">"</div>
                                    <div class="flex items-center gap-1">
                                        @for($i = 1; $i <= 5; $i++)
                                            <svg class="w-5 h-5 {{ $i <= $testimonial->rating ? 'text-yellow-400 fill-current' : 'text-gray-300' }}" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                            </svg>
                                        @endfor
                                    </div>
                                </div>
                                <p class="text-[#645443] mb-6 text-lg leading-relaxed">"{{ $testimonial->testimonial }}"</p>
                                <p class="font-semibold text-[#524438]">- {{ $testimonial->name }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            
            <!-- Navigation Buttons -->
            @if($testimonials->count() > 1)
                <button id="testimonial-prev" class="absolute left-0 top-1/2 -translate-y-1/2 bg-white p-3 rounded-full shadow-lg hover:bg-[#f5f0e8] transition-colors text-[#7d6a52] hover:text-[#9d8566] z-10">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                </button>
                <button id="testimonial-next" class="absolute right-0 top-1/2 -translate-y-1/2 bg-white p-3 rounded-full shadow-lg hover:bg-[#f5f0e8] transition-colors text-[#7d6a52] hover:text-[#9d8566] z-10">
                    <svg class="w-6 h-6" 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"></path>
                    </svg>
                </button>
                
                <!-- Dots Indicator -->
                <div class="flex justify-center mt-8 space-x-2" id="testimonial-dots">
                    @foreach($testimonials as $index => $testimonial)
                        <button class="testimonial-dot w-3 h-3 rounded-full {{ $index === 0 ? 'bg-[#9d8566]' : 'bg-[#e8ddd0]' }} transition-all" data-slide="{{ $index }}"></button>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</section>
@endif
@endsection

@push('modals')
<!-- Welcome/Promotion Modal -->
<x-modal id="welcome-modal" title="Welcome to Sweet Delights!" size="md">
    <div class="text-center">
        <div class="mb-6">
            <div class="w-20 h-20 bg-gradient-to-br from-[#c97d60] to-[#9d8566] rounded-full mx-auto flex items-center justify-center mb-4">
                <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                </svg>
            </div>
            <h3 class="text-3xl font-serif font-bold mb-4 text-[#524438]">Welcome to Sweet Delights!</h3>
            <p class="text-[#645443] mb-6 text-lg leading-relaxed">Discover our freshly baked artisanal treats and exclusive offers. Subscribe to our newsletter for special deals and new arrivals!</p>
        </div>
        <div class="flex flex-col sm:flex-row gap-3 justify-center">
            <button onclick="closeModal('welcome-modal'); openModal('newsletter-modal')" class="bg-[#7d6a52] text-white px-8 py-3 rounded-full hover:bg-[#9d8566] transition-all font-semibold shadow-lg hover:shadow-xl transform hover:scale-105">
                Subscribe Now
            </button>
            <button onclick="closeModal('welcome-modal')" class="text-[#645443] hover:text-[#524438] px-8 py-3 rounded-full hover:bg-[#f5f0e8] transition-all font-medium">
                Maybe Later
            </button>
        </div>
    </div>
</x-modal>

<!-- Newsletter Signup Modal -->
<x-modal id="newsletter-modal" title="Subscribe to Our Newsletter" size="sm">
    <form id="newsletter-form" class="space-y-6">
        @csrf
        <div>
            <label for="newsletter-email" class="block text-sm font-semibold mb-2 text-[#524438]">Email Address</label>
            <input type="email" id="newsletter-email" name="email" required 
                class="w-full px-4 py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438]"
                placeholder="your.email@example.com">
        </div>
        <button type="submit" class="w-full bg-[#7d6a52] text-white px-6 py-3 rounded-full hover:bg-[#9d8566] transition-all font-semibold shadow-lg hover:shadow-xl transform hover:scale-105">
            Subscribe
        </button>
        <p class="text-xs text-center text-[#9d8566]">We respect your privacy. Unsubscribe at any time.</p>
    </form>
</x-modal>
@endpush

@push('scripts')
<script>
// Track user interaction
let userInteracted = false;
let interactionTimer = null;
let scrollTimer = null;

// Track various user interactions
const interactionEvents = ['click', 'scroll', 'keydown', 'mousemove', 'touchstart'];

interactionEvents.forEach(eventType => {
    document.addEventListener(eventType, function() {
        if (!userInteracted) {
            userInteracted = true;
            
            // Clear any existing timer
            if (interactionTimer) {
                clearTimeout(interactionTimer);
            }
            
            // Show popup after 3 seconds of interaction
            interactionTimer = setTimeout(() => {
                if (!sessionStorage.getItem('welcomeShown')) {
                    openModal('welcome-modal');
                    sessionStorage.setItem('welcomeShown', 'true');
                }
            }, 3000);
        }
    }, { once: false, passive: true });
});

// Also track scroll depth (show after 30% scroll)
let maxScroll = 0;
window.addEventListener('scroll', function() {
    const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
    
    if (scrollPercent > 30 && !sessionStorage.getItem('welcomeShown')) {
        if (scrollTimer) {
            clearTimeout(scrollTimer);
        }
        
        scrollTimer = setTimeout(() => {
            openModal('welcome-modal');
            sessionStorage.setItem('welcomeShown', 'true');
        }, 2000);
    }
}, { passive: true });

// Testimonials Slider
document.addEventListener('DOMContentLoaded', function() {
    const track = document.getElementById('testimonials-track');
    if (!track) return; // Exit if testimonials section doesn't exist
    
    const slides = document.querySelectorAll('.testimonial-slide');
    const dots = document.querySelectorAll('.testimonial-dot');
    const prevBtn = document.getElementById('testimonial-prev');
    const nextBtn = document.getElementById('testimonial-next');
    
    if (slides.length === 0) return; // Exit if no slides
    
    let currentSlide = 0;
    const totalSlides = slides.length;
    
    function updateSlider() {
        track.style.transform = `translateX(-${currentSlide * 100}%)`;
        
        // Update dots
        dots.forEach((dot, index) => {
            if (index === currentSlide) {
                dot.classList.remove('bg-[#e8ddd0]');
                dot.classList.add('bg-[#9d8566]');
            } else {
                dot.classList.remove('bg-[#9d8566]');
                dot.classList.add('bg-[#e8ddd0]');
            }
        });
    }
    
    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
        updateSlider();
    }
    
    function prevSlide() {
        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
        updateSlider();
    }
    
    nextBtn?.addEventListener('click', nextSlide);
    prevBtn?.addEventListener('click', prevSlide);
    
    // Dot navigation
    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            currentSlide = index;
            updateSlider();
        });
    });
    
    // Auto-play slider
    setInterval(nextSlide, 5000);
});

document.getElementById('newsletter-form')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const response = await fetch('{{ route("newsletter.store") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    });
    const data = await response.json();
    if (data.success) {
        showToast(data.message, 'success');
        closeModal('newsletter-modal');
        this.reset();
    } else {
        showToast(data.message || 'Something went wrong', 'error');
    }
});
</script>
@endpush