{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Gvelo Experience Center{% endblock %}
{% block body_class %}demo-body{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/demo/demo.css">
{% endblock %}
{% block content %}
<main class="experience-shell">
    <header class="experience-hero">
        <nav class="demo-nav">
            <a class="demo-wordmark" href="/experience">Gvelo Experience Center</a>
            <div class="demo-nav-actions">
                <a href="/demo/qr?campaign={{ campaign }}" class="ghost-button">QR Assets</a>
                <a href="/register" class="solid-button">Start Free Trial</a>
            </div>
        </nav>

        <section class="hero-grid">
            <div class="hero-copy">
                <p class="eyebrow">Interactive product tour</p>
                <h1>Explore Gvelo Enterprise Platform through a safe business simulation.</h1>
                <p class="hero-lede">
                    Walk through POS, inventory, analytics, branches, finance, AI insights, receipts, and onboarding with demo-only data.
                </p>
                <div class="impact-promises">
                    <span>60-second clarity</span>
                    <span>Demo-only safety</span>
                    <span>AI-guided decisions</span>
                </div>
                <form class="launch-panel personalized-launch" method="post" action="/demo/start">
                    <input type="hidden" name="campaign" value="{{ campaign }}">
                    <input type="hidden" name="referral_tag" value="{{ referral }}">
                    <label>
                        Business name
                        <input name="business_name" maxlength="80" placeholder="Your business name">
                    </label>
                    <label>
                        Business type
                        <select name="business_type">
                            <option value="retail">Retail shop</option>
                            <option value="supermarket">Supermarket</option>
                            <option value="pharmacy">Pharmacy</option>
                            <option value="clothing">Clothing store</option>
                            <option value="wholesaler">Wholesaler</option>
                            <option value="mini-mart">Mini-mart</option>
                            <option value="cosmetics">Cosmetics store</option>
                            <option value="restaurant">Restaurant</option>
                            <option value="electronics">Electronics</option>
                        </select>
                    </label>
                    <label>
                        Business size
                        <select name="business_size">
                            <option value="growing">Growing shop</option>
                            <option value="small">Single outlet</option>
                            <option value="enterprise">Enterprise network</option>
                        </select>
                    </label>
                    <label>
                        Operational style
                        <select name="operational_style">
                            <option value="fast-checkout">Fast checkout</option>
                            <option value="inventory-first">Inventory-first</option>
                            <option value="analytics-led">Analytics-led</option>
                            <option value="branch-led">Branch-led</option>
                        </select>
                    </label>
                    <label>
                        Visitor role
                        <select name="user_role">
                            <option value="shop-owner">Shop owner</option>
                            <option value="cashier">Cashier</option>
                            <option value="enterprise-manager">Enterprise manager</option>
                            <option value="branch-manager">Branch manager</option>
                            <option value="supplier">Supplier</option>
                            <option value="investor">Investor</option>
                        </select>
                    </label>
                    <label>
                        Business journey
                        <select name="journey_mode">
                            <option value="first-shop">Starting Your First Shop</option>
                            <option value="multi-branch">Growing Into Multiple Branches</option>
                            <option value="high-performing">Becoming High-Performing</option>
                            <option value="intelligent-scale">Scaling With Intelligence</option>
                        </select>
                    </label>
                    <label>
                        Operational goal
                        <input name="operational_goal" maxlength="160" placeholder="Example: reduce stockouts and grow sales">
                    </label>
                    <label>
                        Growth ambition
                        <input name="growth_ambition" maxlength="160" placeholder="Example: open two branches in 12 months">
                    </label>
                    <label>
                        Brand accent
                        <select name="brand_accent">
                            <option value="teal">Teal confidence</option>
                            <option value="blue">Blue intelligence</option>
                            <option value="green">Green growth</option>
                            <option value="amber">Amber momentum</option>
                        </select>
                    </label>
                    <label>
                        Walkthrough
                        <select name="flow_id">
                            {% for flow in flows %}
                            <option value="{{ flow.id }}">{{ flow.title }}</option>
                            {% endfor %}
                        </select>
                    </label>
                    <button type="submit">Try Demo</button>
                </form>
            </div>
            <div class="hero-console" aria-label="Gvelo demo preview">
                <div class="console-top">
                    <span></span><span></span><span></span>
                    <strong>Live demo sandbox</strong>
                </div>
                <div class="console-metrics">
                    <div><b>KES 426K</b><span>Demo revenue</span></div>
                    <div><b>1,284</b><span>Transactions</span></div>
                    <div><b>3</b><span>Branches</span></div>
                </div>
                <div class="console-chart">
                    <i class="hil-inline-260e167fcb"></i><i class="hil-inline-52189c0922"></i><i class="hil-inline-115ad004a0"></i><i class="hil-inline-9c26ba21f3"></i><i class="hil-inline-8c3d891344"></i><i class="hil-inline-9c72692763"></i>
                </div>
                <div class="console-feed">
                    <p><strong>AI Insight</strong> Restock fast-moving items before Friday.</p>
                    <p><strong>Branch</strong> Mombasa is trending 14% above last week.</p>
                    <p><strong>Payment</strong> Sandbox checkout is ready.</p>
                </div>
                <div class="instant-value-preview">
                    <strong>Instant value</strong>
                    <span>Analytics, stock pressure, and next action become visible before setup feels heavy.</span>
                </div>
            </div>
        </section>
    </header>

    <section class="experience-section impact-section">
        <div class="section-heading">
            <p class="eyebrow">First 60 seconds</p>
            <h2>Understand the operating power before you learn the software.</h2>
        </div>
        <div class="impact-grid">
            <article><strong>Operational power</strong><span>Sales, stock, customers, and cash connect instantly.</span></article>
            <article><strong>Simplicity</strong><span>Choose a profile, launch, and follow the guided path.</span></article>
            <article><strong>Intelligence</strong><span>AI explains what matters and what to do next.</span></article>
            <article><strong>Trust</strong><span>Every action is sandboxed and clearly explained.</span></article>
        </div>
    </section>

    <section class="experience-section">
        <div class="section-heading">
            <p class="eyebrow">Guided scenarios</p>
            <h2>Choose the story that matches the visitor.</h2>
        </div>
        <div class="flow-grid">
            {% for flow in flows %}
            <form class="flow-card" method="post" action="/demo/start">
                <input type="hidden" name="campaign" value="{{ campaign }}">
                <input type="hidden" name="referral_tag" value="{{ referral }}">
                <input type="hidden" name="flow_id" value="{{ flow.id }}">
                <input type="hidden" name="business_type" value="retail">
                <input type="hidden" name="business_size" value="growing">
                <input type="hidden" name="operational_style" value="fast-checkout">
                <input type="hidden" name="user_role" value="shop-owner">
                <input type="hidden" name="journey_mode" value="first-shop">
                <input type="hidden" name="business_name" value="">
                <input type="hidden" name="operational_goal" value="">
                <input type="hidden" name="growth_ambition" value="">
                <span>{{ flow.category }}</span>
                <h3>{{ flow.title }}</h3>
                <p>{{ flow.steps|length }} guided steps - {{ flow.duration }}</p>
                <button type="submit">Launch</button>
            </form>
            {% endfor %}
        </div>
    </section>

    <section class="experience-section split-section">
        <div>
            <p class="eyebrow">Module showcase</p>
            <h2>One tour, many operational angles.</h2>
        </div>
        <div class="module-strip">
            {% if demo_features %}
                {% for feature in demo_features %}
                <a href="{{ feature.route_path }}">{{ feature.title }}</a>
                {% endfor %}
            {% else %}
                <span>POS</span>
                <span>Inventory</span>
                <span>Payments</span>
                <span>Receipts</span>
                <span>Branches</span>
                <span>Analytics</span>
                <span>Finance</span>
                <span>AI</span>
            {% endif %}
        </div>
    </section>

    {% if agent_report %}
    <section class="experience-section split-section">
        <div>
            <p class="eyebrow">Demo AI Agent</p>
            <h2>Tour coverage stays aware of new pages.</h2>
        </div>
        <div class="agent-mini-panel">
            <strong>{{ agent_report.summary }}</strong>
            <p>{{ agent_report.created_at }}</p>
            <a href="/demo/agent">Review Agent</a>
        </div>
    </section>
    {% endif %}

    <section class="experience-section">
        <div class="section-heading">
            <p class="eyebrow">Video intros</p>
            <h2>Lightweight previews before the user clicks in.</h2>
        </div>
        <div class="video-grid">
            {% for video in videos %}
            <form class="video-card" id="video-{{ video.id }}" method="post" action="/demo/start" tabindex="0" aria-label="Launch {{ video.title }} preview">
                <input type="hidden" name="campaign" value="{{ campaign }}">
                <input type="hidden" name="referral_tag" value="{{ referral }}">
                <input type="hidden" name="flow_id" value="{{ video.flow_id or 'retail-day' }}">
                <input type="hidden" name="business_type" value="retail">
                <input type="hidden" name="business_size" value="growing">
                <input type="hidden" name="operational_style" value="{{ 'analytics-led' if video.id == 'analytics' else 'branch-led' if video.id == 'branches' else 'fast-checkout' }}">
                <input type="hidden" name="user_role" value="{{ 'branch-manager' if video.id == 'branches' else 'shop-owner' }}">
                <input type="hidden" name="journey_mode" value="{{ 'multi-branch' if video.id == 'branches' else 'first-shop' }}">
                <input type="hidden" name="business_name" value="">
                <input type="hidden" name="operational_goal" value="">
                <input type="hidden" name="growth_ambition" value="">
                <div class="video-frame {{ video.theme }}">
                    <span></span><span></span><span></span>
                </div>
                <h3>{{ video.title }}</h3>
                <p>{{ video.module }} · {{ video.duration }}</p>
                <button type="submit">Launch preview</button>
            </form>
            {% endfor %}
        </div>
    </section>
</main>
<script>
document.querySelectorAll(".video-card").forEach((card) => {
    card.addEventListener("click", (event) => {
        if (event.target.closest("button, input, select, textarea, a")) return;
        card.requestSubmit();
    });
    card.addEventListener("keydown", (event) => {
        if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            card.requestSubmit();
        }
    });
});
</script>
{% endblock %}