{% extends 'layouts/demo-base.html' %}

{% block pageTitle %}Check Your Email - BuyerKiosk Demo{% endblock %}

{% block content %}
<div class="demo-landing">
    <div class="container">
        <div class="row justify-content-center min-vh-100 align-items-center">
            <div class="col-lg-5 col-md-7">

                <!-- Logo -->
                <div class="text-center mb-4">
                    <img src="/images/buyerkiosk-logo.svg" alt="BuyerKiosk" class="demo-logo mb-3" style="max-width: 200px;">
                </div>

                <!-- Success Card -->
                <div class="card shadow-lg border-0">
                    <div class="card-body p-5 text-center">

                        <!-- Success Icon -->
                        <div class="success-icon mb-4">
                            <i class="fa-solid fa-envelope-circle-check fa-4x text-success"></i>
                        </div>

                        <h2 class="card-title mb-3">Check Your Email</h2>

                        <p class="text-muted mb-4">
                            We've sent a magic link to:
                        </p>

                        <p class="fw-bold h5 text-primary mb-4">
                            {{ email }}
                        </p>

                        <p class="text-muted mb-4">
                            Click the link in the email to instantly access your demo.
                            The link expires in <strong>{{ expiryMinutes }} minutes</strong>.
                        </p>

                        <hr class="my-4">

                        <div class="text-muted small">
                            <p class="mb-2">
                                <i class="fa-solid fa-circle-info me-1"></i>
                                Don't see the email? Check your spam folder.
                            </p>
                            <p class="mb-0">
                                <a href="/demo" class="text-decoration-none">
                                    <i class="fa-solid fa-arrow-left me-1"></i>
                                    Request a new link
                                </a>
                            </p>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
.demo-landing {
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-900) 100%);
    min-height: 100vh;
}

.demo-logo {
    filter: brightness(0) invert(1);
}

.card {
    border-radius: 1rem;
}

.success-icon {
    animation: bounce 1s ease-in-out;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
</style>
{% endblock %}