@extends('layouts.master')

@section('title', 'Our Pastors')

@section('content')
<section class="page-header text-center">
    <div class="container">
        <h1 class="display-4 fw-bold">Our Pastors</h1>
        <p class="lead" style="opacity: 0.9;">Meet the shepherds of Christ Apostolic Church Gambia</p>
    </div>
</section>

<section class="section-padding">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-10">
                <div class="service-card" style="border-radius: 20px;">
                    <div class="card-body p-5">
                        <div class="row align-items-center">
                            <div class="col-lg-4 text-center mb-4 mb-lg-0">
                                <img src="{{ asset('images/Picture1.jpg') }}" alt="Pastor Gideon Adeoye" class="rounded-circle mb-4" width="220" height="220" style="object-fit: cover; border: 6px solid var(--primary-color);">
                                <h3 class="mb-1">Pastor Gideon Ademola Adeoye</h3>
                                <p class="fw-bold mb-3" style="color: var(--primary-color);">Presiding Bishop</p>
                                <div class="d-flex justify-content-center gap-3">
                                    <a href="#" class="text-muted"><i class="fas fa-phone fa-lg"></i></a>
                                    <a href="#" class="text-muted"><i class="fas fa-envelope fa-lg"></i></a>
                                </div>
                            </div>
                            <div class="col-lg-8">
                                <h4 class="mb-3">Biography</h4>
                                <p class="text-muted">Pastor Gideon Ademola Adeoye is the Presiding Bishop of Christ Apostolic Church Gambia. With over 30 years of ministerial experience, he has led the church to great heights in Gambia.</p>
                                
                                <div class="row mt-4">
                                    <div class="col-md-6">
                                        <h5 class="mb-3"><i class="fas fa-graduation-cap me-2" style="color: var(--primary-color);"></i>Education</h5>
                                        <ul class="list-unstyled text-muted">
                                            <li class="mb-2">B.Sc. Computer Science, University of Ilorin (2014)</li>
                                            <li class="mb-0">Master of Divinity, Babcock University (2022)</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <h5 class="mb-3"><i class="fas fa-address-book me-2" style="color: var(--primary-color);"></i>Contact</h5>
                                        <ul class="list-unstyled text-muted">
                                            <li class="mb-2"><i class="fas fa-phone me-2"></i>+220 7900881</li>
                                            <li class="mb-0"><i class="fas fa-envelope me-2"></i>bishop@cacthegambia.com</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="mt-4 p-4" style="background: #f8f9fa; border-radius: 10px;">
                                    <h5 class="mb-2"><i class="fas fa-bullseye me-2" style="color: var(--primary-color);"></i>Vision</h5>
                                    <p class="text-muted mb-0">To produce saints that will be useful in the kingdom of God, touching lives through the power of the Holy Ghost, and winning souls for Christ in Gambia and beyond.</p>
                                </div>
                            </div>
                        </div>
                    </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">Our Team</span>
                <h2 class="section-title">Other Pastoral Staff</h2>
            </div>
        </div>
        <div class="row g-4 justify-content-center">
            @foreach($pastors as $index => $pastor)
                @if($index > 0)
                <div class="col-md-6 col-lg-4">
                    <div class="service-card card h-100">
                        <div class="card-body text-center p-4">
                            <img src="{{ asset('images/' . $pastor['image']) }}" alt="{{ $pastor['name'] }}" class="rounded-circle mb-3" width="120" height="120" style="object-fit: cover; border: 3px solid var(--primary-color);">
                            <h5 class="mb-1">{{ $pastor['name'] }}</h5>
                            <p class="fw-bold mb-2" style="color: var(--primary-color);">{{ $pastor['title'] }}</p>
                            <p class="text-muted small mb-3">{{ substr($pastor['bio'], 0, 100) }}...</p>
                            
                            <div class="border-top pt-3">
                                <p class="mb-1 small"><i class="fas fa-phone text-muted me-2"></i>{{ $pastor['phone'] }}</p>
                                <p class="mb-0 small"><i class="fas fa-envelope text-muted me-2"></i>{{ $pastor['email'] }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            @endforeach
        </div>
    </div>
</section>

<section class="section-padding text-center">
    <div class="container">
        <h2 class="mb-4">Contact Our Pastors</h2>
        <p class="text-muted mb-4">Our pastoral team is here to serve you. Reach out for prayer, counseling, or any pastoral care.</p>
        <a href="{{ route('contact') }}" class="btn btn-primary-custom btn-lg">Contact Us</a>
    </div>
</section>
@endsection
