@extends('site.layout')

@section('title', $title . ' | ' . $ui['brand'])

@section('content')
    @php($detailImages = ['study-hall.jpg', 'arabic-institute.jpg', 'lesson.jpg', 'gathering.jpg', 'classroom.jpg', 'campus.jpg', 'library.jpg', 'courtyard.jpg'])

    <section class="page-hero">
        <div class="container page-hero__grid">
            <div>
                <span class="section-kicker">{{ $eyebrow }}</span>
                <h1>{{ $title }}</h1>
                <p>{{ $intro }}</p>
            </div>
            <figure class="page-hero__media">
                <img src="{{ asset('images/madrasa/optimized/study-hall.jpg') }}" alt="{{ $title }}">
            </figure>
        </div>
    </section>

    <section class="section-pad">
        <div class="container department-detail">
            @foreach ($items as $item)
                <article>
                    <figure class="department-detail__media">
                        <img src="{{ asset('images/madrasa/optimized/' . $detailImages[$loop->index % count($detailImages)]) }}" alt="{{ $item['title'] }}" loading="lazy">
                    </figure>
                    <div>
                        <span>{{ $item['meta'] }}</span>
                        <h2>{{ $item['title'] }}</h2>
                    </div>
                    <p>{{ $item['summary'] }}</p>
                </article>
            @endforeach
        </div>
    </section>
@endsection
