<?php
defined('BASEPATH') OR exit('No direct script access allowed');
/** PROJECT CASE STUDY — Expects: $project, $gallery, $credits, $related, $categories. */
$p = $project;
$cs = array(
	'Brief'     => $p['cs_brief'],
	'Concept'   => $p['cs_concept'],
	'Execution' => $p['cs_execution'],
	'Results'   => $p['cs_results'],
);
$cs = array_filter($cs);
?>
<section class="page-hero">
	<div class="container">
		<div class="page-hero-inner" data-reveal style="max-width:820px;">
			<div class="breadcrumb">
				<a href="<?= base_url() ?>">Home</a> / <a href="<?= base_url('portfolio') ?>">Portfolio</a> / <span><?= html_escape($p['title']) ?></span>
			</div>
			<span class="eyebrow"><?= html_escape($categories[$p['category']] ?? $p['category']) ?></span>
			<h1><?= html_escape($p['title']) ?></h1>
			<p><?= html_escape($p['excerpt']) ?></p>
			<div style="display:flex;gap:28px;margin-top:24px;flex-wrap:wrap;">
				<div><span style="font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--iris-soft);">Brand</span><br><strong style="color:#fff;"><?= html_escape($p['brand']) ?></strong></div>
				<div><span style="font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--iris-soft);">Year</span><br><strong style="color:#fff;"><?= html_escape($p['year']) ?></strong></div>
				<div><span style="font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--iris-soft);">Category</span><br><strong style="color:#fff;"><?= html_escape($categories[$p['category']] ?? $p['category']) ?></strong></div>
			</div>
		</div>
	</div>
</section>

<!-- COVER MEDIA -->
<section class="section section--tight">
	<div class="container">
		<div data-reveal style="border-radius:var(--radius-lg);overflow:hidden;background:var(--ink);">
			<?php if ($p['video_type'] === 'youtube' && ! empty($p['youtube_id'])): ?>
				<div style="position:relative;aspect-ratio:16/9;">
					<iframe src="https://www.youtube.com/embed/<?= html_escape($p['youtube_id']) ?>?rel=0" title="<?= html_escape($p['title']) ?>" allowfullscreen style="position:absolute;inset:0;width:100%;height:100%;border:0;"></iframe>
				</div>
			<?php elseif ($p['video_type'] === 'file' && ! empty($p['video_file'])): ?>
				<video src="<?= upload_url($p['video_file']) ?>" controls poster="<?= upload_url($p['cover_image']) ?>" style="width:100%;display:block;"></video>
			<?php else: ?>
				<img src="<?= upload_url($p['cover_image'], 'img/work-fallback.jpg') ?>" alt="<?= html_escape($p['title']) ?>" style="width:100%;display:block;">
			<?php endif; ?>
		</div>
	</div>
</section>

<!-- CASE STUDY -->
<?php if ($cs): ?>
<section class="section section--tight">
	<div class="container">
		<div class="card-grid cols-2" style="gap:28px;">
			<?php $i = 0; foreach ($cs as $label => $text): $i++; ?>
				<div class="form-card" data-reveal data-delay="<?= ($i % 2) + 1 ?>">
					<span class="eyebrow"><?= str_pad($i, 2, '0', STR_PAD_LEFT) ?> · <?= $label ?></span>
					<p style="margin-top:14px;color:var(--ink-soft);"><?= nl2br(html_escape($text)) ?></p>
				</div>
			<?php endforeach; ?>
		</div>
	</div>
</section>
<?php endif; ?>

<!-- GALLERY -->
<?php if ($gallery): ?>
<section class="section section--tight">
	<div class="container">
		<div class="section-head" data-reveal><span class="eyebrow">The Gallery</span></div>
		<div class="card-grid cols-3">
			<?php foreach ($gallery as $i => $img): ?>
				<a href="<?= upload_url($img) ?>" data-lightbox="<?= upload_url($img) ?>" class="work-media" data-reveal data-delay="<?= ($i % 3) + 1 ?>" style="border-radius:var(--radius);aspect-ratio:4/5;cursor:zoom-in;">
					<img src="<?= upload_url($img) ?>" alt="Gallery image" loading="lazy">
				</a>
			<?php endforeach; ?>
		</div>
	</div>
</section>
<?php endif; ?>

<!-- CREDITS -->
<?php if ($credits): ?>
<section class="section section--cream section--tight">
	<div class="container">
		<div class="section-head center" data-reveal><span class="eyebrow" style="justify-content:center;">Featured Talent</span><h2>The faces of this project</h2></div>
		<div class="card-grid cols-4">
			<?php foreach ($credits as $i => $t): ?>
				<a href="<?= base_url('talent/view/'.$t['slug']) ?>" class="talent-card" data-reveal data-delay="<?= ($i % 4) + 1 ?>">
					<div class="talent-media"><img src="<?= upload_url($t['photo'], 'img/talent-fallback.jpg') ?>" alt="<?= html_escape($t['name']) ?>"></div>
					<div class="talent-overlay"><h3><?= html_escape($t['name']) ?></h3><p><?= html_escape($t['tagline']) ?></p></div>
				</a>
			<?php endforeach; ?>
		</div>
	</div>
</section>
<?php endif; ?>

<!-- RELATED -->
<?php if ($related): ?>
<section class="section">
	<div class="container">
		<div class="section-head" data-reveal><span class="eyebrow">More Work</span><h2 style="margin-top:14px;">Related projects</h2></div>
		<div class="card-grid cols-3">
			<?php foreach ($related as $i => $proj): ?>
				<a href="<?= base_url('portfolio/view/'.$proj['slug']) ?>" class="work-card" data-reveal data-delay="<?= $i + 1 ?>">
					<div class="work-media">
						<span class="work-tag"><?= html_escape($categories[$proj['category']] ?? $proj['category']) ?></span>
						<img src="<?= upload_url($proj['cover_image'], 'img/work-fallback.jpg') ?>" alt="<?= html_escape($proj['title']) ?>" loading="lazy">
					</div>
					<div class="work-body">
						<span class="meta"><?= html_escape($proj['brand']) ?></span>
						<h3><?= html_escape($proj['title']) ?></h3>
					</div>
				</a>
			<?php endforeach; ?>
		</div>
	</div>
</section>
<?php endif; ?>
