@extends('storefront.layout')

@section('title', 'Photos & Videos')
@section('description', 'See Vida Mansa water dispensers in action through product videos, real pet moments, and campaign photography.')

@php
    $videos = [
        [
            'type' => 'video',
            'title' => 'A cleaner way to drink',
            'description' => 'See the difference a splash-control dispenser makes.',
            'src' => asset('media/gallery/videos/splashzone.mp4'),
            'poster' => asset('media/gallery/posters/splashzone.jpg'),
        ],
        [
            'type' => 'video',
            'title' => 'Outdoor hydration',
            'description' => 'A small dog drinks from the red Vida Mansa dispenser.',
            'src' => asset('media/gallery/videos/vm02.mp4'),
            'poster' => asset('media/gallery/posters/vm02.jpg'),
        ],
        [
            'type' => 'video',
            'title' => 'Made for cats too',
            'description' => 'Easy access to water from the blue dispenser.',
            'src' => asset('media/gallery/videos/vm03.mp4'),
            'poster' => asset('media/gallery/posters/vm03.jpg'),
        ],
        [
            'type' => 'video',
            'title' => 'Small pets, easy access',
            'description' => 'A rabbit drinks comfortably from the pink dispenser.',
            'src' => asset('media/gallery/videos/vm04.mp4'),
            'poster' => asset('media/gallery/posters/vm04.jpg'),
        ],
        [
            'type' => 'video',
            'title' => 'Colors on display',
            'description' => 'Vida Mansa dispensers presented in a retail setting.',
            'src' => asset('media/gallery/videos/vm05.mp4'),
            'poster' => asset('media/gallery/posters/vm05.jpg'),
        ],
    ];

    $photos = [
        [
            'type' => 'image',
            'title' => 'Stop wet fur — blue',
            'src' => asset('media/gallery/photos/01-sqr.png'),
            'alt' => 'Blue Vida Mansa water dispenser beside a Yorkshire terrier, with the message stop wet fur and no more soaked beards or wet floors.',
        ],
        [
            'type' => 'image',
            'title' => 'Stop wet fur — pink',
            'src' => asset('media/gallery/photos/02-sqr.png'),
            'alt' => 'Pink Vida Mansa water dispenser beside a Yorkshire terrier, with the message stop wet fur and no more soaked beards or wet floors.',
        ],
        [
            'type' => 'image',
            'title' => 'A smarter way to hydrate',
            'src' => asset('media/gallery/photos/03-sqr.png'),
            'alt' => 'Wet long-haired dog beside Vida Mansa dispensers, explaining that wet fur can cause odor and dirty floors.',
        ],
        [
            'type' => 'image',
            'title' => 'Regular bowl vs. Vida Mansa',
            'src' => asset('media/gallery/photos/05-sqr.png'),
            'alt' => 'Before-and-after comparison of a wet dog using a regular bowl and a clean, dry dog using a Vida Mansa dispenser.',
        ],
        [
            'type' => 'image',
            'title' => 'Clean and dry',
            'src' => asset('media/gallery/photos/06-sqr.png'),
            'alt' => 'Before-and-after comparison of a wet Pomeranian with a regular bowl and a clean, dry Pomeranian with a Vida Mansa dispenser.',
        ],
        [
            'type' => 'image',
            'title' => 'The wet-fur problem — blue',
            'src' => asset('media/gallery/photos/07-sqr.png'),
            'alt' => 'Yorkshire terrier with wet fur beside a blue Vida Mansa dispenser designed to help keep beards, manes, and fur dry.',
        ],
        [
            'type' => 'image',
            'title' => 'The wet-fur problem — pink',
            'src' => asset('media/gallery/photos/08-sqr.png'),
            'alt' => 'Long-haired dog with wet fur beside a pink Vida Mansa dispenser designed to help keep fur dry.',
        ],
        [
            'type' => 'image',
            'title' => 'Stop the smell and mess',
            'src' => asset('media/gallery/photos/09-sqr.png'),
            'alt' => 'Blue Vida Mansa water dispenser with the message stop wet fur, stop the smell, and stop the mess.',
        ],
    ];
@endphp

@push('head')
    <style>[x-cloak] { display: none !important; }</style>
@endpush

