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

@section('page')
    @include('frontend-v3.pages.museum.partials.styles')
    @include('frontend-v3.pages.museum.partials.dolls-styles')
    @php
        $imageRoot = 'images/Kalakshetra-Profile-1/Dolls Museum/';
        $highlights = [
            ['bi-palette', 'Traditional dolls & puppets', 'Representations of regional traditions and craftsmanship.'],
            ['bi-music-note-beamed', 'Folk dance & music', 'Miniature displays featuring Bihu dancers and musicians.'],
            ['bi-book', 'Mythological figures', 'Characters inspired by Indian mythology and folklore.'],
            ['bi-flower1', 'Regional costumes', 'Dolls showcasing traditional clothing and ornaments.'],
            ['bi-balloon', 'Modern dolls & soft toys', 'A delightful collection for young visitors.'],
        ];
        $categories = [
            'spaces' => 'Museum spaces',
            'traditions' => 'Dance & regional traditions',
            'stories' => 'Mythology & folklore',
            'toys' => 'Modern dolls & soft toys',
        ];
        $photographs = [
            ['IMG_9946-500kb.jpg', 'spaces', 'A world of stories in miniature', 'Illuminated display cases housing groups of dolls in the museum'],
            ['IMG_9961-500kb.jpg', 'traditions', 'The rhythm of Bihu', 'Miniature Bihu dancers and musicians dressed in traditional Assamese attire'],
            ['IMG_9968-500kb.jpg', 'traditions', 'Costumes, colour & craftsmanship', 'Dolls in colourful regional costumes alongside smaller traditional figures'],
            ['IMG_9960-500kb.jpg', 'stories', 'Characters from timeless tales', 'Mythological figures wearing ornate costumes and crowns in a museum display'],
            ['IMG_9949-500kb.jpg', 'toys', 'Little companions, big imaginations', 'Soft toys and contemporary character dolls arranged in an illuminated case'],
        ];
    @endphp

    <div class="bh-museum dolls-museum" data-skip-entry-animation>>
        <section class="bh-hero" aria-labelledby="dolls-title">
            <img class="bh-hero-photo" src="{{ asset($imageRoot.'IMG_9961-500kb.jpg') }}" alt="Colourful miniature Bihu dancers and musicians at the Dolls Museum" fetchpriority="high">
            <div class="container">
                <nav class="bh-breadcrumb" aria-label="Breadcrumb">
                    <a href="{{ url('/') }}">Home</a><span aria-hidden="true">/</span>
                    <a href="{{ route('frontend-v3.campus-attractions') }}">Museums & Sangrahalayas</a>
                </nav>
                <span class="bh-label">Srimanta Sankaradeva Kalakshetra · Guwahati</span>
                <h1 id="dolls-title">Dolls <em>Museum</em></h1>
                <p>A Colourful Journey Through Art, Culture and Imagination</p>
                <div class="bh-actions">
                    <a class="bh-button" href="#museum-highlights">Discover the exhibits <i class="bi bi-arrow-down" aria-hidden="true"></i></a>
                    <a class="bh-button is-outline" href="{{ route('frontend-v3.contact') }}">Plan your visit <i class="bi bi-arrow-up-right" aria-hidden="true"></i></a>
                </div>
            </div>
        </section>

        <div class="bh-facts">
            <div class="container bh-facts-grid">
                <div class="bh-fact"><span class="bh-label">Find us within</span><strong>Dr. Bhabendra Nath Saikia Children’s Park</strong></div>
                <div class="bh-fact"><span class="bh-label">Discover</span><strong>Assam, India & the world</strong></div>
                <div class="bh-fact"><span class="bh-label">Made for discovery</span><strong>Children, families & curious minds</strong></div>
            </div>
        </div>

        <section class="bh-section" aria-labelledby="dolls-about-title">
            <div class="container bh-intro-grid">
                <figure class="bh-photo">
                    <img src="{{ asset($imageRoot.'IMG_9946-500kb.jpg') }}" alt="A view inside the Dolls Museum with illuminated displays of traditional figures" loading="lazy" width="800" height="600">
                    <figcaption><span>01 / STEP INSIDE</span> Art, culture and storytelling, brought together in miniature.</figcaption>
                </figure>
                <div>
                    <span class="bh-label">About the museum</span>
                    <h2 id="dolls-about-title">Small figures.<br>A world of wonder.</h2>
                    <p class="bh-lead">Nestled within the Dr. Bhabendra Nath Saikia Children’s Park, the Dolls Museum celebrates the creativity and cultural diversity reflected in dolls and puppets.</p>
                    <p>The museum features a fascinating collection of traditional and modern dolls from Assam, various regions of India and other parts of the world.</p>
                    <p>From beautifully dressed regional figures and Bihu performers to mythological characters and contemporary toys, the exhibits offer a glimpse into different customs, artistic traditions and forms of storytelling.</p>
                    <div class="bh-aside">Established with the generous financial support of acclaimed filmmaker <strong>Mrinal Sen</strong>, the museum provides an enjoyable space for children and families to explore cultural heritage through imagination and discovery.</div>
                </div>
            </div>
        </section>

        <section class="bh-section dolls-highlights" id="museum-highlights" aria-labelledby="dolls-highlights-title">
            <div class="container">
                <div class="bh-section-heading">
                    <span class="bh-label">Museum highlights</span>
                    <h2 id="dolls-highlights-title">Every doll has a story.</h2>
                    <p>Explore the traditions, characters and creative details that make this collection a delight for curious visitors of every age.</p>
                </div>
                <div class="bh-collection-grid">
                    @foreach ($highlights as [$icon, $heading, $description])
                        <article class="dolls-highlight">
                            <span class="dolls-highlight-icon" aria-hidden="true"><i class="bi {{ $icon }}"></i></span>
                            <h3>{{ $heading }}</h3><p>{{ $description }}</p>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="bh-section" id="museum-gallery" aria-labelledby="dolls-gallery-title">
            <div class="container">
                <div class="bh-section-heading">
                    <span class="bh-label">Inside the museum</span>
                    <h2 id="dolls-gallery-title">A collection full of colour.</h2>
                    <p>Take a closer look at the exhibits, from the rhythm of Bihu to familiar characters and playful companions. Select a photograph to explore the details.</p>
                </div>
                <div class="bh-filters" role="group" aria-label="Filter Dolls Museum photographs" hidden>
                    <button class="bh-filter" type="button" data-category="all" aria-pressed="true">All photographs</button>
                    @foreach ($categories as $key => $label)
                        <button class="bh-filter" type="button" data-category="{{ $key }}" aria-pressed="false">{{ $label }}</button>
                    @endforeach
                </div>
                <p class="bh-gallery-status" aria-live="polite">{{ count($photographs) }} photographs in the collection</p>
                <div class="bh-gallery" data-skip-entry-animation>
                    @foreach ($photographs as [$file, $category, $caption, $alt])
                        <figure class="bh-gallery-item" data-category="{{ $category }}">
                            <a class="bh-image-button" href="{{ asset($imageRoot.$file) }}" data-caption="{{ $caption }}" aria-label="View photograph: {{ $caption }}">
                                <img src="{{ asset($imageRoot.$file) }}" alt="{{ $alt }}" loading="lazy" width="640" height="480">
                                <span aria-hidden="true"><i class="bi bi-arrows-angle-expand"></i></span>
                            </a>
                            <figcaption><small>{{ $categories[$category] }}</small><h3>{{ $caption }}</h3></figcaption>
                        </figure>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="bh-section dolls-learning" aria-labelledby="dolls-learning-title">
            <div class="container bh-learning">
                <div>
                    <span class="bh-label">Imagination meets heritage</span>
                    <h2 id="dolls-learning-title">Discover together.<br>Remember with a smile.</h2>
                    <p class="bh-lead">An enjoyable space for children and families to explore cultural heritage through imagination and discovery.</p>
                    <p>Colourful exhibits bring together creativity, entertainment and cultural learning. Traditional costumes, folk performers and storybook characters offer a welcoming introduction to different customs and artistic traditions.</p>
                    <div class="bh-actions"><a class="bh-button is-outline" href="#visitor-information">Plan a family visit <i class="bi bi-arrow-down" aria-hidden="true"></i></a></div>
                </div>
                <figure class="bh-photo">
                    <img src="{{ asset($imageRoot.'IMG_9968-500kb.jpg') }}" alt="A colourful display of regional dolls and traditional miniature figures" loading="lazy" width="800" height="600">
                    <figcaption><span>02 / CULTURE IN MINIATURE</span> Discover the clothing, ornaments and craft behind each figure.</figcaption>
                </figure>
            </div>
        </section>

        <section class="bh-section" id="visitor-information" aria-labelledby="dolls-visit-title">
            <div class="container bh-visit">
                <div>
                    <span class="bh-label">Plan your visit</span>
                    <h2 id="dolls-visit-title">Make room for<br>a little wonder.</h2>
                    <p>Find the Dolls Museum within the Children’s Park at Srimanta Sankaradeva Kalakshetra, Panjabari, Guwahati.</p>
                    <p>Please confirm current timings and ticket details at the Kalakshetra visitor information counter.</p>
                    <div class="bh-actions"><a class="bh-button" href="{{ url('/contact') }}">Visitor enquiries <i class="bi bi-arrow-up-right" aria-hidden="true"></i></a></div>
                </div>
                <dl>
                    <div><dt>Museum</dt><dd>Dolls Museum</dd></div>
                    <div><dt>Location</dt><dd>Dr. Bhabendra Nath Saikia Children’s Park, Srimanta Sankaradeva Kalakshetra, Panjabari, Guwahati, Assam</dd></div>
                    <div><dt>Ideal for</dt><dd>Children, families, students and cultural enthusiasts</dd></div>
                    <div><dt>Experience</dt><dd>Colourful exhibits bringing together creativity, entertainment and cultural learning</dd></div>
                    <div><dt>Opening & entry</dt><dd>Please confirm current timings and ticket details at the Kalakshetra visitor information counter.</dd></div>
                </dl>
            </div>
        </section>
    </div>

    <dialog class="bh-lightbox" aria-labelledby="dolls-lightbox-title" data-skip-entry-animation>
        <div class="bh-lightbox-top"><span id="dolls-lightbox-title">Inside the Dolls Museum</span><button type="button" data-close aria-label="Close photograph">Close <span aria-hidden="true">×</span></button></div>
        <img class="bh-lightbox-image" alt="">
        <div class="bh-lightbox-controls">
            <button type="button" data-previous aria-label="Previous photograph">←</button>
            <p class="bh-lightbox-caption" aria-live="polite"></p>
            <button type="button" data-next aria-label="Next photograph">→</button>
        </div>
    </dialog>
    @include('frontend-v3.pages.museum.partials.scripts')
@endsection