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

@section('page')
    @php
        $campusData = require resource_path('data/frontend-v3-attractions.php');
        $profileOne = $campusData['profileOne'];
        $profileTwo = $campusData['profileTwo'];
        $categories = $campusData['categories'];
        $attractions = $campusData['attractions'];
    @endphp
    @include('frontend-v3.pages.attractions.styles')

    <div class="campus" data-skip-entry-animation>
        <section class="campus-hero" aria-labelledby="campus-title">
            <div class="campus-hero-layer">
                <img class="campus-hero-image" src="{{ asset($profileOne.'Heritage park important fotos/Heritage-park-1.jpg') }}" alt="Rang Ghar replica reflected in the water at Kalakshetra’s Heritage Park" fetchpriority="high" width="4200" height="2808">
            </div>
            <div class="container campus-hero-content">
                <nav class="campus-breadcrumb" aria-label="Breadcrumb"><a href="{{ url('/') }}">Home</a><span aria-hidden="true">/</span><span>Campus Attractions</span></nav>
                <p class="campus-eyebrow" data-hero-reveal>Srimanta Sankaradeva Kalakshetra · Guwahati</p>
                <h1 id="campus-title" data-hero-reveal>A campus of culture.<br><em>A world to discover.</em></h1>
                <p class="campus-hero-description" data-hero-reveal>Follow the pathways of Assam’s heritage. Find open-air stages, quiet gardens and places that spark a little curiosity.</p>
                <div class="campus-actions" data-hero-reveal><a class="campus-button" href="#explore-campus">Explore the attractions <i class="bi bi-arrow-down" aria-hidden="true"></i></a><a class="campus-text-link" href="{{ route('frontend-v3.contact') }}">Plan your visit <span aria-hidden="true">↗</span></a></div>
                <div class="campus-hero-footer"><span>Art. Nature. Stories. Discovery.</span><span>Scroll to wander <span aria-hidden="true">↓</span></span></div>
            </div>
            <span class="campus-photo-label">A glimpse of Heritage Park</span>
        </section>

        <section class="campus-intro container" aria-labelledby="campus-intro-title">
            <svg class="campus-trail" viewBox="0 0 1200 80" fill="none" aria-hidden="true"><path d="M0 50 C200 50 180 10 380 30 S650 90 800 40 S1050 20 1200 40" stroke="currentColor" stroke-width="1.5"/><circle cx="380" cy="30" r="5" fill="currentColor"/><circle cx="800" cy="40" r="5" fill="currentColor"/></svg>
            <div data-campus-reveal><span class="campus-eyebrow">Many paths. One shared heritage.</span><h2 id="campus-intro-title">Come for the culture.<br><em>Stay for the discoveries.</em></h2></div>
            <div data-campus-reveal><p>Across the Kalakshetra campus, Assam’s artistic traditions meet natural beauty, learning and recreation. Discover a place to pause, a performance to remember, or a story you haven’t heard before.</p><a class="campus-inline-link" href="#explore-campus">Find your next stop <span aria-hidden="true">↘</span></a></div>
        </section>

        <section class="campus-explore" id="explore-campus" aria-labelledby="campus-explore-title">
            <div class="container">
                <div class="campus-section-top" data-campus-reveal><div><span class="campus-eyebrow">Your campus, your curiosity</span><h2 id="campus-explore-title">Find your own way to explore.</h2></div></div>
                <div class="campus-filter-bar" hidden>
                    <div class="campus-filters" role="group" aria-label="Filter campus attractions">
                        <button type="button" data-campus-filter="all" aria-pressed="true">All places <sup>{{ count($attractions) }}</sup></button>
                        @foreach ($categories as $key => $label)
                            <button type="button" data-campus-filter="{{ $key }}" aria-pressed="false">{{ $label }}</button>
                        @endforeach
                    </div>
                </div>
                <p class="campus-result-count" aria-live="polite">{{ count($attractions) }} places to discover</p>
                <div class="campus-grid">
                    @foreach ($attractions as [$category, $name, $tagline, $photo, $alt, $highlights, $description])
                        <article id="{{ str($name)->slug() }}" class="campus-card {{ $loop->first ? 'campus-card-featured' : '' }}" data-campus-category="{{ $category }}">
                            <div class="campus-card-visual">
                                @if ($photo)
                                    <img src="{{ asset($photo) }}" alt="{{ $alt }}" loading="lazy" width="900" height="640">
                                @else
                                    <div class="campus-artwork" aria-hidden="true"><i class="bi {{ ['performance' => 'bi-music-note-beamed', 'creative' => 'bi-brush', 'heritage' => 'bi-flower1'][$category] ?? 'bi-book' }}"></i></div>
                                @endif
                                <span class="campus-card-category">{{ $categories[$category] }}</span>
                            </div>
                            <div class="campus-card-body"><h3>{{ $name }}</h3><p>{{ $tagline }}</p>
                                <details><summary>Discover this place <span aria-hidden="true">+</span></summary><div class="campus-card-detail"><p>{{ $description }}</p><small>{{ $highlights }}</small></div></details>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="campus-evening" id="sound-light-show" aria-labelledby="campus-evening-title">
            <div class="campus-evening-photo"><img src="{{ asset($profileTwo.'Sound and light show/Sound and Light 11-500kb.jpg') }}" alt="Dramatically illuminated scenes in the Sound and Light Show" loading="lazy" width="1600" height="1000"></div>
            <div class="container campus-evening-inner"><div class="campus-evening-copy"><span class="campus-eyebrow">An evening at Kalakshetra</span><h2 id="campus-evening-title">As daylight fades,<br><em>history comes to light.</em></h2><p>Experience <em>Assam Through the Ages</em> — a journey through the region’s past, told through narration, music and light.</p><div class="campus-evening-facts"><span><strong>≈ 40</strong> minutes of storytelling</span><span><strong>Two languages</strong> Assamese & English</span></div><a class="campus-button" href="{{ url('/contact') }}">Enquire about the show <span aria-hidden="true">↗</span></a><small>Confirm current show timings, language schedules and availability before visiting.</small></div></div>
        </section>

        <section class="campus-family container" aria-labelledby="campus-family-title">
            <div class="campus-family-photo" data-campus-reveal><img src="{{ asset($profileOne.'Dr BhaBendra nath Saikia children Park/Copy of toy train-night 33-500kb.jpg') }}" alt="Colourful fish-shaped Sky Train coaches at the Children Park" loading="lazy" width="1100" height="900"><span class="campus-image-note">Small moments. Big imaginations.</span></div>
            <div data-campus-reveal><span class="campus-eyebrow">A day of little discoveries</span><h2 id="campus-family-title">Make room for<br><em>a little wonder.</em></h2><p>At Dr. Bhabendra Nath Saikia Children Park, play and discovery go hand in hand. Explore a world of dolls, outdoor spaces and experiences designed to encourage young imaginations.</p><ul class="campus-family-list"><li><div><h3>A world of dolls</h3><p>Discover costumes and cultures from Assam, India and beyond.</p></div></li><li><div><h3>A different view</h3><p>The park’s distinctive Sky Train features fish-shaped coaches. Please check ride availability.</p></div></li><li><div><h3>Learning through play</h3><p>Children’s library, recreational spaces and environmental discovery.</p></div></li></ul></div>
        </section>

        <section class="campus-visit" id="campus-visit" aria-labelledby="campus-visit-title"><div class="container campus-visit-inner"><div data-campus-reveal><span class="campus-eyebrow">A little planning, a day to remember</span><h2 id="campus-visit-title">Your next discovery<br><em>starts here.</em></h2><p>Find us at Srimanta Sankaradeva Kalakshetra,<br>Panjabari, Guwahati, Assam.</p><div class="campus-actions"><a class="campus-button" href="{{ route('frontend-v3.contact') }}">Plan your visit <span aria-hidden="true">↗</span></a><a class="campus-inline-link" href="{{ route('frontend-v3.contact') }}">Visitor enquiries <span aria-hidden="true">↗</span></a></div></div><div class="campus-visit-notes" data-campus-reveal><div><span>Before you arrive</span><p>Check current campus opening hours, admission details and attraction availability.</p></div><div><span>Performances & rides</span><p>Show schedules and ride operations may vary. Enquire ahead to plan your day.</p></div><div><span>Creative & research facilities</span><p>Studio services and institutional facilities may require prior arrangements.</p></div></div></div></section>
    </div>
    @include('frontend-v3.pages.attractions.scripts')
@endsection