@section('content')
<div
    x-data="{
        isOpen: false,
        active: null,
        previousFocus: null,
        showItem(item, trigger) {
            this.active = item;
            this.previousFocus = trigger;
            this.isOpen = true;
            document.body.classList.add('overflow-hidden');
            this.$nextTick(() => this.$refs.closeButton?.focus());
        },
        close() {
            if (! this.isOpen) return;
            const video = this.$refs.mediaVideo;
            if (video) {
                video.pause();
                video.currentTime = 0;
            }
            this.isOpen = false;
            document.body.classList.remove('overflow-hidden');
            const trigger = this.previousFocus;
            this.$nextTick(() => trigger?.focus());
        },
        trapFocus(event) {
            const controls = Array.from(this.$refs.dialog?.querySelectorAll('button:not([disabled]), video[controls]') ?? [])
                .filter((element) => element.offsetParent !== null);
            if (controls.length === 0) return;
            const first = controls[0];
            const last = controls[controls.length - 1];
            if (event.shiftKey && document.activeElement === first) {
                event.preventDefault();
                last.focus();
            } else if (! event.shiftKey && document.activeElement === last) {
                event.preventDefault();
                first.focus();
            }
        },
    }"
    @keydown.escape.window="close()"
>
    <section class="border-b border-stone-200 bg-white">
        <div class="mx-auto max-w-7xl px-5 py-12 sm:px-6 sm:py-16 lg:px-8">
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">Vida Mansa media</p>
            <h1 class="mt-3 text-4xl font-semibold tracking-normal text-stone-950 sm:text-5xl">Photos &amp; Videos</h1>
            <p class="mt-5 max-w-2xl text-base leading-7 text-stone-600 sm:text-lg">
                Product stories, real pet moments, and Vida Mansa dispensers in everyday use.
            </p>
        </div>
    </section>

    <section class="bg-stone-100 py-12 sm:py-16" aria-labelledby="gallery-videos-title">
        <div class="mx-auto max-w-7xl px-5 sm:px-6 lg:px-8">
            <div class="flex flex-wrap items-end justify-between gap-3">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-rose-600">In action</p>
                    <h2 id="gallery-videos-title" class="mt-2 text-2xl font-semibold tracking-normal text-stone-950 sm:text-3xl">Videos</h2>
                </div>
                <p class="text-sm text-stone-500">5 videos</p>
            </div>

            @php $featuredVideo = $videos[0]; @endphp
            <button
                type="button"
                data-gallery-video
                class="group mt-7 block w-full overflow-hidden rounded-lg border border-stone-200 bg-white text-left shadow-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2"
                aria-label="Play video: {{ $featuredVideo['title'] }}"
                @click="showItem(@js($featuredVideo), $event.currentTarget)"
            >
                <span class="relative block aspect-video overflow-hidden bg-stone-900">
                    <img
                        src="{{ $featuredVideo['poster'] }}"
                        alt=""
                        class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.02]"
                        fetchpriority="high"
                    >
                    <span class="absolute inset-0 flex items-center justify-center bg-black/10 transition group-hover:bg-black/20" aria-hidden="true">
                        <span class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-white/95 text-stone-950 shadow-lg sm:h-16 sm:w-16">
                            <svg class="ml-1 h-6 w-6 sm:h-7 sm:w-7" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.14v13.72L19 12 8 5.14Z" /></svg>
                        </span>
                    </span>
                </span>
                <span class="block px-4 py-4 sm:px-5">
                    <span class="block text-base font-semibold text-stone-950 sm:text-lg">{{ $featuredVideo['title'] }}</span>
                    <span class="mt-1 block text-sm leading-6 text-stone-600">{{ $featuredVideo['description'] }}</span>
                </span>
            </button>

            <div class="mt-4 grid grid-cols-1 gap-4 min-[480px]:grid-cols-2 lg:grid-cols-4">
                @foreach (array_slice($videos, 1) as $video)
                    <button
                        type="button"
                        data-gallery-video
                        class="group min-w-0 overflow-hidden rounded-lg border border-stone-200 bg-white text-left shadow-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2"
                        aria-label="Play video: {{ $video['title'] }}"
                        @click="showItem(@js($video), $event.currentTarget)"
                    >
                        <span class="relative block aspect-[4/3] overflow-hidden bg-stone-900">
                            <img src="{{ $video['poster'] }}" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]">
                            <span class="absolute inset-0 flex items-center justify-center bg-black/10 transition group-hover:bg-black/20" aria-hidden="true">
                                <span class="inline-flex h-12 w-12 items-center justify-center rounded-full bg-white/95 text-stone-950 shadow-md">
                                    <svg class="ml-0.5 h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.14v13.72L19 12 8 5.14Z" /></svg>
                                </span>
                            </span>
                        </span>
                        <span class="block px-4 py-3.5">
                            <span class="block text-sm font-semibold text-stone-950">{{ $video['title'] }}</span>
                            <span class="mt-1 block text-sm leading-5 text-stone-600">{{ $video['description'] }}</span>
                        </span>
                    </button>
                @endforeach
            </div>
        </div>
    </section>

    <section class="border-t border-stone-200 bg-white py-12 sm:py-16" aria-labelledby="gallery-photos-title">
        <div class="mx-auto max-w-7xl px-5 sm:px-6 lg:px-8">
            <div class="flex flex-wrap items-end justify-between gap-3">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-sky-700">Product stories</p>
                    <h2 id="gallery-photos-title" class="mt-2 text-2xl font-semibold tracking-normal text-stone-950 sm:text-3xl">Campaign photos</h2>
                </div>
                <p class="text-sm text-stone-500">8 photos</p>
            </div>

            <div class="mt-7 grid grid-cols-1 gap-4 min-[430px]:grid-cols-2 lg:grid-cols-4">
                @foreach ($photos as $photo)
                    <button
                        type="button"
                        data-gallery-photo
                        class="group min-w-0 overflow-hidden rounded-lg border border-stone-200 bg-stone-50 text-left shadow-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2"
                        aria-label="View photo: {{ $photo['title'] }}"
                        @click="showItem(@js($photo), $event.currentTarget)"
                    >
                        <span class="block aspect-square overflow-hidden bg-stone-200">
                            <img src="{{ $photo['src'] }}" alt="{{ $photo['alt'] }}" loading="lazy" decoding="async" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.02]">
                        </span>
                        <span class="block px-3.5 py-3 text-sm font-semibold leading-5 text-stone-900">{{ $photo['title'] }}</span>
                    </button>
                @endforeach
            </div>
        </div>
    </section>

    <template x-teleport="body">
        <div
            x-cloak
            x-show="isOpen"
            x-transition.opacity.duration.200ms
            data-gallery-modal
            class="fixed inset-0 z-[100] flex items-center justify-center overflow-y-auto bg-stone-950/95 p-2 sm:p-6"
            @click.self="close()"
        >
            <div
                x-ref="dialog"
                role="dialog"
                aria-modal="true"
                aria-labelledby="gallery-modal-title"
                class="relative flex max-h-[calc(100dvh-1rem)] w-full max-w-6xl flex-col overflow-hidden rounded-lg border border-white/15 bg-stone-950 shadow-2xl sm:max-h-[calc(100dvh-3rem)]"
                @keydown.tab="trapFocus($event)"
            >
                <button
                    x-ref="closeButton"
                    type="button"
                    class="absolute right-3 top-3 z-20 inline-flex h-11 w-11 items-center justify-center rounded-full bg-black/75 text-white shadow-lg transition hover:bg-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
                    aria-label="Close media viewer"
                    @click="close()"
                >
                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" d="m6 6 12 12M18 6 6 18" /></svg>
                </button>

                <div class="flex min-h-0 flex-1 items-center justify-center p-2 sm:p-4">
                    <template x-if="active?.type === 'image'">
                        <img :src="active.src" :alt="active.alt" class="max-h-[calc(100dvh-7rem)] max-w-full object-contain sm:max-h-[calc(100dvh-9rem)]">
                    </template>
                    <template x-if="active?.type === 'video'">
                        <video
                            x-ref="mediaVideo"
                            :src="active.src"
                            :poster="active.poster"
                            :aria-label="active.title"
                            class="max-h-[calc(100dvh-7rem)] max-w-full bg-black object-contain sm:max-h-[calc(100dvh-9rem)]"
                            controls
                            playsinline
                            preload="metadata"
                        ></video>
                    </template>
                </div>

                <div class="shrink-0 border-t border-white/10 bg-stone-950 px-4 py-3 pr-16 text-white sm:px-5">
                    <p id="gallery-modal-title" class="text-sm font-semibold sm:text-base" x-text="active?.title ?? ''"></p>
                </div>
            </div>
        </div>
    </template>
</div>
@endsection