@extends('layouts.guest')

@section('title', 'Emma & James - Wedding Invitation')
@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900">
    
    <!-- Hero Section with Countdown -->
    <div class="relative h-[70vh] min-h-[500px] overflow-hidden">
        <div class="absolute inset-0">
            <img src="https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80" 
                 alt="Wedding Couple" 
                 class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-gray-900"></div>
        </div>
        
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="text-center px-4">
                <div class="animate-float mb-6">
                    <span class="inline-block px-6 py-2 bg-white/10 backdrop-blur-lg rounded-full text-white text-sm border border-white/20">
                        <i class="fas fa-heart text-pink-500 mr-2"></i> We're Getting Married!
                    </span>
                </div>
                <h1 class="text-5xl md:text-7xl font-bold text-white mb-4 shimmer-text">Emma & James</h1>
                <p class="text-xl text-gray-200 mb-2">June 15, 2024 • London, UK</p>
                <p class="text-gray-300">Together with joy, we invite you to celebrate our special day</p>
                
                <!-- Countdown Timer -->
                <div class="grid grid-cols-4 gap-4 max-w-md mx-auto mt-12">
                    <div class="glass-card p-4 text-center">
                        <div class="text-3xl font-bold text-purple-400" id="days">00</div>
                        <div class="text-gray-400 text-sm">Days</div>
                    </div>
                    <div class="glass-card p-4 text-center">
                        <div class="text-3xl font-bold text-purple-400" id="hours">00</div>
                        <div class="text-gray-400 text-sm">Hours</div>
                    </div>
                    <div class="glass-card p-4 text-center">
                        <div class="text-3xl font-bold text-purple-400" id="minutes">00</div>
                        <div class="text-gray-400 text-sm">Minutes</div>
                    </div>
                    <div class="glass-card p-4 text-center">
                        <div class="text-3xl font-bold text-purple-400" id="seconds">00</div>
                        <div class="text-gray-400 text-sm">Seconds</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Scroll Indicator -->
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
            <div class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
                <div class="w-1 h-2 bg-white/50 rounded-full mt-2 animate-pulse"></div>
            </div>
        </div>
    </div>

    <!-- Content Sections -->
    <div class="container mx-auto px-4 py-12 max-w-6xl">
        
        <!-- Love Story -->
        <div class="glass-card rounded-2xl p-8 mb-8" data-aos="fade-up">
            <div class="text-center mb-6">
                <i class="fas fa-heart text-3xl text-pink-500 mb-3"></i>
                <h2 class="text-3xl font-bold text-white">Our Love Story</h2>
                <div class="w-20 h-1 bg-gradient-to-r from-purple-600 to-pink-600 mx-auto mt-2"></div>
            </div>
            <p class="text-gray-300 text-center max-w-3xl mx-auto leading-relaxed">
                Our journey began on a rainy Tuesday at a small coffee shop in London. 
                Five years, countless adventures, and endless memories later, we're ready to start our greatest adventure yet - 
                a lifetime together. We can't wait to share this special moment with all of you.
            </p>
        </div>
        
        <!-- RSVP Form -->
        <div class="glass-card rounded-2xl p-8 mb-8" data-aos="fade-up" data-aos-delay="100">
            <div class="text-center mb-6">
                <i class="fas fa-envelope-open-text text-3xl text-purple-400 mb-3"></i>
                <h2 class="text-3xl font-bold text-white">RSVP</h2>
                <p class="text-gray-400">Please let us know if you can join us</p>
            </div>
            <form class="space-y-4 max-w-2xl mx-auto">
                <div class="grid md:grid-cols-2 gap-4">
                    <input type="text" placeholder="Full Name *" required class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 transition">
                    <input type="email" placeholder="Email Address *" required class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 transition">
                </div>
                <div>
                    <select class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition">
                        <option value="" class="bg-gray-900">Will you be attending?</option>
                        <option class="bg-gray-900">Yes, I'll be there!</option>
                        <option class="bg-gray-900">Sadly, I can't make it</option>
                    </select>
                </div>
                <div>
                    <input type="number" placeholder="Number of Guests (including yourself)" min="1" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 transition">
                </div>
                <div>
                    <textarea rows="3" placeholder="Any dietary requirements or special notes?" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 transition"></textarea>
                </div>
                <button class="w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white font-semibold hover:shadow-2xl transition hover:scale-105 transform duration-300">
                    <i class="fas fa-paper-plane mr-2"></i>Submit RSVP
                </button>
            </form>
        </div>
        
        <!-- Accommodation -->
        <div class="glass-card rounded-2xl p-8 mb-8" data-aos="fade-up" data-aos-delay="200">
            <div class="text-center mb-6">
                <i class="fas fa-hotel text-3xl text-blue-400 mb-3"></i>
                <h2 class="text-3xl font-bold text-white">Accommodation</h2>
                <p class="text-gray-400">Special rates reserved for our guests</p>
            </div>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="p-6 bg-white/5 rounded-xl hover:bg-white/10 transition-all duration-300 group">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h3 class="text-xl font-bold text-white group-hover:text-purple-400 transition">The Grand Hotel</h3>
                            <p class="text-gray-400 text-sm">★★★★★ • 0.5 miles from venue</p>
                        </div>
                        <i class="fas fa-crown text-yellow-500 text-2xl"></i>
                    </div>
                    <p class="text-gray-300">Deluxe Room • £180/night</p>
                    <p class="text-green-400 text-sm mt-2">✓ 25 rooms reserved for guests</p>
                    <p class="text-gray-400 text-sm mt-1">✓ Complimentary breakfast included</p>
                    <button class="mt-4 w-full px-4 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition transform hover:scale-105">
                        <i class="fas fa-bed mr-2"></i>Book Now
                    </button>
                </div>
                <div class="p-6 bg-white/5 rounded-xl hover:bg-white/10 transition-all duration-300 group">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h3 class="text-xl font-bold text-white group-hover:text-purple-400 transition">The Riverside Inn</h3>
                            <p class="text-gray-400 text-sm">★★★★ • 1.2 miles from venue</p>
                        </div>
                        <i class="fas fa-water text-blue-400 text-2xl"></i>
                    </div>
                    <p class="text-gray-300">Standard Room • £120/night</p>
                    <p class="text-green-400 text-sm mt-2">✓ 15 rooms reserved for guests</p>
                    <p class="text-gray-400 text-sm mt-1">✓ Riverside views available</p>
                    <button class="mt-4 w-full px-4 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition transform hover:scale-105">
                        <i class="fas fa-bed mr-2"></i>Book Now
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Transport -->
        <div class="glass-card rounded-2xl p-8 mb-8" data-aos="fade-up" data-aos-delay="300">
            <div class="text-center mb-6">
                <i class="fas fa-bus text-3xl text-green-400 mb-3"></i>
                <h2 class="text-3xl font-bold text-white">Transportation</h2>
                <p class="text-gray-400">Getting to the venue</p>
            </div>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="p-5 bg-white/5 rounded-lg">
                    <i class="fas fa-plane-arrival text-2xl text-purple-400 mb-2"></i>
                    <h3 class="text-lg font-bold text-white">Airport Transfers</h3>
                    <p class="text-gray-300 text-sm mt-2">Complimentary shuttle from Heathrow and Gatwick airports to the venue</p>
                    <p class="text-gray-400 text-xs mt-2">Schedule: 10:00 AM, 2:00 PM, 6:00 PM</p>
                    <button class="mt-3 px-4 py-1.5 bg-purple-600/50 rounded text-sm">Request Pickup</button>
                </div>
                <div class="p-5 bg-white/5 rounded-lg">
                    <i class="fas fa-car text-2xl text-purple-400 mb-2"></i>
                    <h3 class="text-lg font-bold text-white">Parking Information</h3>
                    <p class="text-gray-300 text-sm mt-2">Free parking available at both ceremony and reception venues</p>
                    <p class="text-gray-400 text-xs mt-2">Limited spaces, please arrive early</p>
                    <button class="mt-3 px-4 py-1.5 bg-purple-600/50 rounded text-sm">Reserve Parking</button>
                </div>
            </div>
        </div>
        
        <!-- Schedule -->
        <div class="glass-card rounded-2xl p-8 mb-8" data-aos="fade-up" data-aos-delay="400">
            <div class="text-center mb-6">
                <i class="fas fa-calendar-alt text-3xl text-orange-400 mb-3"></i>
                <h2 class="text-3xl font-bold text-white">Wedding Schedule</h2>
                <p class="text-gray-400">Plan for the day</p>
            </div>
            <div class="space-y-4 max-w-2xl mx-auto">
                <div class="flex items-center gap-4 p-4 bg-white/5 rounded-lg hover:bg-white/10 transition">
                    <div class="w-20 text-center">
                        <div class="w-12 h-12 bg-purple-600/20 rounded-full flex items-center justify-center mx-auto">
                            <p class="text-purple-400 font-bold">2:00</p>
                        </div>
                    </div>
                    <div class="flex-1">
                        <p class="text-white font-semibold text-lg">Ceremony</p>
                        <p class="text-gray-400">St. Paul's Cathedral, London</p>
                        <p class="text-gray-500 text-sm mt-1">Please arrive by 1:45 PM</p>
                    </div>
                    <i class="fas fa-church text-gray-500 text-2xl"></i>
                </div>
                <div class="flex items-center gap-4 p-4 bg-white/5 rounded-lg hover:bg-white/10 transition">
                    <div class="w-20 text-center">
                        <div class="w-12 h-12 bg-pink-600/20 rounded-full flex items-center justify-center mx-auto">
                            <p class="text-pink-400 font-bold">5:00</p>
                        </div>
                    </div>
                    <div class="flex-1">
                        <p class="text-white font-semibold text-lg">Reception</p>
                        <p class="text-gray-400">The Grand Hotel Ballroom</p>
                        <p class="text-gray-500 text-sm mt-1">Cocktail hour followed by dinner</p>
                    </div>
                    <i class="fas fa-glass-cheers text-gray-500 text-2xl"></i>
                </div>
                <div class="flex items-center gap-4 p-4 bg-white/5 rounded-lg hover:bg-white/10 transition">
                    <div class="w-20 text-center">
                        <div class="w-12 h-12 bg-orange-600/20 rounded-full flex items-center justify-center mx-auto">
                            <p class="text-orange-400 font-bold">9:00</p>
                        </div>
                    </div>
                    <div class="flex-1">
                        <p class="text-white font-semibold text-lg">Party & Fireworks</p>
                        <p class="text-gray-400">Garden Terrace</p>
                        <p class="text-gray-500 text-sm mt-1">Live music and spectacular fireworks display</p>
                    </div>
                    <i class="fas fa-fire text-gray-500 text-2xl"></i>
                </div>
            </div>
        </div>
        
        <!-- Gallery -->
        <div class="glass-card rounded-2xl p-8 mb-8" data-aos="fade-up" data-aos-delay="500">
            <div class="text-center mb-6">
                <i class="fas fa-images text-3xl text-purple-400 mb-3"></i>
                <h2 class="text-3xl font-bold text-white">Memories Gallery</h2>
                <p class="text-gray-400">A glimpse of our journey together</p>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="relative group overflow-hidden rounded-xl cursor-pointer">
                    <img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" class="w-full h-32 object-cover group-hover:scale-110 transition duration-500">
                    <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                        <i class="fas fa-search-plus text-white text-xl"></i>
                    </div>
                </div>
                <div class="relative group overflow-hidden rounded-xl cursor-pointer">
                    <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" class="w-full h-32 object-cover group-hover:scale-110 transition duration-500">
                    <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                        <i class="fas fa-search-plus text-white text-xl"></i>
                    </div>
                </div>
                <div class="relative group overflow-hidden rounded-xl cursor-pointer">
                    <img src="https://images.unsplash.com/photo-1537633552985-df8429e8048b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" class="w-full h-32 object-cover group-hover:scale-110 transition duration-500">
                    <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                        <i class="fas fa-search-plus text-white text-xl"></i>
                    </div>
                </div>
                <div class="relative group overflow-hidden rounded-xl cursor-pointer">
                    <img src="https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" class="w-full h-32 object-cover group-hover:scale-110 transition duration-500">
                    <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                        <i class="fas fa-search-plus text-white text-xl"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Gift Registry -->
        <div class="glass-card rounded-2xl p-8 mb-8" data-aos="fade-up" data-aos-delay="600">
            <div class="text-center mb-6">
                <i class="fas fa-gift text-3xl text-yellow-400 mb-3"></i>
                <h2 class="text-3xl font-bold text-white">Gift Registry</h2>
                <p class="text-gray-400">Your presence is the greatest gift</p>
            </div>
            <p class="text-gray-300 text-center max-w-2xl mx-auto mb-6">
                We are truly blessed to have you in our lives. If you wish to honor us with a gift, we've registered at the following stores:
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="#" class="px-6 py-3 bg-white/10 rounded-lg text-white hover:bg-purple-600 transition flex items-center gap-2">
                    <i class="fab fa-amazon"></i> Amazon Registry
                </a>
                <a href="#" class="px-6 py-3 bg-white/10 rounded-lg text-white hover:bg-purple-600 transition flex items-center gap-2">
                    <i class="fas fa-store"></i> John Lewis
                </a>
                <a href="#" class="px-6 py-3 bg-white/10 rounded-lg text-white hover:bg-purple-600 transition flex items-center gap-2">
                    <i class="fas fa-heart"></i> Honeymoon Fund
                </a>
            </div>
        </div>
        
        <!-- Map & Directions -->
        <div class="glass-card rounded-2xl p-8" data-aos="fade-up" data-aos-delay="700">
            <div class="text-center mb-6">
                <i class="fas fa-map-marker-alt text-3xl text-red-400 mb-3"></i>
                <h2 class="text-3xl font-bold text-white">Venue Location</h2>
                <p class="text-gray-400">St. Paul's Cathedral, London</p>
            </div>
            <div class="h-64 bg-gray-800 rounded-xl flex items-center justify-center mb-6">
                <div class="text-center">
                    <i class="fas fa-map-marked-alt text-5xl text-purple-400 mb-3"></i>
                    <p class="text-gray-400">Interactive Map</p>
                    <p class="text-gray-500 text-sm">St. Paul's Churchyard, London EC4M 8AD</p>
                    <button class="mt-3 px-4 py-2 bg-purple-600 rounded-lg text-sm">Get Directions</button>
                </div>
            </div>
            <div class="text-center text-gray-400 text-sm">
                <i class="fas fa-subway mr-1"></i> Nearest Tube: St. Paul's (Central Line)
            </div>
        </div>
    </div>
    
    <!-- Footer -->
    <footer class="text-center py-8 border-t border-white/10">
        <p class="text-gray-400 text-sm">We can't wait to celebrate with you! 💕</p>
        <p class="text-gray-500 text-xs mt-2">© 2024 Emma & James • Forever Together</p>
    </footer>
</div>

@push('scripts')
<script>
    // Countdown Timer
    function updateCountdown() {
        const weddingDate = new Date("June 15, 2024 14:00:00").getTime();
        const now = new Date().getTime();
        const distance = weddingDate - now;
        
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        document.getElementById('days').innerHTML = days.toString().padStart(2, '0');
        document.getElementById('hours').innerHTML = hours.toString().padStart(2, '0');
        document.getElementById('minutes').innerHTML = minutes.toString().padStart(2, '0');
        document.getElementById('seconds').innerHTML = seconds.toString().padStart(2, '0');
    }
    
    updateCountdown();
    setInterval(updateCountdown, 1000);
    
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if(target) {
                target.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
    
    // Add animation on scroll
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if(entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    document.querySelectorAll('.glass-card').forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(30px)';
        card.style.transition = 'all 0.6s ease-out';
        observer.observe(card);
    });
</script>
@endpush
@endsection