@extends('layouts.app')

@section('title', 'Galerij')
@section('meta_title', 'Galerij | Genkai Grill & Sushi Hasselt')
@section('meta_description', 'Bekijk de uitgebreide Genkai-galerij met sushi, Japanese fusion, cocktails en wijn in Hasselt.')

@php
    $g = config('genkai', []);
    $gallery = $g['gallery'] ?? [];
    $galleryItems = collect();
    foreach (($gallery['food'] ?? []) as $url) {
        $galleryItems->push(['src' => $url, 'category' => 'food', 'label' => 'Food', 'alt' => 'Gerecht uit de keuken van Genkai Grill & Sushi in Hasselt']);
    }
    foreach (($gallery['drinks'] ?? []) as $url) {
        $galleryItems->push(['src' => $url, 'category' => 'drinks', 'label' => 'Cocktails', 'alt' => 'Cocktail geserveerd bij Genkai Grill & Sushi in Hasselt']);
    }
    foreach (($gallery['wine'] ?? []) as $url) {
        $galleryItems->push(['src' => $url, 'category' => 'wine', 'label' => 'Wine', 'alt' => 'Wijnselectie bij Genkai Grill & Sushi in Hasselt']);
    }
    $heroBackdrops = collect($gallery['food'] ?? [])->filter()->values()->only([0, 5, 21, 36, 46])->values();
    $gallerySchema = [
        '@context' => 'https://schema.org',
        '@graph' => [
            ['@type' => 'BreadcrumbList', 'itemListElement' => [
                ['@type' => 'ListItem', 'position' => 1, 'name' => 'Home', 'item' => url('/')],
                ['@type' => 'ListItem', 'position' => 2, 'name' => 'Galerij', 'item' => route('gallery')],
            ]],
            ['@type' => 'ImageGallery', '@id' => route('gallery').'#gallery', 'name' => 'Genkai Grill & Sushi galerij', 'url' => route('gallery'), 'description' => 'Food-, cocktail- en wijnfotografie van Genkai Grill & Sushi in Hasselt.'],
        ],
    ];
@endphp

