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

{% block title %}Product Intelligence - 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">
    <header class="ops-header">
        <div>
            <h1>Product Intelligence</h1>
            <div class="ops-subtitle">
                Feature adoption, retention analytics, customer health, transaction quality, and churn signals.
            </div>
        </div>
    </header>

    <section class="ops-grid">
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Shops</span>
            <strong>{{ snapshot.active_shops }}</strong>
        </div>
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Branches</span>
            <strong>{{ snapshot.active_branches }}</strong>
        </div>
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Daily Tx</span>
            <strong>{{ snapshot.daily_transactions }}</strong>
        </div>
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Onboarding</span>
            <strong>{{ snapshot.onboarding_completion }}%</strong>
        </div>
    </section>

    <section class="ops-panel">
        <h2>Feature Adoption</h2>
        <div class="ops-list">
            {% for feature in snapshot.feature_adoption %}
                <div class="ops-list-item">
                    <strong>{{ feature.feature_key }}</strong> {{ feature.uses }} uses
                </div>
            {% else %}
                <div class="ops-list-item">No adoption data yet.</div>
            {% endfor %}
        </div>
    </section>

    <section class="ops-panel">
        <h2>Churn Signals</h2>
        <div class="ops-list">
            {% for signal in snapshot.churn_signals %}
                <div class="ops-list-item">{{ signal }}</div>
            {% else %}
                <div class="ops-list-item">No strong churn signals.</div>
            {% endfor %}
        </div>
    </section>
</main>
{% endblock %}