@extends('layouts.app')

@section('title', 'Menu')
@section('meta_title', 'Menu | Genkai Grill & Sushi Hasselt')
@section('meta_description', 'Bekijk de menukaart van Genkai Grill & Sushi in Hasselt. Ontdek sushi, grillgerechten en Japanese fusion voor lunch, diner en take-away.')

@php
    $g = config('genkai', []);
@endphp
@php
    $menuSchema = [
        '@context' => 'https://schema.org',
        '@graph' => [
            [
                '@type' => 'WebPage',
                '@id' => url('/menu').'#webpage',
                'url' => url('/menu'),
                'name' => 'Menu | Genkai Grill & Sushi Hasselt',
                'description' => 'Bekijk de menukaart van Genkai Grill & Sushi in Hasselt met sushi, grillgerechten en Japanese fusion.',
                'inLanguage' => 'nl-BE',
                'isPartOf' => [
                    '@type' => 'WebSite',
                    '@id' => url('/').'#website',
                    'url' => url('/'),
                    'name' => 'Genkai Grill & Sushi',
                ],
                'about' => [
                    '@id' => url('/').'#restaurant',
                ],
            ],
            [
                '@type' => 'Restaurant',
                '@id' => url('/').'#restaurant',
                'name' => 'Genkai Grill & Sushi',
                'url' => url('/'),
                'hasMenu' => url('/menu'),
                'servesCuisine' => ['Japanese', 'Sushi', 'Grill', 'Japanese fusion'],
                'address' => [
                    '@type' => 'PostalAddress',
                    'streetAddress' => 'Genkersteenweg 352',
                    'postalCode' => '3500',
                    'addressLocality' => 'Hasselt',
                    'addressCountry' => 'BE',
                ],
            ],
            [
                '@type' => 'BreadcrumbList',
                'itemListElement' => [
                    [
                        '@type' => 'ListItem',
                        'position' => 1,
                        'name' => 'Home',
                        'item' => url('/'),
                    ],
                    [
                        '@type' => 'ListItem',
                        'position' => 2,
                        'name' => 'Menu',
                        'item' => url('/menu'),
                    ],
                ],
            ],
        ],
    ];
@endphp

