<?php

/*
 * ═══════════════════════════════════════════════════════════════════
 * CASE STUDY TEMPLATE
 * ═══════════════════════════════════════════════════════════════════
 *
 * HOW TO USE
 * ──────────
 * 1. Copy this folder to portfolio/{slug}/
 * 2. Fill in every TODO below — nothing should say TODO when live
 * 3. Add an entry to $projects in data/projects.php (including page_title, page_desc)
 * 4. Drop screenshots into /img/{slug}/
 *
 * IMAGES
 * ──────
 * hero.jpg          — full-page screenshot (used as grid thumbnail too)
 * feature-1.jpg     — first feature / flow screenshot
 * feature-2.jpg     — second feature / flow screenshot
 * Add more as needed — duplicate the 2-col screenshot section below.
 *
 * SECTIONS (delete what you don't need)
 * ──────────────────────────────────────
 * · Project Overview   — always include
 * · Hero screenshot    — always include
 * · Feature section    — include if there's a flow / feature worth showing
 * · Craft & Execution  — include if the build has something worth saying
 * · CTA                — always include, comes from cs_footer.php
 * ═══════════════════════════════════════════════════════════════════
 */

// ── Set the slug — everything else lives in data/projects.php ─────
$cs_slug = 'TODO';   // e.g. 'northgate'
require __DIR__ . '/../../includes/cs_header.php';
?>


<!-- ── HERO SCREENSHOT ───────────────────────────────────────────── -->
<section class="section">
	<div class="section-label">Project Overview</div>

	<div class="section-content">
		<p>TODO What problem did the client have and what did you build to fix it? Keep it to 2–3 sentences. Be specific — name the feature, the constraint, the outcome.</p>
	</div>

	<div class="screenshot-hero-wrap">
		<div class="browser-chrome">
			<div class="browser-dots">
				<span></span><span></span><span></span>
			</div>
			<span class="browser-url"><?= htmlspecialchars($p['domain']) ?></span>
		</div>
		<div class="screenshot-hero-scroll">
			<img
				src="/img/<?= htmlspecialchars($cs_slug) ?>/hero.jpg"
				alt="TODO Client Name — TODO description"
				class="screenshot-hero"
				loading="lazy"
			>
		</div>
	</div>
</section>


<!-- ── FEATURE / FLOW SCREENSHOTS (2-col) ────────────────────────── -->
<!-- Delete this section if you don't have feature screenshots -->
<section class="section">
	<div class="section-label">TODO Section Label</div><!-- e.g. Booking Flow / Admin Panel / Listings -->
	<div class="services-grid">

		<div class="service-item screenshot-card">
			<span class="service-num">TODO Feature label</span><!-- e.g. Step 1 / Vehicle Lookup -->
			<p class="screenshot-card__desc">TODO Feature description.</p>
			<div class="browser-chrome browser-chrome--sm">
				<div class="browser-dots">
					<span></span><span></span><span></span>
				</div>
				<span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/TODO-path</span>
			</div>
			<img
				src="/img/<?= htmlspecialchars($cs_slug) ?>/feature-1.jpg"
				alt="TODO description"
				class="screenshot-screen"
				loading="lazy"
			>
		</div>

		<div class="service-item screenshot-card">
			<span class="service-num">TODO Feature label</span>
			<p class="screenshot-card__desc">TODO Feature description.</p>
			<div class="browser-chrome browser-chrome--sm">
				<div class="browser-dots">
					<span></span><span></span><span></span>
				</div>
				<span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/TODO-path</span>
			</div>
			<img
				src="/img/<?= htmlspecialchars($cs_slug) ?>/feature-2.jpg"
				alt="TODO description"
				class="screenshot-screen"
				loading="lazy"
			>
		</div>

	</div>
</section>


<!-- ── CRAFT & EXECUTION ─────────────────────────────────────────── -->
<!-- Delete this section if there's nothing distinctive about the build -->
<section class="section">
	<div class="section-label">Craft & Execution</div>
	<div class="section-content">
		<p>TODO Anything worth saying about how it was built — a technical decision, a performance win, something that made the difference. If you can't think of anything specific, delete this section.</p>
	</div>
</section>

<?php require __DIR__ . '/../../includes/cs_footer.php'; ?>
