@extends('frontend-v3.pages.layout')

@section('page')
    @include('frontend-v3.about.partials.styles')
    @php($gallery = $project['gallery'] ?? [])
    <div class="about-story story-detail--project" data-skip-entry-animation>
        @include('frontend-v3.about.partials.hero', [
            'heroTitle' => $project['title'], 'heroEyebrow' => 'Flagship Project',
            'heroImage' => $project['image'], 'heroSummary' => null,
            'parentTitle' => 'Flagship Projects', 'parentUrl' => url('/about/flagship-projects'),
            'heroLinkLabel' => 'the project',
        ])
        <div class="story-project-detail" id="story-content">
            <div class="container story-project-detail-grid">
                <nav class="story-section-nav" aria-label="Project sections">
                    <span class="story-eyebrow">In this project</span>
                    @foreach ($project['sections'] as $section)
                        <a href="#project-section-{{ $loop->index }}">{{ $section['heading'] }}</a>
                    @endforeach
                    @if ($gallery)
                        <a href="#project-gallery">Gallery</a>
                    @endif
                </nav>
                <div class="story-project-sections">
                    @foreach ($project['sections'] as $section)
                        <section class="story-project-section story-copy" id="project-section-{{ $loop->index }}" aria-labelledby="project-heading-{{ $loop->index }}" data-story-reveal>
                            <h2 id="project-heading-{{ $loop->index }}">{{ $section['heading'] }}</h2>
                            @foreach ($section['paragraphs'] as $paragraph)
                                <p data-story-paragraph>{{ $paragraph }}</p>
                            @endforeach
                        </section>
                    @endforeach
                </div>
            </div>
        </div>

        @if ($gallery)
            {{-- Photo gallery; zoom/lightbox behaviour lives in about/partials/scripts (initStoryLightbox) so it survives About AJAX navigation. --}}
            <section class="story-gallery-section" id="project-gallery" aria-labelledby="project-gallery-title">
                <div class="container">
                    <div class="story-gallery-heading" data-story-reveal>
                        <span class="story-eyebrow">Gallery</span>
                        <h2 id="project-gallery-title">{{ $project['galleryTitle'] ?? 'In pictures.' }}</h2>
                        <p>Select a photograph to view it in detail.</p>
                    </div>
                    <p class="story-gallery-status">{{ count($gallery) }} photographs</p>
                    <div class="story-gallery" data-skip-entry-animation>
                        @foreach ($gallery as $photo)
                            <figure class="story-gallery-item">
                                <a class="story-gallery-button" href="{{ $photo['src'] }}" data-story-lightbox aria-label="View photograph {{ $loop->iteration }} of {{ count($gallery) }}: {{ $photo['alt'] }}">
                                    <img src="{{ $photo['src'] }}" alt="{{ $photo['alt'] }}" loading="lazy" width="680" height="340">
                                    <span aria-hidden="true"><i class="bi bi-arrows-angle-expand"></i></span>
                                </a>
                            </figure>
                        @endforeach
                    </div>
                </div>
            </section>

            <dialog class="story-lightbox" aria-labelledby="story-lightbox-title">
                <div class="story-lightbox-top"><span id="story-lightbox-title">{{ $project['title'] }}</span><button type="button" data-close aria-label="Close photograph">Close <span aria-hidden="true">×</span></button></div>
                <img class="story-lightbox-image" alt="">
                <div class="story-lightbox-controls">
                    <button type="button" data-previous aria-label="Previous photograph">←</button>
                    <p class="story-lightbox-caption" aria-live="polite"></p>
                    <button type="button" data-next aria-label="Next photograph">→</button>
                </div>
            </dialog>
        @endif

        <div class="story-ending"><div class="container"><a class="story-next" href="{{ url('/about/flagship-projects') }}" data-story-reveal><span><span class="story-eyebrow">Continue exploring</span><span class="story-next-title">Flagship Projects</span></span><span class="story-next-arrow" aria-hidden="true">&#8599;</span></a></div></div>
    </div>
    @include('frontend-v3.about.partials.scripts')
@endsection