<?php
/// file: app/Components/discover-overlay.php

declare(strict_types=1);

/** @var string $brand */
?>
<div
    id="discover-overlay"
    class="discover-overlay menu-overlay fixed inset-0"
    role="dialog"
    aria-modal="true"
    aria-hidden="true"
    aria-label="<?= e(__('nav.menu')) ?>"
    data-discover-overlay
>
    <button
        type="button"
        class="discover-overlay__backdrop absolute inset-0 z-0 cursor-default border-0 bg-transparent p-0"
        aria-label="<?= e(__('nav.close_menu')) ?>"
        data-discover-backdrop
    ></button>
    <div class="menu-overlay__grain discover-overlay__grain pointer-events-none absolute inset-0 z-[1]" aria-hidden="true"></div>
    <div class="menu-overlay__vignette discover-overlay__vignette pointer-events-none absolute inset-0 z-[2]" aria-hidden="true"></div>
    <div class="discover-overlay__cursor-mesh pointer-events-none absolute inset-0 z-[3]" aria-hidden="true"></div>
    <div class="discover-overlay__cursor-glow pointer-events-none absolute inset-0 z-[4]" aria-hidden="true"></div>

    <div class="discover-overlay__chrome pointer-events-none absolute inset-x-0 top-0 z-20 flex items-start justify-between px-5 py-6 md:px-10 md:py-8">
        <a href="<?= e(url('/')) ?>" class="pointer-events-auto shrink-0 text-white/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40" aria-label="<?= e($brand) ?>">
            <?php \App\Core\View::component('site-logo', ['brand' => $brand, 'class' => 'h-[9px] w-auto md:h-2.5']); ?>
        </a>
        <button type="button" id="menu-close" class="menu-trigger menu-trigger-with-label pointer-events-auto inline-flex shrink-0 items-center gap-2 px-2 py-2 text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40 sm:gap-3 md:gap-4" aria-label="<?= e(__('nav.close_menu')) ?>">
            <span class="menu-trigger-label font-hero"><?= e(__('nav.close')) ?></span>
            <span class="menu-bars" aria-hidden="true"><span></span><span></span><span></span></span>
        </button>
    </div>

    <nav class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center px-5 sm:px-8" aria-label="Primary">
        <div class="discover-overlay__links">
            <div class="discover-overlay__dock">
                <div class="discover-overlay__dock-track">
                    <a class="discover-overlay__link font-hero" href="<?= e(url('/about')) ?>"><?= e(__('nav.about')) ?></a>
                    <span class="discover-overlay__sep" aria-hidden="true"></span>
                    <a class="discover-overlay__link font-hero" href="<?= e(url('/work')) ?>"><?= e(__('nav.work')) ?></a>
                    <span class="discover-overlay__sep" aria-hidden="true"></span>
                    <a class="discover-overlay__link font-hero" href="<?= e(url('/contact')) ?>"><?= e(__('nav.contact')) ?></a>
                </div>
            </div>
        </div>
    </nav>
</div>
