@extends('layouts.main')

@section('title', 'Grace Family Church - Welcome Home')
@section('meta_description', 'Welcome to Grace Family Church in Plumstead, Cape Town. Join us for Sunday worship at 10:00 AM & 12:00 PM, Ignite young adults, and community.')

@section('content')

<!-- ===== HERO SECTION ===== -->
<section class="hero-section text-white text-center d-flex align-items-center">
    @include('partials.hero-slideshow', ['section' => 'home'])
    <div class="container">
        <p class="text-uppercase small fw-bold mb-3" style="letter-spacing: 3px; color: var(--gfc-accent);">Welcome to</p>
        <h1 class="display-3 fw-bold mb-3">{{ setting('brand.name', 'Grace Family Church') }}</h1>
        <p class="lead mb-2" style="max-width: 600px; margin: 0 auto;">
            {{ setting('brand.tagline', 'A place to encounter God, grow in community, and walk boldly in your calling.') }}
        </p>
        <p class="mb-4">
            <i class="fas fa-cross me-2" style="color: var(--gfc-accent);"></i>
            @if($sundayServices->count())
                Sundays: <strong>{{ $sundayServices->pluck('time_label')->filter()->join(' & ') }}</strong>
            @else
                Sundays: <strong>10:00 AM &amp; 12:00 PM</strong>
            @endif
            <span class="mx-2">|</span>
            <i class="fas fa-map-marker-alt me-2" style="color: var(--gfc-accent);"></i>
            {{ \Illuminate\Support\Str::before(setting('contact.address', '7 Burnham Rd, Plumstead, Cape Town, 7801'), ', Cape Town') }}
        </p>

        <div class="d-flex flex-wrap justify-content-center gap-3">
            <a href="{{ route('sermons') }}" class="btn btn-gfc-primary btn-lg">
                <i class="fas fa-play-circle me-2"></i> Watch Latest Sermons
            </a>
            <a href="{{ route('connect') }}" class="btn btn-gfc-outline-light btn-lg">
                <i class="fas fa-handshake me-2"></i> Connect With Us
            </a>
        </div>
    </div>
</section>


<!-- ===== SERVICE TIMES ===== -->
<section class="py-5 bg-light">
    <div class="container">

        <div class="text-center mb-5">
            <h2 class="section-title">Join Us This Week</h2>
            <div class="section-divider"></div>
            <p class="section-subtitle">
                We'd love to welcome you! Here are our regular gatherings where our church family comes together.
            </p>
        </div>

        <div class="row g-4">

            <!-- Sunday Services (dynamic, 2 per card) -->
            @forelse($sundayServices->chunk(2) as $chunk)
            <div class="col-lg-6">
                <div class="service-card h-100 p-4">
                    <div class="service-icon">
                        <i class="fas fa-cross"></i>
                    </div>
                    <h5 class="fw-bold mb-3">Sunday Services</h5>
                    @foreach($chunk as $svc)
                        <div class="@if(!$loop->first)border-top pt-3 mt-3 @endif">
                            <h6 class="fw-bold mb-1">{{ $svc->title }}</h6>
                            <p class="service-time mb-1">{{ $svc->day ? $svc->day.' • ' : '' }}{{ $svc->time_label }}</p>
                            @if($svc->description)<p class="mb-0 text-muted">{{ $svc->description }}</p>@endif
                            @if($svc->leader)<p class="small text-muted fst-italic mb-0">- Led by {{ $svc->leader }}</p>@endif
                        </div>
                    @endforeach
                </div>
            </div>
            @empty
            <div class="col-lg-6">
                <div class="service-card h-100 p-4">
                    <div class="service-icon"><i class="fas fa-cross"></i></div>
                    <h5 class="fw-bold mb-3">Sunday Services</h5>
                    <p class="text-muted mb-0">Join us on Sundays at 10:00 AM &amp; 12:00 PM for worship, teaching, and fellowship.</p>
                </div>
            </div>
            @endforelse

            <!-- Weekday Programs (dynamic, 2 per card) -->
            @forelse($weekdayServices->chunk(2) as $chunk)
            <div class="col-lg-6">
                <div class="service-card h-100 p-4">
                    <div class="service-icon">
                        <i class="fas fa-book-bible"></i>
                    </div>
                    <h5 class="fw-bold mb-3">Weekday Programs</h5>
                    @foreach($chunk as $svc)
                        <div class="@if(!$loop->first)border-top pt-3 mt-3 @endif">
                            <h6 class="fw-bold mb-1">{{ $svc->title }}</h6>
                            <p class="service-time mb-1">{{ $svc->day ? $svc->day.' • ' : '' }}{{ $svc->time_label }}</p>
                            @if($svc->description)<p class="mb-0 text-muted">{{ $svc->description }}</p>@endif
                            @if($svc->leader)<p class="small text-muted fst-italic mb-0">- Led by {{ $svc->leader }}</p>@endif
                        </div>
                    @endforeach
                </div>
            </div>
            @empty
            <div class="col-lg-6">
                <div class="service-card h-100 p-4">
                    <div class="service-icon"><i class="fas fa-book-bible"></i></div>
                    <h5 class="fw-bold mb-3">Weekday Programs</h5>
                    <p class="text-muted mb-0">Midweek gatherings and groups run throughout the week — get in touch to find one near you.</p>
                </div>
            </div>
            @endforelse

            <!-- Mission & Encouragement -->
            <div class="col-lg-6">
                <div class="service-card h-100 p-4">
                    <div class="service-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div class="mb-4">
                        <h5 class="fw-bold mb-1">Our Mission</h5>
                        <div class="scripture-block small">
                            "Go therefore and make disciples of all nations..." <br>
                            <span class="fw-bold">- Matthew 28:19-20 (ESV)</span>
                        </div>
                        <p class="mb-0 text-muted">
                            {{ setting('brand.mission', 'To help people encounter God, grow in community, and walk boldly in their God-given purpose.') }}
                        </p>
                    </div>
                    <hr>
                    <div>
                        <h5 class="fw-bold mb-1">{{ setting('home.encouragement_title', 'Daily Encouragement') }}</h5>
                        <div class="scripture-block small">
                            "{{ setting('home.encouragement_verse', 'Pray without ceasing.') }}" <br>
                            <span class="fw-bold">- {{ setting('home.encouragement_verse_ref', '1 Thessalonians 5:17 (ESV)') }}</span>
                        </div>
                        <p class="mb-0 text-muted">
                            {{ setting('home.encouragement_text', 'Take time each day to meditate on the Word of God.') }}
                        </p>
                    </div>
                </div>
            </div>

        </div>

        <!-- CTA -->
        <div class="cta-banner mt-5">
            <h4 class="mb-3">Looking to Join a Program but Unsure?</h4>
            <p class="mb-4">
                We welcome everyone! Our Sunday Services, Youth and Young Adults gatherings, and midweek Bible Studies are designed for spiritual growth and meaningful connections.
            </p>
            <a href="{{ route('connect') }}" class="btn btn-gfc-primary btn-lg">
                <i class="fas fa-envelope me-2"></i> Contact Us for Guidance
            </a>
        </div>

    </div>
