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

{% block title %}Busy Hours Prediction{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/cashier_busy_hours.css">
{% endblock %}
{% block content %}
<main class="page">
    <section class="hero">
        <span class="eyebrow">Cashier Busy-Hours AI</span>
        <h1>Busy Hours Prediction</h1>
        <p class="muted">{{ data.summary }}</p>
        <p class="muted">{{ data.staffing_note }}</p>
        <div class="actions">
            <a class="btn" href="/sales">Back to Sales</a>
        </div>
    </section>

    <section class="grid">
        <div class="panel">
            <span class="eyebrow">Current Window</span>
            <div class="metric">{{ data.current_window.window }}</div>
            <span class="level {{ data.current_window.level }}">{{ data.current_window.level }}</span>
        </div>
        <div class="panel">
            <span class="eyebrow">Next Likely Peak</span>
            {% if data.next_peak %}
                <div class="metric">{{ data.next_peak.window }}</div>
                <span class="level peak">Peak</span>
            {% else %}
                <div class="metric">Building history</div>
                <span class="level quiet">Learning</span>
            {% endif %}
        </div>
        <div class="panel">
            <span class="eyebrow">Forecast Window</span>
            <div class="metric">{{ data.days }} days</div>
            <p class="muted">Uses checkout timing only.</p>
        </div>
    </section>

    <section class="panel">
        <h2>Hourly Rhythm</h2>
        <div class="hours">
            {% for item in data.hourly %}
                <div class="hour-card {{ 'now' if item.is_now else '' }}">
                    <div class="window">{{ item.window }}</div>
                    <span class="level {{ item.level }}">{{ item.level }}</span>
                    <div class="bar" aria-hidden="true"><span style="width: {{ item.score }}%;"></span></div>
                </div>
            {% endfor %}
        </div>
    </section>
</main>
{% endblock %}