{% extends "base.html" %}

{% block title %}Welcome | Traffic Sign Classifier{% endblock %}
{% block body_class %}home-page{% endblock %}

{% block content %}
<section class="hero">
  <div class="hero-copy">
    <p class="eyebrow">Flask + CNN deployment</p>
    <h1>Traffic sign recognition with user feedback history.</h1>
    <p class="lead">
      Upload a traffic sign image, classify it with <strong>traffic_classifier.h5</strong>,
      and keep every prediction linked to the authenticated user.
    </p>
    <div class="hero-actions">
      <a class="button primary" href="{{ url_for('register') }}">Create account</a>
      <a class="button secondary" href="{{ url_for('login') }}">Login</a>
    </div>
  </div>

  <div class="signal-panel" aria-label="Application workflow">
    <div class="signal-head">
      <span class="dot red"></span>
      <span class="dot amber"></span>
      <span class="dot green"></span>
      <span>deployment.plan</span>
    </div>
    <div class="signal-body">
      <div class="workflow-step">
        <span>01</span>
        <p>Register or login before using the model.</p>
      </div>
      <div class="workflow-step">
        <span>02</span>
        <p>Upload a sign image and receive the predicted class.</p>
      </div>
      <div class="workflow-step">
        <span>03</span>
        <p>Mark predictions as true or false for later analysis.</p>
      </div>
      <div class="workflow-step">
        <span>04</span>
        <p>Review your dashboard and history inside the container database.</p>
      </div>
    </div>
  </div>
</section>

<section class="feature-band">
  <article>
    <h2>Authentication</h2>
    <p>Each user has an account, a protected classifier page, and a private prediction history.</p>
  </article>
  <article>
    <h2>Model Ready</h2>
    <p>The app loads <code>traffic_classifier.h5</code> from the project root during startup.</p>
  </article>
  <article>
    <h2>Feedback Loop</h2>
    <p>True/false labels are saved with predictions so the dashboard can show reviewed accuracy.</p>
  </article>
</section>
{% endblock %}