<?php
/// file: app/Components/work-project-card.php

declare(strict_types=1);

/** @var array<string, mixed> $project */
/** @var int $index */
$index = isset($index) ? (int) $index : 0;
$href = url('/work/' . rawurlencode((string) $project['slug']));
$cover = (string) ($project['cover_path'] ?? '');
$type = (string) ($project['cover_type'] ?? 'image');
$title = (string) $project['title'];
$client = (string) ($project['client'] ?? '');
$coverUrl = $cover !== '' && str_starts_with($cover, '/') ? url($cover) : default_cover_fallback_url();
?>
<article
    class="work-grid-card project-card group"
    data-work-reveal
    style="--work-reveal-i: <?= $index ?>;"
    data-cursor="view"
>
    <a href="<?= e($href) ?>" class="block focus:outline-none focus-visible:ring-2 focus-visible:ring-white/35 focus-visible:ring-offset-2 focus-visible:ring-offset-[#040814]">
        <div class="work-grid-card__media relative aspect-video overflow-hidden rounded-sm border border-white/[0.06] bg-zinc-950 transition-colors duration-500 group-hover:border-white/[0.12]">
            <?php if ($type === 'video' && $cover !== ''): ?>
                <video class="project-card__video relative z-[1] h-full w-full object-cover opacity-95 transition duration-700 ease-out group-hover:scale-[1.02] group-hover:opacity-100" src="<?= e($coverUrl) ?>" muted playsinline loop preload="metadata"></video>
            <?php else: ?>
                <img class="relative z-[1] h-full w-full object-cover opacity-95 transition duration-700 ease-out group-hover:scale-[1.02] group-hover:opacity-100" src="<?= e($coverUrl) ?>" alt="<?= e($title) ?>" loading="lazy" width="1200" height="675">
            <?php endif; ?>
        </div>
        <div class="work-grid-card__meta px-0 pt-6 text-left md:pt-8">
            <h2 class="font-hero text-[0.95rem] font-medium uppercase tracking-[0.16em] text-white md:text-base"><?= e($title) ?></h2>
            <?php if ($client !== ''): ?>
                <p class="mt-2 font-hero text-sm font-extralight text-white/50 md:mt-2.5 md:text-[0.95rem]"><?= e($client) ?></p>
            <?php endif; ?>
        </div>
    </a>
</article>
