<?php
/// file: app/Components/header.php

declare(strict_types=1);

/** @var string $brand */
/** @var string|null $page */
$page = $page ?? '';
$isHome = $page === 'home';
$isWork = $page === 'work';
$headerBlend = ($isHome || $isWork) ? '' : 'mix-blend-difference';
?>
<header id="site-header" class="<?= e($headerBlend) ?>">
    <?php if ($isHome): ?>
        <div class="relative flex flex-col gap-3 bg-gradient-to-b from-black/70 via-black/35 to-transparent px-5 pb-8 pt-6 md:min-h-[4.25rem] md:gap-0 md:px-10 md:pb-10 md:pt-8">
            <div class="flex w-full min-w-0 items-start justify-between gap-3 md:block">
                <a href="<?= e(url('/')) ?>" data-home-chrome="logo" class="relative z-[2] min-w-0 shrink text-white/90 drop-shadow-[0_1px_12px_rgba(0,0,0,0.85)] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40 md:absolute md:left-10 md:top-1/2 md:-translate-y-1/2" aria-label="<?= e($brand) ?>">
                    <?php \App\Core\View::component('site-logo', ['brand' => $brand, 'class' => 'h-[9px] w-auto md:h-2.5']); ?>
                </a>
                <div data-home-chrome="actions" class="home-header-actions flex shrink-0 items-center justify-end gap-4 drop-shadow-[0_1px_10px_rgba(0,0,0,0.85)] sm:gap-5 md:absolute md:right-10 md:top-1/2 md:-translate-y-1/2 md:gap-8">
                    <?php \App\Core\View::component('home-hero-locale-toggle'); ?>
                    <button type="button" id="menu-open" class="menu-trigger menu-trigger-with-label inline-flex items-center gap-2 px-2 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40 sm:gap-3 md:gap-4" aria-expanded="false" aria-controls="discover-overlay" aria-haspopup="dialog" aria-label="<?= e(__('nav.discover')) ?>">
                        <span class="menu-trigger-label font-hero"><?= e(__('nav.discover')) ?></span>
                        <span class="menu-bars" aria-hidden="true"><span></span><span></span><span></span></span>
                    </button>
                </div>
            </div>
            <a href="<?= e(url('/work')) ?>" data-home-chrome="work" class="font-hero w-full self-center text-center text-[0.65rem] font-extralight uppercase leading-snug tracking-widest text-white/75 drop-shadow-[0_1px_10px_rgba(0,0,0,0.9)] transition hover:text-white md:absolute md:left-1/2 md:top-1/2 md:w-auto md:max-w-[min(90vw,20rem)] md:-translate-x-1/2 md:-translate-y-1/2 md:text-sm"><?= e(__('home.view_all_projects')) ?></a>
        </div>
    <?php elseif ($isWork): ?>
        <div class="relative 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 \App\Core\View::component('site-logo', ['brand' => $brand, 'class' => 'h-[9px] w-auto']); ?>
            </a>
            <div class="flex shrink-0 items-center gap-3 md:gap-5">
                <a href="<?= e(url('/')) ?>" class="font-hero group inline-flex max-w-[14rem] items-center gap-2 text-right text-xs font-extralight uppercase leading-snug tracking-widest text-white/65 transition hover:text-white sm:max-w-none">
                    <span><?= e(__('work.close_all_projects')) ?></span>
                    <span class="text-lg font-light leading-none text-white/40 transition group-hover:text-white/85" aria-hidden="true">×</span>
                </a>
                <span class="hidden h-3 w-px shrink-0 bg-white/25 sm:block" aria-hidden="true"></span>
                <button type="button" id="menu-open" class="menu-trigger menu-trigger-with-label inline-flex items-center gap-2 px-2 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40 sm:gap-3 md:gap-4" aria-expanded="false" aria-controls="discover-overlay" aria-haspopup="dialog" aria-label="<?= e(__('nav.discover')) ?>">
                    <span class="menu-trigger-label font-hero"><?= e(__('nav.discover')) ?></span>
                    <span class="menu-bars" aria-hidden="true"><span></span><span></span><span></span></span>
                </button>
            </div>
        </div>
    <?php else: ?>
        <div class="container-shell flex items-center justify-between py-6 md:py-8">
            <a href="<?= e(url('/')) ?>" class="group flex items-center gap-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-electric-400/60" data-cursor="default">
                <?php \App\Core\View::component('site-logo', ['brand' => $brand, 'class' => 'h-2 w-auto md:h-2.5']); ?>
                <span class="muted-label hidden text-[0.65rem] text-white/50 sm:inline"><?= e(__('nav.menu')) ?></span>
            </a>
            <div class="flex items-center gap-4 md:gap-6">
                <a href="<?= e(url('/contact')) ?>" class="magnetic-button hidden rounded-full border border-white/20 px-5 py-2 text-[0.65rem] uppercase tracking-[0.2em] text-white/90 transition hover:border-electric-400/50 hover:text-white md:inline-flex" data-cursor="hover"><?= e(__('cta.start_project')) ?></a>
                <button type="button" id="menu-open" class="menu-trigger menu-trigger-with-label inline-flex items-center gap-3 rounded-full border border-white/20 px-4 py-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-electric-400/60 md:gap-4" aria-expanded="false" aria-controls="discover-overlay" aria-haspopup="dialog" aria-label="<?= e(__('nav.discover')) ?>" data-cursor="hover">
                    <span class="menu-trigger-label font-hero"><?= e(__('nav.discover')) ?></span>
                    <span class="menu-bars menu-bars--sm" aria-hidden="true"><span></span><span></span><span></span></span>
                </button>
            </div>
        </div>
    <?php endif; ?>
</header>
