@extends('layouts.app')

@section('title', 'Our Programs - 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">Our Programs</h1>
        <p class="lead">Explore our accredited counseling programs</p>
    </div>
</header>

<section class="py-5">
    <div class="container">
        @foreach($programs as $key => $program)
        <div class="card mb-4 shadow-sm">
            <div class="card-body">
                <h2 class="card-title">{{ $program['title'] }}</h2>
                <p class="text-muted">{{ $program['description'] }}</p>
                <ul class="list-inline">
                    <li class="list-inline-item"><strong>Duration:</strong> {{ $program['duration'] }}</li>
                    <li class="list-inline-item"><strong>Credits:</strong> {{ $program['credits'] }}</li>
                </ul>
                <a href="{{ route('programs.show', $key) }}" class="btn btn-primary">Learn More</a>
            </div>
        </div>
        @endforeach
    </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/1172207/pexels-photo-1172207.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center;
        background-size: cover;
        min-height: 40vh;
    }
</style>
@endpush