<?php

declare(strict_types=1);

require_once __DIR__ . '/core/bootstrap.php';

HyroCsrf::startSession();

$success =
    $_SESSION['hyro_demo_success'] ??
    null;

unset($_SESSION['hyro_demo_success']);

?>
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <meta
        name="robots"
        content="noindex, nofollow"
    >

    <title>Demo Request Received | HYRO ONE</title>

    <link
        rel="stylesheet"
        href="/experience/assets/css/site.css?v=<?= time() ?>"
    >

    <style>

        .demo-thank-you{
            min-height:100vh;
            padding:70px 20px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:
                radial-gradient(
                    circle at 15% 20%,
                    rgba(236,72,153,.14),
                    transparent 32%
                ),
                radial-gradient(
                    circle at 85% 15%,
                    rgba(192,132,252,.20),
                    transparent 34%
                ),
                #ffffff;
        }

        .demo-thank-you-card{
            width:min(650px,100%);
            padding:55px 35px;
            border:1px solid var(--hyro-border);
            border-radius:30px;
            text-align:center;
            background:#ffffff;
            box-shadow:0 30px 90px rgba(139,92,246,.16);
        }

        .demo-thank-you-icon{
            width:82px;
            height:82px;
            margin:0 auto 25px;
            border-radius:25px;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#ffffff;
            background:var(--hyro-gradient);
            font-size:37px;
        }

        .demo-thank-you-card h1{
            margin:0;
            color:var(--hyro-text);
            font-size:clamp(34px,5vw,50px);
            line-height:1.15;
        }

        .demo-thank-you-card p{
            margin:19px auto 0;
            color:var(--hyro-muted);
            font-size:15px;
            line-height:1.8;
        }

        .demo-reference{
            margin:25px 0;
            padding:15px;
            border-radius:13px;
            color:var(--hyro-text);
            background:var(--hyro-soft-background);
            font-size:13px;
        }

        .demo-thank-you-actions{
            margin-top:28px;
            display:flex;
            justify-content:center;
            flex-wrap:wrap;
            gap:12px;
        }

    </style>

</head>

<body>

<main class="demo-thank-you">

    <section class="demo-thank-you-card">

        <div class="demo-thank-you-icon">
            ✓
        </div>

        <h1>
            Your demo request is received.
        </h1>

        <p>
            <?php if (is_array($success)): ?>

                Thank you,
                <?= hyro_escape(
                    $success['contact_name'] ?? ''
                ) ?>.

                Our team will contact you regarding
                <?= hyro_escape(
                    $success['product_name'] ?? 'HYRO ONE'
                ) ?>.

            <?php else: ?>

                Thank you for contacting HYRO ONE.
                Our team will respond shortly.

            <?php endif; ?>
        </p>

        <?php if (
            is_array($success) &&
            !empty($success['lead_code'])
        ): ?>

            <div class="demo-reference">

                Reference:

                <strong>
                    <?= hyro_escape(
                        $success['lead_code']
                    ) ?>
                </strong>

            </div>

        <?php endif; ?>

        <div class="demo-thank-you-actions">

            <a
                href="/experience/"
                class="hyro-button hyro-button-primary"
            >
                Return to HYRO ONE
            </a>

            <a
                href="/experience/spa.php"
                class="hyro-button hyro-button-secondary"
            >
                Explore HYRO ONE SPA
            </a>

        </div>

    </section>

</main>

</body>
</html>
