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

{% block title %}Business Transformation - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}operational-page ops-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/operational-experience.css">
{% endblock %}
{% block content %}
<main class="ops-shell ops-transform">
    <header class="ops-header ops-identity-hero">
        <div>
            <span class="ops-kicker">Business operating ecosystem</span>
            <h1>{{ snapshot.shop_name }} is becoming a modern business operation</h1>
            <div class="ops-subtitle">
                Gvelo connects setup, sales, inventory, analytics, trust, growth, and community into one intelligent operating rhythm.
            </div>
        </div>
        <div class="ops-actions">
            <a class="ops-button secondary" href="/operations-center">Operations</a>
            <a class="ops-button secondary" href="/growth">Growth</a>
            <a class="ops-button secondary" href="/onboarding">Onboarding</a>
        </div>
    </header>

    <section class="ops-grid">
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Transformation Stage</span>
            <strong>{{ snapshot.stage }}</strong>
            <span class="ops-badge info">{{ snapshot.maturity_score }}% maturity</span>
        </div>
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Operational Confidence</span>
            <strong>{{ snapshot.confidence_score }}%</strong>
            <span>Decision clarity, trust checks, setup, and recent operating activity.</span>
        </div>
        <div class="ops-panel ops-metric">
            <span class="ops-muted">30-Day Operating Memory</span>
            <strong>{{ snapshot.metrics.sales_30 }}</strong>
            <span>Sales recorded across connected business workflows.</span>
        </div>
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Business Structure</span>
            <strong>{{ snapshot.metrics.products }}</strong>
            <span>{{ snapshot.metrics.branches }} branches, {{ snapshot.metrics.cashiers }} cashiers, {{ snapshot.metrics.customers }} customers.</span>
        </div>
    </section>

    <section class="ops-panel">
        <h2>Transformation Path</h2>
        <div class="ops-timeline">
            {% for item in snapshot.transformation_path %}
            <div class="ops-timeline-step {{ item.state }}">
                <span class="ops-badge {{ 'info' if item.state == 'complete' else 'warn' if item.state == 'active' else '' }}">{{ item.state|title }}</span>
                <h3>{{ item.stage }}</h3>
                <p>{{ item.focus }}</p>
            </div>
            {% endfor %}
        </div>
    </section>

    <section class="ops-grid ops-two-one">
        <div class="ops-panel">
            <h2>Operational Confidence Engine</h2>
            <div class="ops-list">
                {% for action in snapshot.confidence_actions %}
                <div class="ops-list-item ops-action-item">
                    <strong>{{ action.title }}</strong>
                    <span class="ops-badge info">{{ action.signal }}</span>
                    <p>{{ action.guidance }}</p>
                    <a class="ops-button secondary" href="{{ action.href }}">Open</a>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="ops-panel">
            <h2>Identity Elevation</h2>
            <div class="ops-list">
                {% for item in snapshot.identity %}
                <div class="ops-list-item">
                    <strong>{{ item.quality }}</strong>
                    <p>{{ item.evidence }}</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>

    <section class="ops-panel">
        <h2>Community And Ecosystem</h2>
        <div class="ops-grid">
            {% for item in snapshot.showcases %}
            <div class="ops-list-item ops-showcase">
                <span class="ops-badge info">{{ item.result }}</span>
                <h3>{{ item.title }}</h3>
                <p>{{ item.story }}</p>
            </div>
            {% endfor %}
        </div>
    </section>

    <section class="ops-grid">
        <div class="ops-panel">
            <h2>Achievement Recognition</h2>
            <div class="ops-list">
                {% for badge in snapshot.recognition %}
                <div class="ops-list-item ops-recognition {{ badge.status }}">
                    <strong>{{ badge.label }}</strong>
                    <span>{{ badge.detail }}</span>
                    <span class="ops-badge {{ 'info' if badge.status == 'earned' else 'warn' }}">{{ badge.status|title }}</span>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="ops-panel">
            <h2>Modern Business Signals</h2>
            <div class="ops-token-grid">
                {% for signal in snapshot.modern_signals %}
                <span>{{ signal }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="ops-panel">
            <h2>Operational Culture</h2>
            <div class="ops-token-grid">
                {% for principle in snapshot.culture %}
                <span>{{ principle }}</span>
                {% endfor %}
            </div>
        </div>
    </section>

    <section class="ops-panel">
        <h2>Long-Term Relationship Memory</h2>
        <div class="ops-grid">
            {% for item in snapshot.relationship_memory %}
            <div class="ops-list-item">
                <strong>{{ item.moment }}</strong>
                <p>{{ item.meaning }}</p>
            </div>
            {% endfor %}
        </div>
    </section>

    <section class="ops-panel ops-philosophy">
        <span class="ops-kicker">Final platform philosophy</span>
        <h2>This is how serious modern businesses should operate.</h2>
        <p>
            Gvelo is more than a POS screen. It is a business operating ecosystem, an operational intelligence platform,
            modern commerce infrastructure, and a transformation experience for disciplined growth.
        </p>
    </section>
</main>
{% endblock %}