<?php
date_default_timezone_set('Africa/Nairobi');

$counties = [
    'Baringo', 'Bomet', 'Bungoma', 'Busia', 'Elgeyo-Marakwet', 'Embu', 'Garissa',
    'Homa Bay', 'Isiolo', 'Kajiado', 'Kakamega', 'Kericho', 'Kiambu', 'Kilifi',
    'Kirinyaga', 'Kisii', 'Kisumu', 'Kitui', 'Kwale', 'Laikipia', 'Lamu', 'Machakos',
    'Makueni', 'Mandera', 'Marsabit', 'Meru', 'Migori', 'Mombasa', "Murang'a", 'Nairobi',
    'Nakuru', 'Nandi', 'Narok', 'Nyamira', 'Nyandarua', 'Nyeri', 'Samburu', 'Siaya',
    'Taita Taveta', 'Tana River', 'Tharaka-Nithi', 'Trans Nzoia', 'Turkana', 'Uasin Gishu',
    'Vihiga', 'Wajir', 'West Pokot'
];

$feedback = null;
$fieldErrors = [];
$old = ['first_name' => '', 'last_name' => '', 'email' => '', 'tel' => '', 'county' => ''];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    foreach ($old as $key => $value) {
        $old[$key] = trim($_POST[$key] ?? '');
    }

    if (mb_strlen($old['first_name']) < 2) $fieldErrors['first_name'] = 'Enter your first name.';
    if (mb_strlen($old['last_name']) < 2) $fieldErrors['last_name'] = 'Enter your last name.';
    if (!filter_var($old['email'], FILTER_VALIDATE_EMAIL)) $fieldErrors['email'] = 'Enter a valid email address.';
    if (!preg_match('/^\d{10}$/', $old['tel'])) $fieldErrors['tel'] = 'Enter a 10-digit mobile number.';
    if (!in_array($old['county'], $counties, true)) $fieldErrors['county'] = 'Choose your county.';

    if ($fieldErrors) {
        $feedback = ['type' => 'error', 'title' => 'A few details need attention', 'items' => array_values($fieldErrors)];
    } else {
        include 'config.php';
        $name = $old['first_name'] . ' ' . $old['last_name'];
        $cohort = 'Skills to Income Workshop 2026';
        $currentDate = date('d-m-Y H:i:s');

        $checkStmt = $connect->prepare('SELECT id FROM skills WHERE tel = ?');
        $checkStmt->bind_param('s', $old['tel']);
        $checkStmt->execute();
        $checkStmt->store_result();

        if ($checkStmt->num_rows > 0) {
            $fieldErrors['tel'] = 'This mobile number has already been registered.';
            $feedback = [
                'type' => 'error',
                'title' => 'You are already on the list',
                'items' => ['This mobile number has already been registered. Use a different number if you are registering someone else.']
            ];
        } else {
            $stmt = $connect->prepare(
                'INSERT INTO skills(name, email, tel, county, date_created, cohort) VALUES (?, ?, ?, ?, ?, ?)'
            );
            $stmt->bind_param(
                'ssssss',
                $name,
                $old['email'],
                $old['tel'],
                $old['county'],
                $currentDate,
                $cohort
            );

            if ($stmt->execute()) {
                $feedback = [
                    'type' => 'success',
                    'title' => 'You are registered!',
                    'items' => ['We have received your details. Our team will contact you with the next steps.']
                ];

                $apikey = '471dfb86722d7f1d61ab1bf47c7fcd3b';
                $partnerID = '676';
                $messagetxt = "Hi $name. Your registration for the Skills to Income workshop has been received. Our team will contact you with more details.";
                $shortcode = 'RVIBS_TVET';
                $url = 'https://quicksms.advantasms.com/api/services/sendsms/?' . http_build_query([
                    'apikey' => $apikey,
                    'partnerID' => $partnerID,
                    'mobile' => $old['tel'],
                    'message' => $messagetxt,
                    'shortcode' => $shortcode
                ]);
                $ch = curl_init($url);
                curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
                curl_setopt($ch, CURLOPT_TIMEOUT, 8);
                curl_exec($ch);
                curl_close($ch);

                $old = ['first_name' => '', 'last_name' => '', 'email' => '', 'tel' => '', 'county' => ''];
            } else {
                $feedback = [
                    'type' => 'error',
                    'title' => 'Registration did not go through',
                    'items' => ['Please try again. If the problem continues, contact Africa Tech Space Tech Academy.']
                ];
            }
        }
    }
}

