<?php
declare(strict_types=1);

require_once dirname(__DIR__) . '/includes/bootstrap.php';
require_once dirname(__DIR__) . '/includes/projects-data.php';

if (!isset($projectSlug) || !is_string($projectSlug)) {
    header('HTTP/1.1 404 Not Found');
    exit;
}

$project = nestor_project_by_slug($projectSlug);

if ($project === null) {
    $pageTitle = 'Кейс не знайдено — Nestor Web Studio';
    require_once dirname(__DIR__) . '/header.php';
    echo '<main id="main-content" class="page-fade"><section class="section"><div class="wrap">';
    echo '<h1>Кейс не знайдено</h1>';
    echo '<p class="prose-muted"><a class="link-cta" href="' . e(nestor_url('projects.php')) . '">Усі проєкти</a></p>';
    echo '</div></section></main>';
    require_once dirname(__DIR__) . '/footer.php';
    exit;
}

$activeNav = 'projects.php';
$pageTitle = $project['title'] . ' — Кейс — Nestor Web Studio';

require_once dirname(__DIR__) . '/header.php';

$urlProjects = nestor_url('projects.php');
$caseVisuals = $project['case_visuals'] ?? null;
$heroImg = nestor_project_img($project['image']);
if (is_array($caseVisuals) && isset($caseVisuals['hero']) && $caseVisuals['hero'] !== '') {
    $heroImg = nestor_project_img($caseVisuals['hero']);
}
$urlTg = 'https://t.me/nestor_webstudio';
$urlIg = 'https://instagram.com/nestor.webstudio';

$galleryExtras = nestor_project_gallery_urls($project);

$doneCardLabels = [
    'Структура сайту',
    'Mobile-first',
    'Подача послуг',
    'Портфоліо та довіра',
    'CTA та контакт',
    'UX / UI',
    'Візуальна довіра',
];

echo '<main id="main-content" class="page-fade case-study">';
$articleMod = ($project['slug'] ?? '') === 'astra-portrait' ? ' case-study-article--astra' : '';
echo '<article class="case-study-article' . $articleMod . '">';

/* —— Premium hero (layered showcase, без «товстої білої коробки») —— */
echo '<header class="case-hero case-hero--showcase">';
echo '<div class="wrap case-hero-showcase">';
echo '<div class="case-hero-showcase__grid">';

echo '<div class="case-hero-showcase__copy">';
echo '<nav class="case-breadcrumb case-hero-fade" style="--hf:0" aria-label="Навігація по кейсах">';
echo '<a href="' . e($urlProjects) . '">Проєкти</a>';
echo '<span class="case-breadcrumb__sep" aria-hidden="true">/</span>';
echo '<span>' . e($project['title']) . '</span>';
echo '</nav>';
echo '<span class="label-caps case-hero-fade" style="--hf:1">Обраний кейс</span>';
echo '<p class="case-hero__type case-hero-fade" style="--hf:2">' . e($project['type']) . '</p>';
echo '<h1 class="case-hero__title case-hero-fade" style="--hf:3">' . e($project['title']) . '</h1>';
echo '<p class="case-hero__lead prose-muted case-hero-fade" style="--hf:4">' . e($project['description']) . '</p>';
echo '<div class="case-hero__cta case-hero-fade" style="--hf:5">';
echo '<a class="btn btn--primary" href="' . e($urlTg) . '" target="_blank" rel="noopener noreferrer">Хочу схожий сайт</a>';
echo '<a class="case-hero__secondary link-cta-line" href="' . e($urlProjects) . '">Усі кейси</a>';
echo '</div>';
echo '</div>';

echo '<div class="case-hero-showcase__visual" data-showcase-tilt>';
echo '<div class="case-showcase case-showcase--spectacle reveal is-visible">';
echo '<div class="case-showcase__halo" aria-hidden="true"></div>';
echo '<div class="case-showcase__grain" aria-hidden="true"></div>';
echo '<div class="case-showcase__ambient" aria-hidden="true"></div>';
echo '<div class="case-showcase__ambient case-showcase__ambient--2" aria-hidden="true"></div>';

echo '<div class="case-showcase__badges" role="group" aria-label="Акценти кейсу">';
echo '<span class="case-pill case-pill--float" style="--bdg:1">Mobile-first</span>';
echo '<span class="case-pill case-pill--float" style="--bdg:2">Premium UI</span>';
echo '<span class="case-pill case-pill--float" style="--bdg:3">CTA structure</span>';
echo '<span class="case-pill case-pill--float" style="--bdg:4">UX/UI</span>';
echo '</div>';

echo '<div class="case-showcase__stage">';
echo '<div class="case-showcase__viewport case-showcase__viewport--spectacle" data-parallax>';
echo '<img class="case-showcase__mockup" src="' . e($heroImg) . '" alt="' . e($project['title']) . ' — презентація сайту (mockup)" width="1200" height="900" loading="eager" decoding="async" fetchpriority="high">';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';

echo '</div>';
echo '</div>';
echo '</header>';

echo '<div class="wrap case-flow">';

