@extends('layouts.master')

@section('title', 'Home')

@section('content')
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <span class="section-subtitle animate-fade" style="color: var(--accent-color);">Welcome to</span>
                <h1 class="animate-fade delay-1">Christ Apostolic Church Gambia</h1>
                <p class="lead animate-fade delay-2">A place where lives are transformed through God's love. Join us as we spread the gospel and make disciples of all nations.</p>
                <p class="animate-fade delay-2" style="opacity: 0.9; font-size: 1.1rem;">An arm of CAC Nigeria, Established 1918</p>
                <div class="mt-4 animate-fade delay-3">
                    <a href="{{ route('about') }}" class="btn btn-primary-custom me-3">Discover More</a>
                    <a href="{{ route('donation') }}" class="btn btn-outline-custom">Support Us</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-padding py-4" style="background: linear-gradient(135deg, var(--secondary-color), #0077b6);">
    <div class="container">
        <div class="row text-center text-white">
            <div class="col-md-4 mb-3 mb-md-0">
                <h5 class="mb-2"><i class="fas fa-bullseye me-2"></i>OUR VISION</h5>
                <p class="mb-0" style="opacity: 0.95;">Soul winning and spiritual re-awakening of the world!</p>
            </div>
            <div class="col-md-4 mb-3 mb-md-0">
                <h5 class="mb-2"><i class="fas fa-compass me-2"></i>OUR MISSION</h5>
                <p class="mb-0" style="opacity: 0.95;">Leading people into the knowledge of God through an in-depth study of The Word of God, prevailing prayer, and spiritual worship!</p>
            </div>
            <div class="col-md-4">
                <h5 class="mb-2"><i class="fas fa-heart me-2"></i>OUR MOTTO</h5>
                <p class="mb-0" style="opacity: 0.95;">One fold, One Shepherd (John 10:16)</p>
            </div>
        </div>
    </div>
</section>

<section class="section-padding">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="text-center mb-5">
                    <h2 class="section-title">Welcome Address</h2>
                    <h4 class="text-muted">You are welcome to Christ Apostolic Church, The Gambia</h4>
                </div>
                <div class="service-card" style="border-radius: 20px;">
                    <div class="card-body p-5">
                        <p class="lead mb-4">It is my greatest delight to welcome you to this new, soul-lifting and life changing website. While appreciating the painstaking care and patience our numerous members and friends of Christ Apostolic Church The Gambia and Overseas have exhibited to our old website, the management has seen the need and deemed it fit to re-design it to meet the modern day challenges of gospel propagation, having realized that the evolution of Information and Communications Technology is a modern tool to actualize the great commission of our Lord Jesus Christ.</p>
                        <p class="mb-4">Efforts have been made to preserve the heritage of Christ Apostolic Church by unearthing the profiles of the church patriarchs through the introductory page called About Us. Also, our numerous website visitors have the privilege of reaching the Church Authority with their comments through our Contact Us page. Be richly blessed as you join me to continue surfing this website from time to time in Jesus' name.</p>
                        <div class="text-end">
                            <p class="mb-0 fw-bold">D/S Pastor Gideon Adeoye</p>
                            <p class="text-muted mb-0">District Superintendent, CAC The Gambia</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-padding">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-12">
                <span class="section-subtitle">What We Offer</span>
                <h2 class="section-title">Join Us This Sunday</h2>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-church"></i>
                    </div>
                    <h4>Sunday Service</h4>
                    <p class="text-muted mb-0">10:00 AM</p>
                    <p class="text-muted">Join us for worship and word</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-book-bible"></i>
                    </div>
                    <h4>Bible Study</h4>
                    <p class="text-muted mb-0">Wednesday 5:00 PM</p>
                    <p class="text-muted">Dive deeper into God's word</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-pray"></i>
                    </div>
                    <h4>Prayer Meeting</h4>
                    <p class="text-muted mb-0">Friday 5:00 PM</p>
                    <p class="text-muted">Powerful prayer for our nation</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-padding" style="background-color: #f8f9fa;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <img src="https://images.unsplash.com/photo-1438232992991-995b7058bbb3?auto=format&fit=crop&w=800&q=80" alt="Church" class="img-fluid about-img">
            </div>
            <div class="col-lg-6 ps-lg-5">
                <span class="section-subtitle">About Us</span>
                <h2 class="section-title mb-4">Experience God's Presence</h2>
                <p class="text-muted mb-4">Christ Apostolic Church Gambia is an arm of CAC Nigeria, one of the oldest Pentecostal churches in Nigeria. Founded in 1918, we have been serving the Gambia community with the love of God for years.</p>
                <p class="text-muted mb-4">Our mission is to spread the gospel of Jesus Christ and make disciples of all nations. We welcome you to join our family and experience the transforming power of God's love.</p>
                <div class="row g-3 mb-4">
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-primary me-2 fs-5" style="color: var(--primary-color) !important;"></i>
                            <span>Sound Doctrine</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-primary me-2 fs-5" style="color: var(--primary-color) !important;"></i>
                            <span>Holy Living</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-primary me-2 fs-5" style="color: var(--primary-color) !important;"></i>
                            <span>Community</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-primary me-2 fs-5" style="color: var(--primary-color) !important;"></i>
                            <span>Excellence</span>
                        </div>
                    </div>
                </div>
                <a href="{{ route('about') }}" class="btn btn-primary-custom">Learn More About Us</a>
            </div>
        </div>
    </div>
</section>

<section class="stats-section">
    <div class="container">
        <div class="row">
            <div class="col-6 col-md-3">
                <div class="stat-item">
                    <div class="stat-number">5+</div>
                    <div class="stat-label">Branches</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-item">
                    <div class="stat-number">10+</div>
                    <div class="stat-label">Ministry Leaders</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-item">
                    <div class="stat-number">500+</div>
                    <div class="stat-label">Members</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-item">
                    <div class="stat-number">24+</div>
                    <div class="stat-label">Years in Gambia</div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-padding" style="background-color: #f8f9fa;">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-12">
                <span class="section-subtitle">Get Involved</span>
                <h2 class="section-title">Our Ministries</h2>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="cause-card">
                    <div class="card-body text-center py-4">
                        <div class="feature-icon d-inline-flex">
                            <i class="fas fa-child"></i>
                        </div>
                        <h4 class="mt-3">Children Ministry</h4>
                        <p class="text-muted">Nurturing the faith of our children through biblical teaching.</p>
                        <a href="{{ route('department.show', 'children-ministry') }}" class="btn btn-sm" style="background: var(--primary-color); color: white;">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="cause-card">
                    <div class="card-body text-center py-4">
                        <div class="feature-icon d-inline-flex">
                            <i class="fas fa-users"></i>
                        </div>
                        <h4 class="mt-3">Youth Ministry</h4>
                        <p class="text-muted">Empowering young people to become leaders in their communities.</p>
                        <a href="{{ route('department.show', 'youth-ministry') }}" class="btn btn-sm" style="background: var(--primary-color); color: white;">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="cause-card">
                    <div class="card-body text-center py-4">
                        <div class="feature-icon d-inline-flex">
                            <i class="fas fa-hands-helping"></i>
                        </div>
                        <h4 class="mt-3">Welfare Ministry</h4>
                        <p class="text-muted">Caring for the physical needs of church and community.</p>
                        <a href="{{ route('department.show', 'welfare-ministry') }}" class="btn btn-sm" style="background: var(--primary-color); color: white;">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center mt-5">
            <a href="{{ route('departments') }}" class="btn btn-secondary-custom">View All Ministries</a>
        </div>
    </div>
</section>

<section class="section-padding">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-12">
                <span class="section-subtitle">Visit Us</span>
                <h2 class="section-title">Our Branches</h2>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-md-6 col-lg-4">
                <div class="cause-card">
                    <div class="card-body">
                        <h5><i class="fas fa-map-marker-alt me-2" style="color: var(--primary-color);"></i>National Headquarters</h5>
                        <p class="text-muted mb-0">Buffa Zone Area, Tallinding, The Gambia</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="cause-card">
                    <div class="card-body">
                        <h5><i class="fas fa-map-marker-alt me-2" style="color: var(--primary-color);"></i>Lamin Branch</h5>
                        <p class="text-muted mb-0">Lamin, The Gambia</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="cause-card">
                    <div class="card-body">
                        <h5><i class="fas fa-map-marker-alt me-2" style="color: var(--primary-color);"></i>Sandally Branch</h5>
                        <p class="text-muted mb-0">Sandally Village, Kombo South</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="cause-card">
                    <div class="card-body">
                        <h5><i class="fas fa-map-marker-alt me-2" style="color: var(--primary-color);"></i>Jaikopama Branch</h5>
                        <p class="text-muted mb-0">Jaikopama, The Gambia</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="cause-card">
                    <div class="card-body">
                        <h5><i class="fas fa-map-marker-alt me-2" style="color: var(--primary-color);"></i>Prayer Camp Ground</h5>
                        <p class="text-muted mb-0">Mayama Village, The Gambia</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center mt-5">
            <a href="{{ route('branches') }}" class="btn btn-primary-custom">View All Branches</a>
        </div>
    </div>
</section>

<section class="section-padding" style="background: linear-gradient(135deg, var(--primary-color), #ff8f5e);">
    <div class="container text-center text-white">
        <h2 class="mb-4">Have Questions? We'd Love to Hear From You</h2>
        <p class="mb-4 fs-5" style="opacity: 0.95;">Reach out to us for prayer, counseling, or more information about our church.</p>
        <a href="{{ route('contact') }}" class="btn btn-light btn-lg px-5" style="border-radius: 50px; font-weight: 600;">Contact Us Today</a>
    </div>
</section>
@endsection
