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

@section('page')
    @include('frontend-v3.about.partials.styles')
    @php
        $slugs = array_keys($aboutPages);
        $position = array_search($currentSlug, $slugs, true);
        $nextSlug = $slugs[($position + 1) % count($slugs)];
        $nextPage = $aboutPages[$nextSlug];
        $cardLayout = match ($currentSlug) {
            'history' => 'timeline',
            'vision-objectives' => 'pillars',
            'organisation', 'governing-bodies' => 'roles',
            'academic-activities' => 'archive',
            'achievements' => 'milestones',
            default => 'collection',
        };
    @endphp
    <div class="about-story story-page--{{ $currentSlug }}" data-skip-entry-animation>
        @include('frontend-v3.about.partials.hero', [
            'heroTitle' => $page['title'], 'heroEyebrow' => $page['eyebrow'],
            'heroSummary' => $page['summary'], 'heroImage' => $page['heroImage'],
        ])

        <div class="story-nav-shell">
            <nav class="container story-nav" aria-label="About Us pages">
                @foreach ($aboutNav as $navItem)
                    @continue(in_array($navItem['slug'], ['messages', 'academic-activities', 'achievements'], true))
                    <a href="{{ url('/about/'.$navItem['slug']) }}" @if ($navItem['slug'] === $currentSlug) aria-current="page" @endif>{{ $navItem['title'] }}</a>
                @endforeach
            </nav>
        </div>

        <section class="story-opening" id="story-content" aria-labelledby="story-heading">
            <div class="container story-opening-grid">
                <div class="story-photo-composition" data-story-reveal>
                    <div class="story-photo-main"><img src="{{ $page['image'] }}" alt="{{ $page['title'] }} at Srimanta Sankaradeva Kalakshetra" loading="lazy" decoding="async"></div>
                    <div class="story-photo-inset"><img src="{{ $page['heroImage'] }}" alt="" loading="lazy" decoding="async"><span>{{ $page['eyebrow'] }}</span></div>
                    <span class="story-photo-signature" aria-hidden="true">Kalakshetra</span>
                </div>
                <div class="story-copy" data-story-reveal>
                    <span class="story-eyebrow">{{ $page['eyebrow'] }}</span>
                    <h2 id="story-heading">{{ $page['heading'] }}</h2>
                    @foreach (array_slice($page['paragraphs'], 0, 1) as $paragraph)
                        <p data-story-paragraph>{{ $paragraph }}</p>
                    @endforeach
                </div>
            </div>
            <svg class="story-trail" viewBox="0 0 1440 80" fill="none" preserveAspectRatio="none" aria-hidden="true"><path d="M-10 55C220 55 230 5 450 20S740 90 960 40 1250 10 1450 35"/></svg>
        </section>

        @if (!empty($page['authorities']))
            <section class="story-people-section" aria-label="Messages from authorities">
                <div class="container story-people-grid">
                    @foreach ($page['authorities'] as $authoritySlug => $authority)
                        <a class="story-person" href="{{ url('/about/messages/'.$authoritySlug) }}" data-story-reveal>
                            <div class="story-person-photo"><img src="{{ $authority['image'] }}" alt="{{ $authority['name'] }}" style="object-position: {{ $authority['carouselPosition'] ?? 'center top' }}" loading="lazy" decoding="async"><span>{{ $authority['designation'] }}</span></div>
                            <div class="story-person-copy"><span class="story-eyebrow">{{ $authority['desk'] }}</span><h3>{{ $authority['name'] }}</h3><p>{{ $authority['summary'] }}</p><span class="story-text-link">Read message <span aria-hidden="true">&#8599;</span></span></div>
                        </a>
                    @endforeach
                </div>
            </section>
        @elseif (!empty($page['projects']))
            <section class="story-projects container" aria-label="Flagship projects">
                @foreach ($page['projects'] as $projectSlug => $project)
                    <a class="story-project" href="{{ url('/about/flagship-projects/'.$projectSlug) }}" data-story-reveal>
                        <div class="story-project-photo"><img src="{{ $project['image'] }}" alt="{{ $project['title'] }}" loading="lazy" decoding="async"></div>
                        <div class="story-project-copy"><span class="story-eyebrow">{{ $page['eyebrow'] }}</span><h3>{{ $project['title'] }}</h3><span class="story-text-link">Explore project <span aria-hidden="true">&#8599;</span></span></div>
                    </a>
                @endforeach
            </section>
        @elseif (!empty($page['cards']))
            <section class="story-features story-features--{{ $cardLayout }}" aria-label="{{ $page['title'] }} highlights">
                <div class="container">
                    <div class="story-feature-heading" data-story-reveal><span class="story-eyebrow">{{ $page['title'] }}</span><span class="story-heading-rule" aria-hidden="true"></span></div>
                    <div class="story-feature-grid">
                        @if ($currentSlug === 'history')
                            <span class="story-timeline-line" aria-hidden="true"></span>
                        @endif
                        @foreach ($page['cards'] as $card)
                            <article class="story-feature" data-story-reveal>
                                <span class="story-feature-icon" aria-hidden="true"><i class="bi {{ $card['icon'] }}"></i></span>
                                <h3>{{ $card['title'] }}</h3><p>{{ $card['text'] }}</p>
                            </article>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

        @if ($currentSlug === 'governing-bodies')
            @include('frontend-v3.about.partials.governing-councils')
        @endif

        @if (count($page['paragraphs']) > 1)
            <section class="story-perspective" aria-label="More about {{ $page['title'] }}">
                <div class="story-perspective-photo"><img src="{{ $page['image'] }}" alt="" loading="lazy" decoding="async"></div>
                <div class="container story-perspective-inner">
                    <div class="story-perspective-label" data-story-reveal><span class="story-eyebrow">{{ $page['eyebrow'] }}</span><span>{{ $page['title'] }}</span></div>
                    <div class="story-perspective-card story-copy" data-story-reveal>
                        <span class="story-ornament" aria-hidden="true"><i class="bi {{ $page['cards'][0]['icon'] ?? 'bi-journal-richtext' }}"></i></span>
                        @foreach (array_slice($page['paragraphs'], 1) as $paragraph)
                            <p data-story-paragraph>{{ $paragraph }}</p>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

        <div class="story-ending">
            <div class="container">
                <a class="story-next" href="{{ url('/about/'.$nextSlug) }}" data-story-reveal><span><span class="story-eyebrow">Continue the story</span><span class="story-next-title">{{ $nextPage['title'] }}</span></span><span class="story-next-arrow" aria-hidden="true">&#8599;</span></a>
            </div>
        </div>
    </div>
    @include('frontend-v3.about.partials.scripts')
@endsection