echo '<section class="case-block case-block--task reveal">';
echo '<div class="case-block__head">';
echo '<span class="case-block__step" aria-hidden="true">01</span>';
echo '<div class="case-block__head-text">';
echo '<h2 class="case-block__heading">Задача</h2>';
echo '</div>';
echo '</div>';
echo '<p class="prose-muted case-block__prose case-block__prose--task">' . e($project['task']) . '</p>';
echo '</section>';

echo '<section class="case-block case-block--done reveal">';
echo '<div class="case-block__head">';
echo '<span class="case-block__step" aria-hidden="true">02</span>';
echo '<div class="case-block__head-text">';
echo '<h2 class="case-block__heading">Що зроблено</h2>';
echo '<p class="case-block__subhead case-block__subhead--flush">Ключові напрями роботи над проєктом.</p>';
echo '</div>';
echo '</div>';
echo '<div class="case-done-grid">';
foreach ($project['done'] as $di => $item) {
    $tag = $doneCardLabels[$di] ?? ('Напрям ' . (string)($di + 1));
    echo '<article class="case-done-card reveal" style="--stagger:' . (string)$di . '">';
    echo '<span class="case-done-card__tag">' . e($tag) . '</span>';
    echo '<p class="case-done-card__text">' . e($item) . '</p>';
    echo '</article>';
}
echo '</div>';
echo '</section>';

echo '<section class="case-block case-block--features reveal">';
echo '<div class="case-block__head">';
echo '<span class="case-block__step" aria-hidden="true">03</span>';
echo '<div class="case-block__head-text">';
echo '<h2 class="case-block__heading">Особливості</h2>';
echo '<p class="case-block__subhead case-block__subhead--flush">Фокус проєкту — що робить цей сайт сильним у своїй ніші.</p>';
echo '</div>';
echo '</div>';
echo '<ul class="case-features case-features--premium">';
foreach ($project['features'] as $feat) {
    echo '<li><span class="case-features__dot" aria-hidden="true"></span>' . e($feat) . '</li>';
}
echo '</ul>';
echo '</section>';

echo '<section class="case-block case-block--visual reveal" aria-labelledby="case-visual-heading">';
echo '<div class="case-block__head">';
echo '<span class="case-block__step" aria-hidden="true">04</span>';
echo '<div class="case-block__head-text">';
echo '<h2 id="case-visual-heading" class="case-block__heading">Візуальна подача</h2>';
$visualIntro =
    ($project['slug'] ?? '') === 'astra-portrait'
        ? 'Окремі кадри без повторів: повна desktop-композиція, mobile, деталі UI та editorial-атмосфера.'
        : 'Різні ракурси одного проєкту: структура на desktop, адаптив, деталі інтерфейсу та логіка CTA.';
echo '<p class="case-block__subhead case-block__subhead--flush">' . e($visualIntro) . '</p>';
echo '</div>';
echo '</div>';