</section>


<!-- ===== ABOUT SECTION ===== -->
<section class="py-5">
    <div class="container">
        <div class="row align-items-center g-5">

            <div class="col-lg-6">
                @if(($heroImages['home_about'] ?? collect())->count())
                    @include('partials.content-slideshow', [
                        'section' => 'home_about',
                        'class'   => 'shadow',
                        'style'   => 'aspect-ratio: 4 / 3;',
                    ])
                @else
                    <img src="/assets/images/gfc_home_about.jpg" class="img-fluid rounded shadow" alt="Grace Family Church family gathering" style="border-radius: 12px !important;" loading="lazy">
                @endif
            </div>

            <div class="col-lg-6">
                <h2 class="section-title">A Church for the Whole Family</h2>
                <div class="section-divider" style="margin-left: 0;"></div>

                <div class="scripture-block">
                    "As for me and my house, we will serve the Lord." <br>
                    <span class="fw-bold">- Joshua 24:15 (ESV)</span>
                </div>

                <p>
                    At Grace Family Church, we are a Christ-centered community committed to helping people know God deeply, grow in their faith, and live lives that make a meaningful difference in the world.
                </p>

                <p>
                    Whether you are exploring faith for the first time, returning after some time away, or have been walking with Christ for many years, there is a place for you here. From children and youth to adults and families, we create an environment where everyone can connect, learn, and grow together.
                </p>

                <a href="{{ route('about') }}" class="btn btn-gfc-secondary mt-2">
                    <i class="fas fa-info-circle me-1"></i> Learn More About Us
                </a>
            </div>

        </div>
    </div>
</section>


<!-- ===== MISSION STATEMENT ===== -->
<section class="py-5" style="background: linear-gradient(135deg, var(--gfc-primary) 0%, var(--gfc-secondary) 100%);">
    <div class="container text-center text-white">
        <i class="fas fa-dove fa-2x mb-3" style="color: var(--gfc-accent);"></i>
        <h2 class="mb-4 fw-bold">Our Mission</h2>
        <p class="lead mx-auto" style="max-width: 700px; color: rgba(255,255,255,0.9);">
            {{ setting('brand.mission', 'To help people encounter God, grow in community, and walk boldly in their God-given purpose.') }}
        </p>
    </div>
</section>


