@extends('layouts.app')

@section('title', 'About Us - Thriving Lives Christian Counselling Center')

@section('content')
<header class="page-header text-center text-white d-flex align-items-center justify-content-center">
    <div class="container">
        <h1 class="display-4 fw-bold">About Thriving Lives</h1>
        <p class="lead">Our story, values, and the team behind our mission.</p>
    </div>
</header>

<section class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h2>Our History</h2>
                <p>{{ $aboutInfo['history'] }}</p>
            </div>
            <div class="col-lg-6">
                <img src="https://via.placeholder.com/500x300" class="img-fluid rounded shadow-sm" alt="Our Center">
            </div>
        </div>
    </div>
</section>

<section class="py-5 bg-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h3>Our Mission</h3>
                <p>{{ $aboutInfo['mission'] }}</p>
            </div>
            <div class="col-lg-6">
                <h3>Our Vision</h3>
                <p>{{ $aboutInfo['vision'] }}</p>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Our Core Values</h2>
        </div>
        <div class="row">
            @foreach($aboutInfo['values'] as $title => $description)
            <div class="col-md-4 text-center mb-4">
                <div class="p-4 shadow-sm rounded h-100">
                    <h4 class="text-primary">{{ $title }}</h4>
                    <p>{{ $description }}</p>
                </div>
            </div>
            @endforeach
        </div>
        <div class="text-center mt-4">
            <a href="{{ route('about.values') }}" class="btn btn-outline-primary">Learn More About Our Values</a>
        </div>
    </div>
</section>

<section class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Meet Our Team</h2>
            <p class="text-muted">The dedicated faculty and staff behind our success.</p>
        </div>
        <div class="row">
            @foreach($teamMembers->take(4) as $member)
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="card h-100 text-center shadow-sm team-card">
                    <img src="{{ $member->image ?? 'https://via.placeholder.com/200' }}" class="card-img-top" alt="{{ $member->name }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ $member->name }}</h5>
                        <p class="card-text text-primary">{{ $member->position }}</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="text-center mt-4">
            <a href="{{ route('about.team') }}" class="btn btn-primary">View All Team Members</a>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .page-header {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.pexels.com/photos/3183197/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center;
        background-size: cover;
        min-height: 40vh;
    }
    .team-card {
        transition: transform 0.2s;
    }
    .team-card:hover {
        transform: translateY(-5px);
    }
</style>
@endpush