if ($galleryExtras !== []) {
    echo '<div class="case-gallery case-gallery--study" role="list">';
    foreach ($galleryExtras as $gi => $gurl) {
        echo '<figure class="case-gallery__fig reveal" style="--stagger:' . (string)($gi + 1) . '">';
        echo '<img src="' . e($gurl) . '" alt="' . e($project['title']) . ' — матеріал ' . (string)($gi + 1) . '" width="1200" height="800" loading="lazy" decoding="async">';
        echo '</figure>';
    }
    echo '</div>';
} elseif (
    is_array($caseVisuals)
    && ($project['slug'] ?? '') === 'astra-portrait'
    && isset($caseVisuals['desktop'], $caseVisuals['mobile'], $caseVisuals['details'], $caseVisuals['editorial'])
) {
    $altBase = $project['title'];
    $imgDesktop = nestor_project_img($caseVisuals['desktop']);
    $imgMobile = nestor_project_img($caseVisuals['mobile']);
    $imgDetails = nestor_project_img($caseVisuals['details']);
    $imgEditorial = nestor_project_img($caseVisuals['editorial']);

    echo '<div class="case-visual-showcase case-visual-showcase--astra">';
    echo '<figure class="case-visual-item case-visual-item--full reveal" style="--stagger:0">';
    echo '<div class="case-visual-frame case-visual-frame--contain">';
    echo '<img src="' . e($imgDesktop) . '" alt="' . e($altBase) . ' — desktop структура сайту" width="1400" height="900" loading="lazy" decoding="async" class="case-visual-img case-visual-img--astra">';
    echo '</div>';
    echo '<figcaption class="case-visual-cap">Desktop структура</figcaption>';
    echo '</figure>';

    echo '<div class="case-visual-split">';
    echo '<figure class="case-visual-item reveal" style="--stagger:1">';
    echo '<div class="case-visual-frame case-visual-frame--contain">';
    echo '<img src="' . e($imgMobile) . '" alt="' . e($altBase) . ' — mobile версія" width="1400" height="900" loading="lazy" decoding="async" class="case-visual-img case-visual-img--astra">';
    echo '</div>';
    echo '<figcaption class="case-visual-cap">Mobile адаптація</figcaption>';
    echo '</figure>';

    echo '<figure class="case-visual-item reveal" style="--stagger:2">';
    echo '<div class="case-visual-frame case-visual-frame--contain">';
    echo '<img src="' . e($imgDetails) . '" alt="' . e($altBase) . ' — деталі інтерфейсу та блоки" width="1400" height="900" loading="lazy" decoding="async" class="case-visual-img case-visual-img--astra">';
    echo '</div>';
    echo '<figcaption class="case-visual-cap">Деталі інтерфейсу</figcaption>';
    echo '</figure>';
    echo '</div>';

    echo '<figure class="case-visual-item case-visual-item--editorial reveal" style="--stagger:3">';
    echo '<div class="case-visual-frame case-visual-frame--contain case-visual-frame--editorial">';
    echo '<img src="' . e($imgEditorial) . '" alt="' . e($altBase) . ' — editorial презентація проєкту" width="1400" height="900" loading="lazy" decoding="async" class="case-visual-img case-visual-img--astra">';
    echo '</div>';
    echo '<figcaption class="case-visual-cap">Атмосфера та editorial-подача</figcaption>';
    echo '</figure>';

    echo '</div>';
} else {
    $altBase = $project['title'];
    echo '<div class="case-visual-showcase">';
    echo '<figure class="case-visual-item case-visual-item--full reveal" style="--stagger:0">';
    echo '<div class="case-visual-frame">';
    echo '<img src="' . e($heroImg) . '" alt="' . e($altBase) . ' — desktop-презентація" width="1200" height="900" loading="lazy" decoding="async" class="case-visual-img">';
    echo '</div>';
    echo '<figcaption class="case-visual-cap">Desktop структура</figcaption>';
    echo '</figure>';

    echo '<div class="case-visual-split">';
    echo '<figure class="case-visual-item reveal" style="--stagger:1">';
    echo '<div class="case-visual-frame case-visual-frame--crop case-visual-crop case-visual-crop--mobile">';
    echo '<img src="' . e($heroImg) . '" alt="' . e($altBase) . ' — мобільна версія" width="1200" height="900" loading="lazy" decoding="async" class="case-visual-img case-visual-img--crop">';
    echo '</div>';
    echo '<figcaption class="case-visual-cap">Mobile адаптація</figcaption>';
    echo '</figure>';

    echo '<figure class="case-visual-item reveal" style="--stagger:2">';
    echo '<div class="case-visual-frame case-visual-frame--crop case-visual-crop case-visual-crop--details">';
    echo '<img src="' . e($heroImg) . '" alt="' . e($altBase) . ' — фрагмент інтерфейсу" width="1200" height="900" loading="lazy" decoding="async" class="case-visual-img case-visual-img--crop">';
    echo '</div>';
    echo '<figcaption class="case-visual-cap">Деталі інтерфейсу</figcaption>';
    echo '</figure>';
    echo '</div>';

    echo '<figure class="case-visual-item case-visual-item--band reveal" style="--stagger:3">';
    echo '<div class="case-visual-frame case-visual-frame--crop case-visual-crop case-visual-crop--cta">';
    echo '<img src="' . e($heroImg) . '" alt="' . e($altBase) . ' — зона закликів до дії" width="1200" height="900" loading="lazy" decoding="async" class="case-visual-img case-visual-img--crop">';
    echo '</div>';
    echo '<figcaption class="case-visual-cap">CTA та шлях до заявки</figcaption>';
    echo '</figure>';

    echo '</div>';
}

echo '</section>';

echo '<section class="case-block case-block--result reveal">';
echo '<div class="case-block__head">';
echo '<span class="case-block__step" aria-hidden="true">05</span>';
echo '<div class="case-block__head-text">';
echo '<h2 class="case-block__heading">' . e($project['result_lead'] ?? 'Результат') . '</h2>';
echo '</div>';
echo '</div>';
echo '<div class="case-result-card">';
echo '<p class="case-result-card__lead">' . e($project['result']) . '</p>';
echo '<p class="case-result-card__accent">' . e('Преміальна подача з першого екрану до контакту.') . '</p>';
echo '<p class="case-result-card__trust">' . e('Виглядає цілісно й професійно — підсилює довіру до бренду.') . '</p>';
echo '</div>';
echo '</section>';

echo '<footer class="case-final reveal">';
echo '<div class="case-final__inner">';
echo '<h2 class="case-final__title">Хочете схожий сайт для свого бренду?</h2>';
echo '<p class="case-final__lead prose-muted">Напишіть нам — підберемо формат під вашу нішу й покажемо, як може виглядати ваш кейс.</p>';
echo '<div class="case-final__actions">';
echo '<a class="btn btn--primary" href="' . e($urlTg) . '" target="_blank" rel="noopener noreferrer">Написати в Telegram</a>';
echo '<a class="btn btn--ghost" href="' . e($urlIg) . '" target="_blank" rel="noopener noreferrer">Написати в Instagram</a>';
echo '<a class="btn btn--ghost link-cta-line case-final__all" href="' . e($urlProjects) . '">Усі проєкти</a>';
echo '</div>';
echo '</div>';
echo '</footer>';

echo '</div>';
echo '</article>';
echo '</main>';

require_once dirname(__DIR__) . '/footer.php';
