@extends('layouts.frontend')
@section('title', 'Welcome')
@section('page-title', 'Welcome to Our Church')

@push('styles')
<style>
    .hero-bg {
        background: linear-gradient(135deg, rgba(42, 8, 96, 0.97) 0%, rgba(26, 26, 46, 0.97) 100%),
                    url('https://images.unsplash.com/photo-1509027572446-af8401acfdc3?w=1920') center/cover;
    }
    .parallax-bg {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .text-gradient {
        background: linear-gradient(135deg, #d4af37 0%, #9666ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .card-hover {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .card-hover:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px -12px rgba(212, 175, 55, 0.25);
    }
    .animate-float {
        animation: float 6s ease-in-out infinite;
    }
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }
    .animate-pulse-slow {
        animation: pulse 3s ease-in-out infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
    .glass-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .scroll-reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease;
    }
    .scroll-reveal.active {
        opacity: 1;
        transform: translateY(0);
    }
    .video-overlay {
        background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    }
</style>
@endpush

@section('content')

<!-- Hero Section -->
<section class="hero-bg min-h-screen flex items-center justify-center relative overflow-hidden">
    <div class="absolute inset-0 bg-black/20"></div>
    <div class="absolute top-20 left-10 w-72 h-72 bg-gold-500/20 rounded-full blur-3xl animate-float"></div>
    <div class="absolute bottom-40 right-10 w-96 h-96 bg-royal-500/20 rounded-full blur-3xl animate-float" style="animation-delay: -3s"></div>
    <div class="absolute top-1/3 right-1/4 w-4 h-4 bg-gold-400 rounded-full animate-pulse-slow"></div>
    <div class="absolute bottom-1/3 left-1/4 w-3 h-3 bg-royal-400 rounded-full animate-pulse-slow" style="animation-delay: -1.5s"></div>
    
    <div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
        <div class="mb-8 animate-fade-in">
            <span class="inline-flex items-center gap-2 px-6 py-2 rounded-full bg-gold-500/20 text-gold-300 text-sm font-medium border border-gold-500/30 backdrop-blur-sm">
                <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
                {{ frontend_content('hero_badge', 'Live Broadcast Every Sunday') }}
            </span>
        </div>
        
        <h1 class="font-cinzel text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-8 leading-tight tracking-tight">
            {{ frontend_content('hero_title', 'Welcome to') }}<br>
            <span class="text-gradient">{{ church_name() }}</span>
        </h1>
        
        <p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed">
            {{ frontend_content('hero_subtitle', 'A place where faith grows, lives transform, and community flourishes. Join us in worship, fellowship, and service.') }}
        </p>
        
        <div class="flex flex-col sm:flex-row gap-4 justify-center mb-16">
            <a href="#services" class="group px-10 py-4 rounded-full gold-gradient text-white font-semibold text-lg hover:opacity-90 transition-all transform hover:scale-105 flex items-center justify-center gap-2">
                <i class="fas fa-calendar-alt"></i>
                <span>Service Times</span>
            </a>
            <a href="#live" class="group px-10 py-4 rounded-full bg-white/10 text-white font-semibold text-lg border-2 border-white/30 hover:bg-white/20 transition-all flex items-center justify-center gap-2">
                <i class="fas fa-play-circle"></i>
                <span>Watch Live</span>
            </a>
        </div>

        <!-- Quick Stats -->
        <div class="grid grid-cols-3 gap-4 max-w-2xl mx-auto">
            <div class="glass-card rounded-xl p-4">
                <div class="text-3xl font-cinzel font-bold text-gold-400">{{ $stats['members'] }}+</div>
                <div class="text-gray-300 text-sm">Church Members</div>
            </div>
            <div class="glass-card rounded-xl p-4">
                <div class="text-3xl font-cinzel font-bold text-gold-400">{{ frontend_content('years_serving', '50+') }}</div>
                <div class="text-gray-300 text-sm">Years Serving</div>
            </div>
            <div class="glass-card rounded-xl p-4">
                <div class="text-3xl font-cinzel font-bold text-gold-400">{{ frontend_content('ministries_count', '10+') }}</div>
                <div class="text-gray-300 text-sm">Ministries</div>
            </div>
        </div>
    </div>
    
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
        <div class="w-8 h-12 rounded-full border-2 border-white/50 flex items-start justify-center p-2">
            <div class="w-1 h-2 bg-white/70 rounded-full animate-pulse"></div>
        </div>
    </div>
</section>

<!-- Welcome Message -->
<section class="py-24 bg-white relative overflow-hidden">
    <div class="absolute top-0 left-0 w-full h-1 gold-gradient"></div>
    <div class="absolute -top-20 -right-20 w-96 h-96 bg-gold-500/5 rounded-full blur-3xl"></div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            <div class="relative">
                <div class="relative z-10">
                    <img src="https://images.unsplash.com/photo-1529070538774-1843cb3265df?w=600" alt="Pastor's Welcome" class="rounded-2xl shadow-2xl">
                </div>
                <div class="absolute -bottom-8 -right-8 w-64 h-64 bg-gold-500/10 rounded-2xl -z-10"></div>
                <div class="absolute -top-8 -left-8 w-48 h-48 border-4 border-gold-500/20 rounded-2xl -z-10"></div>
            </div>
            
            <div>
                <span class="text-gold-600 font-semibold text-sm tracking-wider uppercase">Welcome Message</span>
                <h2 class="font-cinzel text-4xl md:text-5xl font-bold text-gray-900 mt-2 mb-6">
                    {{ frontend_content('welcome_title', 'A Place Where') }} <span class="text-gold-600">{{ frontend_content('welcome_title_highlight', 'Everyone') }}</span> {{ frontend_content('welcome_title_suffix', 'Belongs') }}
                </h2>
                <p class="text-gray-600 text-lg leading-relaxed mb-6">
                    {{ frontend_content('welcome_text_1', "Whether you're exploring faith for the first time, returning after time away, or searching for a church home, we're glad you're here. At Grace Church, you'll find authentic community, inspiring worship, and relevant teaching that speaks to everyday life.") }}
                </p>
                <p class="text-gray-600 text-lg leading-relaxed mb-8">
                    {{ frontend_content('welcome_text_2', 'Our doors are open to all. Come as you are, and discover the love, hope, and purpose that awaits you.') }}
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="{{ route('frontend.about') }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-full gold-gradient text-white font-semibold hover:opacity-90 transition-all">
                        Learn More
                        <i class="fas fa-arrow-right"></i>
                    </a>
                    <a href="{{ route('frontend.contact') }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-full border-2 border-gray-300 text-gray-700 font-semibold hover:bg-gray-50 transition-all">
                        <i class="fas fa-phone"></i>
                        Contact Us
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Service Times -->
<section id="services" class="py-24 bg-gray-900 relative">
    <div class="absolute inset-0 parallax-bg opacity-10" style="background-image: url('https://images.unsplash.com/photo-1504052434569-70ad5836ab65?w=1920')"></div>
    <div class="absolute inset-0 bg-gray-900/90"></div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center mb-16">
            <span class="text-gold-400 font-semibold text-sm tracking-wider uppercase">Join Us</span>
            <h2 class="font-cinzel text-4xl md:text-5xl font-bold text-white mt-2 mb-4">Service Times</h2>
            <div class="w-24 h-1 gold-gradient mx-auto rounded-full"></div>
            <p class="text-gray-400 mt-4 max-w-2xl mx-auto">We'd love to worship with you! Join us in person or online.</p>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse($services as $index => $service)
            <div class="card-hover p-8 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 relative overflow-hidden group">
                <div class="absolute top-0 left-0 w-full h-1 gold-gradient transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></div>
                
                <div class="flex items-center gap-4 mb-6">
                    <div class="w-16 h-16 rounded-2xl bg-gold-500/20 flex items-center justify-center">
                        @if($index === 0)
                            <i class="fas fa-sun text-gold-400 text-2xl"></i>
                        @elseif($index === 1)
                            <i class="fas fa-moon text-gold-400 text-2xl"></i>
                        @elseif($index === 2)
                            <i class="fas fa-bible text-gold-400 text-2xl"></i>
                        @else
                            <i class="fas fa-church text-gold-400 text-2xl"></i>
                        @endif
                    </div>
                    <div>
                        <h3 class="font-cinzel text-xl font-bold text-white">{{ $service->name }}</h3>
                        <p class="text-gold-400 font-semibold">{{ $service->start_time ? \Carbon\Carbon::parse($service->start_time)->format('h:i A') : 'TBD' }}</p>
                    </div>
                </div>
                
                <p class="text-gray-400 mb-4">{{ $service->description ?? 'Join us for this wonderful service.' }}</p>
                
                @if($service->location)
                <div class="flex items-center gap-2 text-gray-500 text-sm">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>{{ $service->location }}</span>
                </div>
                @endif
            </div>
            @empty
            <div class="col-span-3 text-center py-12">
                <div class="w-20 h-20 rounded-full bg-white/10 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-calendar-times text-gray-500 text-3xl"></i>
                </div>
                <p class="text-gray-400">Service times coming soon. Please check back later.</p>
            </div>
            @endforelse
        </div>

        <!-- Next Service Countdown -->
        @if($services->count() > 0)
        <div class="mt-16 text-center">
            <div class="inline-block glass-card rounded-2xl p-8">
                <p class="text-gold-400 font-semibold mb-4">Next Service Starts In</p>
                <div class="flex justify-center gap-6" id="countdown">
                    <div class="text-center">
                        <div class="text-4xl font-cinzel font-bold text-white" id="countdown-days">00</div>
                        <div class="text-gray-400 text-sm">Days</div>
                    </div>
                    <div class="text-2xl text-gold-400">:</div>
                    <div class="text-center">
                        <div class="text-4xl font-cinzel font-bold text-white" id="countdown-hours">00</div>
                        <div class="text-gray-400 text-sm">Hours</div>
                    </div>
                    <div class="text-2xl text-gold-400">:</div>
                    <div class="text-center">
                        <div class="text-4xl font-cinzel font-bold text-white" id="countdown-minutes">00</div>
                        <div class="text-gray-400 text-sm">Minutes</div>
                    </div>
                    <div class="text-2xl text-gold-400">:</div>
                    <div class="text-center">
                        <div class="text-4xl font-cinzel font-bold text-white" id="countdown-seconds">00</div>
                        <div class="text-gray-400 text-sm">Seconds</div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</section>

<!-- Birthday Celebration -->
@if($birthdaysToday->count() > 0)
<section class="py-16 bg-gradient-to-r from-gold-500 to-gold-600 relative overflow-hidden">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23ffffff\" fill-opacity=\"0.1\"%3E%3Cpath d=\"M30 30l15-15v30L30 30zM30 30L15 15v30l15-15z\"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E')]"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center mb-8">
            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/20 text-white text-sm font-medium mb-4">
                <i class="fas fa-birthday-cake"></i>
                Happy Birthday!
            </div>
            <h2 class="font-cinzel text-3xl md:text-4xl font-bold text-white mb-2">Celebrating Today</h2>
            <p class="text-gold-100">Join us in wishing these members a blessed birthday!</p>
        </div>
        
        <div class="flex flex-wrap justify-center gap-6">
            @foreach($birthdaysToday as $member)
            <div class="flex items-center gap-4 bg-white/10 backdrop-blur-sm rounded-2xl px-6 py-4">
                @if($member->profile_photo)
                    <img src="{{ asset('storage/' . $member->profile_photo) }}" alt="{{ $member->full_name }}" class="w-16 h-16 rounded-full object-cover border-2 border-white">
                @else
                    <div class="w-16 h-16 rounded-full bg-white/30 flex items-center justify-center text-white font-cinzel font-bold text-xl border-2 border-white">
                        {{ substr($member->first_name, 0, 1) }}{{ substr($member->last_name, 0, 1) }}
                    </div>
                @endif
                <div class="text-white">
                    <p class="font-semibold text-lg">{{ $member->full_name }}</p>
                    <p class="text-gold-100 text-sm">Turning {{ $member->date_of_birth->age + 1 }} today!</p>
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="text-center mt-8">
            <p class="text-white/80 text-sm">
                <i class="fas fa-heart text-red-400 mr-1"></i>
                "{{ frontend_content('birthday_quote', 'For I know the plans I have for you, declares the LORD, plans to prosper you... plans for a future and a hope.') }}" - {{ frontend_content('birthday_quote_reference', 'Jeremiah 29:11') }}
            </p>
        </div>
    </div>
</section>
@endif

<!-- Upcoming Birthdays -->
@if($upcomingBirthdays->count() > 0)
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="text-gold-600 font-semibold text-sm tracking-wider uppercase">This Week</span>
            <h2 class="font-cinzel text-3xl md:text-4xl font-bold text-gray-900 mt-2 mb-4">Upcoming Birthdays</h2>
            <div class="w-24 h-1 gold-gradient mx-auto rounded-full"></div>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            @foreach($upcomingBirthdays as $member)
            @php
                $nextBirthday = $member->date_of_birth->copy()->year(now()->year);
                if ($nextBirthday < now()) {
                    $nextBirthday->addYear();
                }
            @endphp
            <div class="text-center p-4 rounded-xl bg-white shadow-md hover:shadow-lg transition-shadow">
                @if($member->profile_photo)
                    <img src="{{ asset('storage/' . $member->profile_photo) }}" alt="{{ $member->full_name }}" class="w-16 h-16 rounded-full mx-auto mb-3 object-cover border-2 border-gold-400">
                @else
                    <div class="w-16 h-16 rounded-full mx-auto mb-3 bg-gradient-to-br from-gold-400 to-gold-600 flex items-center justify-center text-white font-cinzel font-bold text-lg border-2 border-gold-400">
                        {{ substr($member->first_name, 0, 1) }}{{ substr($member->last_name, 0, 1) }}
                    </div>
                @endif
                <p class="font-semibold text-gray-900 text-sm truncate">{{ $member->first_name }}</p>
                <p class="text-gold-600 text-xs font-medium">{{ $nextBirthday->format('M d') }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Upcoming Events -->
@if($upcomingEvents->count() > 0)
<section class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="text-gold-600 font-semibold text-sm tracking-wider uppercase">Mark Your Calendar</span>
            <h2 class="font-cinzel text-4xl md:text-5xl font-bold text-gray-900 mt-2 mb-4">Upcoming Events</h2>
            <div class="w-24 h-1 gold-gradient mx-auto rounded-full"></div>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8">
            @foreach($upcomingEvents->take(3) as $event)
            <div class="card-hover rounded-2xl overflow-hidden bg-white border border-gray-100 shadow-lg">
                <div class="h-48 bg-gradient-to-br from-royal-600 to-royal-800 flex items-center justify-center relative">
                    <div class="absolute inset-0 bg-black/20"></div>
                    <div class="text-center relative z-10">
                        <div class="text-5xl font-cinzel font-bold text-white">{{ \Carbon\Carbon::parse($event->start_date)->format('d') }}</div>
                        <div class="text-gold-400 font-semibold">{{ \Carbon\Carbon::parse($event->start_date)->format('M Y') }}</div>
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="font-cinzel text-xl font-bold text-gray-900 mb-2">{{ $event->title }}</h3>
                    <p class="text-gray-600 mb-4">{{ Str::limit($event->description, 100) }}</p>
                    <div class="flex items-center gap-4 text-sm text-gray-500">
                        <span class="flex items-center gap-1">
                            <i class="fas fa-clock"></i>
                            {{ \Carbon\Carbon::parse($event->start_date)->format('h:i A') }}
                        </span>
                        @if($event->location)
                        <span class="flex items-center gap-1">
                            <i class="fas fa-map-marker-alt"></i>
                            {{ $event->location }}
                        </span>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="text-center mt-12">
            <a href="{{ route('frontend.events') }}" class="inline-flex items-center gap-2 px-8 py-4 rounded-full border-2 border-gold-500 text-gold-600 font-semibold hover:bg-gold-500 hover:text-white transition-all">
                View All Events <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>
@endif

<!-- Live Streaming -->
<section id="live" class="py-24 bg-gray-900 relative overflow-hidden">
    <div class="absolute inset-0">
        <img src="https://images.unsplash.com/photo-1519834785169-98be25ec3f84?w=1920" alt="Live Service" class="w-full h-full object-cover opacity-20">
    </div>
    <div class="absolute inset-0 bg-gradient-to-r from-gray-900 via-gray-900/95 to-gray-900/80"></div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div>
                <span class="inline-flex items-center gap-2 px-4 py-1 rounded-full bg-red-500/20 text-red-400 text-sm font-medium mb-6">
                    <span class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
                    Coming Soon
                </span>
                <h2 class="font-cinzel text-4xl md:text-5xl font-bold text-white mb-6">
                    {{ frontend_content('live_title', 'Join Us') }} <span class="text-gradient">{{ frontend_content('live_title_highlight', 'Online') }}</span>
                </h2>
                <p class="text-gray-400 text-lg mb-8 leading-relaxed">
                    {{ frontend_content('live_description', "Can't make it in person? No worries! Watch our services live from anywhere in the world. Stay connected with our community and never miss a moment of worship, teaching, and fellowship.") }}
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="#" class="inline-flex items-center gap-3 px-8 py-4 rounded-full bg-red-600 text-white font-semibold hover:bg-red-700 transition-all">
                        <i class="fab fa-youtube text-xl"></i>
                        YouTube Live
                    </a>
                    <a href="#" class="inline-flex items-center gap-3 px-8 py-4 rounded-full bg-blue-600 text-white font-semibold hover:bg-blue-700 transition-all">
                        <i class="fab fa-facebook text-xl"></i>
                        Facebook Live
                    </a>
                </div>
            </div>
            
            <div class="relative">
                <div class="aspect-video rounded-2xl overflow-hidden shadow-2xl border border-white/10">
                    <div class="w-full h-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center">
                        <div class="text-center">
                            <div class="w-20 h-20 rounded-full border-4 border-gold-500/50 flex items-center justify-center mx-auto mb-4 hover:border-gold-500 transition-colors cursor-pointer group">
                                <i class="fas fa-play text-gold-400 text-3xl ml-2 group-hover:scale-110 transition-transform"></i>
                            </div>
                            <p class="text-gray-400">Live Stream Preview</p>
                            <p class="text-gray-500 text-sm mt-1">Sundays at 9:00 AM & 11:00 AM</p>
                        </div>
                    </div>
                </div>
                <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-gold-500/20 rounded-full blur-2xl"></div>
            </div>
        </div>
    </div>
</section>

<!-- Ministries Preview -->
<section class="py-24 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="text-gold-600 font-semibold text-sm tracking-wider uppercase">Get Involved</span>
            <h2 class="font-cinzel text-4xl md:text-5xl font-bold text-gray-900 mt-2 mb-4">Our Ministries</h2>
            <div class="w-24 h-1 gold-gradient mx-auto rounded-full"></div>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="card-hover p-6 rounded-xl bg-white border border-gray-100 text-center">
                <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-music text-blue-600 text-xl"></i>
                </div>
                <h3 class="font-cinzel font-bold text-gray-900 mb-2">Worship Team</h3>
                <p class="text-gray-600 text-sm">Leading our congregation in praise and worship</p>
            </div>
            
            <div class="card-hover p-6 rounded-xl bg-white border border-gray-100 text-center">
                <div class="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-child text-purple-600 text-xl"></i>
                </div>
                <h3 class="font-cinzel font-bold text-gray-900 mb-2">Children's Ministry</h3>
                <p class="text-gray-600 text-sm">Nurturing young hearts in faith</p>
            </div>
            
            <div class="card-hover p-6 rounded-xl bg-white border border-gray-100 text-center">
                <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-hands-helping text-green-600 text-xl"></i>
                </div>
                <h3 class="font-cinzel font-bold text-gray-900 mb-2">Youth Fellowship</h3>
                <p class="text-gray-600 text-sm">Building leaders for tomorrow</p>
            </div>
            
            <div class="card-hover p-6 rounded-xl bg-white border border-gray-100 text-center">
                <div class="w-14 h-14 rounded-full bg-rose-100 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-praying-hands text-rose-600 text-xl"></i>
                </div>
                <h3 class="font-cinzel font-bold text-gray-900 mb-2">Prayer Warriors</h3>
                <p class="text-gray-600 text-sm">Interceding for our community</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-24 gold-gradient relative overflow-hidden">
    <div class="absolute inset-0">
        <div class="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-0 w-80 h-80 bg-black/10 rounded-full blur-3xl"></div>
    </div>
    
    <div class="max-w-4xl mx-auto px-4 text-center relative z-10">
        <h2 class="font-cinzel text-4xl md:text-5xl font-bold text-white mb-6">
            {{ frontend_content('cta_title', 'Ready to Make') }} {{ church_name() }} {{ frontend_content('cta_title_suffix', 'Your Home?') }}
        </h2>
        <p class="text-white/90 text-xl mb-10 max-w-2xl mx-auto">
            {{ frontend_content('cta_description', "We'd love to welcome you personally. Whether you're new to faith or just new to our community, there's a place for you here.") }}
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('frontend.contact') }}" class="px-10 py-4 rounded-full bg-white text-gray-900 font-semibold text-lg hover:bg-gray-100 transition-all transform hover:scale-105">
                Plan Your Visit
            </a>
            <a href="{{ route('login') }}" class="px-10 py-4 rounded-full bg-white/20 text-white font-semibold text-lg border-2 border-white/50 hover:bg-white/30 transition-all">
                Member Login
            </a>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="text-gold-600 font-semibold text-sm tracking-wider uppercase">Get In Touch</span>
            <h2 class="font-cinzel text-4xl md:text-5xl font-bold text-gray-900 mt-2 mb-4">Contact Us</h2>
            <div class="w-24 h-1 gold-gradient mx-auto rounded-full"></div>
        </div>
        
        <div class="grid lg:grid-cols-2 gap-16">
            <div>
                <h3 class="font-cinzel text-2xl font-bold text-gray-900 mb-6">We'd Love to Hear From You</h3>
                <p class="text-gray-600 mb-8 text-lg">Have questions? Need prayer? Want to get involved? Reach out to us!</p>
                
                <div class="space-y-6">
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full gold-gradient flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-map-marker-alt text-white"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900">Address</h4>
                            <p class="text-gray-600">{{ church_setting('address') ?? '123 Grace Street, Cityville, State 12345' }}</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full gold-gradient flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-phone text-white"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900">Phone</h4>
                            <p class="text-gray-600">{{ church_setting('phone') ?? '+1 (234) 567-8900' }}</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full gold-gradient flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-envelope text-white"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900">Email</h4>
                            <p class="text-gray-600">{{ church_setting('email') ?? 'info@gracechurch.com' }}</p>
                        </div>
                    </div>
                </div>
                
                <div class="mt-10">
                    <h4 class="font-semibold text-gray-900 mb-4">Follow Us</h4>
                    <div class="flex gap-4">
                        <a href="#" class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-white hover:bg-blue-700 transition-colors">
                            <i class="fab fa-facebook-f text-lg"></i>
                        </a>
                        <a href="#" class="w-12 h-12 rounded-full bg-sky-500 flex items-center justify-center text-white hover:bg-sky-600 transition-colors">
                            <i class="fab fa-twitter text-lg"></i>
                        </a>
                        <a href="#" class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-600 to-pink-500 flex items-center justify-center text-white hover:opacity-90 transition-opacity">
                            <i class="fab fa-instagram text-lg"></i>
                        </a>
                        <a href="#" class="w-12 h-12 rounded-full bg-red-600 flex items-center justify-center text-white hover:bg-red-700 transition-colors">
                            <i class="fab fa-youtube text-lg"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-50 rounded-2xl p-8">
                <h4 class="font-cinzel text-xl font-bold text-gray-900 mb-6">Send Us a Message</h4>
                
                @if(session('success'))
                <div class="mb-6 p-4 bg-green-100 border border-green-200 text-green-700 rounded-lg">
                    <i class="fas fa-check-circle mr-2"></i>
                    {{ session('success') }}
                </div>
                @endif
                
                <form action="{{ route('frontend.contact.submit') }}" method="POST" class="space-y-4">
                    @csrf
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
                        <input type="text" name="name" required class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent">
                    </div>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                            <input type="email" name="email" required class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Phone (Optional)</label>
                            <input type="tel" name="phone" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                        <input type="text" name="subject" required class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
                        <textarea name="message" rows="4" required class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent resize-none"></textarea>
                    </div>
                    <button type="submit" class="w-full py-3 rounded-lg gold-gradient text-white font-semibold hover:opacity-90 transition-opacity">
                        Send Message
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Countdown Timer
    function updateCountdown() {
        @if($services->count() > 0)
        const now = new Date();
        let nextService = null;
        
        @foreach($services as $service)
        @if($service->start_time)
        const serviceDate{{ $loop->index }} = new Date();
        const [hours{{ $loop->index }}, minutes{{ $loop->index }}] = '{{ $service->start_time }}'.split(':');
        serviceDate{{ $loop->index }}.setHours(parseInt(hours{{ $loop->index }}), parseInt(minutes{{ $loop->index }}), 0);
        
        if (serviceDate{{ $loop->index }} > now) {
            if (!nextService || serviceDate{{ $loop->index }} < nextService) {
                nextService = serviceDate{{ $loop->index }};
            }
        }
        @endif
        @endforeach
        
        if (nextService) {
            const diff = nextService - now;
            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));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            
            document.getElementById('countdown-days').textContent = String(days).padStart(2, '0');
            document.getElementById('countdown-hours').textContent = String(hours).padStart(2, '0');
            document.getElementById('countdown-minutes').textContent = String(minutes).padStart(2, '0');
            document.getElementById('countdown-seconds').textContent = String(seconds).padStart(2, '0');
        }
        @endif
    }
    
    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', block: 'start' });
            }
        });
    });
    
    // Scroll reveal animation
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('active');
            }
        });
    }, observerOptions);
    
    document.querySelectorAll('.card-hover, section > div').forEach(el => {
        el.classList.add('scroll-reveal');
        observer.observe(el);
    });
});
</script>
@endpush