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

declare(strict_types=1);

/** @var array<string, mixed> $project */
/** @var list<array<string, mixed>> $media */
/** @var list<array<string, mixed>> $related */
/** @var array<string, mixed>|null $nextProject */

$p = $project;
$cover = (string) ($p['cover_path'] ?? '');
$coverUrl = $cover !== '' && str_starts_with($cover, '/') ? url($cover) : default_cover_fallback_url();
$catSlug = trim((string) ($p['category'] ?? ''));
$catLabel = $catSlug !== '' && in_array($catSlug, \App\Models\Project::categorySlugs(), true)
    ? __(\App\Models\Project::categoryMessageKey($catSlug))
    : $catSlug;
?>
<div class="page-below-header md:pt-28">
<section class="relative min-h-[85vh] overflow-hidden">
    <?php if (($p['cover_type'] ?? '') === 'video'): ?>
        <video class="absolute inset-0 h-full w-full object-cover" src="<?= e($coverUrl) ?>" autoplay muted loop playsinline></video>
    <?php else: ?>
        <img src="<?= e($coverUrl) ?>" alt="" class="absolute inset-0 h-full w-full object-cover" width="1920" height="1080">
    <?php endif; ?>
    <div class="absolute inset-0 bg-gradient-to-t from-carbon via-carbon/40 to-transparent"></div>
    <div class="relative z-10 flex min-h-[85vh] items-end">
        <div class="container-shell pb-16">
            <p class="muted-label"><?= e((string) ($p['client'] ?? '')) ?> · <?= e((string) ($p['year'] ?? '')) ?></p>
            <h1 class="cinematic-heading mt-4 max-w-5xl"><?= e((string) $p['title']) ?></h1>
        </div>
    </div>
</section>

<div class="container-shell section-spacing">
    <div class="grid gap-12 lg:grid-cols-[minmax(0,1fr)_280px]">
        <article class="prose prose-invert max-w-none">
            <?php if (trim((string) ($p['summary'] ?? '')) !== ''): ?>
            <section class="project-chapter mb-20" data-chapter>
                <h2 class="font-display text-3xl text-white">Overview</h2>
                <p class="mt-6 text-lg text-silver-300"><?= nl2br(e((string) $p['summary'])) ?></p>
            </section>
            <?php endif; ?>
            <?php if (trim((string) ($p['challenge'] ?? '')) !== ''): ?>
            <section class="project-chapter mb-20 border-t border-white/10 pt-16" data-chapter>
                <h2 class="font-display text-3xl text-white">Challenge</h2>
                <p class="mt-6 text-silver-300"><?= nl2br(e((string) $p['challenge'])) ?></p>
            </section>
            <?php endif; ?>
            <?php if (trim((string) ($p['creative_direction'] ?? '')) !== ''): ?>
            <section class="project-chapter mb-20 border-t border-white/10 pt-16" data-chapter>
                <h2 class="font-display text-3xl text-white">Creative direction</h2>
                <p class="mt-6 text-silver-300"><?= nl2br(e((string) $p['creative_direction'])) ?></p>
            </section>
            <?php endif; ?>
            <?php if (trim((string) ($p['process'] ?? '')) !== ''): ?>
            <section class="project-chapter mb-20 border-t border-white/10 pt-16" data-chapter>
                <h2 class="font-display text-3xl text-white">Process</h2>
                <p class="mt-6 text-silver-300"><?= nl2br(e((string) $p['process'])) ?></p>
            </section>
            <?php endif; ?>
            <?php if (trim((string) ($p['outcomes'] ?? '')) !== ''): ?>
            <section class="project-chapter mb-20 border-t border-white/10 pt-16" data-chapter>
                <h2 class="font-display text-3xl text-white">Outcomes</h2>
                <p class="mt-6 text-silver-300"><?= nl2br(e((string) $p['outcomes'])) ?></p>
            </section>
            <?php endif; ?>
        </article>
        <aside class="project-meta lg:sticky lg:top-32 h-fit rounded-2xl border border-white/10 bg-charcoal/40 p-6 text-sm text-silver-400">
            <dl class="space-y-4">
                <div><dt class="muted-label">Client</dt><dd class="text-white"><?= e((string) ($p['client'] ?? '')) ?></dd></div>
                <div><dt class="muted-label">Year</dt><dd class="text-white"><?= e((string) ($p['year'] ?? '')) ?></dd></div>
                <div><dt class="muted-label">Sector</dt><dd class="text-white"><?= e((string) ($p['sector'] ?? '')) ?></dd></div>
                <div><dt class="muted-label">Services</dt><dd class="text-white"><?= e((string) ($p['services'] ?? '')) ?></dd></div>
                <div><dt class="muted-label">Category</dt><dd class="text-white"><?= e($catLabel) ?></dd></div>
            </dl>
        </aside>
    </div>
</div>

<?php if ($media !== []): ?>
<section class="section-spacing border-t border-white/10">
    <div class="container-shell space-y-8">
        <h2 class="font-display text-3xl text-white">Gallery</h2>
        <div class="grid gap-6 md:grid-cols-2">
            <?php foreach ($media as $m): ?>
                <?php
                $mp = (string) ($m['path'] ?? '');
                $mu = $mp !== '' && str_starts_with($mp, '/') ? url($mp) : default_cover_fallback_url();
                ?>
                <figure class="overflow-hidden rounded-2xl border border-white/10">
                    <?php if (($m['type'] ?? '') === 'video'): ?>
                        <video class="h-full w-full object-cover" src="<?= e($mu) ?>" controls playsinline></video>
                    <?php else: ?>
                        <img class="h-full w-full object-cover" src="<?= e($mu) ?>" alt="<?= e((string) ($m['caption'] ?? '')) ?>" loading="lazy" width="1600" height="1000">
                    <?php endif; ?>
                    <?php if (! empty($m['caption'])): ?>
                        <figcaption class="p-4 text-xs text-silver-500"><?= e((string) $m['caption']) ?></figcaption>
                    <?php endif; ?>
                </figure>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if ($related !== []): ?>
<section class="section-spacing">
    <div class="container-shell">
        <h2 class="font-display text-2xl text-white">Related</h2>
        <div class="mt-8 grid gap-6 md:grid-cols-3">
            <?php foreach ($related as $rp): ?>
                <?php \App\Core\View::component('project-card', ['project' => $rp, 'size' => 'md']); ?>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if ($nextProject): ?>
<section class="section-spacing border-t border-white/10">
    <div class="container-shell flex flex-col items-start justify-between gap-8 md:flex-row md:items-center">
        <div>
            <p class="muted-label">Next project</p>
            <h2 class="font-display text-3xl text-white"><?= e((string) $nextProject['title']) ?></h2>
        </div>
        <a class="rounded-full border border-white/25 px-8 py-3 text-xs uppercase tracking-[0.2em] text-white hover:border-electric-400/50" href="<?= e(url('/work/' . rawurlencode((string) $nextProject['slug']))) ?>">Continue</a>
    </div>
</section>
<?php endif; ?>
</div>
