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

{% block pageTitle %}BuyerKiosk Demo - Experience Our Platform{% 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 and Header -->
                <div class="text-center mb-4">
                    <img src="/images/buyerkiosk-logo.svg" alt="BuyerKiosk" class="demo-logo mb-3" style="max-width: 200px;">
                    <h1 class="h2 fw-bold text-white mb-2">Experience BuyerKiosk</h1>
                    <p class="text-white-50">The complete resale store management platform</p>
                </div>

                <!-- Email Form Card -->
                <div class="card shadow-lg border-0">
                    <div class="card-body p-4">

                        {% if error %}
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ error }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        {% endif %}

                        {% if app.request.get('message') %}
                        <div class="alert alert-info alert-dismissible fade show" role="alert">
                            {{ app.request.get('message') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        {% endif %}

                        <h4 class="card-title text-center mb-3">Get Instant Access</h4>
                        <p class="text-muted text-center mb-4">
                            Enter your email to receive a magic link for instant demo access. No password required.
                        </p>

                        <form action="/demo/request-access" method="POST" id="demo-request-form">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                            <div class="mb-3">
                                <label for="email" class="form-label visually-hidden">Email address</label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text bg-light">
                                        <i class="fa-solid fa-envelope text-muted"></i>
                                    </span>
                                    <input
                                        type="email"
                                        class="form-control"
                                        id="email"
                                        name="email"
                                        placeholder="Enter your email"
                                        value="{{ email|default('') }}"
                                        required
                                        autofocus
                                    >
                                </div>
                            </div>

                            {% if sourceQrId %}
                            <input type="hidden" name="source_qr_id" value="{{ sourceQrId }}">
                            {% endif %}

                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fa-solid fa-paper-plane me-2"></i>
                                    Send Magic Link
                                </button>
                            </div>
                        </form>

                        <hr class="my-4">

                        <div class="text-center">
                            <p class="text-muted small mb-2">
                                <i class="fa-solid fa-lock me-1"></i>
                                Your email is used only for demo access
                            </p>
                            <p class="text-muted small mb-0">
                                <i class="fa-solid fa-clock me-1"></i>
                                Demo sessions last 24 hours
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Features Preview -->
                <div class="row g-3 mt-4">
                    <div class="col-4">
                        <div class="text-center text-white-50">
                            <i class="fa-solid fa-cash-register fa-2x mb-2"></i>
                            <p class="small mb-0">Buy Queue</p>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="text-center text-white-50">
                            <i class="fa-solid fa-book-open fa-2x mb-2"></i>
                            <p class="small mb-0">Workbook</p>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="text-center text-white-50">
                            <i class="fa-solid fa-calendar-days fa-2x mb-2"></i>
                            <p class="small mb-0">Events</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;
}
</style>
{% endblock %}