{% extends "base.html" %}

{% block title %}Face Attendance - Secure Recognition Attendance{% endblock %}

{% block content %}
<div class="welcome-page">
  <section class="welcome-hero">
    <nav class="welcome-nav" aria-label="Welcome navigation">
      <a class="welcome-brand" href="{{ url_for('main.index') }}">Face Attendance</a>
      <a class="btn btn-light btn-sm" href="{{ url_for('auth.login') }}">Sign in</a>
    </nav>

    <div class="welcome-copy">
      <p class="eyebrow welcome-eyebrow">Production-ready Flask application</p>
      <h1>Face Attendance</h1>
      <p>
        A secure attendance platform for enrolling people, identifying faces at a kiosk,
        and reviewing check-in and check-out history with role-based staff access.
      </p>
      <div class="welcome-actions">
        <a class="btn btn-primary btn-lg" href="{{ url_for('auth.login') }}">Sign in</a>
        <a class="btn btn-outline-light btn-lg" href="#capabilities">View capabilities</a>
      </div>
    </div>
  </section>

  <section class="welcome-section" id="capabilities">
    <div class="welcome-section-header">
      <p class="eyebrow">Capabilities</p>
      <h2>Built for controlled attendance workflows</h2>
    </div>
    <div class="feature-grid">
      <article class="feature-card">
        <span>01</span>
        <h3>Role-based staff access</h3>
        <p>Admins manage accounts, operators run attendance workflows, and viewers get read-only reports.</p>
      </article>
      <article class="feature-card">
        <span>02</span>
        <h3>Face enrollment</h3>
        <p>Store multiple reference encodings per person while keeping recognition logic isolated in services.</p>
      </article>
      <article class="feature-card">
        <span>03</span>
        <h3>Attendance kiosk</h3>
        <p>Capture a webcam snapshot, identify matches, and record check-in or check-out events from one screen.</p>
      </article>
      <article class="feature-card">
        <span>04</span>
        <h3>Audit-friendly records</h3>
        <p>Attendance entries include the person, event type, timestamp, source, confidence, and staff user.</p>
      </article>
    </div>
  </section>

  <section class="workflow-band">
    <div>
      <p class="eyebrow">Architecture</p>
      <h2>Clean Flask structure with production defaults</h2>
    </div>
    <ul class="workflow-list">
      <li>Application factory, Blueprints, SQLAlchemy models, and Alembic migrations.</li>
      <li>CSRF-protected forms, secure password hashing, and hardened session settings.</li>
      <li>Pytest fixtures for auth, authorization, models, and attendance behavior.</li>
    </ul>
  </section>
</div>
{% endblock %}