@extends('layouts.app')

@section('title', 'Our Team - 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">Meet Our Team</h1>
        <p class="lead">Our dedicated faculty and staff.</p>
    </div>
</header>

<section class="py-5">
    <div class="container">
        <div class="row">
            @forelse($teamMembers as $member)
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100 shadow-sm text-center team-card">
                    <img src="{{ $member->image ?? 'https://via.placeholder.com/250' }}" class="card-img-top" alt="{{ $member->name }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ $member->name }}</h5>
                        <h6 class="card-subtitle mb-2 text-primary">{{ $member->position }}</h6>
                        <p class="card-text text-muted">{{ $member->bio }}</p>
                        <p class="card-text"><strong>Credentials:</strong> {{ $member->credentials }}</p>
                        <p class="card-text"><strong>Specializations:</strong> {{ $member->specializations }}</p>
                    </div>
                </div>
            </div>
            @empty
            <p>Team member information is not available at the moment.</p>
            @endforelse
        </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/3184418/pexels-photo-3184418.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