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

@section('page')
    @include('frontend-v3.pages.attractions.fountain-styles')
    @php
        $fountainImages = 'images/campus-attraction/fountain/';
        $fountainPhotos = [
            '5927' => ['file' => '_DSC5927.JPG.jpg', 'width' => 1558, 'height' => 876, 'alt' => 'Red, blue and violet jets of the musical fountain rising against the trees at dusk'],
            '5932' => ['file' => '_DSC5932.JPG.jpg', 'width' => 1473, 'height' => 828, 'alt' => 'Fans of lilac-lit water across the fountain pool, with an illuminated campus building on the left'],
            '5937' => ['file' => '_DSC5937.JPG.jpg', 'width' => 1467, 'height' => 825, 'alt' => 'Blue-lit fountain jets in front of an illuminated heritage building at Srimanta Sankaradeva Kalakshetra'],
            '5947' => ['file' => '_DSC5947.JPG.jpg', 'width' => 1576, 'height' => 886, 'alt' => 'Tall violet jets of the musical fountain at dusk, with visitors watching from the footbridge'],
            '5953' => ['file' => '_DSC5953.JPG.jpg', 'width' => 2148, 'height' => 1208, 'alt' => 'Pink, green, red and violet fountain columns reflected in the pool after dark'],
            '5958' => ['file' => '_DSC5958.JPG.jpg', 'width' => 1495, 'height' => 840, 'alt' => 'An overhead view of the musical fountain pool lit in violet, blue and teal'],
            '5963' => ['file' => '_DSC5963.JPG.jpg', 'width' => 1510, 'height' => 848, 'alt' => 'Visitors on the bridge watching the illuminated musical fountain from above at night'],
            '5985' => ['file' => '_DSC5985.JPG.jpg', 'width' => 1739, 'height' => 977, 'alt' => 'A close view of arching jets and coloured spray in the musical fountain at night'],
        ];
        $heroPhoto = $fountainPhotos['5927'];
        $eveningPhoto = $fountainPhotos['5947'];
        $settingPhoto = $fountainPhotos['5937'];
        $settingDetailPhoto = $fountainPhotos['5958'];
    @endphp

    <div class="fountain" data-skip-entry-animation>

        <section class="fountain-hero" aria-labelledby="fountain-title">
            <div class="fountain-hero-watermark" aria-hidden="true">Fountain</div>
            <div class="container">
                <nav class="fountain-breadcrumb" aria-label="Breadcrumb">
                    <a href="{{ url('/') }}">Home</a><span aria-hidden="true">/</span>
                    <span>Explore Kalakshetra</span><span aria-hidden="true">/</span>
                    <span aria-current="page">Fountain</span>
                </nav>
                <div class="fountain-hero-grid">
                    <div class="fountain-hero-copy">
                        <span class="fountain-label" data-fountain-hero>Within the Kalakshetra campus</span>
                        <h1 id="fountain-title" data-fountain-hero>Fountain <span>at Srimanta Sankaradeva Kalakshetra</span></h1>
                        <div class="fountain-hero-divider" data-fountain-hero aria-hidden="true"><span></span><i></i><span></span></div>
                        <a class="fountain-discover" href="#fountain-setting" data-fountain-hero>
                            <span class="fountain-arrow" aria-hidden="true">&#8595;</span><span>Discover the fountain</span>
                        </a>
                    </div>
                    <div class="fountain-hero-gallery" data-fountain-hero>
                        <div class="fountain-photo-border" aria-hidden="true"></div>
                        <div class="fountain-hero-photo">
                            <img src="{{ asset($fountainImages.$heroPhoto['file']) }}" alt="{{ $heroPhoto['alt'] }}" width="{{ $heroPhoto['width'] }}" height="{{ $heroPhoto['height'] }}" fetchpriority="high">
                        </div>
                        <span class="fountain-photo-side">Water / Gardens / Culture</span>
                        <a class="fountain-evening-preview" href="#fountain-experience">
                            <img src="{{ asset($fountainImages.$eveningPhoto['file']) }}" alt="The musical fountain illuminated at dusk" width="{{ $eveningPhoto['width'] }}" height="{{ $eveningPhoto['height'] }}" decoding="async">
                            <span>Another moment<span>Explore the fountain at dusk <b aria-hidden="true">&#8599;</b></span></span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="fountain-chapters-wrap">
                <nav class="container fountain-chapters" aria-label="Explore this page">
                    <a href="#fountain-setting">The setting<i aria-hidden="true">&#8599;</i></a>
                    <a href="#fountain-experience">The experience<i aria-hidden="true">&#8599;</i></a>
                    <a href="#fountain-features">Fountain features<i aria-hidden="true">&#8599;</i></a>
                    <a href="#fountain-harmony">The harmony<i aria-hidden="true">&#8599;</i></a>
                </nav>
            </div>
        </section>

        <section class="fountain-setting" id="fountain-setting" aria-labelledby="fountain-setting-title">
            <div class="container fountain-setting-grid">
                <div class="fountain-setting-photos" data-fountain-reveal>
                    <span class="fountain-photo-corner" aria-hidden="true"></span>
                    <figure class="fountain-setting-main">
                        <div class="fountain-photo-frame"><img src="{{ asset($fountainImages.$settingPhoto['file']) }}" alt="{{ $settingPhoto['alt'] }}" width="{{ $settingPhoto['width'] }}" height="{{ $settingPhoto['height'] }}" loading="lazy" decoding="async"></div>
                    </figure>
                    <figure class="fountain-setting-detail">
                        <img src="{{ asset($fountainImages.$settingDetailPhoto['file']) }}" alt="{{ $settingDetailPhoto['alt'] }}" width="{{ $settingDetailPhoto['width'] }}" height="{{ $settingDetailPhoto['height'] }}" loading="lazy" decoding="async">
                        <figcaption>Srimanta Sankaradeva Kalakshetra</figcaption>
                    </figure>
                    <span class="fountain-photo-note">Beauty in every reflection</span>
                </div>
                <div class="fountain-copy" data-fountain-reveal>
                    <div class="fountain-section-label"><span class="fountain-label">The setting</span></div>
                    <h2 id="fountain-setting-title">Beauty, freshness<br>and <em>tranquillity.</em></h2>
                    <p>The fountain at Srimanta Sankaradeva Kalakshetra is an attractive feature of the campus, adding beauty, freshness and tranquillity to its surroundings. Set amidst landscaped gardens and greenery, it complements the architectural character of the Kalakshetra and enhances the overall ambience of the complex.</p>
                    <a class="fountain-inline-link" href="#fountain-experience">Continue the journey <span aria-hidden="true">&#8595;</span></a>
                </div>
            </div>
            <svg class="fountain-trail" viewBox="0 0 1440 100" fill="none" preserveAspectRatio="none" aria-hidden="true"><path d="M-20 75C200 75 230 15 430 30S750 110 950 55 1220 5 1460 30"/></svg>
        </section>

        <section class="fountain-moment" id="fountain-experience" aria-labelledby="fountain-experience-title">
            <div class="fountain-evening">
                <img src="{{ asset($fountainImages.$eveningPhoto['file']) }}" alt="{{ $eveningPhoto['alt'] }}" width="{{ $eveningPhoto['width'] }}" height="{{ $eveningPhoto['height'] }}" loading="lazy" decoding="async">
            </div>
            <div class="container fountain-moment-inner">
                <div class="fountain-moment-top" data-fountain-reveal><span class="fountain-label">The experience</span><span class="fountain-label">The fountain at dusk</span></div>
                <div class="fountain-moment-card fountain-copy" data-fountain-reveal>
                    <span class="fountain-label">A moment within the journey</span>
                    <h2 id="fountain-experience-title">Pause, relax<br>and <em>enjoy.</em></h2>
                    <p>The fountain offers visitors a pleasant setting to pause, relax and enjoy the peaceful surroundings while exploring the cultural attractions of Kalakshetra. Its scenic location also makes it an appealing spot for photography, leisurely walks and spending time with family and friends.</p>
                    <span class="fountain-card-line" aria-hidden="true"></span>
                </div>
                <div class="fountain-moment-bottom" aria-hidden="true"><span>Srimanta Sankaradeva Kalakshetra</span><span>Water. Light. Reflection.</span></div>
            </div>
        </section>

        <section class="fountain-features" id="fountain-features" aria-labelledby="fountain-features-title">
            <div class="container">
                <div class="fountain-features-heading" data-fountain-reveal>
                    <h2 id="fountain-features-title">Ball Fountain and Musical Fountain</h2>
                </div>
                <div class="fountain-features-grid">
                    <article class="fountain-feature-card" data-fountain-reveal>
                        <span class="fountain-feature-icon" aria-hidden="true"><i class="bi bi-circle-half"></i></span>
                        <h3>Ball Fountain</h3>
                        <p>The Ball Fountain is an attractive water feature at Srimanta Sankaradeva Kalakshetra, adding charm and beauty to the surrounding landscape. Its distinctive spherical design, complemented by the gentle movement of flowing water, creates a pleasant visual experience for visitors. Set amidst the greenery and peaceful surroundings of the campus, the fountain offers a refreshing spot to relax, enjoy the atmosphere and capture memorable photographs.</p>
                    </article>
                    <article class="fountain-feature-card is-highlighted" data-fountain-reveal>
                        <span class="fountain-feature-icon" aria-hidden="true"><i class="bi bi-music-note-beamed"></i></span>
                        <h3>Musical Fountain</h3>
                        <p>The Musical Fountain at Srimanta Sankaradeva Kalakshetra offers visitors a captivating experience where water, light, music and technology come together in perfect harmony. Featuring synchronised water movements, colourful illumination and laser effects, the fountain creates a spectacular visual display against the beautiful backdrop of the Kalakshetra campus. Developed as part of the Guwahati Smart City initiative, this attraction blends modern technology with the rich cultural heritage of Assam. Accompanied by the enchanting melodies and rhythms of traditional Assamese folk music, the dancing water and colourful lights move in perfect synchronisation, offering visitors a glimpse into the state's vibrant musical traditions. The interplay of light, water, music and sound creates a magical atmosphere, making the Musical Fountain a memorable highlight of Kalakshetra's evening attractions.</p>
                    </article>
                </div>
            </div>
        </section>

        <section class="fountain-gallery" id="fountain-gallery" aria-labelledby="fountain-gallery-title">
            <div class="container">
                <div class="fountain-gallery-heading" data-fountain-reveal>
                    <div>
                        <div class="fountain-section-label"><span class="fountain-label">Gallery</span></div>
                        <h2 id="fountain-gallery-title">Water, light <em>and music.</em></h2>
                    </div>
                    <p>Select a photograph to view it in detail.</p>
                </div>
                <div class="fountain-gallery-grid">
                    @foreach ($fountainPhotos as $photo)
                        <button class="fountain-gallery-item v3-lightbox-trigger" type="button" data-image-lightbox data-lightbox-group="fountain" data-lightbox-caption="{{ $photo['alt'] }}">
                            <img src="{{ asset($fountainImages.$photo['file']) }}" alt="{{ $photo['alt'] }}" width="{{ $photo['width'] }}" height="{{ $photo['height'] }}" loading="lazy" decoding="async">
                            <span aria-hidden="true">&#8599;</span>
                        </button>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="fountain-reflection" id="fountain-harmony" aria-labelledby="fountain-harmony-title">
            <div class="container fountain-reflection-grid">
                <div class="fountain-reflection-heading" data-fountain-reveal>
                    <div class="fountain-section-label"><span class="fountain-label">The harmony</span></div>
                    <h2 id="fountain-harmony-title">Natural beauty.<br><em>Cultural atmosphere.</em></h2>
                </div>
                <div class="fountain-copy fountain-reflection-content" data-fountain-reveal>
                    <p>Blending natural beauty with the cultural atmosphere of the campus, the fountain contributes to the charm of Srimanta Sankaradeva Kalakshetra as a destination for both cultural exploration and recreation.</p>
                </div>
            </div>
            <div class="fountain-ripples" aria-hidden="true"><span></span><span></span><span></span></div>
        </section>

        @include('frontend-v3.pages.explore-from-home.partials.return-link', ['spaced' => true])
    </div>

    @include('frontend-v3.pages.partials.image-lightbox')
    @include('frontend-v3.pages.attractions.fountain-scripts')
@endsection