{#-
  index.html — the public home page. Inherits layout_public.
  Backend: GET / -> render_template("index.html") (app.py).
  A scaffold starting point: a hero that states what Fabbro is, with the real
  auth CTA. Replace the copy and add sections as the product takes shape.
-#}
{% extends "layout_public.html" %}

{% block title %}Fabbro — forge production web apps{% endblock %}

{% block content %}
  <section class="fbb-container fbb-hero">
    <span class="fbb-eyebrow">SSR · Flask · AI-native</span>
    <h1 class="fbb-hero-title">
      Forge production<br>web apps, <span class="fbb-hero-accent">fast</span>.
    </h1>
    <p class="fbb-lead fbb-hero-lead">
      Fabbro is an opinionated framework with security, config, and a design
      system built in — so you (and your AI) ship consistent, safe software
      from the first commit.
    </p>

    <div class="fbb-cluster fbb-hero-cta">
      {% if current_user %}
        <a class="fbb-btn fbb-btn-primary fbb-btn-lg" href="{{ url_for('dashboard') }}">
          Go to dashboard
          <svg class="fbb-icon"><use href="{{ sprite }}#arrow-right"></use></svg>
        </a>
      {% else %}
        <a class="fbb-btn fbb-btn-primary fbb-btn-lg" href="{{ url_for('register') }}">
          Get started
          <svg class="fbb-icon"><use href="{{ sprite }}#arrow-right"></use></svg>
        </a>
        <a class="fbb-btn fbb-btn-ghost fbb-btn-lg" href="{{ url_for('login') }}">Sign in</a>
      {% endif %}
    </div>

    {#- Three honest pillars — the framework's actual selling points, not filler. -#}
    <div class="fbb-grid fbb-grid-3 fbb-hero-pillars">
      <div class="fbb-card fbb-card-forged">
        <svg class="fbb-icon fbb-icon-lg fbb-pillar-icon"><use href="{{ sprite }}#shield-check"></use></svg>
        <h3 class="fbb-pillar-title">Secure by default</h3>
        <p class="fbb-muted">Argon2id, CSRF, nonce-based CSP, a Fernet vault, and
          hardened sessions — wired in, not bolted on.</p>
      </div>
      <div class="fbb-card fbb-card-forged">
        <svg class="fbb-icon fbb-icon-lg fbb-pillar-icon"><use href="{{ sprite }}#layers"></use></svg>
        <h3 class="fbb-pillar-title">Config as source of truth</h3>
        <p class="fbb-muted">Versioned YAML, fail-loud loading, zero shadow
          defaults. What you read is what runs.</p>
      </div>
      <div class="fbb-card fbb-card-forged">
        <svg class="fbb-icon fbb-icon-lg fbb-pillar-icon"><use href="{{ sprite }}#zap"></use></svg>
        <h3 class="fbb-pillar-title">Built for AI generation</h3>
        <p class="fbb-muted">A fixed design-system vocabulary and clear module
          boundaries make generated code consistent and reviewable.</p>
      </div>
    </div>
  </section>
{% endblock %}

{% block scripts %}
  <style>
    .fbb-hero {
      padding-top: var(--fbb-space-9);
      padding-bottom: var(--fbb-space-8);
      text-align: center;
      display: flex; flex-direction: column; align-items: center;
    }
    .fbb-hero-title {
      font-size: var(--fbb-text-4xl);
      margin-top: var(--fbb-space-4);
      max-width: 16ch;
    }
    .fbb-hero-accent {
      background: linear-gradient(120deg, var(--fbb-accent), var(--fbb-ember));
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .fbb-hero-lead { max-width: 56ch; margin-top: var(--fbb-space-5); }
    .fbb-hero-cta { justify-content: center; margin-top: var(--fbb-space-6); }
    .fbb-hero-pillars {
      margin-top: var(--fbb-space-9);
      text-align: left;
      width: 100%;
    }
    .fbb-pillar-icon { color: var(--fbb-accent); margin-bottom: var(--fbb-space-3); }
    .fbb-pillar-title { font-size: var(--fbb-text-xl); margin-bottom: var(--fbb-space-2); }
  </style>
{% endblock %}