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

{% block title %}Market Validation - 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>Market Validation</h1>
            <div class="ops-subtitle">
                Onboarding friction, pain points, feature requests, churn reasons, support trends, and retention drivers.
            </div>
        </div>
    </header>

    <section class="ops-panel">
        <h2>Record Feedback</h2>
        <form class="ops-form-grid" method="post" action="/market-validation/feedback">
            <label>
                Type
                <select name="feedback_type">
                    <option value="onboarding_friction">Onboarding Friction</option>
                    <option value="pain_point">Pain Point</option>
                    <option value="feature_request">Feature Request</option>
                    <option value="churn_reason">Churn Reason</option>
                    <option value="retention_driver">Retention Driver</option>
                </select>
            </label>
            <label>
                Severity
                <select name="severity">
                    <option value="normal">Normal</option>
                    <option value="high">High</option>
                    <option value="critical">Critical</option>
                </select>
            </label>
            <label>Title<input name="title"></label>
            <label>Detail<input name="detail"></label>
            <button type="submit">Save</button>
        </form>
    </section>

    <section class="ops-grid">
        <div class="ops-panel">
            <h2>Pain Points</h2>
            <div class="ops-list">
                {% for item in snapshot.pain_points %}
                    <div class="ops-list-item">{{ item.pain_point }} - {{ item.count }}</div>
                {% else %}
                    <div class="ops-list-item">No pain points yet.</div>
                {% endfor %}
            </div>
        </div>
        <div class="ops-panel">
            <h2>Requested Features</h2>
            <div class="ops-list">
                {% for item in snapshot.requested_features %}
                    <div class="ops-list-item">{{ item.requested_feature }} - {{ item.count }}</div>
                {% else %}
                    <div class="ops-list-item">No feature requests yet.</div>
                {% endfor %}
            </div>
        </div>
    </section>

    <section class="ops-panel">
        <h2>Recent Feedback</h2>
        <div class="ops-list">
            {% for item in snapshot.recent %}
                <div class="ops-list-item">
                    <strong>{{ item.title }}</strong>
                    <p>{{ item.detail }}</p>
                    <span class="ops-muted">{{ item.feedback_type }} / {{ item.severity }}</span>
                </div>
            {% else %}
                <div class="ops-list-item">No market feedback yet.</div>
            {% endfor %}
        </div>
    </section>
</main>
{% endblock %}