<?php
/// file: app/View/work/index.php

declare(strict_types=1);

/** @var list<array<string, mixed>> $projects */
/** @var array<string, string> $categories */
/** @var string $activeCategory */

$catKey = ($activeCategory === '' || $activeCategory === 'all') ? 'all' : $activeCategory;
$activeLabel = $categories[$catKey] ?? $categories['all'];
?>
<div class="work-page relative min-h-screen pb-24 md:pb-32" data-work-root>
    <canvas class="work-page__bg-canvas" aria-hidden="true"></canvas>
    <div class="work-page__arrows" aria-label="<?= e(__('work.scroll_nav_aria')) ?>">
        <button type="button" class="work-page__arrow work-page__arrow--up" data-work-scroll="up" aria-label="<?= e(__('work.scroll_up')) ?>">
            <svg class="work-page__arrow-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M18 15l-6-6-6 6"/>
            </svg>
        </button>
        <button type="button" class="work-page__arrow work-page__arrow--down" data-work-scroll="down" aria-label="<?= e(__('work.scroll_down')) ?>">
            <svg class="work-page__arrow-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M6 9l6 6 6-6"/>
            </svg>
        </button>
    </div>

    <div class="container-shell work-page__shell">
        <header class="work-page__header mb-16 md:mb-24">
            <h1 class="sr-only"><?= e(__('nav.work')) ?> — <?= e($activeLabel) ?></h1>
            <p class="work-page__section-kicker font-hero text-[0.65rem] font-extralight uppercase tracking-[0.32em] text-white/40"><?= e(__('nav.work')) ?></p>

            <details id="work-filter-details" class="work-page__filter-dropdown font-hero mt-6 md:mt-8">
                <summary class="work-page__filter-summary">
                    <span class="work-page__filter-kicker"><?= e(__('work.filter_label')) ?></span>
                    <span class="work-page__filter-title-row">
                        <span class="work-page__filter-title"><?= e($activeLabel) ?></span>
                        <svg class="work-page__filter-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M6 9l6 6 6-6"/>
                        </svg>
                    </span>
                </summary>
                <nav class="work-page__filter-list" aria-label="<?= e(__('work.filter_label')) ?>">
                    <?php foreach ($categories as $key => $label): ?>
                        <?php
                        $isActive = ($key === 'all' && ($activeCategory === '' || $activeCategory === 'all'))
                            || ($key !== 'all' && $activeCategory === $key);
                        $href = $key === 'all' ? url('/work') : url('/work?category=' . rawurlencode($key));
                        ?>
                        <a
                            href="<?= e($href) ?>"
                            class="work-page__filter-option<?= $isActive ? ' is-active' : '' ?>"
                            <?= $isActive ? 'aria-current="page"' : '' ?>
                        ><?= e($label) ?></a>
                    <?php endforeach; ?>
                </nav>
            </details>

            <p class="work-page__lede font-hero mt-8 max-w-xl text-sm font-extralight leading-relaxed text-white/45 md:mt-10 md:text-base"><?= e(__('work.enter_hint')) ?></p>
        </header>

        <div id="work-grid" class="work-page__grid mt-4 grid grid-cols-1 gap-14 md:mt-6 md:grid-cols-2 md:gap-x-10 md:gap-y-16 lg:gap-x-14 lg:gap-y-20">
            <?php if ($projects === []): ?>
                <p class="font-hero col-span-full text-center text-sm font-extralight text-white/40"><?= e(__('work.empty')) ?></p>
            <?php endif; ?>
            <?php foreach ($projects as $i => $p): ?>
                <?php \App\Core\View::component('work-project-card', ['project' => $p, 'index' => $i]); ?>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<noscript>
    <style>
        [data-work-root] [data-work-reveal] {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }
        .work-page__arrows {
            display: none !important;
        }
    </style>
</noscript>
