{% 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">Diseña, construye y despliega tu primer agente de IA empresarial en cuatro horas.</p>
    <a class="btn btn-primary btn-large" href="#descargas">
      Acceder al material
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
    </a>
  </div>
</section>

<section class="cards-section">
  <div class="cards-inner">
    <h2 class="section-title">¿Qué vas a construir?</h2>
    <p class="section-subtitle">Tres bloques prácticos para dominar el ciclo completo de desarrollo de agentes empresariales.</p>
    <div class="cards">
      <article class="card">
        <div class="icon-wrap">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="2" x2="9" y2="4"/><line x1="15" y1="2" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="22"/><line x1="15" y1="20" x2="15" y2="22"/><line x1="20" y1="9" x2="22" y2="9"/><line x1="20" y1="14" x2="22" y2="14"/><line x1="2" y1="9" x2="4" y2="9"/><line x1="2" y1="14" x2="4" y2="14"/></svg>
        </div>
        <h3>Tu primer agente</h3>
        <p>Conecta una API REST a un agente conversacional sin escribir una línea de código.</p>
      </article>
      <article class="card">
        <div class="icon-wrap">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
        </div>
        <h3>Multi-agente con RAG</h3>
        <p>Compón agentes especializados con base de conocimiento documental y orquestación dinámica.</p>
      </article>
      <article class="card">
        <div class="icon-wrap">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="3" y1="20" x2="21" y2="20"/></svg>
        </div>
        <h3>Reportes y APIs</h3>
        <p>Genera reportes ejecutivos invocando endpoints en vivo y herramientas externas en tiempo real.</p>
      </article>
    </div>
  </div>
</section>

<section class="stats-section">
  <h2 class="section-title">El taller en números</h2>
  <p class="section-subtitle">Una sesión intensiva, práctica y orientada a resultados.</p>
  <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 el material</h2>
  <p class="form-intro">Completa el formulario 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-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. Sin 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
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
    </button>
  </form>
</section>
{% endblock %}