@extends('layouts.main')

@section('title', 'About Us - Grace Family Church')
@section('meta_description', 'Learn about Grace Family Church - our mission, what we believe, and our church family. A vibrant, multi-generational community in Plumstead, Cape Town.')

@section('content')

<!-- HERO / PAGE HEADER -->
<x-page-header section="header_about">
    <h1 class="display-4 fw-bold">About Us</h1>
    <div class="section-divider" style="background: var(--gfc-accent);"></div>
    <p class="lead">Learn about our beliefs, mission, and community life.</p>
    <a href="{{ route('sermons') }}" class="btn btn-gfc-primary btn-lg mt-3">
        <i class="fas fa-play-circle me-1"></i> Watch Sermons
    </a>
</x-page-header>

<!-- OUR MISSION -->
<section class="py-5">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-7">
                <h2 class="section-title">Our Mission</h2>
                <div class="section-divider" style="margin-left: 0;"></div>
                <p class="lead" style="color: var(--gfc-secondary);">
                    {{ setting('brand.mission', 'To help people encounter God, grow in community, and walk boldly in their God-given purpose.') }}
                </p>
                <p>
                    Founded in 2006, {{ setting('brand.name', 'Grace Family Church') }} is a vibrant, multi-generational
                    community of believers passionate about Jesus Christ. We believe church is more than a Sunday service —
                    it's a family where everyone belongs. We aim to create an environment where you can be yourself,
                    ask questions, and grow in your relationship with Jesus.
                </p>
            </div>
            <div class="col-lg-5 text-center">
                <div class="cta-banner">
                    <i class="fas fa-dove fa-2x mb-3" style="color: var(--gfc-accent);"></i>
                    <h5 class="fw-bold">Our Vision</h5>
                    <p class="small mb-0">To be a Christ-centered community where every person can encounter God, grow in faith, and serve with purpose.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- TEACHES & PRACTICES -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="section-title">What We Teach & Practice</h2>
            <div class="section-divider"></div>
            <p class="section-subtitle">
                Our church is grounded in Biblical teaching, prayer, worship, and community life.
            </p>
        </div>

        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="service-card p-4 text-center h-100">
                    <div class="service-icon mx-auto">
                        <i class="fas fa-book-bible"></i>
                    </div>
                    <h6 class="fw-bold">Biblical Teaching</h6>
                    <p class="small text-muted mb-0">Sermons and studies grounded in Scripture and relevant to everyday life.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="service-card p-4 text-center h-100">
                    <div class="service-icon mx-auto">
                        <i class="fas fa-pray"></i>
                    </div>
                    <h6 class="fw-bold">Prayer & Guidance</h6>
                    <p class="small text-muted mb-0">Prayer groups and spiritual guidance for every season of life.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="service-card p-4 text-center h-100">
                    <div class="service-icon mx-auto">
                        <i class="fas fa-hands-helping"></i>
                    </div>
                    <h6 class="fw-bold">Community Service</h6>
                    <p class="small text-muted mb-0">Outreach programs that serve our community with love and compassion.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="service-card p-4 text-center h-100">
                    <div class="service-icon mx-auto">
                        <i class="fas fa-music"></i>
                    </div>
                    <h6 class="fw-bold">Worship</h6>
                    <p class="small text-muted mb-0">Active participation in worship and sacraments that draw us closer to God.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- WHAT WE BELIEVE -->