@push('head')
<link rel="preload" as="image" href="{{ $g['images']['food_3'] }}" fetchpriority="high">
<link rel="stylesheet" href="{{ asset('css/pages/public-menu.css') }}?v={{ @filemtime(public_path('css/pages/public-menu.css')) ?: time() }}">
<script type="application/ld+json">{!! json_encode($menuSchema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush

@section('content')
<div class="public-menu-page">
    <section class="public-menu-hero" aria-labelledby="menu-page-title">
        <div class="public-menu-hero__media" aria-hidden="true">
            <img src="{{ $g['images']['food_3'] }}" alt="" width="1920" height="1280" fetchpriority="high" decoding="async">
        </div>
        <div class="public-menu-hero__shade" aria-hidden="true"></div>
        <div class="public-menu-hero__grain" aria-hidden="true"></div>

        <div class="container public-menu-hero__inner">
            <nav class="public-menu-breadcrumb reveal" aria-label="Broodkruimel">
                <a href="{{ url('/') }}">Home</a>
                <span aria-hidden="true">/</span>
                <span>Menu</span>
            </nav>

            <div class="public-menu-hero__copy reveal">
                <span class="public-menu-kicker">Genkai · Grill &amp; Sushi</span>
                <h1 id="menu-page-title">Ontdek onze <span>menukaart.</span></h1>
                <p>Van sushi en grill tot Japanese fusion. Bekijk de actuele Genkai-kaart en kies waar je op dat moment zin in hebt.</p>
                <div class="public-menu-hero__actions">
                    <a class="btn btn-primary btn-lg" href="#menukaart">Bekijk de kaart</a>
                    <a class="btn btn-glass btn-lg" href="{{ $g['order_url'] }}" target="_blank" rel="noopener">Bestel voor afhaal <span aria-hidden="true">↗</span></a>
                </div>
            </div>

            <aside class="public-menu-hero__card reveal delay-1" aria-label="Keukenuren">
                <div>
                    <span>Lunch</span>
                    <strong>12:00 – 15:00</strong>
                    <small>Vrijdag t/m zondag</small>
                </div>
                <div>
                    <span>Diner</span>
                    <strong>17:00 – 22:00</strong>
                    <small>Dagelijks</small>
                </div>
                <a href="{{ route('reservation.create') }}">Reserveer je tafel <span aria-hidden="true">→</span></a>
            </aside>
        </div>

        <a class="public-menu-hero__scroll" href="#menu-intro" aria-label="Ga naar de menukaart">
            <span>Scroll naar de kaart</span>
            <i aria-hidden="true"></i>
        </a>
    </section>

    <section class="public-menu-intro" id="menu-intro">
        <div class="container public-menu-intro__grid">
            <div class="public-menu-intro__heading reveal">
                <span class="eyebrow dark">VOOR ELK MOMENT</span>
                <h2>Sushi, grill en fusion op één kaart.</h2>
            </div>
            <div class="public-menu-intro__copy reveal delay-1">
                <p class="public-menu-intro__lead">Blader rustig door de volledige kaart. Klik op een pagina om ze groot te openen en navigeer vervolgens rechtstreeks door de menukaart.</p>
                <p>De menuvisuals hieronder zijn de actuele publieke Genkai-menupagina’s. Voor take-away kun je rechtstreeks naar onze online bestelomgeving.</p>
            </div>
        </div>
    </section>

    <section class="public-menu-moments" aria-label="Genkai menu en service">
        <div class="container public-menu-moments__grid">
            <article class="public-menu-moment public-menu-moment--image reveal">
                <img src="{{ $g['images']['food_1'] }}" alt="Sushi geserveerd bij Genkai in Hasselt" loading="lazy" decoding="async" width="1000" height="1200">
                <div class="public-menu-moment__overlay">
                    <span>01</span>
                    <strong>Sushi</strong>
                    <small>Nigiri, maki, sashimi &amp; rolls</small>
                </div>
            </article>
            <article class="public-menu-moment public-menu-moment--dark reveal delay-1">
                <span class="public-menu-moment__number">02</span>
                <div>
                    <small>Warme keuken</small>
                    <h3>Grill &amp; Japanese fusion</h3>
                    <p>Combineer koude en warme gerechten aan tafel en ontdek verschillende smaken tijdens dezelfde avond.</p>
                </div>
                <a href="#menukaart">Naar de volledige kaart <span aria-hidden="true">↓</span></a>
            </article>
            <article class="public-menu-moment public-menu-moment--image reveal delay-2">
                <img src="{{ $g['images']['cocktail_1'] }}" alt="Drankje geserveerd bij Genkai Grill & Sushi" loading="lazy" decoding="async" width="1000" height="1200">
                <div class="public-menu-moment__overlay">
                    <span>03</span>
                    <strong>Drinks</strong>
                    <small>Bij je lunch of avond uit</small>
                </div>
            </article>
        </div>
    </section>

    <section class="public-menu-book" id="menukaart" aria-labelledby="menu-book-title">
        <div class="container">
            <div class="public-menu-book__heading">
                <div class="reveal">
                    <span class="eyebrow">DE MENUKAART</span>
                    <h2 id="menu-book-title">Blader door Genkai.</h2>
                </div>
                <div class="public-menu-book__actions reveal delay-1">
                    <p>Klik op een pagina voor een grotere weergave.</p>
                    <a class="btn btn-outline-light" href="{{ $g['order_url'] }}" target="_blank" rel="noopener">Online bestellen <span aria-hidden="true">↗</span></a>
                </div>
            </div>

            <div class="public-menu-book__grid" data-menu-gallery>
                @foreach($g['menu_pages'] as $i => $img)
                    <button class="public-menu-sheet reveal" type="button" data-menu-page data-index="{{ $i }}" aria-label="Open menukaart pagina {{ $i + 1 }}">
                        <span class="public-menu-sheet__topline">
                            <span>GENKAI</span>
                            <span>{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</span>
                        </span>
                        <span class="public-menu-sheet__image">
                            <img src="{{ $img }}" alt="Genkai menukaart pagina {{ $i + 1 }}" loading="lazy" decoding="async" width="1200" height="1697">
                        </span>
                        <span class="public-menu-sheet__footer">
                            <strong>Menukaart</strong>
                            <span>Pagina {{ $i + 1 }} <i aria-hidden="true">↗</i></span>
                        </span>
                    </button>
                @endforeach
            </div>
        </div>
    </section>

    <section class="public-menu-service">
        <div class="container public-menu-service__grid">
            <div class="public-menu-service__copy reveal">
                <span class="eyebrow dark">JOUW MOMENT BIJ GENKAI</span>
                <h2>Aan tafel of liever thuis?</h2>
                <p>Reserveer voor lunch of diner, of bestel rechtstreeks via onze online bestelomgeving voor take-away.</p>
            </div>
            <div class="public-menu-service__options reveal delay-1">
                <a href="{{ route('reservation.create') }}">
                    <span>01</span>
                    <div><strong>Reserveer een tafel</strong><small>Plan je bezoek aan Genkai in Hasselt.</small></div>
                    <i aria-hidden="true">→</i>
                </a>
                <a href="{{ $g['order_url'] }}" target="_blank" rel="noopener">
                    <span>02</span>
                    <div><strong>Bestel voor take-away</strong><small>Ga naar de online bestelomgeving.</small></div>
                    <i aria-hidden="true">↗</i>
                </a>
            </div>
        </div>
    </section>
</div>

<div class="public-menu-lightbox" data-menu-lightbox hidden role="dialog" aria-modal="true" aria-labelledby="menu-lightbox-title">
    <div class="public-menu-lightbox__bar">
        <div>
            <span id="menu-lightbox-title">Genkai menukaart</span>
            <strong data-menu-lightbox-counter>Pagina 1 van {{ count($g['menu_pages']) }}</strong>
        </div>
        <button type="button" data-menu-lightbox-close aria-label="Menukaart sluiten">×</button>
    </div>
    <button class="public-menu-lightbox__nav public-menu-lightbox__nav--prev" type="button" data-menu-lightbox-prev aria-label="Vorige menupagina">←</button>
    <div class="public-menu-lightbox__stage">
        <img data-menu-lightbox-image alt="Vergrote Genkai menukaart">
    </div>
    <button class="public-menu-lightbox__nav public-menu-lightbox__nav--next" type="button" data-menu-lightbox-next aria-label="Volgende menupagina">→</button>
</div>
@endsection

@push('scripts')
<script>
window.GENKAI_MENU_PAGES = @json($g['menu_pages']);
</script>
<script src="{{ asset('js/pages/public-menu.js') }}?v={{ @filemtime(public_path('js/pages/public-menu.js')) ?: time() }}" defer></script>
@endpush