@extends('layouts.app')

@section('title', 'Resources - 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">Resources</h1>
        <p class="lead">Helpful articles and resources for your journey.</p>
    </div>
</header>

<section class="py-5">
    <div class="container">
        @foreach($resources as $resource)
        <div class="mb-5">
            <h3>{{ $resource['title'] }}</h3>
            <p class="text-muted">{{ $resource['description'] }}</p>
            <ul class="list-group">
                @foreach($resource['articles'] as $article)
                <li class="list-group-item">{{ $article }}</li>
                @endforeach
            </ul>
        </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://via.placeholder.com/1920x400') no-repeat center center;
        background-size: cover;
        min-height: 40vh;
    }
</style>
@endpush