/* Hackathon section + form + QR success */

function HackathonHero() {
  const { t } = useT();
  return (
    <section className="hack-hero">
      <div className="hero-bg">
        <div className="hero-grid" />
        <div className="hack-glow" />
      </div>
      <div className="shell hack-hero-shell">
        <Reveal>
          <div className="hero-eyebrow"><span className="pulse" /> {t.hackathon.eyebrow}</div>
        </Reveal>
        <h1 className="hack-title">
          <Words text={t.hackathon.h2a} delay={100} />
          <em><Words text={t.hackathon.h2b} delay={400} /></em>
          <Words text={t.hackathon.h2c} delay={700} />
        </h1>
        <Reveal delay={300}>
          <p className="hack-sub">{t.hackathon.sub}</p>
        </Reveal>
        <Reveal delay={400}>
          <div className="hack-pills">
            <span className="hack-pill"><span className="dot" /> {t.hackathon.pillDate}</span>
            <span className="hack-pill"><span className="dot" /> {t.hackathon.pillSlots}</span>
            <span className="hack-pill"><span className="dot" /> {t.hackathon.pillFormat}</span>
          </div>
        </Reveal>
      </div>
    </section>);
}

function HackathonPerks() {
  const { t } = useT();
  return (
    <section className="hack-perks">
      <div className="shell">
        <div className="perks-grid">
          {t.hackathon.perks.map((p, i) =>
          <Reveal key={i} delay={i * 80}>
              <div className="perk">
                <div className="perk-num mono">0{i + 1}</div>
                <h4>{p.t}</h4>
                <p>{p.d}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);
}

const HACKATHON_WEBHOOK = (window.AF_ENV && window.AF_ENV.HACKATHON_WEBHOOK) ||
  "https://n8n.advancedflow.cloud/webhook/1bb9ed94-bcff-48e7-8172-a3a184949a6e";
const HACKATHON_TOKEN = (window.AF_ENV && window.AF_ENV.WEBHOOK_TOKEN) || "";
const HACKATHON_SITEKEY = (window.AF_ENV && window.AF_ENV.HCAPTCHA_SITE_KEY) || "";

const HACK_COOLDOWN_KEY = "af-hk-cooldown";
const HACK_COOLDOWN_MS = 30000;

function HackathonForm() {
  const { t, lang } = useT();
  const [data, setData] = useState({
    name: "", email: "", role: "", stack: "", exp: "", github: "",
    company_url: "", // honeypot
    terms: false,
  });
  const mountedAt = useRef(Date.now());
  const captcha = useHCaptcha(HACKATHON_SITEKEY);
  const [submitting, setSubmitting] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState("");

  const trimmed = {
    name: cleanText(data.name, 80),
    email: cleanText(data.email, 254),
    role: data.role,
    stack: data.stack,
    exp: data.exp,
    github: cleanText(data.github, 200),
  };

  const errMsg = (es, en) => lang === "es" ? es : en;

  const validate = () => {
    if (!trimmed.name || !trimmed.email) {
      return errMsg("Completa todos los campos requeridos.", "Please fill out all required fields.");
    }
    if (!validEmail(trimmed.email)) {
      return errMsg("El email no parece válido.", "That email doesn't look valid.");
    }
    if (trimmed.github && !validHttpsUrl(trimmed.github, { maxLen: 200 })) {
      return errMsg("La URL de GitHub debe empezar con https://", "GitHub URL must start with https://");
    }
    if (!t.hackathon.roles.includes(trimmed.role)) {
      return errMsg("Selecciona un rol válido.", "Select a valid role.");
    }
    if (!t.hackathon.stacks.includes(trimmed.stack)) {
      return errMsg("Selecciona un stack válido.", "Select a valid stack.");
    }
    if (!t.hackathon.exps.includes(trimmed.exp)) {
      return errMsg("Selecciona un nivel de experiencia válido.", "Select a valid experience level.");
    }
    if (!data.terms) {
      return errMsg("Acepta los términos para continuar.", "Accept the terms to continue.");
    }
    return "";
  };

  const valid = !validate();

  const submit = async (e) => {
    e.preventDefault();
    const v = validate();
    if (v) { setError(v); return; }

    if (!checkCooldown(HACK_COOLDOWN_KEY, HACK_COOLDOWN_MS)) {
      setError(errMsg("Espera un momento antes de enviar de nuevo.", "Please wait a moment before submitting again."));
      return;
    }

    const captchaToken = captcha.getToken();
    if (!captchaToken) {
      setError(errMsg("Completa el captcha primero.", "Please complete the captcha first."));
      return;
    }

    setSubmitting(true);
    setError("");
    try {
      const res = await fetch(HACKATHON_WEBHOOK, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-AF-Webhook-Token": HACKATHON_TOKEN,
        },
        body: JSON.stringify({
          source: "advancedflow-landing",
          form: "hackathon",
          lang,
          submittedAt: new Date().toISOString(),
          formDurationMs: Date.now() - mountedAt.current,
          hCaptchaToken: captchaToken,
          company_url: data.company_url,
          ...trimmed,
        }),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      markCooldown(HACK_COOLDOWN_KEY);
      setSuccess(true);
    } catch (err) {
      captcha.reset();
      setError(errMsg(
        "No pudimos registrar tu inscripción. Intenta de nuevo.",
        "We couldn't register your entry. Please try again."
      ));
    } finally {
      setSubmitting(false);
    }
  };

  if (success) return <HackathonSuccess />;

  return (
    <section className="hack-form-section" id="hackathon-form">
      <div className="shell">
        <div className="hack-form-grid">
          <Reveal>
            <div className="hack-form-intro">
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>{t.hackathon.formTitle}</div>
              <h2>{t.hackathon.formTitle.split(" ").slice(0, 1).join(" ")} <em>{t.hackathon.formTitle.split(" ").slice(1).join(" ")}</em></h2>
              <p>{t.hackathon.formSub}</p>
              <div className="hack-mini-stats">
                <div><div className="num serif">6h</div><div className="lbl mono">{lang === "es" ? "TÚ SOLO" : "SOLO"}</div></div>
                <div><div className="num serif">AI</div><div className="lbl mono">{lang === "es" ? "PRIMERO" : "FIRST"}</div></div>
                <div><div className="num serif">$$$</div><div className="lbl mono">{lang === "es" ? "EFECTIVO" : "CASH"}</div></div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <form className="hack-form" onSubmit={submit} noValidate>
              {/* Honeypot */}
              <div className="hp-field" aria-hidden="true">
                <label htmlFor="hk_company_url">Company URL</label>
                <input
                  type="text"
                  id="hk_company_url"
                  name="company_url"
                  tabIndex={-1}
                  autoComplete="off"
                  value={data.company_url}
                  onChange={(e) => setData({ ...data, company_url: e.target.value })}
                />
              </div>

              <div className="field">
                <label>{t.hackathon.f.name}</label>
                <input type="text" required maxLength={80} autoComplete="name"
                  value={data.name} onChange={(e) => setData({ ...data, name: e.target.value })} />
              </div>
              <div className="field">
                <label>{t.hackathon.f.email}</label>
                <input type="email" required maxLength={254} autoComplete="email" inputMode="email"
                  value={data.email} onChange={(e) => setData({ ...data, email: e.target.value })} />
              </div>
              <div className="field-row">
                <div className="field">
                  <label>{t.hackathon.f.role}</label>
                  <select required value={data.role} onChange={(e) => setData({ ...data, role: e.target.value })}>
                    <option value="">{t.hackathon.f.roleP}</option>
                    {t.hackathon.roles.map((r) => <option key={r} value={r}>{r}</option>)}
                  </select>
                </div>
                <div className="field">
                  <label>{t.hackathon.f.exp}</label>
                  <select required value={data.exp} onChange={(e) => setData({ ...data, exp: e.target.value })}>
                    <option value="">{t.hackathon.f.expP}</option>
                    {t.hackathon.exps.map((r) => <option key={r} value={r}>{r}</option>)}
                  </select>
                </div>
              </div>
              <div className="field">
                <label>{t.hackathon.f.stack}</label>
                <select required value={data.stack} onChange={(e) => setData({ ...data, stack: e.target.value })}>
                  <option value="">{t.hackathon.f.stackP}</option>
                  {t.hackathon.stacks.map((r) => <option key={r} value={r}>{r}</option>)}
                </select>
              </div>
              <div className="field">
                <label>{t.hackathon.f.github}</label>
                <input type="url" maxLength={200} autoComplete="url" inputMode="url"
                  placeholder="https://github.com/..."
                  value={data.github} onChange={(e) => setData({ ...data, github: e.target.value })} />
              </div>
              <label className="check">
                <input type="checkbox" checked={data.terms} onChange={(e) => setData({ ...data, terms: e.target.checked })} />
                <span>{t.hackathon.f.terms}</span>
              </label>
              <div className="field field-captcha">
                <div ref={captcha.ref} className="h-captcha" />
              </div>
              {error && <div className="form-error mono" role="alert">{error}</div>}
              <button type="submit" className="btn btn-block" disabled={!valid || submitting}>
                {submitting ? t.hackathon.f.submitting : t.hackathon.f.submit} <ArrowIcon />
              </button>
            </form>
          </Reveal>
        </div>
      </div>
    </section>);
}

function HackathonSuccess() {
  const { t } = useT();
  return (
    <section className="qr-section">
      <div className="shell qr-shell">
        <Reveal>
          <div className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>STATUS · CONFIRMED</div>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="qr-title">{t.hackathon.successTitle}</h2>
        </Reveal>
        <Reveal delay={200}>
          <p className="qr-sub">{t.hackathon.successSub}</p>
        </Reveal>
        <Reveal delay={300}>
          <div className="qr-card">
            <div className="qr-frame">
              <img src="assets/hackathon-qr.png" alt="WhatsApp QR" />
            </div>
            <div className="qr-foot mono">{t.hackathon.qrFooter}</div>
          </div>
        </Reveal>
      </div>
    </section>);
}

function HackathonPage() {
  return (
    <>
      <HackathonHero />
      <HackathonPerks />
      <HackathonForm />
    </>);
}

Object.assign(window, { HackathonPage });