// closing.jsx — Bloques 11 (sprint verano), 12 (4 formas), 13 (cierre + form), Footer

const IconRocket = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
    <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/>
    <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
  </svg>
);
const IconWarning = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
    <path d="M12 9v4"/><path d="M12 17h.01"/>
  </svg>
);
const IconFlag = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/>
  </svg>
);

function Sprint({ onCTA }) {
  const includes = [
    "Descubrir el potencial de la IA",
    "Sesiones prácticas en directo",
    "Retos reales desde el primer día",
    "Primeras herramientas útiles",
    "Experiencia real con metodología Racks",
  ];
  return (
    <section id="sprint" className="block sprint" data-screen-label="11 Sprint verano" data-comment-anchor="sprint">
      <div className="container">
        <div className="eyebrow reveal" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <IconRocket style={{ width: 16, height: 16 }} /> WORKSHOP GRATUITO
        </div>
        <h2 className="h-section reveal" style={{ marginTop: 24, maxWidth: "20ch", transitionDelay: "60ms" }}>
          Empieza a construir <em style={{ fontStyle: "normal", color: "var(--lead)" }}>desde el primer día.</em>
        </h2>

        <div className="sprint-grid">
          <article className="sprint-dark reveal" style={{ transitionDelay: "120ms" }}>
            <div className="sprint-tag">¿Qué es?</div>
            <h4>Workshop gratuito</h4>
            <p>
              Abrimos una experiencia gratuita para que alumnos y familias descubran el potencial de la IA.
            </p>
            <div className="sprint-meta">
              <div><span className="sprint-meta-k">Plazas limitadas</span><span className="sprint-meta-l">Reserva ahora</span></div>
              <div><span className="sprint-meta-k">Gratuito</span><span className="sprint-meta-l">Para familias</span></div>
            </div>
          </article>

          <article className="sprint-light reveal" style={{ transitionDelay: "180ms" }}>
            <div className="sprint-tag sprint-tag--red">Incluye</div>
            <ul className="sprint-list">
              {includes.map((t) => (
                <li key={t}><span className="sprint-check" aria-hidden="true">✓</span> {t}</li>
              ))}
            </ul>
            <button className="btn btn--primary btn--lg sprint-cta" onClick={onCTA}>
              Reservar plaza para el workshop <ArrowRight className="arrow" />
            </button>
          </article>
        </div>

        <div className="banner banner--blue reveal" style={{ transitionDelay: "240ms" }}>
          <span className="banner-ico" aria-hidden="true">i</span>
          <span>Una forma de <strong>conocer el método antes de comprometerse</strong> con el programa completo.</span>
        </div>
      </div>
    </section>
  );
}

const IconCal2 = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
  </svg>
);
const IconPlay2 = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <polygon points="5 3 19 12 5 21 5 3"/>
  </svg>
);
const IconBolt = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
  </svg>
);
const IconChat = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
  </svg>
);

