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

{% block title %}{{ demo.flow.title }} - Gvelo Demo{% endblock %}
{% block body_attrs %}class="demo-body app-sandbox accent-{{ demo.state.identity.brand_accent }}" data-session-id="{{ demo.public_id }}"{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/demo/demo.css?v=sidebar-sample-fix-20260519">
{% endblock %}
{% block content %}
<section class="impact-overlay" id="impact-overlay">
    <div class="impact-stage">
        <p class="eyebrow">First 60 seconds</p>
        {% set first_minute_sequence = demo.state.first_minute.sequence if demo.state.first_minute and demo.state.first_minute.sequence else [] %}
        <h1 id="impact-title">{{ demo.state.first_minute.headline if demo.state.first_minute else 'Welcome to Gvelo' }}</h1>
        <p id="impact-body">{{ first_minute_sequence[0].body if first_minute_sequence else 'Explore the demo workspace safely.' }}</p>
        <div class="impact-progress"><i id="impact-progress-bar"></i></div>
        <div class="impact-actions">
            <button class="solid-button" id="impact-start" type="button">Enter Business World</button>
            <button class="ghost-button" id="impact-skip" type="button">Skip Intro</button>
        </div>
    </div>
</section>
<main class="sandbox-layout">
    <aside class="sandbox-sidebar">
        <a class="demo-wordmark compact" href="/experience">Gvelo Demo</a>
        <div class="personalization-card">
            <span>{{ demo.state.user_role|replace('-', ' ')|title }}</span>
            <strong>{{ demo.state.identity.name }}</strong>
            <em>{{ demo.state.business_size|replace('-', ' ')|title }} - {{ demo.state.operational_style|replace('-', ' ')|title }}</em>
        </div>
        <div class="progress-block">
            <span>Progress</span>
            {% set demo_steps = demo.flow.steps if demo.flow and demo.flow.steps else [] %}
            {% set demo_step_count = demo_steps|length %}
            {% set completed_count = demo.progress.completed_steps|length if demo.progress and demo.progress.completed_steps else 0 %}
            <strong id="progress-count">{{ completed_count }}/{{ demo_step_count }}</strong>
            <div class="progress-track"><i id="progress-bar" style="width: {{ ((completed_count / demo_step_count * 100) if demo_step_count else 0)|round(0) }}%"></i></div>
        </div>
        <nav class="sandbox-nav">
            <a href="#module-dashboard" data-module="dashboard" aria-controls="module-dashboard" class="active">Dashboard</a>
            <a href="#module-pos" data-module="pos" aria-controls="module-pos">POS</a>
            <a href="#module-inventory" data-module="inventory" aria-controls="module-inventory">Inventory</a>
            <a href="#module-analytics" data-module="analytics" aria-controls="module-analytics">Analytics</a>
            <a href="#module-branches" data-module="branches" aria-controls="module-branches">Branches</a>
            <a href="#module-finance" data-module="finance" aria-controls="module-finance">Finance</a>
            <a href="#module-assistant" data-module="assistant" aria-controls="module-assistant">AI Assistant</a>
            <a href="#module-coach" data-module="coach" aria-controls="module-coach">Business Coach</a>
            <a href="#module-reality" data-module="reality" aria-controls="module-reality">Reality Engine</a>
            <a href="#module-decisions" data-module="decisions" aria-controls="module-decisions">Decisions</a>
            <a href="#module-journey" data-module="journey" aria-controls="module-journey">Journey Mode</a>
            <a href="#module-projection" data-module="projection" aria-controls="module-projection">Future Projection</a>
            <a href="#module-drama" data-module="drama" aria-controls="module-drama">Recovery Mode</a>
            <a href="#module-timeline" data-module="timeline" aria-controls="module-timeline">Growth Timeline</a>
            <a href="#module-investor" data-module="investor" aria-controls="module-investor">Investor Mode</a>
        </nav>
        <form method="post" action="/demo/session/{{ demo.public_id }}/reset">
            <button class="reset-button" type="submit">Reset Sandbox</button>
        </form>
    </aside>

    <section class="sandbox-main">
        <header class="sandbox-topbar">
            <div>
                <p class="eyebrow">Sandbox only - {{ demo.business_type }}</p>
                <h1>{{ demo.state.identity.name }}</h1>
            </div>
            <div class="topbar-actions">
                <button id="wow-moment" class="solid-button" type="button">Wow Moment</button>
                <button id="voice-guide" class="ghost-button" type="button">Voice Guide</button>
                <a href="/demo/qr?campaign={{ demo.campaign or 'direct' }}" class="ghost-button">QR</a>
                <a href="/register" class="solid-button">Start Trial</a>
            </div>
        </header>

        <section class="live-assist-panel">
            <div id="context-helper">
                <strong>Live assistance</strong>
                <span>Hover or click highlighted areas to see why each action matters.</span>
            </div>
            <div id="live-event-feed">
                <strong>Business pulse</strong>
                <span>{{ demo.state.live_events[0].title if demo.state.live_events else 'Demo activity ready' }}</span>
            </div>
        </section>

        <section class="cinematic-banner" id="cinematic-banner">
            <div>
                <p class="eyebrow">Cinematic business journey</p>
                <h2>{{ demo.state.journey.title }}</h2>
                <p>{{ demo.state.identity.goal }} {{ demo.state.journey.tone|title }}.</p>
            </div>
            <div class="journey-progress-mini">
                {% for milestone in demo.state.journey.milestones %}
                <span class="{{ milestone.status }}">{{ milestone.label }}</span>
                {% endfor %}
            </div>
        </section>

        <section class="instant-value-panel">
            <div>
                <p class="eyebrow">Instant value moments</p>
                <h2>This should feel useful before it feels complex.</h2>
            </div>
            <div class="instant-value-grid">
                {% for item in demo.state.instant_value %}
                <article>
                    <span>{{ item.title }}</span>
                    <strong>{{ item.value }}</strong>
                    <em>{{ item.body }}</em>
                </article>
                {% endfor %}
            </div>
        </section>

        <section class="walkthrough-panel" id="walkthrough-panel">
            <div>
                <p class="eyebrow">Guided walkthrough</p>
                <h2 id="step-title">{{ demo_steps[0].title if demo_steps else 'Explore Gvelo' }}</h2>
                <p id="step-body">{{ demo_steps[0].body if demo_steps else 'Use the sidebar to open a demo workflow.' }}</p>
            </div>
            <div class="walkthrough-actions">
                <button id="pause-tour" class="ghost-button" type="button">Pause</button>
                <button id="complete-step" class="solid-button" type="button">Complete Step</button>
            </div>
        </section>

        <section class="sandbox-grid module-view active" id="module-dashboard">
            <article class="metric-card highlight-target" data-target="dashboard"><span>Demo Revenue</span><strong>KES {{ "{:,.0f}".format(demo.analytics.kpis.revenue) }}</strong></article>
            <article class="metric-card"><span>Orders</span><strong>{{ demo.analytics.kpis.orders }}</strong></article>
            <article class="metric-card"><span>Customers</span><strong>{{ demo.analytics.kpis.customers }}</strong></article>
            <article class="metric-card"><span>Average Order</span><strong>KES {{ "{:,.0f}".format(demo.analytics.kpis.average_order) }}</strong></article>
            <article class="wide-card">
                <h3>Operational Feed</h3>
                {% for tx in demo.state.transactions[:5] %}
                <div class="feed-row"><span>{{ tx.id }}</span><strong>{{ tx.payment }}</strong><em>KES {{ "{:,.0f}".format(tx.total) }}</em></div>
                {% endfor %}
            </article>
            <article class="wide-card storytelling-card">
                <h3>Analytics Story</h3>
                <p id="storyline">{{ demo.state.story[0] if demo.state.story else 'Your business story will appear here.' }}</p>
            </article>
            <article class="wide-card">
                <h3>Video Preview</h3>
                <div class="video-frame overview"><span></span><span></span><span></span></div>
            </article>
            <article class="wide-card trust-card">
                <h3>Trust-First Guidance</h3>
                {% for signal in demo.state.trust_signals[:2] %}
                <p><strong>{{ signal.title }}</strong><br>{{ signal.body }}</p>
                {% endfor %}
            </article>
        </section>

        <section class="sandbox-grid module-view" id="module-pos">
            <article class="wide-card highlight-target" data-target="pos">
                <h3>Demo Checkout</h3>
                <div class="pos-list">
                    {% for product in demo.state.products[:4] %}
                    <button class="pos-item" data-price="{{ product.price }}"><span>{{ product.name }}</span><strong>KES {{ product.price }}</strong></button>
                    {% endfor %}
                </div>
            </article>
            <article class="checkout-card highlight-target" data-target="payment">
                <h3>Sandbox Payment</h3>
                <p id="cart-total">KES 0</p>
                <button id="pay-demo" class="solid-button">Process Demo Payment</button>
                <small>No real payment provider is called.</small>
            </article>
            <article class="wide-card highlight-target" data-target="receipt">
                <h3>Receipt Preview</h3>
                <div id="receipt-preview">Select products to generate a demo receipt.</div>
            </article>
        </section>

        <section class="sandbox-grid module-view" id="module-inventory">
            <article class="wide-card highlight-target" data-target="inventory">
                <h3>Inventory Simulation</h3>
                <div class="data-table">
                    {% for product in demo.state.products %}
                    <div><span>{{ product.name }}</span><em>{{ product.category }}</em><strong>{{ product.stock }} units</strong></div>
                    {% endfor %}
                </div>
            </article>
            <article class="wide-card highlight-target" data-target="restock">
                <h3>Restock Recommendations</h3>
                {% for product in demo.analytics.low_stock %}
                <p>{{ product.name }} - {{ product.stock }} units remaining</p>
                {% endfor %}
            </article>
        </section>

        <section class="sandbox-grid module-view" id="module-analytics">
            <article class="wide-card highlight-target" data-target="analytics">
                <div class="card-toolbar">
                    <h3>Analytics Simulation</h3>
                    <select id="analytics-filter">
                        <option value="all">All branches</option>
                        {% for branch in demo.state.branches %}
                        <option value="{{ branch.id }}">{{ branch.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <canvas id="sales-chart" height="130"></canvas>
            </article>
            <article class="wide-card highlight-target" data-target="insights">
                <h3>AI Insights</h3>
                {% for insight in demo.analytics.insights %}
                <p>{{ insight }}</p>
                {% endfor %}
            </article>
        </section>

        <section class="sandbox-grid module-view" id="module-branches">
            {% for branch in demo.state.branches %}
            <article class="metric-card highlight-target" data-target="branches"><span>{{ branch.name }}</span><strong>KES {{ "{:,.0f}".format(branch.revenue) }}</strong><em>{{ branch.status }}</em></article>
            {% endfor %}
            <article class="wide-card highlight-target" data-target="transfer">
                <h3>Branch Stock Transfer</h3>
                <p>Move 12 demo units from Kisumu Lakeside to Nairobi Central.</p>
                <button class="solid-button" data-action="transfer">Simulate Transfer</button>
            </article>
        </section>

        <section class="sandbox-grid module-view" id="module-finance">
            <article class="metric-card highlight-target" data-target="finance"><span>Cashflow</span><strong>KES 384,200</strong></article>
            <article class="metric-card"><span>Expenses</span><strong>KES 74,600</strong></article>
            <article class="metric-card"><span>Projected Margin</span><strong>31%</strong></article>
            <article class="wide-card highlight-target" data-target="forecast"><h3>Monthly Forecast</h3><p>Working capital remains healthy if restock spend stays below KES 92,000.</p></article>
        </section>

        <section class="sandbox-grid module-view" id="module-assistant">
            <article class="assistant-card highlight-target" data-target="assistant">
                <h3>AI Demo Assistant</h3>
                <div id="assistant-thread"><p>Ask about inventory, payments, analytics, branches, or signup.</p></div>
                <form id="assistant-form">
                    <input name="question" placeholder="Ask a demo question..." autocomplete="off">
                    <button type="submit">Ask</button>
                </form>
            </article>
            <article class="wide-card highlight-target" data-target="recommendation">
                <h3>Recommendation Engine</h3>
                {% for item in demo.state.recommendations %}
                <p>{{ item }}</p>
                {% endfor %}
            </article>
        </section>

        <section class="sandbox-grid module-view" id="module-coach">
            <article class="assistant-card highlight-target" data-target="coach">
                <h3>AI Business Coach</h3>
                <p>This coach explains what to do next based on the simulated business signals.</p>
                <div class="coach-actions">
                    {% for item in demo.state.recommendations %}
                    <button class="coach-prompt" type="button">{{ item }}</button>
                    {% endfor %}
                </div>
                <div id="coach-output">Select a recommendation to see the business reasoning.</div>
            </article>
            <article class="wide-card">
                <h3>Smart Feature Discovery</h3>
                <p>Core workflows appear first. Advanced views unlock after you complete guided actions.</p>
                <div id="discovery-list"></div>
            </article>
        </section>

        <section class="sandbox-grid module-view" id="module-reality">
            <article class="metric-card"><span>Operational Pressure</span><strong id="pressure-score">{{ demo.state.reality.operational_pressure }}</strong></article>
            <article class="metric-card"><span>Customer Confidence</span><strong id="satisfaction-score">{{ demo.state.reality.customer_satisfaction }}%</strong></article>
            <article class="metric-card"><span>Cash Position</span><strong id="cash-position">KES {{ "{:,.0f}".format(demo.state.reality.cash_position) }}</strong></article>
            <article class="metric-card"><span>Profit Margin</span><strong id="profit-margin">{{ demo.state.reality.profit_margin }}%</strong></article>
            <article class="wide-card reality-card">
                <h3>Business Operating Reality</h3>
                <p>Market condition: {{ demo.state.reality.market_condition }}</p>
                <p>Maturity stage: {{ demo.state.reality.maturity_stage|title }}</p>
                <p>Growth ambition: {{ demo.state.identity.ambition }}</p>
            </article>
            <article class="wide-card companion-card">
                <h3>AI Business Companion</h3>
                <p id="companion-message">{{ demo.state.companion[0] if demo.state.companion else 'Gvelo is watching the business signals with you.' }}</p>
            </article>
        </section>

        <section class="sandbox-grid module-view" id="module-decisions">
            {% for decision in demo.state.decisions %}
            <article class="wide-card decision-card">
                <h3>{{ decision.title }}</h3>
                <p><strong>Benefit:</strong> {{ decision.benefit }}</p>
                <p><strong>Tradeoff:</strong> {{ decision.tradeoff }}</p>
                <button class="solid-button apply-decision" type="button" data-decision="{{ decision.id }}">Apply Decision</button>
            </article>
            {% endfor %}
        </section>

        <section class="sandbox-grid module-view" id="module-journey">
            <article class="assistant-card">
                <h3>{{ demo.state.journey.title }}</h3>
                <p>{{ demo.state.journey.tone|title }}.</p>
                <div class="journey-stage-list">
                    {% for milestone in demo.state.journey.milestones %}
                    <div class="{{ milestone.status }}">
                        <strong>{{ milestone.label }}</strong>
                        <span>{{ milestone.impact }}</span>
                    </div>
                    {% endfor %}
                </div>
            </article>
            <article class="wide-card">
                <h3>Social Proof Simulation</h3>
                {% for proof in demo.state.social_proof %}
                <p><strong>{{ proof.title }}</strong><br>{{ proof.body }}</p>
                {% endfor %}
            </article>
        </section>

        <section class="sandbox-grid module-view" id="module-projection">
            {% for scenario in demo.state.projection.scenarios %}
            <article class="metric-card projection-card">
                <span>{{ scenario.title }}</span>
                <strong>{{ scenario.value }}</strong>
                <em>{{ scenario.body }}</em>
            </article>
            {% endfor %}
            <article class="wide-card">
                <h3>AI Growth Scenario</h3>
                <p>Projected growth: {{ demo.state.projection.monthly_growth }}% monthly uplift if stock availability, checkout speed, and branch visibility improve together.</p>
                <p>Expected efficiency improvement: {{ demo.state.projection.efficiency_gain }}% from guided operational decisions.</p>
            </article>
        </section>

        <section class="sandbox-grid module-view" id="module-drama">
            {% for scenario in demo.state.drama %}
            <article class="wide-card drama-card">
                <h3>{{ scenario.title }}</h3>
                <p><strong>Problem:</strong> {{ scenario.problem }}</p>
                <p><strong>Risk:</strong> {{ scenario.risk }}</p>
                <p><strong>Recovery:</strong> {{ scenario.recovery }}</p>
                <button class="ghost-button resolve-drama" type="button" data-title="{{ scenario.title }}">Resolve Scenario</button>
            </article>
            {% endfor %}
        </section>

        <section class="sandbox-grid module-view" id="module-timeline">
            <article class="assistant-card">
                <h3>Business Growth Timeline</h3>
                <div class="growth-timeline">
                    {% for item in demo.state.growth_timeline %}
                    <div>
                        <strong>{{ item.stage }}</strong>
                        <span>{{ item.focus }}</span>
                        <em>{{ item.complexity }}</em>
                    </div>
                    {% endfor %}
                </div>
            </article>
            <article class="wide-card">
                <h3>Advisor Mode</h3>
                {% for item in demo.state.advisor %}
                <p>{{ item }}</p>
                {% endfor %}
            </article>
        </section>

        <section class="sandbox-grid module-view" id="module-investor">
            <article class="metric-card"><span>Scale Readiness</span><strong>{{ demo.state.investor.scale_score }}</strong></article>
            <article class="metric-card"><span>Branches Simulated</span><strong>{{ demo.state.investor.branches_observed }}</strong></article>
            <article class="wide-card">
                <h3>Enterprise Intelligence</h3>
                <p>{{ demo.state.investor.governance }}</p>
                {% for item in demo.state.investor.architecture %}
                <p>{{ item }}</p>
                {% endfor %}
            </article>
            <article class="wide-card">
                <h3>Architecture Overview</h3>
                <div class="architecture-map">
                    <span>QR Gateway</span><span>Demo Sandbox</span><span>Blueprint Modules</span><span>Analytics</span><span>AI Coach</span><span>Conversion</span>
                </div>
            </article>
            <article class="wide-card enterprise-showcase">
                <h3>Enterprise Showcase</h3>
                <p>Large-scale demo mode combines branches, governance, analytics, AI assistance, and conversion intelligence into one command center.</p>
                <div class="enterprise-grid">
                    <span>Multi-branch</span><span>Governance</span><span>AI Signals</span><span>Reports</span><span>Operations</span><span>Scale</span>
                </div>
            </article>
        </section>

        <section class="wow-panel" id="wow-panel" hidden>
            <div>
                <p class="eyebrow">Wow moment</p>
                <h2 id="wow-title">{{ demo.state.wow_moments[0].title if demo.state.wow_moments else 'Operational Intelligence' }}</h2>
                <p id="wow-body">{{ demo.state.wow_moments[0].body if demo.state.wow_moments else 'Gvelo turns business movement into clear action.' }}</p>
            </div>
        </section>

        <section class="achievement-panel">
            <div>
                <p class="eyebrow">Achievements</p>
                <h2>Professional milestones for guided exploration.</h2>
            </div>
            <div class="badge-grid" id="badge-grid">
                {% for badge in demo.state.achievements %}
                <div class="achievement-badge" data-achievement="{{ badge.id }}">
                    <strong>{{ badge.title }}</strong>
                    <span>{{ badge.description }}</span>
                </div>
                {% endfor %}
            </div>
        </section>

        <section class="conversion-panel">
            <div>
                <p class="eyebrow">Ready for the real workspace?</p>
                <h2>{{ demo.state.conversion_story.headline }}</h2>
                <p>{{ demo.state.conversion_story.body }}</p>
                <div class="aspiration-strip">
                    {% for signal in demo.state.aspiration.signals[:2] %}
                    <span>{{ signal }}</span>
                    {% endfor %}
                </div>
            </div>
            <form method="post" action="/demo/conversion/request">
                <input type="hidden" name="session_id" value="{{ demo.public_id }}">
                <input type="hidden" name="campaign" value="{{ demo.campaign or 'direct' }}">
                <button name="intent" value="trial" type="submit">Start Free Trial</button>
                <button name="intent" value="onboarding" type="submit">Request Onboarding</button>
                <button name="intent" value="contact" type="submit">Contact Support</button>
            </form>
        </section>
    </section>
</main>
<script>
window.GVELO_DEMO = {
    sessionId: "{{ demo.public_id }}",
    steps: {{ demo_steps|tojson }},
    analytics: {{ demo.analytics|tojson }},
    state: {{ demo.state|tojson }},
    progress: {{ demo.progress|tojson }}
};
</script>
<script>
if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/static/demo/demo-sw.js").catch(function () {});
}
</script>
<script src="/static/demo/demo.js?v=sidebar-sample-fix-20260519"></script>
{% endblock %}