<!-- ===== LATEST SERMONS ===== -->
<section class="py-5">
    <div class="container">

        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
            <div>
                <h2 class="section-title mb-1">Latest Sermons</h2>
                <p class="text-muted mb-0">Watch our most recent teachings from Grace Family Church.</p>
            </div>
            <a href="{{ route('sermons') }}" class="btn btn-gfc-outline mt-2 mt-md-0">
                <i class="fas fa-th me-1"></i> Browse All Sermons
            </a>
        </div>

        <div class="row g-4">
            @if($sermons->count() > 0)
                @foreach($sermons as $sermon)
                <div class="col-md-4">
                    <div class="sermon-card h-100">
                        <div class="ratio ratio-16x9">
                            <iframe src="https://www.youtube.com/embed/{{ $sermon->youtube_id }}"
                                title="{{ $sermon->title }}"
                                loading="lazy"
                                allowfullscreen></iframe>
                        </div>
                        <div class="card-body p-3">
                            <h5 class="fw-bold mb-2">{{ $sermon->title }}</h5>
                            <p class="text-muted mb-2 small">
                                <i class="fas fa-user me-1" style="color: var(--gfc-accent);"></i> {{ $sermon->preacher }}
                                <span class="mx-1">|</span>
                                <i class="fas fa-book-open me-1" style="color: var(--gfc-accent);"></i> {{ $sermon->main_reading }}
                            </p>
                            <p class="text-muted small mb-3">
                                <i class="fas fa-calendar me-1" style="color: var(--gfc-accent);"></i>
                                {{ \Carbon\Carbon::parse($sermon->sermon_date)->format('j F Y') }}
                            </p>
                            <p class="small mb-3">{{ Str::limit($sermon->message, 120) }}</p>
                            <div class="text-center">
                                <a href="{{ $sermon->youtube_link }}" target="_blank" class="btn btn-gfc-secondary btn-sm">
                                    <i class="fab fa-youtube me-1"></i> Watch on YouTube
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            @else
                <div class="col-12 text-center text-muted py-4">
                    <i class="fas fa-video fa-2x mb-3" style="color: var(--gfc-accent);"></i>
                    <p class="mb-3">Our latest messages will appear here. In the meantime, catch up on our YouTube channel.</p>
                    @if(setting('social.youtube'))
                        <a href="{{ setting('social.youtube') }}" target="_blank" class="btn btn-gfc-secondary btn-sm">
                            <i class="fab fa-youtube me-1"></i> Watch on YouTube
                        </a>
                    @endif
                </div>
            @endif
        </div>

    </div>
</section>


<!-- ===== MINISTRIES ===== -->
<section class="py-5 bg-light">
    <div class="container">

        <div class="text-center mb-5">
            <h2 class="section-title">Our Ministries</h2>
            <div class="section-divider"></div>
            <p class="section-subtitle">Discover ways to serve, grow, and connect through our ministries.</p>
        </div>

        <div class="row g-4 text-center">
            <div class="col-md-3 col-6">
                <div class="service-card p-4 h-100">
                    <div class="service-icon mx-auto">
                        <i class="fas fa-child"></i>
                    </div>
                    <h6 class="fw-bold mb-2">Kids Ministry</h6>
                    <p class="small text-muted mb-0">Fun and safe environment for children to learn about Jesus.</p>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="service-card p-4 h-100">
                    <div class="service-icon mx-auto">
                        <i class="fas fa-fire"></i>
                    </div>
                    <h6 class="fw-bold mb-2">Youth Ministry</h6>
                    <p class="small text-muted mb-0">Helping teenagers grow in faith and friendships.</p>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="service-card p-4 h-100">
                    <div class="service-icon mx-auto">
                        <i class="fas fa-fire-flame-curved"></i>
                    </div>
                    <h6 class="fw-bold mb-2">Ignite (Young Adults)</h6>
                    <p class="small text-muted mb-0">A community for young adults (18–30) to grow and belong.</p>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="service-card p-4 h-100">
                    <div class="service-icon mx-auto">
                        <i class="fas fa-hands-helping"></i>
                    </div>
                    <h6 class="fw-bold mb-2">Serve Team</h6>
                    <p class="small text-muted mb-0">Use your gifts to serve the church and our community.</p>
                </div>
            </div>
        </div>

        <div class="text-center mt-4">
            <a href="{{ route('ministries.index') }}" class="btn btn-gfc-secondary btn-lg">
                <i class="fas fa-hands-helping me-2"></i> Explore Our Ministries
            </a>
        </div>

    </div>
</section>


<!-- ===== LIFE GROUPS ===== -->
<section class="py-5">
    <div class="container text-center">

        <h2 class="section-title">Life Happens in Circles, Not Rows</h2>
        <div class="section-divider"></div>

        <div class="row justify-content-center">
            <div class="col-lg-8">
                <p class="mt-3">
                    Life Groups are at the heart of our church community -- spaces where real connection, spiritual growth, and authentic support take place. In these smaller gatherings, you'll study God's Word, pray with others, share life's joys and challenges, and build lasting, meaningful relationships.
                </p>

                <div class="scripture-block text-start mx-auto" style="max-width: 500px;">
                    "And let us consider how to stir up one another to love and good works, not neglecting to meet together..." <br>
                    <span class="fw-bold">- Hebrews 10:24-25 (ESV)</span>
                </div>

                <a href="{{ route('community.lifegroups') }}" class="btn btn-gfc-outline mt-3">
                    <i class="fas fa-people-arrows me-1"></i> Find a Life Group
                </a>
            </div>
        </div>

    </div>
</section>

@endsection