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

declare(strict_types=1);

/** @var string $brand */
/** @var string|null $page */
$page = $page ?? '';
$homeVideoLogo = $page === 'home';
?>
<div id="menu-overlay" class="menu-overlay fixed inset-0 z-[125] bg-carbon" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Navigation" data-menu-touch-target>
    <div class="menu-overlay__grain pointer-events-none absolute inset-0 z-[1]" aria-hidden="true"></div>
    <div class="pointer-events-none absolute inset-0 z-0">
        <canvas id="menu-crystal-canvas" class="h-full w-full" aria-hidden="true"></canvas>
    </div>
    <div class="menu-overlay__vignette pointer-events-none absolute inset-0 z-[2]" aria-hidden="true"></div>

    <div class="menu-overlay__content relative z-10 flex h-full flex-col">
        <div class="flex items-center justify-between px-5 py-6 md:px-10 md:py-8">
            <a href="<?= e(url('/')) ?>" class="shrink-0 text-white/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40" aria-label="<?= e($brand) ?>">
                <?php if ($homeVideoLogo): ?>
                    <?php \App\Core\View::component('site-logo-video', ['brand' => $brand, 'class' => 'h-2.5 w-auto max-h-2.5 object-contain md:h-3 md:max-h-3']); ?>
                <?php else: ?>
                    <?php \App\Core\View::component('site-logo', ['brand' => $brand, 'class' => 'h-[9px] w-auto']); ?>
                <?php endif; ?>
            </a>
            <button type="button" id="menu-close" class="menu-trigger-with-label inline-flex items-center gap-3 p-2 text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40 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-auto flex flex-1 flex-col justify-center px-5 md:px-10" aria-label="Primary">
            <div class="menu-overlay__primary-nav">
                <a class="menu-link menu-link--primary font-hero" href="<?= e(url('/about')) ?>"><?= e(__('nav.about')) ?></a>
                <a class="menu-link menu-link--primary font-hero" href="<?= e(url('/work')) ?>"><?= e(__('nav.work')) ?></a>
                <a class="menu-link menu-link--primary font-hero" href="<?= e(url('/contact')) ?>"><?= e(__('nav.contact')) ?></a>
            </div>
            <div class="menu-overlay__secondary flex flex-wrap justify-center gap-4 md:gap-6">
                <a class="menu-link menu-overlay__secondary-link font-hero" href="<?= e(url('/')) ?>"><?= e(__('nav.index')) ?></a>
                <a class="menu-link menu-overlay__secondary-link font-hero" href="<?= e(url('/services')) ?>"><?= e(__('nav.services')) ?></a>
                <a class="menu-link menu-overlay__secondary-link font-hero" href="<?= e(url('/journal')) ?>"><?= e(__('nav.journal')) ?></a>
                <a class="menu-link menu-overlay__secondary-link font-hero" href="<?= e(url('/careers')) ?>"><?= e(__('nav.careers')) ?></a>
            </div>
        </nav>

        <div class="flex items-center justify-center px-5 pb-8 pt-4 md:px-10 md:pb-10">
            <form method="post" action="<?= e(url('/locale')) ?>" class="menu-overlay__locale flex flex-wrap items-center justify-center gap-3 font-hero">
                <?= \App\Core\Csrf::field() ?>
                <input type="hidden" name="redirect" value="<?= e($_SERVER['REQUEST_URI'] ?? '/') ?>">
                <button type="submit" name="locale" value="en" class="bg-transparent">EN</button>
                <span class="menu-overlay__locale-sep" aria-hidden="true">·</span>
                <button type="submit" name="locale" value="tr" class="bg-transparent">TR</button>
            </form>
        </div>
    </div>
</div>