<section class="py-5">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <h2 class="section-title">What We Believe</h2>
                <div class="section-divider" style="margin-left: 0;"></div>
                <p>We are a Bible-believing family church. We hold firmly to these core convictions:</p>

                <div class="row g-3 mt-2">
                    <div class="col-12">
                        <div class="d-flex align-items-start">
                            <span class="me-3 mt-1" style="color: var(--gfc-accent); font-size: 1.1rem;"><i class="fas fa-check-circle"></i></span>
                            <div>
                                <strong>Authority of Scripture</strong>
                                <p class="small text-muted mb-0">The Bible as the ultimate guide for faith and practice.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex align-items-start">
                            <span class="me-3 mt-1" style="color: var(--gfc-accent); font-size: 1.1rem;"><i class="fas fa-check-circle"></i></span>
                            <div>
                                <strong>Believer's Baptism</strong>
                                <p class="small text-muted mb-0">Personal confession of faith and baptism by immersion.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex align-items-start">
                            <span class="me-3 mt-1" style="color: var(--gfc-accent); font-size: 1.1rem;"><i class="fas fa-check-circle"></i></span>
                            <div>
                                <strong>Local Church Autonomy</strong>
                                <p class="small text-muted mb-0">Democratic governance of the local church under Christ's headship.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex align-items-start">
                            <span class="me-3 mt-1" style="color: var(--gfc-accent); font-size: 1.1rem;"><i class="fas fa-check-circle"></i></span>
                            <div>
                                <strong>Priesthood of All Believers</strong>
                                <p class="small text-muted mb-0">Every believer has direct access to God through Christ.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex align-items-start">
                            <span class="me-3 mt-1" style="color: var(--gfc-accent); font-size: 1.1rem;"><i class="fas fa-check-circle"></i></span>
                            <div>
                                <strong>Evangelism & Missions</strong>
                                <p class="small text-muted mb-0">Sharing the Gospel locally and globally through word and deed.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="scripture-block p-4 rounded" style="background: var(--gfc-light-bg);">
                    <i class="fas fa-quote-left fa-2x mb-3" style="color: var(--gfc-accent); opacity: 0.3;"></i>
                    <p class="lead fst-italic" style="color: var(--gfc-primary);">
                        "All Scripture is breathed out by God and profitable for teaching, for reproof, for correction, and for training in righteousness, that the man of God may be complete, equipped for every good work."
                    </p>
                    <p class="fw-bold mb-0" style="color: var(--gfc-accent);">- 2 Timothy 3:16-17 (ESV)</p>
                </div>
            </div>
        </div>
    </div>
</section>

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

        <div class="text-center mb-5">
            <h2 class="section-title">Church Leadership</h2>
            <div class="section-divider"></div>
            <p class="section-subtitle">
                Our elders and leaders are here to serve. Feel free to reach out for prayer, guidance, or any church-related matter.
            </p>
        </div>

        @foreach($leadershipTeams as $team)
            @continue($team->leaders->isEmpty())
            <div class="mb-5">
                <div class="text-center mb-4">
                    <h3 class="fw-bold" style="color: var(--gfc-primary);">{{ $team->title }}</h3>
                    @if($team->subtitle)<p class="text-uppercase small fw-bold mb-2" style="letter-spacing:2px; color: var(--gfc-accent);">{{ $team->subtitle }}</p>@endif
                    @if($team->description)<p class="section-subtitle mx-auto">{{ $team->description }}</p>@endif
                </div>

                <div class="row justify-content-center g-4">
                    @foreach($team->leaders as $p)
                        <div class="col-sm-6 col-lg-4 col-xl-3">
                            <div class="leader-person h-100">
                                <div class="leader-person-photo">
                                    @if($p->imageUrl())
                                        <img src="{{ $p->imageUrl() }}" alt="{{ $p->name }}" loading="lazy">
                                    @else
                                        <span class="leader-person-initials">{{ $p->initials() }}</span>
                                    @endif
                                </div>
                                <h5 class="leader-person-name">{{ $p->name }}</h5>
                                @if($p->role)<p class="leader-person-role">{{ $p->role }}</p>@endif
                                <div class="leader-person-contacts">
                                    @if($p->phone)<a href="tel:{{ preg_replace('/[^0-9+]/', '', $p->phone) }}"><i class="fas fa-phone"></i> {{ $p->phone }}</a>@endif
                                    @if($p->email)<a href="mailto:{{ $p->email }}"><i class="fas fa-envelope"></i> {{ $p->email }}</a>@endif
                                </div>
                                @if($p->whatsapp)
                                    <a href="https://wa.me/{{ $p->whatsapp }}" target="_blank" rel="noopener" class="btn btn-sm leader-person-wa">
                                        <i class="fab fa-whatsapp me-1"></i> Message on WhatsApp
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach

        <!-- Get in Touch CTA -->
        <div class="leader-cta text-center">
            <i class="fas fa-hands-helping fa-2x mb-3" style="color: var(--gfc-accent);"></i>
            <h4 class="fw-bold mb-2" style="color: var(--gfc-primary);">Get in Touch</h4>
            <p class="text-muted mb-3 mx-auto" style="max-width:560px;">Have a question, need prayer, or want to connect with one of our leaders? We'd love to hear from you.</p>
            <a href="{{ route('connect') }}" class="btn btn-gfc-primary"><i class="fas fa-envelope me-1"></i> Contact Us</a>
        </div>

    </div>
