@extends('layouts.main')

@section('title', 'Ministries - Grace Family Church')
@section('meta_description', 'Explore ministries at Grace Family Church — Kids, Youth, Young Adults, Prayer, Music & Media, and Missions. Discover ways to serve and grow.')

@section('content')

<!-- HERO -->
<x-page-header section="header_ministries">
    <h1 class="display-4 fw-bold">Our Ministries</h1>
    <div class="section-divider" style="background: var(--gfc-accent);"></div>
    <p class="lead">Explore the different ways you can serve, grow, and connect through our ministries.</p>
</x-page-header>

<!-- MINISTRIES GRID -->
<section class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <p class="section-subtitle">
                At Grace Family Church, we have ministries for every age and interest.
                Our goal is to empower members to live out their faith, serve the community, and grow spiritually.
            </p>
        </div>

        <div class="row g-4">

            <div class="col-md-6 col-lg-4">
                <div class="ministry-card h-100">
                    <img src="/assets/images/kids_ministry.jpg" class="card-img-top" alt="Kids Ministry">
                    <div class="card-body d-flex flex-column">
                        <h5 class="fw-bold" style="color: var(--gfc-primary);">Kids Ministry</h5>
                        <p class="text-muted flex-grow-1">
                            Creating a fun, interactive environment where children explore Bible stories, learn values, and grow in faith.
                        </p>
                        <a href="{{ route('ministries.kids') }}" class="btn btn-gfc-secondary mt-2">
                            <i class="fas fa-arrow-right me-1"></i> Learn More
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="ministry-card h-100">
                    <img src="/assets/images/youth_ministry.jpg" class="card-img-top" alt="Youth Ministry">
                    <div class="card-body d-flex flex-column">
                        <h5 class="fw-bold" style="color: var(--gfc-primary);">Youth Ministry</h5>
                        <p class="text-muted flex-grow-1">
                            Empowering teenagers to grow spiritually, develop strong relationships, and take on leadership roles in the church and community.
                        </p>
                        <a href="{{ route('ministries.youth') }}" class="btn btn-gfc-secondary mt-2">
                            <i class="fas fa-arrow-right me-1"></i> Learn More
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="ministry-card h-100">
                    <img src="/assets/images/young_adults_ministry.jpg" class="card-img-top" alt="Young Adults Ministry">
                    <div class="card-body d-flex flex-column">
                        <h5 class="fw-bold" style="color: var(--gfc-primary);">Young Adults Ministry</h5>
                        <p class="text-muted flex-grow-1">
                            Connecting young adults through fellowship, Bible study, mentorship, and community service opportunities.
                        </p>
                        <a href="{{ route('ministries.youngAdults') }}" class="btn btn-gfc-secondary mt-2">
                            <i class="fas fa-arrow-right me-1"></i> Learn More
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="ministry-card h-100">
                    <img src="/assets/images/prayer_ministry.jpg" class="card-img-top" alt="Prayer Ministry">
                    <div class="card-body d-flex flex-column">
                        <h5 class="fw-bold" style="color: var(--gfc-primary);">Prayer Ministry</h5>
                        <p class="text-muted flex-grow-1">
                            A devoted team committed to interceding for the church, community, and individuals, fostering spiritual growth through prayer.
                        </p>
                        <a href="{{ route('ministries.prayer') }}" class="btn btn-gfc-secondary mt-2">
                            <i class="fas fa-arrow-right me-1"></i> Learn More
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="ministry-card h-100">
                    <img src="/assets/images/music_and_media_ministry.jpg" class="card-img-top" alt="Music & Media Ministry">
                    <div class="card-body d-flex flex-column">
                        <h5 class="fw-bold" style="color: var(--gfc-primary);">Music & Media Ministry</h5>
                        <p class="text-muted flex-grow-1">
                            Leading worship through music, managing sound and media, and producing impactful visual content for church services and events.
                        </p>
                        <a href="{{ route('ministries.musicMedia') }}" class="btn btn-gfc-secondary mt-2">
                            <i class="fas fa-arrow-right me-1"></i> Learn More
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="ministry-card h-100">
                    <img src="/assets/images/missions_ministry.jpg" class="card-img-top" alt="Missions Ministry">
                    <div class="card-body d-flex flex-column">
                        <h5 class="fw-bold" style="color: var(--gfc-primary);">Missions Ministry</h5>
                        <p class="text-muted flex-grow-1">
                            Mobilizing and supporting local and international mission projects, outreach programs, and community service initiatives.
                        </p>
                        <a href="{{ route('ministries.missions') }}" class="btn btn-gfc-secondary mt-2">
                            <i class="fas fa-arrow-right me-1"></i> Learn More
                        </a>
                    </div>
                </div>
            </div>

        </div>

        <!-- CTA -->
        <div class="cta-banner mt-5">
            <h4 class="mb-3">Want to Get Involved?</h4>
            <p class="mb-4">We'd love to help you find a ministry that's right for you. Reach out and we'll connect you with the right team.</p>
            <a href="{{ route('connect') }}" class="btn btn-gfc-primary btn-lg">
                <i class="fas fa-envelope me-2"></i> Contact Us
            </a>
        </div>
    </div>
</section>

@endsection