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

{% block pageTitle %}Choose Your Store - BuyerKiosk Demo{% endblock %}

{% block content %}
<div class="demo-concept-select">
    <div class="container py-5">

        <!-- Header -->
        <div class="text-center mb-5">
            <img src="/images/buyerkiosk-logo.svg" alt="BuyerKiosk" class="mb-3" style="max-width: 180px;">
            <h1 class="h2 fw-bold mb-2">Choose Your Store Type</h1>
            <p class="text-muted lead">
                Select a store concept to explore. Each has unique features tailored to its market.
            </p>
            {% if remainingTime %}
            <span class="badge bg-light text-dark">
                <i class="fa-solid fa-clock me-1"></i>
                {{ remainingTime }}
            </span>
            {% endif %}
        </div>

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

        <!-- Concept Cards -->
        <div class="row g-4 justify-content-center">
            {% for code, concept in concepts %}
            <div class="col-lg-4 col-md-6">
                <form action="/demo/select-concept" method="POST" class="h-100">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="hidden" name="concept" value="{{ code }}">

                    <div class="card concept-card h-100 border-0 shadow-sm">
                        <div class="card-body d-flex flex-column p-4">
                            <!-- Icon -->
                            <div class="concept-icon text-{{ concept.color }} mb-3">
                                <i class="fa-solid {{ concept.icon }} fa-3x"></i>
                            </div>

                            <!-- Name -->
                            <h3 class="card-title h4 fw-bold mb-2">{{ concept.name }}</h3>

                            <!-- Target Audience -->
                            <span class="badge bg-{{ concept.color }}-subtle text-{{ concept.color }} mb-3">
                                {{ concept.target }}
                            </span>

                            <!-- Description -->
                            <p class="card-text text-muted flex-grow-1">
                                {{ concept.description }}
                            </p>

                            <!-- Select Button -->
                            <button type="submit" class="btn btn-{{ concept.color }} btn-lg w-100 mt-3">
                                <i class="fa-solid fa-arrow-right me-2"></i>
                                Explore {{ concept.name }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            {% endfor %}
        </div>

        <!-- Footer -->
        <div class="text-center mt-5">
            <p class="text-muted mb-2">
                <i class="fa-solid fa-circle-info me-1"></i>
                Don't worry - you can switch concepts anytime during your demo.
            </p>
            <a href="/demo/logout" class="text-muted small">
                <i class="fa-solid fa-arrow-right-from-bracket me-1"></i>
                End demo session
            </a>
        </div>

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

{% block styles %}
<style>
.demo-concept-select {
    min-height: 100vh;
    background: var(--neutral-50);
}

.concept-card {
    border-radius: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.concept-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15) !important;
}

.concept-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-100);
    border-radius: 1rem;
}

/* Color-specific subtle backgrounds */
.bg-primary-subtle { background-color: rgba(var(--primary-rgb), 0.1) !important; }
.bg-success-subtle { background-color: rgba(var(--success-rgb), 0.1) !important; }
.bg-info-subtle { background-color: rgba(var(--info-rgb), 0.1) !important; }
</style>
{% endblock %}