@extends('layouts.frontend')
@section('title', 'About Us')

@section('content')
<section class="relative bg-gray-900 py-32">
    <div class="absolute inset-0 bg-black/40"></div>
    <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">
            {{ frontend_content('about_badge', 'Get to Know Us') }}
        </span>
        <h1 class="font-cinzel text-5xl md:text-6xl font-bold text-white mb-6">{{ frontend_content('about_title', 'About') }} {{ church_name() }}</h1>
        <p class="text-xl text-gray-300 max-w-2xl mx-auto">
            {{ frontend_content('about_subtitle', 'A community of faith, hope, and love dedicated to making disciples and serving 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="grid md:grid-cols-2 gap-12 items-center">
            <div>
                <img src="https://images.unsplash.com/photo-1529070538774-1843cb3265df?w=600" alt="Our Church" class="rounded-2xl shadow-xl">
            </div>
            <div>
                <span class="text-gold-600 font-semibold text-sm tracking-wider uppercase">{{ frontend_content('history_label', 'Our History') }}</span>
                <h2 class="font-cinzel text-4xl font-bold text-gray-900 mt-2 mb-6">{{ frontend_content('history_title', 'A Legacy of Faith') }}</h2>
                <p class="text-gray-600 mb-6 leading-relaxed">
                    {{ frontend_content('about_paragraph_1', "Grace Church was founded with a simple vision: to create a welcoming space where people could encounter God's love and grow in their faith. What began as a small Bible study group has grown into a vibrant congregation.") }}
                </p>
                <p class="text-gray-600 mb-6 leading-relaxed">
                    {{ frontend_content('about_paragraph_2', "Through the years, we've remained committed to our core values of authentic worship, biblical teaching, genuine community, and compassionate service. We believe that church should be a place where everyone feels at home.") }}
                </p>
                <div class="grid grid-cols-3 gap-6 mt-8">
                    <div class="text-center">
                        <div class="text-3xl font-cinzel font-bold text-gold-600">{{ frontend_content('about_members', '500+') }}</div>
                        <div class="text-gray-600 text-sm">Members</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-cinzel font-bold text-gold-600">{{ frontend_content('about_years', '50+') }}</div>
                        <div class="text-gray-600 text-sm">Years</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-cinzel font-bold text-gold-600">{{ frontend_content('about_ministries', '10+') }}</div>
                        <div class="text-gray-600 text-sm">Ministries</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<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">Our Values</span>
            <h2 class="font-cinzel text-4xl md:text-5xl font-bold text-gray-900 mt-2 mb-4">{{ frontend_content('values_title', 'What Drives Us') }}</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-8">
            <div class="card-hover p-6 rounded-2xl bg-white border border-gray-100 text-center">
                <div class="w-14 h-14 rounded-full gold-gradient flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-bible text-white text-xl"></i>
                </div>
                <h3 class="font-cinzel text-lg font-bold text-gray-900 mb-2">{{ frontend_content('value_1_title', 'Faith') }}</h3>
                <p class="text-gray-600 text-sm">{{ frontend_content('value_1_text', 'We build our lives and ministry on the unchanging truth of Scripture.') }}</p>
            </div>
            
            <div class="card-hover p-6 rounded-2xl bg-white border border-gray-100 text-center">
                <div class="w-14 h-14 rounded-full bg-gradient-to-br from-royal-500 to-royal-700 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-heart text-white text-xl"></i>
                </div>
                <h3 class="font-cinzel text-lg font-bold text-gray-900 mb-2">{{ frontend_content('value_2_title', 'Community') }}</h3>
                <p class="text-gray-600 text-sm">{{ frontend_content('value_2_text', 'We grow together in fellowship, supporting each other through life\'s journey.') }}</p>
            </div>
            
            <div class="card-hover p-6 rounded-2xl bg-white border border-gray-100 text-center">
                <div class="w-14 h-14 rounded-full bg-gradient-to-br from-gray-600 to-gray-800 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-hands-helping text-white text-xl"></i>
                </div>
                <h3 class="font-cinzel text-lg font-bold text-gray-900 mb-2">{{ frontend_content('value_3_title', 'Service') }}</h3>
                <p class="text-gray-600 text-sm">{{ frontend_content('value_3_text', 'We actively serve our community with the love of Christ.') }}</p>
            </div>
            
            <div class="card-hover p-6 rounded-2xl bg-white border border-gray-100 text-center">
                <div class="w-14 h-14 rounded-full bg-gradient-to-br from-green-500 to-green-700 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-seedling text-white text-xl"></i>
                </div>
                <h3 class="font-cinzel text-lg font-bold text-gray-900 mb-2">{{ frontend_content('value_4_title', 'Growth') }}</h3>
                <p class="text-gray-600 text-sm">{{ frontend_content('value_4_text', 'We pursue continuous spiritual growth and learning.') }}</p>
            </div>
        </div>
    </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">Leadership</span>
            <h2 class="font-cinzel text-4xl md:text-5xl font-bold text-gray-900 mt-2 mb-4">{{ frontend_content('leadership_title', 'Meet Our Team') }}</h2>
            <div class="w-24 h-1 gold-gradient mx-auto rounded-full"></div>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8">
            <div class="card-hover p-6 rounded-2xl bg-gray-50 text-center">
                <div class="w-32 h-32 rounded-full mx-auto mb-4 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200" alt="Senior Pastor" class="w-full h-full object-cover">
                </div>
                <h3 class="font-cinzel text-xl font-bold text-gray-900">{{ frontend_content('pastor_1_name', 'Rev. Dr. Michael Thompson') }}</h3>
                <p class="text-gold-600 font-medium mb-3">{{ frontend_content('pastor_1_role', 'Senior Pastor') }}</p>
                <p class="text-gray-600 text-sm">{{ frontend_content('pastor_1_bio', 'Leading with wisdom and compassion, Pastor Michael has served our church for over 15 years.') }}</p>
            </div>
            
            <div class="card-hover p-6 rounded-2xl bg-gray-50 text-center">
                <div class="w-32 h-32 rounded-full mx-auto mb-4 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200" alt="Worship Leader" class="w-full h-full object-cover">
                </div>
                <h3 class="font-cinzel text-xl font-bold text-gray-900">{{ frontend_content('pastor_2_name', 'Sarah Williams') }}</h3>
                <p class="text-gold-600 font-medium mb-3">{{ frontend_content('pastor_2_role', 'Worship Leader') }}</p>
                <p class="text-gray-600 text-sm">{{ frontend_content('pastor_2_bio', 'Guiding our congregation in passionate worship and praise.') }}</p>
            </div>
            
            <div class="card-hover p-6 rounded-2xl bg-gray-50 text-center">
                <div class="w-32 h-32 rounded-full mx-auto mb-4 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200" alt="Youth Pastor" class="w-full h-full object-cover">
                </div>
                <h3 class="font-cinzel text-xl font-bold text-gray-900">{{ frontend_content('pastor_3_name', 'David Johnson') }}</h3>
                <p class="text-gold-600 font-medium mb-3">{{ frontend_content('pastor_3_role', 'Youth Pastor') }}</p>
                <p class="text-gray-600 text-sm">{{ frontend_content('pastor_3_bio', 'Inspiring the next generation to grow in faith and leadership.') }}</p>
            </div>
        </div>
    </div>
</section>
@endsection