@extends('layouts.app')

@section('title', 'Groepsarrangementen')
@section('meta_title', 'Groepsarrangementen & Events | Genkai Hasselt')
@section('meta_description', 'Organiseer je familiefeest, bedrijfsavond, bruiloft of groepsdiner bij Genkai in Hasselt. Vier ruimtes, flexibele menuformules en plaats voor groepen tot 250 gasten.')

@php
    $g = config('genkai', []);
@endphp

@php
    $groupsSchema = [
        '@context' => 'https://schema.org',
        '@graph' => [
            [
                '@type' => 'BreadcrumbList',
                'itemListElement' => [
                    ['@type' => 'ListItem', 'position' => 1, 'name' => 'Home', 'item' => url('/')],
                    ['@type' => 'ListItem', 'position' => 2, 'name' => 'Groepsarrangementen', 'item' => route('groups')],
                ],
            ],
            [
                '@type' => 'WebPage',
                '@id' => route('groups').'#webpage',
                'url' => route('groups'),
                'name' => 'Groepsarrangementen bij Genkai Hasselt',
                'description' => 'Groepsarrangementen, feesten en zakelijke bijeenkomsten bij Genkai Grill & Sushi in Hasselt.',
            ],
        ],
    ];
@endphp

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

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

        <div class="container groups-hero__inner">
            <nav class="groups-breadcrumb reveal" aria-label="Broodkruimel">
                <a href="{{ route('home') }}">Home</a>
                <span aria-hidden="true">/</span>
                <span>Groepen</span>
            </nav>

            <div class="groups-hero__copy reveal">
                <span class="groups-kicker">Groepsarrangementen · Hasselt</span>
                <h1 id="groups-page-title">Samen tafelen.<br><span>Op jouw manier.</span></h1>
                <p>Van een intiem familiefeest tot een grotere bedrijfsavond. Genkai combineert flexibele ruimtes, Japanse smaken en een formule die bij jouw groep past.</p>
                <div class="groups-hero__actions">
                    <a class="btn btn-primary btn-lg" href="mailto:{{ $g['email'] }}?subject=Groepsarrangement%20Genkai">Vraag informatie</a>
                    <a class="btn btn-glass btn-lg" href="#mogelijkheden">Ontdek de mogelijkheden</a>
                </div>
            </div>

            <aside class="groups-hero__facts reveal delay-1" aria-label="Groepsmogelijkheden in het kort">
                <div>
                    <span>Capaciteit</span>
                    <strong>Tot 250 gasten</strong>
                </div>
                <div>
                    <span>Ruimtes</span>
                    <strong>4 flexibele ruimtes</strong>
                </div>
                <div>
                    <span>Formules</span>
                    <strong>Vanaf €40 p.p.</strong>
                </div>
                <a href="mailto:{{ $g['email'] }}?subject=Groepsarrangement%20Genkai">Bespreek je event <span aria-hidden="true">→</span></a>
            </aside>
        </div>

        <a class="groups-hero__scroll" href="#mogelijkheden" aria-label="Ga naar de groepsmogelijkheden">
            <span>Ontdek groepen</span>
            <i aria-hidden="true"></i>
        </a>
    </section>

    <section class="groups-intro" id="mogelijkheden">
        <div class="container groups-intro__grid">
            <div class="groups-intro__heading reveal">
                <span class="eyebrow dark">RUIMTE &amp; SFEER</span>
                <h2>Van kleine tafel tot groot gezelschap.</h2>
            </div>
            <div class="groups-intro__copy reveal delay-1">
                <p class="groups-intro__lead">Onze locatie biedt vier ruimtes die afgestemd kunnen worden op het type bijeenkomst en de grootte van je gezelschap.</p>
                <p>Genkai is geschikt voor familiefeesten, bruiloften, zakelijke bijeenkomsten, netwerkevents, teambuildings en bedrijfsfeesten. Samen bekijken we welke ruimte en formule het beste aansluiten bij jouw plannen.</p>
            </div>
        </div>
    </section>

    <section class="groups-occasions" aria-labelledby="groups-occasions-title">
        <div class="container">
            <div class="groups-section-heading reveal">
                <span class="eyebrow">VOOR ELK GEZELSCHAP</span>
                <h2 id="groups-occasions-title">Een setting die meebeweegt.</h2>
                <p>Geen twee groepen zijn hetzelfde. Daarom vertrekken we vanuit het moment dat jij wilt organiseren.</p>
            </div>

            <div class="groups-occasions__grid">
                <article class="groups-occasion reveal">
                    <span class="groups-occasion__number">01</span>
                    <div>
                        <small>Privé</small>
                        <h3>Familiefeesten</h3>
                        <p>Samen vieren met voldoende ruimte, een passende formule en een ontspannen sfeer aan tafel.</p>
                    </div>
                </article>
                <article class="groups-occasion reveal delay-1">
                    <span class="groups-occasion__number">02</span>
                    <div>
                        <small>Feestelijk</small>
                        <h3>Bruiloften &amp; momenten</h3>
                        <p>Een grotere gelegenheid met ruimte voor ontvangst, eten en een invulling die bij jullie dag past.</p>
                    </div>
                </article>
                <article class="groups-occasion reveal">
                    <span class="groups-occasion__number">03</span>
                    <div>
                        <small>Zakelijk</small>
                        <h3>Bedrijf &amp; netwerk</h3>
                        <p>Van een diner met collega’s tot een netwerkmoment of bedrijfsfeest in een moderne setting.</p>
                    </div>
                </article>
                <article class="groups-occasion reveal delay-1">
                    <span class="groups-occasion__number">04</span>
                    <div>
                        <small>Samen</small>
                        <h3>Teambuildings</h3>
                        <p>Een informele avond buiten de werkvloer, met gerechten om te delen en ruimte om samen te komen.</p>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <section class="groups-menu-feature">
        <div class="container groups-menu-feature__grid">
            <figure class="groups-menu-feature__visual reveal">
                <img src="{{ $g['images']['food_1'] }}" alt="Sushi en Japanse gerechten voor een groepsarrangement bij Genkai" loading="lazy" decoding="async" width="1100" height="1300">
                <figcaption>
                    <span>Genkai Grill &amp; Sushi</span>
                    <strong>Flexibel samengesteld</strong>
                </figcaption>
            </figure>

            <div class="groups-menu-feature__copy reveal delay-1">
                <span class="eyebrow">MENUFORMULES</span>
                <h2>Van sushi tot een uitgebreid diner.</h2>
                <p class="groups-menu-feature__lead">Naast sushi biedt Genkai een breed aanbod Japanese fusiongerechten. Formules kunnen afgestemd worden op je gezelschap, van een eenvoudiger buffet tot een uitgebreid diner.</p>
                <p>Ook vegetarische en veganistische mogelijkheden kunnen meegenomen worden bij het samenstellen van de formule.</p>

                <div class="groups-price">
                    <div>
                        <span>Formules vanaf</span>
                        <strong>€40</strong>
                        <small>per persoon</small>
                    </div>
                    <a href="{{ route('menu') }}">Bekijk ook onze menukaart <span aria-hidden="true">→</span></a>
                </div>
            </div>
        </div>
    </section>

    <section class="groups-process" aria-labelledby="groups-process-title">
        <div class="container">
            <div class="groups-process__heading reveal">
                <span class="eyebrow dark">VAN IDEE TOT AVOND</span>
                <h2 id="groups-process-title">Ondersteuning van A tot Z.</h2>
                <p>We stemmen het arrangement samen af op je gezelschap en het type event.</p>
            </div>

            <div class="groups-process__steps">
                <article class="reveal">
                    <span>01</span>
                    <h3>Vertel ons je plannen</h3>
                    <p>Laat weten met hoeveel personen je komt, welk type gelegenheid je organiseert en wat je voor ogen hebt.</p>
                </article>
                <article class="reveal delay-1">
                    <span>02</span>
                    <h3>Ruimte &amp; formule</h3>
                    <p>Samen bekijken we welke ruimte, opstelling en menuformule het beste aansluiten bij je groep.</p>
                </article>
                <article class="reveal delay-2">
                    <span>03</span>
                    <h3>Genieten bij Genkai</h3>
                    <p>Op de dag zelf focust het team op de uitvoering, zodat jij tijd hebt voor je gasten.</p>
                </article>
            </div>
        </div>
    </section>

    <section class="groups-cta">
        <div class="container groups-cta__inner">
            <div class="groups-cta__copy reveal">
                <span class="eyebrow">JOUW GROEP BIJ GENKAI</span>
                <h2>Vertel ons wat je wilt organiseren.</h2>
                <p>Stuur ons je gewenste datum, het aantal gasten en het type gelegenheid. Dan kan het team samen met jou de mogelijkheden bekijken.</p>
            </div>
            <div class="groups-cta__actions reveal delay-1">
                <a class="btn btn-primary btn-lg" href="mailto:{{ $g['email'] }}?subject=Groepsarrangement%20Genkai">Mail {{ $g['email'] }}</a>
                <a class="groups-cta__phone" href="tel:{{ $g['phone_href'] }}">
                    <span>Of bel ons</span>
                    <strong>{{ $g['phone'] }}</strong>
                </a>
            </div>
        </div>
    </section>
</div>
@endsection