@extends('layouts.frontend')
@section('title', 'Service Times')

@section('content')
<section class="relative bg-gray-900 py-32">
    <div class="absolute inset-0" style="background: linear-gradient(135deg, rgba(42, 8, 96, 0.9) 0%, rgba(26, 26, 46, 0.9) 100%), url('https://images.unsplash.com/photo-1504052434569-70ad5836ab65?w=1920') center/cover;"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <span class="inline-block px-4 py-1 rounded-full bg-gold-500/20 text-gold-300 text-sm font-medium border border-gold-500/30 mb-4">
            Join Us
        </span>
        <h1 class="font-cinzel text-5xl md:text-6xl font-bold text-white mb-6">Our Services</h1>
        <p class="text-xl text-gray-300 max-w-2xl mx-auto">
            We'd love to worship with you! Come as you are and experience the warmth of our community.
        </p>
    </div>
</section>

<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">Weekly Schedule</span>
            <h2 class="font-cinzel text-4xl md:text-5xl font-bold text-gray-900 mt-2 mb-4">Service Times</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-3 gap-8">
            @forelse($services as $index => $service)
            <div class="card-hover p-8 rounded-2xl bg-gradient-to-br from-gold-50 to-white border border-gold-200 relative overflow-hidden">
                <div class="absolute top-0 left-0 w-1 h-full gold-gradient"></div>
                <div class="text-gold-600 text-5xl mb-4">
                    @if($index === 0)
                        <i class="fas fa-sun"></i>
                    @elseif($index === 1)
                        <i class="fas fa-moon"></i>
                    @elseif($index === 2)
                        <i class="fas fa-bible"></i>
                    @elseif($index === 3)
                        <i class="fas fa-pray"></i>
                    @elseif($index === 4)
                        <i class="fas fa-child"></i>
                    @else
                        <i class="fas fa-church"></i>
                    @endif
                </div>
                @if($service->start_time)
                <div class="inline-block px-3 py-1 rounded-full bg-gold-100 text-gold-700 text-xs font-semibold mb-4">
                    {{ \Carbon\Carbon::parse($service->start_time)->format('l') }}
                </div>
                @endif
                <h3 class="font-cinzel text-2xl font-bold text-gray-900 mb-2">{{ $service->name }}</h3>
                <p class="text-gold-600 font-bold text-xl mb-4">
                    {{ $service->start_time ? \Carbon\Carbon::parse($service->start_time)->format('h:i A') : 'TBD' }}
                    @if($service->end_time)
                        - {{ \Carbon\Carbon::parse($service->end_time)->format('h:i A') }}
                    @endif
                </p>
                <p class="text-gray-600 mb-4">{{ $service->description ?? 'Join us for this wonderful service.' }}</p>
                @if($service->location)
                <div class="flex items-center text-gray-500 text-sm">
                    <i class="fas fa-map-marker-alt mr-2"></i>
                    {{ $service->location }}
                </div>
                @endif
            </div>
            @empty
            <div class="col-span-3 text-center py-12">
                <div class="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-calendar-times text-gray-400 text-3xl"></i>
                </div>
                <p class="text-gray-500">Service times coming soon. Please check back later.</p>
            </div>
            @endforelse
        </div>
    </div>
</section>

<section class="py-24 bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-cinzel text-3xl md:text-4xl font-bold text-white mb-4">What to Expect</h2>
            <p class="text-gray-400">A typical Sunday service lasts about 2 hours</p>
        </div>
        
        <div class="grid md:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="w-16 h-16 rounded-full gold-gradient flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-music text-white text-2xl"></i>
                </div>
                <h3 class="font-cinzel text-lg font-bold text-white mb-2">Worship</h3>
                <p class="text-gray-400 text-sm">30 minutes of uplifting contemporary and traditional music</p>
            </div>
            
            <div class="text-center">
                <div class="w-16 h-16 rounded-full gold-gradient flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-hands text-white text-2xl"></i>
                </div>
                <h3 class="font-cinzel text-lg font-bold text-white mb-2">Prayer</h3>
                <p class="text-gray-400 text-sm">A time of corporate prayer and personal reflection</p>
            </div>
            
            <div class="text-center">
                <div class="w-16 h-16 rounded-full gold-gradient flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-book text-white text-2xl"></i>
                </div>
                <h3 class="font-cinzel text-lg font-bold text-white mb-2">Scripture</h3>
                <p class="text-gray-400 text-sm">Reading of God's Word</p>
            </div>
            
            <div class="text-center">
                <div class="w-16 h-16 rounded-full gold-gradient flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-comment text-white text-2xl"></i>
                </div>
                <h3 class="font-cinzel text-lg font-bold text-white mb-2">Message</h3>
                <p class="text-gray-400 text-sm">45-minute biblical sermon</p>
            </div>
        </div>
    </div>
</section>

<section class="py-24 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="font-cinzel text-3xl md:text-4xl font-bold text-gray-900 mb-6">First Time Visitor?</h2>
        <p class="text-gray-600 mb-8 max-w-2xl mx-auto">
            We're so glad you're considering joining us! When you arrive, our friendly greeters will welcome you and help you find your way. Feel free to grab a coffee and introduce yourself - we'd love to meet you!
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('frontend.contact') }}" class="px-8 py-4 rounded-full gold-gradient text-white font-semibold text-lg hover:opacity-90 transition-all">
                <i class="fas fa-question-circle mr-2"></i> Have Questions?
            </a>
            <a href="{{ route('frontend.contact') }}" class="px-8 py-4 rounded-full bg-white text-gray-700 font-semibold text-lg border border-gray-300 hover:bg-gray-50 transition-all">
                <i class="fas fa-map-marker-alt mr-2"></i> Get Directions
            </a>
        </div>
    </div>
</section>
@endsection