@push('head')
@if($heroBackdrops->first())<link rel="preload" as="image" href="{{ $heroBackdrops->first() }}" fetchpriority="high">@endif
<link rel="stylesheet" href="{{ asset('css/pages/gallery.css') }}?v={{ @filemtime(public_path('css/pages/gallery.css')) ?: time() }}">
<script type="application/ld+json">{!! json_encode($gallerySchema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush

@section('content')
<div class="gallery-page">
    <section class="gallery-hero" aria-labelledby="gallery-page-title">
        <div class="gallery-hero__backdrop gallery-hero__backdrop--cycle" aria-hidden="true">
            @foreach($heroBackdrops as $index => $src)
                <img class="gallery-hero__backdrop-frame gallery-hero__backdrop-frame--{{ $index + 1 }}" src="{{ $src }}" alt="" width="1920" height="1280" {{ $index === 0 ? 'fetchpriority=high' : 'loading=lazy' }} decoding="async">
            @endforeach
        </div>
        <div class="gallery-hero__shade" aria-hidden="true"></div>
        <div class="gallery-hero__grain" aria-hidden="true"></div>

        <div class="container gallery-hero__inner">
            <div class="gallery-hero__copy reveal">
                <nav class="gallery-breadcrumb" aria-label="Broodkruimel"><a href="{{ route('home') }}">Home</a><span aria-hidden="true">/</span><span>Galerij</span></nav>
                <span class="gallery-kicker">Genkai · In beeld</span>
                <h1 id="gallery-page-title">Proef de sfeer.<br><span>Voor je aan tafel zit.</span></h1>
                <p>Een blik op onze uitgebreide galerij van gerechten, cocktails en wijnen die samen de Genkai-beleving vormen.</p>
                <a class="btn btn-primary btn-lg" href="#gallery-grid">Bekijk {{ $galleryItems->count() }} beelden</a>
            </div>

            <div class="gallery-hero__mosaic reveal delay-1" aria-hidden="true">
                <figure class="gallery-hero__tile gallery-hero__tile--large"><img src="{{ $gallery['food'][21] ?? $g['images']['food_4'] }}" alt="" width="800" height="1000" decoding="async"></figure>
                <figure class="gallery-hero__tile gallery-hero__tile--small"><img src="{{ $gallery['drinks'][3] ?? $g['images']['cocktail_1'] }}" alt="" width="700" height="700" decoding="async"></figure>
                <figure class="gallery-hero__tile gallery-hero__tile--small"><img src="{{ $gallery['wine'][16] ?? $g['images']['wine_1'] }}" alt="" width="700" height="700" decoding="async"></figure>
            </div>
        </div>
    </section>

    <section class="gallery-intro"><div class="container gallery-intro__grid"><div class="gallery-intro__heading reveal"><span class="eyebrow dark">GENKAI IN BEELD</span><h2>Sushi, drinks &amp; details.</h2></div><div class="gallery-intro__copy reveal delay-1"><p class="gallery-intro__lead">Niet langer een kleine selectie: deze pagina gebruikt de uitgebreide publieke Genkai-galerij met food, cocktails en wijn.</p><p>Filter op categorie en klik op een beeld voor de fullscreen lightbox.</p></div></div></section>

    <section class="gallery-collection" id="gallery-grid" aria-labelledby="gallery-collection-title"><div class="container">
        <div class="gallery-toolbar reveal"><div><span class="eyebrow dark">VOLLEDIGE GALERIJ</span><h2 id="gallery-collection-title">Ontdek Genkai.</h2></div><div class="gallery-filters" data-gallery-filters aria-label="Filter galerij">
            <button type="button" class="active" data-gallery-filter="all" aria-pressed="true">Alles <span>{{ $galleryItems->count() }}</span></button>
            <button type="button" data-gallery-filter="food" aria-pressed="false">Food <span>{{ count($gallery['food'] ?? []) }}</span></button>
            <button type="button" data-gallery-filter="drinks" aria-pressed="false">Cocktails <span>{{ count($gallery['drinks'] ?? []) }}</span></button>
            <button type="button" data-gallery-filter="wine" aria-pressed="false">Wine <span>{{ count($gallery['wine'] ?? []) }}</span></button>
        </div></div>

        <div class="gallery-grid" data-gallery-grid>
            @foreach($galleryItems as $index => $item)
                <button class="gallery-card gallery-card--{{ ($index % 5) + 1 }} reveal" type="button" data-gallery-item data-gallery-category="{{ $item['category'] }}" data-gallery-src="{{ $item['src'] }}" data-gallery-alt="{{ $item['alt'] }}" data-gallery-label="{{ $item['label'] }}" aria-label="Open foto: {{ $item['alt'] }}">
                    <img src="{{ $item['src'] }}" alt="{{ $item['alt'] }}" loading="lazy" decoding="async" width="1000" height="1200">
                    <span class="gallery-card__meta"><small>{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</small><strong>{{ $item['label'] }}</strong><i aria-hidden="true">↗</i></span>
                </button>
            @endforeach
        </div>
    </div></section>

    <section class="gallery-cta"><div class="container gallery-cta__inner"><div class="gallery-cta__copy reveal"><span class="eyebrow">LIEVER ZELF PROEVEN?</span><h2>Van foto naar tafel.</h2><p>Bekijk de menukaart of reserveer meteen je tafel bij Genkai in Hasselt.</p></div><div class="gallery-cta__actions reveal delay-1"><a class="btn btn-primary btn-lg" href="{{ route('reservation.create') }}">Reserveer je tafel</a><a class="btn btn-glass btn-lg" href="{{ route('menu') }}">Bekijk het menu</a></div></div></section>
</div>

<div class="gallery-lightbox" data-gallery-lightbox hidden role="dialog" aria-modal="true" aria-labelledby="gallery-lightbox-title"><div class="gallery-lightbox__bar"><div><span id="gallery-lightbox-title" data-gallery-lightbox-label>Genkai galerij</span><strong data-gallery-lightbox-counter>1 / {{ $galleryItems->count() }}</strong></div><button type="button" data-gallery-lightbox-close aria-label="Galerij sluiten">×</button></div><button class="gallery-lightbox__nav gallery-lightbox__nav--prev" type="button" data-gallery-lightbox-prev aria-label="Vorige foto">←</button><div class="gallery-lightbox__stage"><img data-gallery-lightbox-image alt=""></div><button class="gallery-lightbox__nav gallery-lightbox__nav--next" type="button" data-gallery-lightbox-next aria-label="Volgende foto">→</button></div>
@endsection

@push('scripts')<script src="{{ asset('js/pages/gallery.js') }}?v={{ @filemtime(public_path('js/pages/gallery.js')) ?: time() }}" defer></script>@endpush