function e(string $value): string {
    return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
}
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Turn the skill you already have into opportunities, customers and income with Africa Tech Space Tech Academy.">
    <meta name="theme-color" content="#061634">
    <title>Learn It. Sell It. Earn From It. | Africa Tech Space</title>
    <link rel="icon" href="assets/images/rvibs-crest.png" type="image/png">
    <style>
        @font-face {
            font-family: 'Archivo Black';
            src: url('assets/fonts/ArchivoBlack-Regular.ttf') format('truetype');
            font-style: normal;
            font-weight: 400;
            font-display: swap;
        }
        :root {
            --ink: #061634;
            --blue: #57B4E4;
            --paper: #fffdf7;
            --white: #ffffff;
            --lime: #d9f36c;
            --coral: #ff7b6b;
            --line: 3px solid var(--ink);
            --radius: 14px;
            --shadow: 8px 10px 20px rgba(6, 22, 52, .18);
            --page: min(1180px, calc(100% - 40px));
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; overflow-x: clip; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
            font-size: 16px;
            line-height: 1.55;
            overflow-x: clip;
        }
        body::selection { color: var(--white); background: var(--ink); }
        a { color: inherit; text-underline-offset: 4px; }
        button, input, select { font: inherit; }
        button, input, select, a { -webkit-tap-highlight-color: transparent; }
        :focus-visible { outline: 4px solid var(--coral); outline-offset: 3px; }
        ::placeholder { color: #526078; opacity: 1; }
        * { scrollbar-color: var(--blue) var(--ink); scrollbar-width: thin; }

        .site-header { border-bottom: var(--line); background: var(--white); position: relative; z-index: 5; }
        .nav { width: var(--page); min-height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
        .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
        .brand img { width: 58px; height: 58px; object-fit: contain; }
        .brand-copy { font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; line-height: 1.05; font-weight: 700; max-width: 230px; }
        .brand-copy small { display: block; margin-top: 5px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

        .button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 11px 20px; border: var(--line); border-radius: 999px; color: var(--white); background: var(--ink); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
        .button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--blue); }
        .button:active { transform: translateY(1px); box-shadow: 0 3px 0 var(--blue); }
        .button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; }

        .hero { position: relative; background: var(--blue); border-bottom: var(--line); isolation: isolate; overflow: clip; }
        .hero::before, .hero::after { content: ''; position: absolute; border: var(--line); background: var(--lime); z-index: -1; }
        .hero::before { width: 90px; height: 90px; border-radius: 50%; left: -28px; top: 15%; }
        .hero::after { width: 110px; height: 42px; right: -42px; bottom: 12%; transform: rotate(-9deg); }
        .hero-grid { width: var(--page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .75fr); gap: clamp(40px, 7vw, 90px); align-items: start; padding: clamp(64px, 8vw, 112px) 0; }
        .hero-copy { padding-top: 10px; }
        h1, h2, h3 { margin: 0; font-family: 'Archivo Black', sans-serif; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
        h1 { max-width: 780px; font-size: clamp(3.3rem, 7.2vw, 6rem); }
        h1 span { display: block; width: fit-content; margin-top: .06em; padding: .08em .13em .12em; color: var(--white); background: var(--ink); transform: rotate(-.6deg); }
        .hero-lede { max-width: 680px; margin: 28px 0 0; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; }
        .hero-question { width: fit-content; max-width: 100%; margin-top: 30px; padding: 13px 18px; border: var(--line); background: var(--white); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 700; transform: rotate(-1deg); box-shadow: 5px 6px 0 var(--ink); }

        .form-shell { position: sticky; top: 24px; border: var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); overflow: hidden; }
        .form-top { padding: 22px 24px 18px; border-bottom: var(--line); background: var(--lime); }
        .form-top h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
        .form-top p { margin: 8px 0 0; font-weight: 600; }
        .progress-track { height: 8px; background: rgba(6, 22, 52, .16); margin-top: 15px; overflow: hidden; border-radius: 99px; }
        .progress-bar { width: 100%; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
        .registration-form { padding: 22px 24px 26px; }
        .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .field { margin-bottom: 15px; }
        label { display: block; margin-bottom: 7px; font-weight: 700; }
        label span { color: #a12d22; }
        input, select { width: 100%; min-height: 50px; padding: 11px 13px; color: var(--ink); border: 2px solid var(--ink); border-radius: 9px; background: var(--white); transition: box-shadow .18s ease, background .18s ease; }
        input:hover, select:hover { background: #f3fbff; }
        input:focus, select:focus { box-shadow: 0 0 0 4px rgba(87, 180, 228, .42); outline: none; }
        [aria-invalid="true"] { background: #fff2ef; border-color: #9c2f24; }
        .field-error { display: block; margin-top: 6px; color: #842419; font-size: .84rem; font-weight: 700; }
        .submit-button { width: 100%; min-height: 56px; margin-top: 5px; border-radius: 10px; font-size: 1.08rem; }
        .submit-button:hover { background: #11264e; }
        .submit-button:disabled { opacity: .72; cursor: wait; transform: none; box-shadow: none; }
        .form-note { display: flex; gap: 8px; margin: 13px 0 0; color: #37445e; font-size: .84rem; }
        .form-note svg { width: 17px; min-width: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
        .feedback { margin: 18px 24px 2px; padding: 15px 16px; border: 2px solid var(--ink); border-radius: 10px; }
        .feedback.success { background: #dff6cc; }
        .feedback.error { background: #ffe0da; }
        .feedback strong { display: block; font-size: 1.05rem; }
        .feedback ul { margin: 6px 0 0; padding-left: 20px; }

        .ticker { border-bottom: var(--line); background: var(--ink); color: var(--white); overflow: hidden; contain: inline-size; }
        .ticker-track { display: flex; width: max-content; padding: 16px 0; animation: ticker 24s linear infinite; }
        .ticker span { padding-right: 34px; font-family: 'Archivo Black', sans-serif; font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: -.02em; white-space: nowrap; }
        .ticker b { color: var(--blue); }
        @keyframes ticker { to { transform: translateX(-50%); } }

        .possibilities { padding: clamp(76px, 10vw, 130px) 0; background: var(--paper); }
        .section-inner { width: var(--page); margin: 0 auto; }
        .section-heading { max-width: 950px; font-size: clamp(2.7rem, 6vw, 5.2rem); }
        .section-heading span { color: var(--blue); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
        .skill-stack { margin-top: clamp(42px, 6vw, 74px); }
        .skill-line { display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: center; padding: 21px 10px; border-top: 2px solid var(--ink); font-size: clamp(1.1rem, 2vw, 1.55rem); font-weight: 650; }
        .skill-line:last-child { border-bottom: 2px solid var(--ink); }
        .skill-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--ink); border-radius: 50%; background: var(--blue); }
        .skill-mark svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

        .build-section { border-block: var(--line); background: var(--ink); color: var(--white); }
        .build-grid { width: var(--page); margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; }
        .build-copy { padding: clamp(60px, 8vw, 100px) clamp(30px, 5vw, 70px) clamp(60px, 8vw, 100px) 0; box-shadow: inset -3px 0 0 var(--blue); }
        .build-copy h2 { max-width: 560px; font-size: clamp(2.7rem, 5vw, 4.8rem); }
        .build-copy p { max-width: 540px; margin: 25px 0 0; color: #dce8f8; font-size: 1.18rem; }
        .path { padding: clamp(60px, 8vw, 100px) 0 clamp(60px, 8vw, 100px) clamp(30px, 5vw, 70px); display: grid; align-content: center; }
        .path-step { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
        .path-step + .path-step { margin-top: 16px; }
        .path-badge { display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid var(--white); border-radius: 50%; color: var(--ink); background: var(--blue); font-family: 'Archivo Black', sans-serif; }
        .path-step:nth-child(2) .path-badge { background: var(--lime); }
        .path-step:nth-child(3) .path-badge { background: var(--coral); }
        .path-step strong { display: block; font-family: 'Archivo Black', sans-serif; font-size: clamp(1.35rem, 2.5vw, 2.1rem); letter-spacing: -.025em; }
        .path-step span { color: #c6d5ea; }

        .closing { padding: clamp(75px, 10vw, 130px) 0; text-align: center; background: var(--blue); }
        .closing h2 { max-width: 980px; margin: 0 auto; font-size: clamp(3rem, 7vw, 6rem); }
        .closing p { max-width: 680px; margin: 24px auto 32px; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }
        .closing .button { background: var(--lime); color: var(--ink); min-height: 58px; padding-inline: 28px; border-radius: 10px; }

        .footer { border-top: var(--line); background: var(--white); }
        .footer-inner { width: var(--page); margin: 0 auto; padding: 32px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
        .footer strong { display: block; font-size: 1.08rem; }
        .footer p { margin: 2px 0 0; }
        .socials { display: flex; gap: 9px; flex-wrap: wrap; }
        .socials a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; text-decoration: none; transition: background .18s ease, color .18s ease; }
        .socials a:hover { color: var(--white); background: var(--ink); }

        @media (max-width: 940px) {
            :root { --page: min(100% - 30px, 720px); }
            .hero-grid { grid-template-columns: 1fr; }
            .form-shell { position: relative; top: auto; max-width: 620px; }
            .build-grid { grid-template-columns: 1fr; }
            .build-copy { padding-right: 0; border-bottom: 3px solid var(--blue); box-shadow: none; }
            .path { padding-left: 0; }
        }

        @media (max-width: 620px) {
            :root { --page: calc(100% - 24px); --shadow: 5px 7px 16px rgba(6, 22, 52, .18); }
            .nav { min-height: 72px; }
            .brand img { width: 48px; height: 48px; }
            .brand-copy { font-size: .9rem; max-width: 190px; }
            .brand-copy small { display: none; }
            .nav > .button { min-height: 44px; padding: 8px 14px; font-size: .9rem; }
            .hero-grid { padding: 58px 0 66px; gap: 42px; }
            h1 { font-size: clamp(3rem, 15vw, 4.7rem); }
            .hero-question { transform: none; }
            .form-top, .registration-form { padding-inline: 18px; }
            .feedback { margin-inline: 18px; }
            .field-row { grid-template-columns: 1fr; gap: 0; }
            .skill-line { grid-template-columns: 55px 1fr; gap: 13px; padding-block: 17px; }
            .skill-arrow { display: none; }
            .skill-mark { width: 44px; height: 44px; }
            .path-step { align-items: start; }
            .footer-inner { align-items: flex-start; flex-direction: column; }
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
            .ticker-track { transform: none; }
        }
    </style>
</head>
<body>
<!--
THESIS: A skill is not finished until it can create an opportunity; this page refuses the generic school-brochure hero.
OWN-WORLD: Sky blue and deep navy, ink-heavy creator-poster typography, outlined utility controls, lime and coral action accents.
STORY: Recognize the earning gap, see practical outcomes, understand the learn-to-sell path, then register.
FIRST VIEWPORT: Oversized income-first statement on blue at left; high-contrast registration checkout at right; action visible without scrolling.
FORM: Creator-market poster, ranked 1 of 7, user-pinned above roll 43d22001.
FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance
-->
<header class="site-header">
    <nav class="nav" aria-label="Primary navigation">
        <a class="brand" href="#top" aria-label="Africa Tech Space Tech Academy home">
            <img src="assets/images/rvibs-crest.png" alt="RVIBS crest">
            <span class="brand-copy">Africa Tech Space Tech Academy<small>Innovation Wing of RVIBS</small></span>
        </a>
        <a class="button" href="#register">Register now
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </a>
    </nav>
</header>

<main id="top">
    <section class="hero" aria-labelledby="hero-title">
        <div class="hero-grid">
            <div class="hero-copy">
                <h1 id="hero-title">Don’t just learn a skill. <span>Learn how to earn from it.</span></h1>
                <p class="hero-lede">You are already learning something valuable. Now learn how to make people notice it, trust it—and pay for it.</p>
                <p class="hero-question">Can your skill actually pay you?</p>
            </div>

            <aside class="form-shell" id="register" aria-labelledby="form-title">
                <div class="form-top">
                    <h2 id="form-title">Claim your spot.</h2>
                    <p>Open to all young people. Registration takes about one minute.</p>
                    <div class="progress-track" aria-hidden="true"><div class="progress-bar" id="form-progress"></div></div>
                </div>

                <?php if ($feedback): ?>
                    <div class="feedback <?= e($feedback['type']) ?>" id="server-feedback" tabindex="-1" role="<?= $feedback['type'] === 'error' ? 'alert' : 'status' ?>">
                        <strong><?= e($feedback['title']) ?></strong>
                        <ul><?php foreach ($feedback['items'] as $item): ?><li><?= e($item) ?></li><?php endforeach; ?></ul>
                    </div>
                <?php endif; ?>

                <form class="registration-form" method="post" id="registration-form">
                    <div class="field-row">
                        <div class="field">
                            <label for="first_name">First name <span aria-hidden="true">*</span></label>
                            <input id="first_name" name="first_name" type="text" autocomplete="given-name" minlength="2" value="<?= e($old['first_name']) ?>" aria-invalid="<?= isset($fieldErrors['first_name']) ? 'true' : 'false' ?>" <?= isset($fieldErrors['first_name']) ? 'aria-describedby="first_name_error"' : '' ?> required>
                            <?php if (isset($fieldErrors['first_name'])): ?><span class="field-error" id="first_name_error"><?= e($fieldErrors['first_name']) ?></span><?php endif; ?>
                        </div>
                        <div class="field">
                            <label for="last_name">Last name <span aria-hidden="true">*</span></label>
                            <input id="last_name" name="last_name" type="text" autocomplete="family-name" minlength="2" value="<?= e($old['last_name']) ?>" aria-invalid="<?= isset($fieldErrors['last_name']) ? 'true' : 'false' ?>" <?= isset($fieldErrors['last_name']) ? 'aria-describedby="last_name_error"' : '' ?> required>
                            <?php if (isset($fieldErrors['last_name'])): ?><span class="field-error" id="last_name_error"><?= e($fieldErrors['last_name']) ?></span><?php endif; ?>
                        </div>
                    </div>
                    <div class="field">
                        <label for="email">Email address <span aria-hidden="true">*</span></label>
                        <input id="email" name="email" type="email" autocomplete="email" inputmode="email" placeholder="you@example.com" value="<?= e($old['email']) ?>" aria-invalid="<?= isset($fieldErrors['email']) ? 'true' : 'false' ?>" <?= isset($fieldErrors['email']) ? 'aria-describedby="email_error"' : '' ?> required>
                        <?php if (isset($fieldErrors['email'])): ?><span class="field-error" id="email_error"><?= e($fieldErrors['email']) ?></span><?php endif; ?>
                    </div>
                    <div class="field">
                        <label for="tel">Mobile number <span aria-hidden="true">*</span></label>
                        <input id="tel" name="tel" type="tel" autocomplete="tel" inputmode="numeric" pattern="[0-9]{10}" maxlength="10" placeholder="07XXXXXXXX" value="<?= e($old['tel']) ?>" aria-invalid="<?= isset($fieldErrors['tel']) ? 'true' : 'false' ?>" <?= isset($fieldErrors['tel']) ? 'aria-describedby="tel_error"' : '' ?> required>
                        <?php if (isset($fieldErrors['tel'])): ?><span class="field-error" id="tel_error"><?= e($fieldErrors['tel']) ?></span><?php endif; ?>
                    </div>
                    <div class="field">
                        <label for="county">County <span aria-hidden="true">*</span></label>
                        <select id="county" name="county" aria-invalid="<?= isset($fieldErrors['county']) ? 'true' : 'false' ?>" <?= isset($fieldErrors['county']) ? 'aria-describedby="county_error"' : '' ?> required>
                            <option value="">Choose your county</option>
                            <?php foreach ($counties as $county): ?>
                                <option value="<?= e($county) ?>" <?= $old['county'] === $county ? 'selected' : '' ?>><?= e($county) ?></option>
                            <?php endforeach; ?>
                        </select>
                        <?php if (isset($fieldErrors['county'])): ?><span class="field-error" id="county_error"><?= e($fieldErrors['county']) ?></span><?php endif; ?>
                    </div>
                    <button class="button submit-button" type="submit">Register now
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                    </button>
                    <p class="form-note">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
                        Your details are used only to manage your registration and contact you about the training.
                    </p>
                </form>
            </aside>
        </div>
    </section>

    <div class="ticker" aria-hidden="true">
        <div class="ticker-track">
            <span>LEARN IT. <b>SELL IT.</b> EARN FROM IT. ✦ </span><span>LEARN IT. <b>SELL IT.</b> EARN FROM IT. ✦ </span>
            <span>LEARN IT. <b>SELL IT.</b> EARN FROM IT. ✦ </span><span>LEARN IT. <b>SELL IT.</b> EARN FROM IT. ✦ </span>
        </div>
    </div>

    <section class="possibilities" aria-labelledby="possibilities-title">
        <div class="section-inner">
            <h2 class="section-heading" id="possibilities-title">What if you could learn how to make your skill <span>work for you?</span></h2>
            <div class="skill-stack">
                <?php
                $skills = [
                    ['briefcase', 'Turn the skill you already have into real opportunities'],
                    ['customer', 'Get your first customer before you graduate'],
                    ['spark', 'Use AI to work faster, create better and stay ahead'],
                    ['phone', 'Turn your phone into a serious business tool'],
                    ['tag', 'Price your work without undervaluing yourself'],
                    ['laptop', 'Build the habits and confidence for online work'],
                    ['trust', 'Make people notice, trust and choose you'],
                    ['door', 'Create opportunities instead of waiting for them']
                ];
                $icons = [
                    'briefcase' => '<rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5h8v2M3 12h18M10 12v2h4v-2"/>',
                    'customer' => '<circle cx="9" cy="8" r="3"/><path d="M3.5 20v-2a5.5 5.5 0 0 1 11 0v2M16 9h5M18.5 6.5v5"/>',
                    'spark' => '<path d="m12 2 1.7 6.3L20 10l-6.3 1.7L12 18l-1.7-6.3L4 10l6.3-1.7L12 2ZM19 17l.7 2.3L22 20l-2.3.7L19 23l-.7-2.3L16 20l2.3-.7L19 17Z"/>',
                    'phone' => '<rect x="6" y="2" width="12" height="20" rx="2"/><path d="M10 5h4M11 18h2"/>',
                    'tag' => '<path d="M20 13 13 20l-9-9V4h7l9 9Z"/><circle cx="8.5" cy="8.5" r="1.5"/>',
                    'laptop' => '<rect x="4" y="4" width="16" height="12" rx="1"/><path d="M2 20h20M9 16v2h6v-2"/>',
                    'trust' => '<path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/><path d="m8.5 12 2.2 2.2 4.8-5"/>',
                    'door' => '<path d="M5 21h14M7 21V4l10-2v19M11 12h2"/>'
                ];
                foreach ($skills as [$icon, $text]): ?>
                    <div class="skill-line">
                        <span class="skill-mark"><svg viewBox="0 0 24 24" aria-hidden="true"><?= $icons[$icon] ?></svg></span>
                        <span><?= e($text) ?></span>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <section class="build-section" aria-labelledby="build-title">
        <div class="build-grid">
            <div class="build-copy">
                <h2 id="build-title">Come ready to build something you can actually use.</h2>
                <p>One hour of the right learning can change how you earn for years. This is practical, opportunity-focused training—not theory you leave behind.</p>
            </div>
            <div class="path" aria-label="Learn, sell and earn pathway">
                <div class="path-step"><span class="path-badge">1</span><div><strong>Learn it.</strong><span>Understand the value already inside your skill.</span></div></div>
                <div class="path-step"><span class="path-badge">2</span><div><strong>Sell it.</strong><span>Package, price and present it with confidence.</span></div></div>
                <div class="path-step"><span class="path-badge">3</span><div><strong>Earn from it.</strong><span>Turn attention into customers and opportunities.</span></div></div>
            </div>
        </div>
    </section>

    <section class="closing" aria-labelledby="closing-title">
        <div class="section-inner">
            <h2 id="closing-title">Your skill should work for you.</h2>
            <p>Stop waiting for the perfect opportunity. Learn how to build one with the tools, talent and technology already in your hands.</p>
            <a class="button" href="#register">Register now
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
        </div>
    </section>
</main>

<footer class="footer">
    <div class="footer-inner">
        <div>
            <strong>Africa Tech Space Tech Academy</strong>
            <p>Innovation Wing of Rift Valley Institute of Business Studies</p>
        </div>
        <div class="socials" aria-label="Connect with RVIBS">
            <a href="https://wa.me/254715111101" target="_blank" rel="noopener">WhatsApp</a>
            <a href="https://www.instagram.com/rvibs_/" target="_blank" rel="noopener">Instagram</a>
            <a href="https://rvibs.ac.ke/" target="_blank" rel="noopener">RVIBS</a>
        </div>
    </div>
</footer>

<script>
    const form = document.querySelector('#registration-form');
    const progress = document.querySelector('#form-progress');
    const fields = [...form.querySelectorAll('input, select')];

    function updateProgress() {
        const completed = fields.filter((field) => field.value.trim() !== '').length;
        progress.style.transform = `scaleX(${completed / fields.length})`;
    }

    fields.forEach((field) => {
        field.addEventListener('input', updateProgress);
        field.addEventListener('change', updateProgress);
    });
    updateProgress();

    form.addEventListener('submit', (event) => {
        if (!form.checkValidity()) {
            event.preventDefault();
            form.reportValidity();
            return;
        }
        const button = form.querySelector('.submit-button');
        button.disabled = true;
        button.textContent = 'Registering…';
        button.setAttribute('aria-busy', 'true');
    });

    const serverFeedback = document.querySelector('#server-feedback');
    if (serverFeedback) {
        const firstServerInvalid = document.querySelector('[aria-invalid="true"]');
        (firstServerInvalid || serverFeedback).focus();
        serverFeedback.scrollIntoView({ block: 'center' });
    }
</script>
</body>
</html>
