// Sections 2: Games, Impact, Team, Contact, Footer
const { useState: useState2 } = React;

// ===== GAMES =====
function Games() {
  const games = [
    {
      name: 'Detective de emociones',
      badge: 'Habilidades sociales',
      body: 'Reconoce expresiones, gestos y situaciones para identificar cómo se sienten los demás.',
      icon: '🔍', cls: 'gi-1',
    },
    {
      name: 'Historias con decisiones',
      badge: 'Comprensión social',
      body: 'El estudiante elige caminos y observa consecuencias sociales de forma segura y guiada.',
      icon: '📖', cls: 'gi-2',
    },
    {
      name: 'Ritmo y regulación',
      badge: 'Autorregulación',
      body: 'Actividades rítmicas suaves para canalizar energía y favorecer la autorregulación.',
      icon: '🎵', cls: 'gi-3',
    },
    {
      name: 'Patrones tranquilos',
      badge: 'Baja estimulación',
      body: 'Juegos de lógica visual para estudiantes que prefieren estructura, orden y baja estimulación.',
      icon: '🧩', cls: 'gi-4',
    },
    {
      name: 'Termómetro emocional',
      badge: 'Comunicación emocional',
      body: 'Herramienta de check-in para expresar cómo se siente y pedir apoyo cuando lo necesita.',
      icon: '🌡️', cls: 'gi-5',
    },
    {
      name: 'Agenda visual',
      badge: 'Anticipación',
      body: 'Secuencias claras para anticipar actividades, reducir incertidumbre y organizar la jornada.',
      icon: '📅', cls: 'gi-6',
    },
  ];

  return (
    <section className="games" id="juegos" data-screen-label="05 Juegos">
      <div className="container">
        <span className="section-label">La experiencia</span>
        <h2>Juegos accesibles para diferentes formas de aprender</h2>
        <p className="section-intro">
          Las actividades de Te Reto están diseñadas para fortalecer habilidades socioemocionales,
          comunicación funcional, autorregulación y comprensión de situaciones sociales.
        </p>

        <div className="games-grid">
          {games.map((g, i) => (
            <article key={i} className="game-card" tabIndex="0">
              <span className={`game-icon ${g.cls}`} aria-hidden="true">{g.icon}</span>
              <div>
                <div className="game-tag">{g.badge}</div>
                <h3>{g.name}</h3>
                <p>{g.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== IMPACT =====
function Impact() {
  const steps = [
    { num: '01', title: 'Diagnóstico inicial',    body: 'Identificación de necesidades, perfiles y línea base.' },
    { num: '02', title: 'Implementación piloto',  body: 'Uso de la app con estudiantes, docentes e instituciones.' },
    { num: '03', title: 'Seguimiento y ajustes',  body: 'Análisis de uso, alertas, avances y retroalimentación.' },
    { num: '04', title: 'Evidencia y resultados', body: 'Reportes, aprendizajes, publicaciones y lineamientos.' },
  ];
  const metrics = [
    { num: '30–50', lbl: 'estudiantes participantes', sub: 'Muestra estimada para el piloto institucional.' },
    { num: '3',     lbl: 'instituciones educativas',  sub: 'Escenarios públicos y privados para validar el modelo.' },
    { num: '24',    lbl: 'meses de seguimiento',      sub: 'Implementación, medición, ajustes y análisis.' },
    { num: '≥ 2',   lbl: 'productos de evidencia',    sub: 'Reportes técnicos, publicaciones o lineamientos derivados del proceso.' },
  ];
  return (
    <section className="impact" id="impacto" data-screen-label="06 Impacto">
      <div className="container">
        <span className="section-label">Investigación aplicada</span>
        <h2>Validar la inclusión con evidencia, no solo con intención</h2>
        <p className="section-intro">
          Durante 24 meses, Te Reto App busca acompañar instituciones piloto del Caribe colombiano para medir avances,
          documentar aprendizajes y construir una ruta práctica de inclusión escolar.
        </p>

        <ol className="impact-timeline" role="list">
          {steps.map((s, i) => (
            <li key={i} className="impact-step">
              <div className="impact-step-num" aria-hidden="true">{s.num}</div>
              <div className="impact-step-text">
                <h3 className="impact-step-title">{s.title}</h3>
                <p className="impact-step-body">{s.body}</p>
              </div>
            </li>
          ))}
        </ol>

        <div className="impact-hypothesis">
          <div className="impact-hypothesis-label">Hipótesis del piloto</div>
          <p>
            Cuando el docente cuenta con una ruta clara, alertas pedagógicas y reportes simples, la inclusión
            deja de depender solo de la intención y se convierte en un proceso acompañable, medible y sostenible.
          </p>
        </div>

        <div className="metrics" role="list">
          {metrics.map((m, i) => (
            <div key={i} className="metric-card" role="listitem">
              <div className="metric-number">{m.num}</div>
              <div className="lbl">{m.lbl}</div>
              <div className="metric-sub">{m.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== CONTACT =====
const FORMSPREE_ID = 'xnjraval';
function Contact() {
  const [values, setValues] = React.useState({ nombre: '', institucion: '', ciudad: '', cargo: '', correo: '', telefono: '', mensaje: '' });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState(false);

  const onChange = (k) => (e) => {
    setValues((v) => ({ ...v, [k]: e.target.value }));
    if (errors[k]) setErrors((er) => ({ ...er, [k]: undefined }));
  };

  const validate = () => {
    const e = {};
    if (!values.nombre.trim()) e.nombre = 'Ingrese su nombre.';
    if (!values.institucion.trim()) e.institucion = 'Indique el nombre de la institución.';
    if (!values.ciudad.trim()) e.ciudad = 'Indique la ciudad.';
    if (!values.cargo.trim()) e.cargo = 'Indique su cargo.';
    if (!values.correo.trim()) e.correo = 'Ingrese un correo de contacto.';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.correo)) e.correo = 'El formato del correo no es válido.';
    if (!values.mensaje.trim() || values.mensaje.trim().length < 10) e.mensaje = 'Escriba un mensaje (mínimo 10 caracteres).';
    return e;
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    const er = validate();
    setErrors(er);
    if (Object.keys(er).length > 0) {
      const first = Object.keys(er)[0];
      const el = document.getElementById(`f-${first}`);
      if (el) el.focus();
      return;
    }
    setSending(true);
    setSendError(false);
    try {
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          'Nombre':       values.nombre,
          'Institución':  values.institucion,
          'Ciudad':       values.ciudad,
          'Cargo':        values.cargo,
          'Correo':       values.correo,
          'Teléfono':     values.telefono || '—',
          'Mensaje':      values.mensaje,
          '_replyto':     values.correo,
          '_subject':     `Solicitud de demo · ${values.institucion}`,
        }),
      });
      if (res.ok) {
        setSubmitted(true);
      } else {
        setSendError(true);
      }
    } catch (_) {
      setSendError(true);
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="contact-section on-teal-bg" id="contacto" data-screen-label="08 Contacto">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-left">
            <span className="section-label contact-eyebrow">Contacto</span>
            <h2>¿Su escuela quiere ser parte del piloto?</h2>
            <p className="lead-text" style={{marginTop:16}}>
              Estamos seleccionando instituciones interesadas en fortalecer sus procesos de inclusión escolar
              con una herramienta accesible, medible y diseñada para el aula.
            </p>
            <ul className="contact-benefits" role="list">
              {['Implementación acompañada', 'Formación docente práctica', 'Reportes para seguimiento institucional'].map((item) => (
                <li key={item}>
                  <span className="contact-check" aria-hidden="true">
                    <IconCheck size={13} strokeWidth={2.8} />
                  </span>
                  {item}
                </li>
              ))}
            </ul>
            <img
              src="assets/cta-final.png"
              alt="Ilustración de Te Reto App con capibara, colegio, piloto institucional y reportes"
              className="contact-cta-img"
              loading="lazy"
            />
          </div>

          <div className="contact-card">
            {submitted ? (
              <div className="form-success" role="status" aria-live="polite">
                <div className="check-big"><IconCheck size={28} strokeWidth={2.4} /></div>
                <h3>¡Gracias, {values.nombre.split(' ')[0]}!</h3>
                <p className="muted" style={{marginTop:6}}>
                  Recibimos su solicitud para <strong>{values.institucion}</strong>. Le escribiremos a
                  <strong> {values.correo}</strong> en las próximas 48 horas hábiles.
                </p>
                <button
                  className="btn btn-ghost btn-sm"
                  style={{marginTop:20}}
                  onClick={() => { setSubmitted(false); setValues({ nombre:'', institucion:'', ciudad:'', cargo:'', correo:'', telefono:'', mensaje:'' }); }}
                >
                  Enviar otra solicitud
                </button>
              </div>
            ) : (
              <form noValidate onSubmit={onSubmit} aria-label="Formulario de solicitud de demo">
                <h3>Solicitar demo institucional</h3>
                <p className="ph">Déjanos tus datos y te contactaremos para contarte cómo implementar Te Reto App en tu institución.</p>

                <div className="field">
                  <label htmlFor="f-nombre">Nombre y apellido</label>
                  <input
                    id="f-nombre"
                    type="text"
                    autoComplete="name"
                    value={values.nombre}
                    onChange={onChange('nombre')}
                    aria-invalid={!!errors.nombre}
                    aria-describedby={errors.nombre ? 'e-nombre' : undefined}
                  />
                  {errors.nombre && <div className="field-error" id="e-nombre">{errors.nombre}</div>}
                </div>

                <div className="field">
                  <label htmlFor="f-institucion">Institución educativa</label>
                  <input
                    id="f-institucion"
                    type="text"
                    autoComplete="organization"
                    value={values.institucion}
                    onChange={onChange('institucion')}
                    aria-invalid={!!errors.institucion}
                    aria-describedby={errors.institucion ? 'e-institucion' : undefined}
                  />
                  {errors.institucion && <div className="field-error" id="e-institucion">{errors.institucion}</div>}
                </div>

                <div className="field">
                  <label htmlFor="f-ciudad">Ciudad</label>
                  <input
                    id="f-ciudad"
                    type="text"
                    value={values.ciudad}
                    onChange={onChange('ciudad')}
                    aria-invalid={!!errors.ciudad}
                    aria-describedby={errors.ciudad ? 'e-ciudad' : undefined}
                  />
                  {errors.ciudad && <div className="field-error" id="e-ciudad">{errors.ciudad}</div>}
                </div>

                <div className="field">
                  <label htmlFor="f-cargo">Cargo</label>
                  <select
                    id="f-cargo"
                    value={values.cargo}
                    onChange={onChange('cargo')}
                    aria-invalid={!!errors.cargo}
                    aria-describedby={errors.cargo ? 'e-cargo' : undefined}
                  >
                    <option value="">Seleccione su cargo…</option>
                    <option>Rector(a) / Director(a)</option>
                    <option>Coordinador(a) de inclusión</option>
                    <option>Docente</option>
                    <option>Profesional de apoyo</option>
                    <option>Otro</option>
                  </select>
                  {errors.cargo && <div className="field-error" id="e-cargo">{errors.cargo}</div>}
                </div>

                <div className="field">
                  <label htmlFor="f-correo">Correo electrónico</label>
                  <input
                    id="f-correo"
                    type="email"
                    autoComplete="email"
                    value={values.correo}
                    onChange={onChange('correo')}
                    aria-invalid={!!errors.correo}
                    aria-describedby={errors.correo ? 'e-correo' : undefined}
                  />
                  {errors.correo && <div className="field-error" id="e-correo">{errors.correo}</div>}
                </div>

                <div className="field">
                  <label htmlFor="f-telefono">Teléfono <span style={{fontWeight:400, opacity:0.65}}>(opcional)</span></label>
                  <input
                    id="f-telefono"
                    type="tel"
                    autoComplete="tel"
                    value={values.telefono}
                    onChange={onChange('telefono')}
                  />
                </div>

                <div className="field">
                  <label htmlFor="f-mensaje">Mensaje</label>
                  <textarea
                    id="f-mensaje"
                    rows="4"
                    value={values.mensaje}
                    onChange={onChange('mensaje')}
                    aria-invalid={!!errors.mensaje}
                    aria-describedby={errors.mensaje ? 'e-mensaje' : 'h-mensaje'}
                    placeholder="Cuéntenos sobre su escuela, número de estudiantes, contexto…"
                  ></textarea>
                  {!errors.mensaje && <div id="h-mensaje" className="sr-only">Mínimo 10 caracteres.</div>}
                  {errors.mensaje && <div className="field-error" id="e-mensaje">{errors.mensaje}</div>}
                </div>

                {sendError && (
                  <p role="alert" style={{fontSize:13, color:'#B22E2E', fontWeight:600, marginBottom:8}}>
                    ⚠ No se pudo enviar. Verifica tu conexión e intenta de nuevo.
                  </p>
                )}
                <div className="contact-submit-row">
                  <button type="submit" className="btn btn-primary" disabled={sending}>
                    {sending ? 'Enviando…' : <React.Fragment>Enviar solicitud <IconArrow size={18} /></React.Fragment>}
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== FOOTER =====
function Footer() {
  return (
    <footer className="footer" role="contentinfo">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="logo">
              <img className="logo-img" src={(window.__resources && window.__resources.logoMark) || 'assets/logo1.png'} alt="" aria-hidden="true" />
            </div>
            <p>
              Te Reto App es una plataforma tecnopedagógica para acompañar, medir y fortalecer procesos
              de inclusión escolar de estudiantes con TEA.
            </p>
          </div>
          <div className="footer-col">
          </div>
          <div className="footer-col">
            <h4>Producto</h4>
            <ul role="list">
              <li><a href="#solucion">App estudiante</a></li>
              <li><a href="#solucion">Panel docente</a></li>
              <li><a href="#solucion">Backoffice</a></li>
              <li><a href="#impacto">Reportes</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contacto</h4>
            <ul role="list">
              <li>Cra. # 1-1<br/>Barranquilla, Colombia</li>
              <li><a href="mailto:developer.hmd@gmail.com">developer.hmd@gmail.com</a></li>
              <li><a href="tel:+57123">+57 123</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bar">
          <span>© 2026 Te Reto Inclusivo S.A.S. · Hecho en Barranquilla, Colombia.</span>
        </div>
      </div>
    </footer>
  );
}

// ===== ANCHOR QUOTE =====
function AnchorQuote() {
  return (
    <section className="anchor-quote" data-screen-label="06 Cita ancla" aria-label="Mensaje institucional">
      <div className="container">
        <div className="aq-inner">
          <span className="aq-mark" aria-hidden="true">"</span>
          <blockquote className="aq-quote">
            Cada avance cuenta cuando la escuela puede verlo, acompañarlo y aprender de él.
          </blockquote>
          <p className="aq-attr">Te Reto convierte la inclusión en un proceso más claro para el estudiante, más práctico para el docente y más medible para la institución.</p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Games, Impact, Team, Contact, Footer, AnchorQuote });