/* AI Exploration Lab — Registration form (interactive, fake submit) */
const { useState: useStateRF, useRef: useRefRF } = React;

function Field({ label, type = "text", value, onChange, placeholder, options }) {
  const [focus, setFocus] = useStateRF(false);
  const labelStyle = { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: ".08em",
    textTransform: "uppercase", color: "#888", marginBottom: 7, display: "block" };
  const ctrl = {
    width: "100%", fontFamily: "Inter, sans-serif", fontSize: 15, color: "#fff",
    background: "#0D1530", border: "1px solid " + (focus ? "#00FFF0" : "rgba(255,255,255,.1)"),
    borderRadius: 8, padding: "12px 14px", outline: "none",
    boxShadow: focus ? "0 1px 3px rgba(0,255,240,.4)" : "none", transition: "border-color .15s, box-shadow .15s",
  };
  return (
    <label style={{ display: "block" }}>
      <span style={labelStyle}>{label}</span>
      {options ? (
        <select value={value} onChange={onChange} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={{ ...ctrl, appearance: "none", cursor: "pointer" }}>
          {options.map((o) => <option key={o} value={o} style={{ background: "#0D1530" }}>{o}</option>)}
        </select>
      ) : (
        <input type={type} value={value} onChange={onChange} placeholder={placeholder}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={ctrl} />
      )}
    </label>
  );
}

function RegisterForm({ preselect }) {
  const [done, setDone] = useStateRF(false);
  const [form, setForm] = useStateRF({ nombre: "", correo: "", carrera: "Psicología", sesion: "" });
  React.useEffect(() => { if (preselect) setForm((f) => ({ ...f, sesion: preselect })); }, [preselect]);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const valid = form.nombre.trim() && /\S+@\S+\.\S+/.test(form.correo);

  return (
    <section id="registro" style={{ padding: "96px 40px 110px", borderTop: "1px solid rgba(255,255,255,.06)" }}>
      <div style={{ maxWidth: 540, margin: "0 auto", background: "#0D1530",
        border: "1px solid rgba(255,255,255,.08)", borderRadius: 18, padding: 36,
        boxShadow: "0 0 40px rgba(0,255,240,.06)" }}>
        {done ? (
          <div style={{ textAlign: "center", padding: "20px 0" }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 40, color: "#00FF88" }}>(*)</div>
            <h3 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 26,
              color: "#fff", margin: "16px 0 8px" }}>Listo, {form.nombre.split(" ")[0] || "ya estás dentro"}.</h3>
            <p style={{ fontFamily: "Inter, sans-serif", fontSize: 15, color: "#D0D0D0", lineHeight: 1.55 }}>
              Te guardamos un cupo en <b style={{ color: "#00FFF0" }}>{form.sesion || "la próxima sesión"}</b>.
              Revisa tu correo — nos vemos en el Lab.
            </p>
            <div style={{ marginTop: 24 }}>
              <Btn variant="secondary" onClick={() => { setDone(false); setForm({ nombre: "", correo: "", carrera: "Psicología", sesion: "" }); }}>
                Inscribir a alguien más
              </Btn>
            </div>
          </div>
        ) : (
          <form onSubmit={(e) => { e.preventDefault(); if (valid) setDone(true); }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#8A2BE2", letterSpacing: ".1em" }}>/// INSCRÍBETE</div>
            <h3 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 28,
              color: "#fff", letterSpacing: "-.01em", margin: "10px 0 6px" }}>Aparta tu cupo.</h3>
            <p style={{ fontFamily: "Inter, sans-serif", fontSize: 14.5, color: "#888", margin: "0 0 26px" }}>
              Sin requisitos. Sin captchas. Solo curiosidad.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <Field label="Nombre" value={form.nombre} onChange={set("nombre")} placeholder="Tu nombre" />
              <Field label="Correo UPB" type="email" value={form.correo} onChange={set("correo")} placeholder="tu@upb.edu.co" />
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <Field label="Carrera" value={form.carrera} onChange={set("carrera")}
                  options={["Psicología", "Diseño", "Administración", "Medicina", "Ingeniería", "Comunicación", "Otra"]} />
                <Field label="Sesión" value={form.sesion} onChange={set("sesion")}
                  options={["", "IA para tu carrera", "Automatiza tu semana", "Crea con texto e imagen"]} />
              </div>
            </div>
            <div style={{ marginTop: 28, opacity: valid ? 1 : 0.5, pointerEvents: valid ? "auto" : "none" }}>
              <button type="submit" style={{ width: "100%", fontFamily: "'Plus Jakarta Sans', sans-serif",
                fontWeight: 800, fontSize: 16, border: "none", borderRadius: 8, padding: "15px",
                background: "#00FFF0", color: "#0A0F1E", cursor: "pointer", boxShadow: "0 0 24px rgba(0,255,240,.35)" }}>
                Inscríbete &gt;
              </button>
            </div>
          </form>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { RegisterForm, Field });