</section>

<!-- OUR FACILITIES -->
<section class="py-5">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-5">
                @if(($heroImages['about_visit'] ?? collect())->count())
                    @include('partials.content-slideshow', [
                        'section' => 'about_visit',
                        'style'   => 'aspect-ratio: auto; height: 380px; border-bottom: 4px solid var(--gfc-accent);',
                    ])
                @else
                    <img src="{{ asset('assets/images/church-facilities.jpg') }}"
                         alt="Church property and grounds"
                         class="img-fluid rounded shadow-lg"
                         style="border-bottom: 4px solid var(--gfc-accent);"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="d-none align-items-center justify-content-center rounded shadow-lg"
                         style="height: 380px; background: linear-gradient(135deg, var(--gfc-primary), var(--gfc-secondary)); border-bottom: 4px solid var(--gfc-accent);">
                        <div class="text-center text-white">
                            <i class="fas fa-church fa-4x mb-3" style="opacity: 0.4;"></i>
                            <p class="fw-semibold mb-0" style="opacity: 0.6;">Church Facilities Photo</p>
                        </div>
                    </div>
                @endif
            </div>

            <div class="col-lg-7">
                <h2 class="section-title">What to Expect When You Visit</h2>
                <div class="section-divider" style="margin-left: 0;"></div>
                <p class="text-muted mb-4">We want your visit to be as comfortable and welcoming as possible. Here's what our property has to offer:</p>

                <div class="row g-3">
                    <div class="col-12">
                        <div class="d-flex align-items-start p-3 rounded" style="background: var(--gfc-light-bg); border-left: 3px solid var(--gfc-accent);">
                            <div class="me-3 mt-1" style="min-width: 36px; height: 36px; background: var(--gfc-accent-light); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-parking" style="color: var(--gfc-accent);"></i>
                            </div>
                            <div>
                                <strong style="color: var(--gfc-primary);">Parking</strong>
                                <p class="small text-muted mb-0">On-site parking is available, including clearly marked visitor and disabled bays close to the hall entrance.</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="d-flex align-items-start p-3 rounded" style="background: var(--gfc-light-bg); border-left: 3px solid var(--gfc-accent);">
                            <div class="me-3 mt-1" style="min-width: 36px; height: 36px; background: var(--gfc-accent-light); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-baby" style="color: var(--gfc-accent);"></i>
                            </div>
                            <div>
                                <strong style="color: var(--gfc-primary);">Cry Room</strong>
                                <p class="small text-muted mb-0">A small but comfortable cry room is available for parents with babies and toddlers, with audio from the service so you can still follow along.</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="d-flex align-items-start p-3 rounded" style="background: var(--gfc-light-bg); border-left: 3px solid var(--gfc-accent);">
                            <div class="me-3 mt-1" style="min-width: 36px; height: 36px; background: var(--gfc-accent-light); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-mug-hot" style="color: var(--gfc-accent);"></i>
                            </div>
                            <div>
                                <strong style="color: var(--gfc-primary);">Refreshments</strong>
                                <p class="small text-muted mb-0">Tea and coffee are usually served after the morning service — a good opportunity to meet people and ask questions.</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="d-flex align-items-start p-3 rounded" style="background: var(--gfc-light-bg); border-left: 3px solid var(--gfc-accent);">
                            <div class="me-3 mt-1" style="min-width: 36px; height: 36px; background: var(--gfc-accent-light); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-wheelchair" style="color: var(--gfc-accent);"></i>
                            </div>
                            <div>
                                <strong style="color: var(--gfc-primary);">Accessibility</strong>
                                <p class="small text-muted mb-0">The main hall is on one level with ramp access from the parking area. If you have specific accessibility needs, please chat to a steward on arrival.</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="d-flex align-items-start p-3 rounded" style="background: var(--gfc-light-bg); border-left: 3px solid var(--gfc-accent);">
                            <div class="me-3 mt-1" style="min-width: 36px; height: 36px; background: var(--gfc-accent-light); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-tree" style="color: var(--gfc-accent);"></i>
                            </div>
                            <div>
                                <strong style="color: var(--gfc-primary);">Garden & Play Area</strong>
                                <p class="small text-muted mb-0">We are blessed to have a large and beautiful property, with open grassy space and play equipment for children to use after the service.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection