{% extends "base.html" %}

{% block content %}
{% if error %}
<div class="banner banner-error" role="alert">{{ error }}</div>
{% endif %}

<section class="hero">
  <div class="hero-inner">
    <p class="eyebrow">FACTORIT · FIT</p>
    <h1>Bootcamp Agentic AI con watsonx Orchestrate</h1>
    <p class="subtitle">Construye tu primer agente de IA en 4 horas.</p>
    <a class="btn btn-primary" href="#descargas">Acceder al material →</a>
  </div>
</section>

<section class="cards-section">
  <h2 class="section-title">¿Qué vas a construir?</h2>
  <div class="cards">
    <article class="card"><div class="icon">⚙️</div><h3>Tu primer agente</h3><p>Conecta una API real a un agente conversacional sin escribir código.</p></article>
    <article class="card"><div class="icon">📚</div><h3>Multi-agente con RAG</h3><p>Compón agentes especializados con base de conocimiento documental.</p></article>
    <article class="card"><div class="icon">📊</div><h3>Reportes y APIs</h3><p>Genera reportes ejecutivos invocando endpoints en vivo.</p></article>
  </div>
</section>

<section class="stats-section">
  <h2 class="section-title">El taller en números</h2>
  <div class="stats">
    <div class="stat"><span class="num">4h</span><span class="label">Duración</span></div>
    <div class="stat"><span class="num">6</span><span class="label">Módulos</span></div>
    <div class="stat"><span class="num">0</span><span class="label">Líneas de código</span></div>
    <div class="stat"><span class="num">100%</span><span class="label">Hands-on</span></div>
  </div>
</section>

<section id="descargas" class="form-section">
  <h2 class="section-title">Descarga todo el material</h2>
  <p class="form-intro">Registra tus datos para acceder al kit completo del bootcamp.</p>
  <form class="register-form" method="post" action="/register" autocomplete="on">
    <div class="field">
      <label for="nombre">Nombre completo</label>
      <input type="text" id="nombre" name="nombre" minlength="2" maxlength="80" required>
    </div>
    <div class="field">
      <label for="email">Email corporativo</label>
      <input type="email" id="email" name="email" required>
    </div>
    <div class="field">
      <label for="empresa">Empresa</label>
      <input type="text" id="empresa" name="empresa" minlength="2" maxlength="100" required>
    </div>
    <div class="field field-checkbox">
      <input type="checkbox" id="consentimiento" name="consentimiento" required>
      <label for="consentimiento">Acepto que FactorIT use mis datos para enviarme información del bootcamp y comunicaciones futuras. No spam — solo lo importante.</label>
    </div>
    <div class="hp-field" aria-hidden="true">
      <label for="website">Website</label>
      <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
    </div>
    <button type="submit" class="btn btn-primary btn-large">Acceder al material</button>
  </form>
</section>
{% endblock %}