function FourWays({ onCTA }) {
  const cards = [
    { id: "plaza",   Icon: IconCal2,  t: "01 — Reserva plaza",  d: "Reservas plaza y coordinamos el acceso contigo y con tu colegio." },
    { id: "workshop",Icon: IconBolt,  t: "02 — Workshop gratuito", d: "Participa en el workshop para aprender a usar la IA." },
    { id: "decision",Icon: IconPlay2, t: "03 — Si encaja, siguiente paso", d: "Si encaja, acceso al programa completo." },
  ];
  return (
    <section id="conocer" className="block four-ways" data-screen-label="12 Cómo empieza" data-comment-anchor="four-ways">
      <div className="container">
        <div className="eyebrow reveal" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <IconRocket style={{ width: 16, height: 16 }} /> El proceso
        </div>
        <h2 className="h-section reveal" style={{ marginTop: 24, transitionDelay: "60ms" }}>
          Cómo empieza
        </h2>
        <p className="lead-p reveal" style={{ marginTop: 24, transitionDelay: "120ms" }}>
          El primer paso no es decidir. Es vivir la experiencia.
        </p>

        <div className="ways-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }}>
          {cards.map(({ id, Icon, t, d }, i) => (
            <div
              className={"way-card reveal"}
              key={id}
              style={{ transitionDelay: `${i * 60}ms`, cursor: "default", alignItems: "flex-start", textAlign: "left" }}
            >
              <div className="way-ico"><Icon /></div>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactForm() {
  const [data, setData] = React.useState({
    nombre: "", email: "", telefono: "", edad: ""
  });
  const [errors, setErrors] = React.useState({});
  const [state, setState] = React.useState("idle");

  const update = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));

  function validate() {
    const e = {};
    if (!data.nombre.trim() || data.nombre.trim().length < 3) e.nombre = "Indica tu nombre.";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = "Email no válido.";
    if (!/^[\d +()-]{7,}$/.test(data.telefono))   e.telefono = "Teléfono no válido.";
    if (!data.edad || isNaN(Number(data.edad)) || Number(data.edad) < 13 || Number(data.edad) > 20) e.edad = "Edad entre 13 y 20.";
    setErrors(e);
    return Object.keys(e).length === 0;
  }
  function onSubmit(ev) {
    ev.preventDefault();
    if (!validate()) return;
    setState("loading");
    setTimeout(() => setState("success"), 900);
  }

  if (state === "success") {
    return (
      <div className="closing-form" id="formulario">
        <div className="form-success">
          <div className="check">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12"/>
            </svg>
          </div>
          <h3>Recibido. Te escribimos en 24 h.</h3>
          <p>
            Gracias, {data.nombre.split(" ")[0] || "familia"}. Nos pondremos en contacto contigo
            para coordinar el acceso al workshop gratuito.
          </p>
        </div>
      </div>
    );
  }

  return (
    <form className="closing-form" id="formulario" onSubmit={onSubmit} noValidate>
      <input type="hidden" name="source" value="landing_principal" />
      <div className="form-eyebrow" style={{ fontWeight: "600", color: "var(--red)", display: "flex", alignItems: "center", gap: 6 }}>
        <IconWarning style={{ width: 16, height: 16 }} /> Plazas limitadas
      </div>
      <h3>Reserva plaza para el workshop gratuito</h3>
      <p style={{ marginTop: 8, marginBottom: 24, fontSize: 15, color: "var(--ink-500)", lineHeight: 1.5 }}>
        Reserva tu plaza gratuita y descubre cómo la IA puede ayudar a tu hijo a estudiar y organizarse mejor.
      </p>

      <div className={"field" + (errors.nombre ? " error" : "")}>
        <label htmlFor="f-nom">Nombre del padre o madre</label>
        <input id="f-nom" type="text" placeholder="Ana López" value={data.nombre} onChange={update("nombre")} />
        {errors.nombre && <div className="field-err">{errors.nombre}</div>}
      </div>

      <div className="form-row">
        <div className={"field" + (errors.email ? " error" : "")}>
          <label htmlFor="f-em">Email</label>
          <input id="f-em" type="email" placeholder="ana@email.com" value={data.email} onChange={update("email")} />
          {errors.email && <div className="field-err">{errors.email}</div>}
        </div>
        <div className={"field" + (errors.telefono ? " error" : "")}>
          <label htmlFor="f-tel">Teléfono</label>
          <input id="f-tel" type="tel" placeholder="+34 600 000 000" value={data.telefono} onChange={update("telefono")} />
          {errors.telefono && <div className="field-err">{errors.telefono}</div>}
        </div>
      </div>

      <div className={"field" + (errors.edad ? " error" : "")}>
        <label htmlFor="f-ed">Edad del hijo</label>
        <input id="f-ed" type="number" min="13" max="20" placeholder="16" value={data.edad} onChange={update("edad")} />
        {errors.edad && <div className="field-err">{errors.edad}</div>}
      </div>

      <button type="submit" className={"form-submit" + (state === "loading" ? " is-loading" : "")} disabled={state === "loading"}>
        {state === "loading" ? "Enviando…" : <>Reservar plaza para el workshop <ArrowRight className="arrow" /></>}
      </button>
      <div className="form-meta">
        Tus datos se usarán únicamente para coordinar contigo y con tu colegio el acceso al workshop gratuito.
      </div>
    </form>
  );
}

function Closing() {
  return (
    <section id="cierre" className="block closing" data-screen-label="13 Cierre" data-comment-anchor="closing">
      <div className="container">
        <div className="closing-grid">
          <div className="reveal">
            <div className="eyebrow" style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <IconFlag style={{ width: 16, height: 16 }} /> Cierre
            </div>
            <h2>
              Tu hijo ya está usando IA. Ahora toca aprender a usarla con criterio.
            </h2>
            <p className="lead-p">
              Por eso abrimos un workshop gratuito. Plazas limitadas.
            </p>
            <div style={{ marginTop: 32, display: "flex", flexWrap: "wrap", gap: 24, alignItems: "center" }}>
              <img src="assets/logos/shield-red.png" alt="" style={{ height: 64, filter: "brightness(0) invert(1)" }} />
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "rgba(255,255,255,0.75)", letterSpacing: "0.06em", lineHeight: 1.55 }}>
                Generación IA<br/>
                by Racks University<br/>
                Programa para alumnos de 15–18 años
              </div>
            </div>
          </div>
          <div className="reveal" style={{ transitionDelay: "120ms" }}>
            <ContactForm />
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" data-comment-anchor="footer">
      <div className="container">
        <div className="footer-inner">
          <div className="footer-brand">
            <img src="assets/logos/racks-university-dark.png" alt="Racks University" />
            <span className="by">Generación IA · by Racks University</span>
            <p className="tagline">Conoce más.</p>
          </div>
          <div className="footer-col">
            <h5>Programa</h5>
            <a href="#programa">Qué es</a>
            <a href="#aprendizaje">Qué aprende</a>
            <a href="#metodo">Método</a>
            <a href="#construir">Qué construye</a>
          </div>
          <div className="footer-col">
            <h5>Empieza</h5>
            <a href="#sprint">Workshop gratuito</a>
            <a href="#conocer">Cómo funciona</a>
            <a href="#formulario">Reservar plaza</a>
          </div>
          <div className="footer-col">
            <h5>Legal</h5>
            <a href="#">Privacidad</a>
            <a href="#">Cookies</a>
            <a href="#">RGPD menores</a>
            <a href="#">Consentimiento familiar</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Racks University®</span>
          <span>Generación IA · Programa para familias · Alumnos 15–18 años</span>
        </div>
      </div>
    </footer>
  );
}

window.Sprint = Sprint;
window.FourWays = FourWays;
window.Closing = Closing;
window.Footer = Footer;