Age Gate

@props([
    'minAge' => 21,
    // A remembered confirmation expires after this many days.
    'rememberDays' => 30,
    // localStorage key; defaults to one per minimum age, so an 18+ confirmation
    // never satisfies a 21+ gate.
    'storageKey' => null,
    'logo' => 'Juniper Spirits',
    // Copy defaults use :age, filled from minAge.
    'heading' => 'Are you :age or older?',
    'subheading' => 'You must be of legal age to enter this store.',
    'remember' => 'Remember me on this device',
    'confirm' => "Yes, I'm :age+",
    'deny' => 'No',
    'finePrint' => 'By entering you confirm you are of legal drinking age in your country of residence. Please drink responsibly.',
    'deniedHeading' => 'Sorry, you must be :age+ to enter.',
    'deniedSubheading' => 'We are unable to grant access to this store. Come back when you meet the legal age requirement.',
    'goBack' => 'Go back',
])

@php
    $minAge = max(1, (int) $minAge);
    $age = ['age' => $minAge];
    $gate = [
        'minAge' => $minAge,
        'rememberDays' => max(1, (int) $rememberDays),
        'storageKey' => filled($storageKey) ? (string) $storageKey : 'age-gate:verified:'.$minAge,
    ];
    // Unique per render so two gates on a page never share a checkbox id.
    $rememberId = 'age-gate-remember-'.\Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(8));
@endphp

{{--
    A client-side age acknowledgement, not identity or legal proof of age.
    Confirming hides the gate and dispatches a bubbling `age-gate-verified`
    event with { minAge, remembered, source }. A remembered choice is stored
    with an expiry; storage errors (private mode, quota) never block entry.
--}}

<section
    data-slot="age-gate-01"
    x-data="{
        ...{{ \Illuminate\Support\Js::from($gate) }},
        verified: false,
        denied: false,
        remember: false,
        init() {
            let until = 0;
            try {
                until = Number(window.localStorage.getItem(this.storageKey)) || 0;
            } catch (e) {
                // Storage unavailable (private mode / quota): always ask.
            }
            if (until > Date.now()) {
                this.verified = true;
                this.announce(true, 'storage');
            }
        },
        verify() {
            let remembered = false;
            if (this.remember) {
                try {
                    window.localStorage.setItem(this.storageKey, String(Date.now() + this.rememberDays * 86400000));
                    remembered = true;
                } catch (e) {
                    // Storage unavailable: the confirmation still applies for this visit.
                }
            }
            this.denied = false;
            this.verified = true;
            this.announce(remembered, 'confirmation');
        },
        announce(remembered, source) {
            this.$dispatch('age-gate-verified', { minAge: this.minAge, remembered, source });
        },
        // aria-modal promises that Tab stays inside the gate: wrap it over
        // the visible controls instead of letting focus reach the page.
        trap(event) {
            const controls = [...this.$refs.panel.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex=\'-1\'])')]
                .filter((node) => node.getClientRects().length > 0);
            if (!controls.length) return;
            const index = controls.indexOf(document.activeElement);
            const next = event.shiftKey
                ? (index <= 0 ? controls.length - 1 : index - 1)
                : (index === -1 || index === controls.length - 1 ? 0 : index + 1);
            controls[next].focus();
        },
    }"
    x-show="!verified"
    x-cloak
    {{ $attributes->merge(['class' => 'flex min-h-svh items-center justify-center bg-muted/40 px-4 py-12 text-foreground']) }}
>
    <x-ui.card
        role="dialog"
        aria-modal="true"
        x-ref="panel"
        x-on:keydown.tab.prevent="trap($event)"
        aria-label="{{ __('Age verification') }}"
        class="relative w-full max-w-md overflow-hidden rounded-lg border border-border bg-card p-6 text-center shadow-xl sm:p-8"
    >
        {{-- Default state: the age question --}}
        <div x-show="!denied" class="flex flex-col items-center gap-6">
            {{-- Brand mark / logo chip --}}
            <span class="flex items-center gap-2 text-sm font-semibold tracking-tight">
                <span
                    aria-hidden="true"
                    class="grid size-10 place-items-center rounded-md bg-primary text-primary-foreground"
                >
                    <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M8 22h8" />
                        <path d="M7 10h10" />
                        <path d="M12 15v7" />
                        <path d="M12 15a5 5 0 0 0 5-5V3H7v7a5 5 0 0 0 5 5Z" />
                    </svg>
                </span>
                {{ __($logo) }}
            </span>

            <div class="flex flex-col gap-2">
                <h2 class="text-pretty text-xl font-semibold leading-tight tracking-tight sm:text-2xl">
                    {{ __($heading, $age) }}
                </h2>
                <p class="text-pretty text-sm leading-relaxed text-muted-foreground">
                    {{ __($subheading) }}
                </p>
            </div>

            <div class="flex items-center gap-2">
                <x-ui.checkbox :id="$rememberId" name="remember_age_gate" x-model="remember" />
                <label for="{{ $rememberId }}" class="cursor-pointer select-none text-sm leading-none text-muted-foreground">
                    {{ __($remember) }}
                </label>
            </div>

            <div class="flex w-full flex-col gap-4 sm:flex-row">
                <x-ui.button
                    type="button"
                    size="lg"
                    x-on:click="verify()"
                    class="w-full"
                >
                    {{ __($confirm, $age) }}
                </x-ui.button>
                <x-ui.button
                    type="button"
                    size="lg"
                    variant="outline"
                    x-on:click="denied = true"
                    class="w-full"
                >
                    {{ __($deny) }}
                </x-ui.button>
            </div>

            <x-ui.separator class="w-full" />

            <p class="text-pretty text-xs leading-relaxed text-muted-foreground">
                {{ __($finePrint) }}
            </p>
        </div>

        {{-- Denied state: polite refusal with a way back --}}
        <div x-show="denied" x-cloak class="flex flex-col items-center gap-6">
            <span
                aria-hidden="true"
                class="grid size-12 place-items-center rounded-full bg-destructive/10 text-destructive"
            >
                <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <circle cx="12" cy="12" r="10" />
                    <path d="m15 9-6 6" />
                    <path d="m9 9 6 6" />
                </svg>
            </span>

            <div class="flex flex-col gap-2">
                <h2 class="text-pretty text-xl font-semibold leading-tight tracking-tight sm:text-2xl">
                    {{ __($deniedHeading, $age) }}
                </h2>
                <p class="text-pretty text-sm leading-relaxed text-muted-foreground">
                    {{ __($deniedSubheading) }}
                </p>
            </div>

            <a
                href="#"
                x-on:click.prevent="denied = false"
                class="inline-flex items-center gap-2 text-sm font-medium text-foreground hover:underline"
            >
                <svg class="size-4 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="m12 19-7-7 7-7" />
                    <path d="M19 12H5" />
                </svg>
                {{ __($goBack) }}
            </a>
        </div>
    </x-ui.card>
</section>