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

declare(strict_types=1);

/** @var array<string, mixed> $project */
/** @var string|null $size */
$size = $size ?? 'md';
$href = url('/work/' . rawurlencode((string) $project['slug']));
$cover = (string) ($project['cover_path'] ?? '');
$type = (string) ($project['cover_type'] ?? 'image');
$spanClass = $size === 'lg' ? 'md:col-span-2 md:row-span-2' : ($size === 'wide' ? 'md:col-span-2' : '');
?>
<article class="project-card media-card group relative <?= e($spanClass) ?>" data-cursor="view">
    <a href="<?= e($href) ?>" class="project-card__link block overflow-hidden rounded-2xl border border-white/10 bg-charcoal/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-electric-400/60">
        <div class="project-card__media relative aspect-[4/5] overflow-hidden md:aspect-[16/10]">
            <?php
            $coverUrl = $cover !== '' && str_starts_with($cover, '/') ? url($cover) : default_cover_fallback_url();
            ?>
            <?php if ($type === 'video' && $cover !== ''): ?>
                <video class="project-card__video h-full w-full object-cover opacity-80 transition duration-700 group-hover:scale-[1.03] group-hover:opacity-100" src="<?= e($coverUrl) ?>" muted playsinline loop preload="metadata"></video>
            <?php else: ?>
                <img class="project-card__img h-full w-full object-cover opacity-90 transition duration-700 group-hover:scale-[1.04] group-hover:opacity-100" src="<?= e($coverUrl) ?>" alt="<?= e((string) $project['title']) ?>" loading="lazy" width="1200" height="750">
            <?php endif; ?>
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-carbon via-transparent to-transparent opacity-80"></div>
        </div>
        <div class="project-card__meta p-6 md:p-8">
            <p class="muted-label"><?= e((string) ($project['category'] ?? '')) ?> · <?= e((string) ($project['year'] ?? '')) ?></p>
            <h3 class="mt-3 font-display text-2xl text-white md:text-3xl"><?= e((string) $project['title']) ?></h3>
            <p class="mt-3 max-w-xl text-sm text-silver-400 line-clamp-3"><?= e((string) ($project['summary'] ?? '')) ?></p>
        </div>
    </a>
</article>
