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

{% block pageTitle %}{{ errorTitle|default('Access Error') }} - BuyerKiosk Demo{% endblock %}

{% block content %}
<div class="demo-error">
    <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>

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

                        <!-- Error Icon -->
                        <div class="error-icon mb-4">
                            {% if errorType == 'expired' %}
                            <i class="fa-solid fa-clock fa-4x text-warning"></i>
                            {% elseif errorType == 'invalid' %}
                            <i class="fa-solid fa-circle-xmark fa-4x text-danger"></i>
                            {% elseif errorType == 'used' %}
                            <i class="fa-solid fa-check-circle fa-4x text-info"></i>
                            {% else %}
                            <i class="fa-solid fa-triangle-exclamation fa-4x text-warning"></i>
                            {% endif %}
                        </div>

                        <h2 class="card-title mb-3">{{ errorTitle|default('Something Went Wrong') }}</h2>

                        <p class="text-muted mb-4">
                            {{ errorMessage|default('We encountered an issue with your demo access.') }}
                        </p>

                        {% if errorType == 'expired' %}
                        <p class="text-muted mb-4">
                            Magic links expire after 5 minutes for security. Request a new one below.
                        </p>
                        {% elseif errorType == 'used' %}
                        <p class="text-muted mb-4">
                            This link has already been used. If you have an active session, continue to the demo.
                        </p>
                        {% endif %}

                        <div class="d-grid gap-2">
                            <a href="/demo" class="btn btn-primary btn-lg">
                                <i class="fa-solid fa-paper-plane me-2"></i>
                                Request New Access
                            </a>

                            {% if errorType == 'used' %}
                            <a href="/demo/select-concept" class="btn btn-outline-secondary">
                                <i class="fa-solid fa-arrow-right me-2"></i>
                                Continue to Demo
                            </a>
                            {% endif %}
                        </div>

                        <hr class="my-4">

                        <div class="text-muted small">
                            <p class="mb-2">
                                <i class="fa-solid fa-headset me-1"></i>
                                Need help? Contact <a href="mailto:support@buyerkiosk.com">support@buyerkiosk.com</a>
                            </p>
                        </div>

                    </div>
                </div>

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

{% block styles %}
<style>
.demo-error {
    background: linear-gradient(135deg, var(--neutral-600) 0%, var(--neutral-800) 100%);
    min-height: 100vh;
}

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

.card {
    border-radius: 1rem;
}

.error-icon {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}
</style>
{% endblock %}