<?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 the project to the $projects array in portfolio/index.php
 * 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, do not change
 * ═══════════════════════════════════════════════════════════════════
 */

// ── Page config ───────────────────────────────────────────────────
$title       = 'TODO Client Name — Case Study';   // e.g. 'Northgate Motors — Case Study'
$description = 'TODO One sentence about what you built and for whom.';
$extra_css   = '/css/portfolio.css';
require __DIR__ . '/../../includes/header.php';

// ── Project config (matches portfolio/index.php entry) ────────────
$cs_num    = 'TODO';   // e.g. '02'
$cs_code   = 'TODO';   // e.g. 'WEB_DEV' / 'E_COMMERCE' / 'BOOKING' / 'LANDING' / 'FULL_BUILD'
$cs_domain = 'TODO';   // e.g. 'example.co.uk' (no https://)
?>

<div class="cs-breadcrumb">
	<a href="/portfolio/" class="cs-back">← All Work</a>
	<span class="cs-breadcrumb-label">[<?= htmlspecialchars($cs_num) ?> / <?= htmlspecialchars($cs_code) ?>]</span>
</div>

<header class="hero">
	<div class="hero-label">Case Study — <?= htmlspecialchars($cs_num) ?></div>
	<h1>TODO<br>Client Name</h1>                    <!-- break the name naturally across 2 lines -->
	<p class="hero-sub">TODO Type · TODO Year</p>  <!-- e.g. Website Redesign · 2025 -->
	<ul class="cs-meta-bar">
		<li>TODO Stack</li>                         <!-- e.g. PHP · MySQL · Tailwind CSS -->
		<li>TODO Client, Location</li>              <!-- e.g. Northgate Motors, Peterborough -->
		<li>TODO Year</li>                          <!-- e.g. 2025 -->
	</ul>
</header>


<!-- ── PROJECT OVERVIEW ──────────────────────────────────────────── -->
<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>
</section>


<!-- ── HERO SCREENSHOT ───────────────────────────────────────────── -->
<section class="section">
	<div class="section-label">TODO Section label</div><!-- e.g. Homepage / Dashboard / Listings -->
	<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($cs_domain) ?></span>
		</div>
		<img
			src="/img/TODO-slug/hero.jpg"
			alt="TODO Client Name — TODO description"
			class="screenshot-hero"
			loading="lazy"
		>
	</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 -->
			<div class="browser-chrome browser-chrome--sm">
				<div class="browser-dots">
					<span></span><span></span><span></span>
				</div>
				<span class="browser-url"><?= htmlspecialchars($cs_domain) ?>/TODO-path</span>
			</div>
			<img
				src="/img/TODO-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>
			<div class="browser-chrome browser-chrome--sm">
				<div class="browser-dots">
					<span></span><span></span><span></span>
				</div>
				<span class="browser-url"><?= htmlspecialchars($cs_domain) ?>/TODO-path</span>
			</div>
			<img
				src="/img/TODO-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>


<!-- ── CTA — DO NOT CHANGE ───────────────────────────────────────── -->
<section class="section section-cta">
	<div class="section-label">— Next</div>
	<div class="section-content">
		<a href="/portfolio/" class="cs-back cs-back--lg">← Back to All Work</a>
		<p class="large-text">Got a project in mind?</p>
		<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
	</div>
</section>

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