@extends('site.layout')

@section('title', $home['title'] ?? $ui['brand'])

@section('content')
    @php
        $statIcons = ['users-round', 'home', 'graduation-cap', 'badge-check'];
        $departmentIcons = ['scale', 'book-open-text', 'languages', 'book-marked', 'blocks', 'school', 'microscope', 'monitor'];
        $serviceIcons = ['bed', 'stethoscope', 'flask-conical', 'dumbbell', 'database', 'mic-2'];
        $mediaBase = 'images/madrasa/optimized/';
        $heroSlides = [
            ['image' => 'campus.jpg', 'title' => $home['title'], 'caption' => $home['lead']],
            ['image' => 'study-hall.jpg', 'title' => $home['departments_title'], 'caption' => $home['intro_body']],
            ['image' => 'students-line.jpg', 'title' => $home['services_title'], 'caption' => $home['services_body']],
        ];
        $departmentImages = ['study-hall.jpg', 'arabic-institute.jpg', 'lesson.jpg', 'gathering.jpg', 'classroom.jpg', 'campus.jpg', 'library.jpg', 'courtyard.jpg'];
    @endphp

    <section class="hero">
        <section class="hero-slider" data-hero-slider data-interval="6800" aria-label="{{ $home['title'] }}">
            <div class="hero-slider__track">
                @foreach ($heroSlides as $slide)
                    <figure class="hero-slide @if($loop->first) is-active @endif" data-hero-slide aria-hidden="{{ $loop->first ? 'false' : 'true' }}">
                        <img src="{{ asset($mediaBase . $slide['image']) }}" alt="{{ $slide['title'] }}" @if($loop->first) fetchpriority="high" @else loading="lazy" @endif>
                        <figcaption>
                            <span>{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                            <strong>{{ $slide['title'] }}</strong>
                            <small>{{ $slide['caption'] }}</small>
                        </figcaption>
                    </figure>
                @endforeach
            </div>
            <div class="hero-slider__controls">
                <button type="button" data-hero-prev aria-label="Previous slide"><i data-lucide="chevron-left" aria-hidden="true"></i></button>
                <div class="hero-slider__dots" aria-label="Slider navigation">
                    @foreach ($heroSlides as $slide)
                        <button type="button" data-hero-dot @class(['is-active' => $loop->first]) aria-label="Slide {{ $loop->iteration }}" aria-current="{{ $loop->first ? 'true' : 'false' }}"></button>
                    @endforeach
                </div>
                <button type="button" data-hero-next aria-label="Next slide"><i data-lucide="chevron-right" aria-hidden="true"></i></button>
            </div>
            <span class="hero-slider__progress" aria-hidden="true"><span data-hero-progress></span></span>
        </section>

        <div class="container hero__grid">
            <div class="hero__copy">
                <p class="hero__eyebrow"><i data-lucide="sparkles" aria-hidden="true"></i> {{ $home['eyebrow'] }}</p>
                <h1>{{ $home['title'] }}</h1>
                <p class="hero__lead">{{ $home['lead'] }}</p>
                <div class="hero__actions">
                    <a class="btn btn-primary" href="{{ route('admissions') }}"><i data-lucide="book-open-check" aria-hidden="true"></i> {{ $home['primary'] }}</a>
                    <a class="btn btn-ghost" href="{{ route('darul-ifta') }}"><i data-lucide="messages-square" aria-hidden="true"></i> {{ $home['secondary'] }}</a>
                </div>
                <div class="hero__stats">
                    @foreach ($stats as $stat)
                        <div>
                            <i data-lucide="{{ $statIcons[$loop->index] }}" aria-hidden="true"></i>
                            <strong>{{ $stat['value'] }}</strong>
                            <span>{{ $stat['label'] }}</span>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="hero__visual" aria-label="جامعه ریاض العلوم کابل">
                @include('site.partials.prayer-widget')
            </div>
        </div>
    </section>

    <section class="intro-band">
        <div class="container intro-band__grid">
            <div>
                <span class="section-kicker">{{ $home['intro_kicker'] }}</span>
                <h2>{{ $home['intro_title'] }}</h2>
            </div>
            <p>{{ $home['intro_body'] }}</p>
            <figure class="intro-photo">
                <img src="{{ asset($mediaBase . 'courtyard.jpg') }}" alt="{{ $home['intro_title'] }}" loading="lazy">
            </figure>
        </div>
    </section>

    <section class="section-pad" id="departments">
        <div class="container">
            <div class="section-heading">
                <span class="section-kicker">{{ $home['departments_kicker'] }}</span>
                <h2>{{ $home['departments_title'] }}</h2>
                <a href="{{ route('departments') }}">{{ $home['departments_link'] }} <i data-lucide="arrow-up-left" aria-hidden="true"></i></a>
            </div>

            <div class="department-grid">
                @foreach ($departments as $department)
                    <article class="department-card" style="--i: {{ $loop->index }}">
                        <figure class="department-card__media">
                            <img src="{{ asset($mediaBase . $departmentImages[$loop->index % count($departmentImages)]) }}" alt="{{ $department['title'] }}" loading="lazy">
                        </figure>
                        <i data-lucide="{{ $departmentIcons[$loop->index] }}" aria-hidden="true"></i>
                        <span>{{ $department['meta'] }}</span>
                        <h3>{{ $department['title'] }}</h3>
                        <p>{{ $department['summary'] }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="section-pad section-pad--light">
        <div class="container split-section">
            <div class="split-section__copy">
                <span class="section-kicker">{{ $home['services_kicker'] }}</span>
                <h2>{{ $home['services_title'] }}</h2>
                <p>{{ $home['services_body'] }}</p>
                <figure class="service-showcase">
                    <img src="{{ asset($mediaBase . 'residence.jpg') }}" alt="{{ $home['services_title'] }}" loading="lazy">
                    <figcaption>{{ $home['services_kicker'] }}</figcaption>
                </figure>
                <a class="btn btn-primary" href="{{ route('about') }}"><i data-lucide="landmark" aria-hidden="true"></i> {{ $home['about_link'] }}</a>
            </div>

            <div class="service-list">
                @foreach ($services as $service)
                    <article>
                        <i data-lucide="{{ $serviceIcons[$loop->index] }}" aria-hidden="true"></i>
                        <div>
                            <h3>{{ $service['title'] }}</h3>
                            <p>{{ $service['body'] }}</p>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="section-pad">
        <div class="container feature-columns">
            <div class="fatwa-panel">
                <div class="section-heading section-heading--compact">
                    <div>
                        <span class="section-kicker">{{ $home['ifta_kicker'] }}</span>
                        <h2>{{ $home['ifta_title'] }}</h2>
                    </div>
                    <a href="{{ route('darul-ifta') }}">{{ $home['more'] }} <i data-lucide="arrow-up-left" aria-hidden="true"></i></a>
                </div>
                <figure class="panel-media">
                    <img src="{{ asset($mediaBase . 'gathering.jpg') }}" alt="{{ $home['ifta_title'] }}" loading="lazy">
                </figure>
                <div class="question-list">
                    @foreach ($fatwas as $fatwa)
                        <a href="{{ route('darul-ifta') }}">
                            <span>{{ $fatwa['category'] }}</span>
                            <strong>{{ $fatwa['title'] }}</strong>
                            <small>{{ $fatwa['date'] }}</small>
                        </a>
                    @endforeach
                </div>
            </div>

            <div class="publication-panel">
                <div class="section-heading section-heading--compact">
                    <div>
                        <span class="section-kicker">{{ $home['publications_kicker'] }}</span>
                        <h2>{{ $home['publications_title'] }}</h2>
                    </div>
                    <a href="{{ route('publications') }}">{{ $home['more'] }} <i data-lucide="arrow-up-left" aria-hidden="true"></i></a>
                </div>
                <figure class="panel-media panel-media--small">
                    <img src="{{ asset($mediaBase . 'library.jpg') }}" alt="{{ $home['publications_title'] }}" loading="lazy">
                </figure>
                <div class="publication-stack">
                    @foreach ($publications as $publication)
                        <article>
                            <i data-lucide="scroll-text" aria-hidden="true"></i>
                            <span>{{ $publication['type'] }}</span>
                            <h3>{{ $publication['title'] }}</h3>
                            <p>{{ $publication['caption'] }}</p>
                        </article>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <section class="goals">
        <div class="container goals__grid">
            <div>
                <span class="section-kicker">{{ $home['goals_kicker'] }}</span>
                <h2>{{ $home['goals_title'] }}</h2>
                <figure class="goals__photo">
                    <img src="{{ asset($mediaBase . 'classroom.jpg') }}" alt="{{ $home['goals_title'] }}" loading="lazy">
                </figure>
            </div>
            <ol>
                @foreach ($goals as $goal)
                    <li>{{ $goal }}</li>
                @endforeach
            </ol>
        </div>
    </section>
@endsection
