<?php
declare(strict_types=1);
$pageTitle = 'Процес — Nestor Web Studio';
require_once __DIR__ . '/header.php';

echo '<main id="main-content" class="page-fade">';
echo '<section class="section">';
echo '<div class="wrap page-hero">';
echo '<span class="label-caps">Як ми працюємо</span>';
echo '<h1>Як проходить робота</h1>';
echo '<p class="prose-muted">Простий і зрозумілий процес — від першого повідомлення до готового сайту.</p>';
echo '</div>';

$steps = [
    ['01', 'Знайомство', 'Ви пишете в Telegram або Instagram і коротко описуєте, який сайт вам потрібен.'],
    ['02', 'Аналіз', 'Ми дивимось вашу нішу, стиль, цілі та приклади, які вам подобаються.'],
    ['03', 'Структура', 'Продумуємо блоки, логіку сайту та шлях клієнта до заявки.'],
    ['04', 'Дизайн і розробка', 'Створюємо сайт у вашому стилі, адаптуємо під телефон і комп’ютер.'],
    ['05', 'Запуск', 'Перевіряємо кнопки, адаптивність, контакти та запускаємо сайт.'],
];

echo '<div class="wrap timeline">';
foreach ($steps as $s) {
    echo '<article class="timeline-step reveal">';
    echo '<div class="timeline-step__num">' . e($s[0]) . '</div>';
    echo '<div><h2 style="font-size:1.65rem;margin-bottom:.5rem">' . e($s[1]) . '</h2><p class="prose-muted">' . e($s[2]) . '</p></div>';
    echo '</article>';
}
echo '</div>';

echo '<div class="wrap section section--tight">';
echo '<h2 class="reveal">Орієнтовні терміни</h2>';
echo '<ul class="prose-muted reveal detail-list">';
echo '<li>Сайт-візитка — 3–5 днів</li>';
echo '<li>Портфоліо / лендінг — до 7 днів</li>';
echo '<li>Розширений сайт — індивідуально</li>';
echo '</ul>';
echo '</div>';

echo '</section>';
echo '</main>';
require_once __DIR__ . '/footer.php';
