/* global React, useLang, TypedHeadline, Arrow */
const { useMemo, useState, useCallback } = React;

// ============ Certificación en prevención de fraude ============
// Página co-branded Cámara Uruguay Fintech + Forsvar. Contenido en cert.* (i18n-messages.js).
// Formulario POST → /api/certificacion (server/index.js, vía Resend).

// --- Lockup co-brand Cámara Uruguay Fintech + Forsvar (logos reales) ---
// Logo amarillo sobre fondos claros; logo blanco sobre el panel navy (variante --muted).
function CufCobrand({ className }) {
  return (
    <span className={`cert-cobrand ${className || ""}`}>
      <img className="cert-cuf-logo cert-cuf-logo--light" src="assets/cuf-logo-amarillo.png" alt="Cámara Uruguay Fintech" />
      <img className="cert-cuf-logo cert-cuf-logo--dark" src="assets/cuf-logo-blanco.png" alt="Cámara Uruguay Fintech" />
      <span className="cert-cobrand-sep" />
      <span className="cert-cobrand-forsvar">FORSVAR</span>
    </span>
  );
}

// --- Hero ---
function CertHero() {
  const { t, lang } = useLang();
  const segments = useMemo(() => [
    { type: "text", value: t("cert.hero.typ.a") },
    { type: "underline", value: t("cert.hero.typ.u") },
    { type: "text", value: t("cert.hero.typ.b") }
  ], [lang, t]);
  const stats = [0, 1, 2, 3].map((i) => ({
    n: t("cert.hero.stat" + i + ".n"),
    l: t("cert.hero.stat" + i + ".l")
  }));
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="cert-hero-grid">
          <div className="cert-hero-lead">
            <span className="kicker"><span className="dot" />{t("cert.hero.kicker")}</span>
            <h1 className="hero-headline" style={{ marginTop: 22 }}>
              <TypedHeadline key={lang} segments={segments} />
            </h1>
            <p className="hero-sub" style={{ maxWidth: "56ch", marginTop: 28 }}>{t("cert.hero.sub")}</p>
            <div className="cert-hero-actions">
              <a href="#solicitar" className="btn btn-primary">{t("cert.hero.cta")} <Arrow /></a>
              <CufCobrand />
            </div>
          </div>
          <div className="cert-stats" aria-label="Datos de la certificación">
            {stats.map((s, i) =>
              <div className="cert-stat" key={i}>
                <div className="cert-stat-num">{s.n}</div>
                <div className="cert-stat-label">{s.l}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// --- Audiencia / verticales ---
function CertAudience() {
  const { t } = useLang();
  const items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => t("cert.aud.i" + i));
  return (
    <section className="on-paper">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("cert.aud.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>{t("cert.aud.title")}</h2>
          </div>
          <p className="lead">{t("cert.aud.lead")}</p>
        </div>
        <div className="cert-verticals">
          {items.map((label, i) =>
            <div className="cert-vertical" key={i}><span className="cert-vertical-dot" />{label}</div>
          )}
        </div>
      </div>
    </section>
  );
}

// --- Beneficios ---
function CertBenefits() {
  const { t } = useLang();
  const cards = [0, 1, 2, 3, 4, 5].map((i) => ({
    n: String(i + 1).padStart(2, "0"),
    t: t("cert.ben.p" + i + ".t"),
    d: t("cert.ben.p" + i + ".d")
  }));
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("cert.ben.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>{t("cert.ben.title")}</h2>
          </div>
          <p className="lead">{t("cert.ben.lead")}</p>
        </div>
        <div className="cards-3">
          {cards.map((c, i) =>
            <div className="card" key={i}>
              <div className="num">{c.n}</div>
              <h3 className="card-title">{c.t}</h3>
              <p>{c.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// --- Proceso (5 etapas) ---
function CertProcess() {
  const { t } = useLang();
  const steps = [0, 1, 2, 3, 4].map((i) => ({
    n: String(i + 1).padStart(2, "0"),
    t: t("cert.proc.s" + i + ".t"),
    d: t("cert.proc.s" + i + ".d"),
    dur: t("cert.proc.s" + i + ".dur")
  }));
  return (
    <section className="on-ink">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("cert.proc.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>{t("cert.proc.title")}</h2>
          </div>
          <p className="lead">{t("cert.proc.lead")}</p>
        </div>
        <div className="pipeline">
          {steps.map((s, i) =>
            <div className="step" key={i}>
              <div className="n">{s.n}</div>
              <div className="t">{s.t}</div>
              <div className="d">{s.d}</div>
              <div className="cert-step-dur">{s.dur}</div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// --- Dominios (7 + adaptable) ---
function CertDomains() {
  const { t } = useLang();
  const domains = [0, 1, 2, 3, 4, 5, 6].map((i) => ({
    n: t("cert.dom.d" + i + ".n"),
    t: t("cert.dom.d" + i + ".t"),
    d: t("cert.dom.d" + i + ".d")
  }));
  return (
    <section className="on-paper">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("cert.dom.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>{t("cert.dom.title")}</h2>
          </div>
          <p className="lead">{t("cert.dom.lead")}</p>
        </div>
        <div className="cards-4">
          {domains.map((c, i) =>
            <div className="card" key={i}>
              <div className="num">{c.n}</div>
              <h3 className="card-title">{c.t}</h3>
              <p>{c.d}</p>
            </div>
          )}
          <div className="card cert-card-accent">
            <div className="num">{t("cert.dom.plus.n")}</div>
            <h3 className="card-title">{t("cert.dom.plus.t")}</h3>
            <p>{t("cert.dom.plus.d")}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// --- Niveles de scoring ---
function CertLevels() {
  const { t } = useLang();
  const levels = [0, 1, 2, 3].map((i) => ({
    range: t("cert.lvl.l" + i + ".range"),
    name: t("cert.lvl.l" + i + ".name"),
    d: t("cert.lvl.l" + i + ".d")
  }));
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("cert.lvl.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>{t("cert.lvl.title")}</h2>
          </div>
          <p className="lead">{t("cert.lvl.lead")}</p>
        </div>
        <div className="cards-4">
          {levels.map((l, i) =>
            <div className={`card cert-level cert-level--l${i}`} key={i}>
              <div className="cert-level-range">{l.range}</div>
              <div className="cert-level-name">{l.name}</div>
              <p>{l.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// --- Pricing ---
function CertPricing() {
  const { t } = useLang();
  const includes = [0, 1, 2, 3, 4, 5, 6, 7].map((i) => t("cert.price.inc" + i));
  return (
    <section className="on-paper">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("cert.price.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>{t("cert.price.title")}</h2>
          </div>
          <p className="lead">{t("cert.price.lead")}</p>
        </div>
        <div className="cert-pricing">
          <div className="cert-pricing-main">
            <div className="cert-pricing-label">{t("cert.price.label")}</div>
            <div className="cert-pricing-amount">{t("cert.price.amount")}</div>
            <div className="cert-pricing-iva">{t("cert.price.iva")}</div>
            <ul className="cert-pricing-includes">
              {includes.map((inc, i) => <li key={i}>{inc}</li>)}
            </ul>
          </div>
          <div className="cert-pricing-side">
            <div className="cert-pricing-side-label">{t("cert.price.cuf.label")}</div>
            <div className="cert-discount-box">
              <div className="cert-discount-sub">{t("cert.price.cuf.sub")}</div>
              <div className="cert-discount-amount">{t("cert.price.cuf.amount")}</div>
              <p className="cert-discount-label">{t("cert.price.cuf.d.a")}<strong>{t("cert.price.cuf.d.s")}</strong>{t("cert.price.cuf.d.b")}</p>
            </div>
            <div className="cert-vigencia">
              <strong>{t("cert.price.vigencia.strong")}</strong>{t("cert.price.vigencia.rest")}
            </div>
            <CufCobrand className="cert-cobrand--muted" />
          </div>
        </div>
      </div>
    </section>
  );
}

// --- Formulario ---
function CertForm() {
  const { t, lang } = useLang();
  const segments = useMemo(() => [
    { type: "underline", value: t("cert.form.typ.u") },
    { type: "text", value: t("cert.form.typ.t") }
  ], [lang, t]);

  const setFieldMessage = useCallback((ev) => {
    const el = ev.target;
    if (el.validity.valueMissing) el.setCustomValidity(t("cert.val.missing"));
    else if (el.type === "email" && el.validity.typeMismatch) el.setCustomValidity(t("cert.val.email"));
    else el.setCustomValidity("");
  }, [t]);
  const clearFieldMessage = useCallback((ev) => { ev.target.setCustomValidity(""); }, []);

  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitError("");
    const form = e.currentTarget;
    setSubmitting(true);
    try {
      const res = await fetch("/api/certificacion", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
        mode: "cors"
      });
      let data = null;
      try { data = await res.json(); } catch (_) { /* ignore */ }
      if (!res.ok) {
        let detail = `código ${res.status}`;
        if (data && data.message) detail = String(data.message);
        throw new Error(detail);
      }
      form.reset();
      setSent(true);
    } catch (err) {
      const reason = err && err.message ? err.message : "error de red";
      setSubmitError(t("cert.err.send").replace("{reason}", reason));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="solicitar">
      <div className="container">
        <div className="contact-wrap">
          <div className="contact-intro">
            <span className="kicker"><span className="dot" />{t("cert.form.kicker")}</span>
            <h2 className="hero-headline" style={{ marginTop: 22, fontSize: "clamp(30px, 4vw, 46px)" }}>
              <TypedHeadline key={lang} segments={segments} />
            </h2>
            <p className="hero-sub" style={{ maxWidth: "46ch", marginTop: 28 }}>{t("cert.form.sub")}</p>
            <div className="contact-direct">
              <span className="kicker" style={{ marginBottom: 10 }}>{t("cert.form.direct.kicker")}</span>
              <a href="mailto:contacto@forsvar.io" className="contact-email">
                contacto@forsvar.io <span className="arr">↗</span>
              </a>
              <p className="contact-direct-note">{t("cert.form.direct.note")}</p>
            </div>
          </div>

          <form className="contact-form" onSubmit={onSubmit}>
            {sent ? (
              <div className="apply-sent">
                <div className="sent-mark">✓</div>
                <h3>{t("cert.form.sent.title")}</h3>
                <p>{t("cert.form.sent.p")}</p>
              </div>
            ) : (
              <>
                {submitError ? <p className="contact-form-error" role="alert">{submitError}</p> : null}
                <CertField label={t("cert.form.name")} required>
                  <input type="text" name="nombre" required disabled={submitting} onInvalid={setFieldMessage} onInput={clearFieldMessage} />
                </CertField>
                <CertField label={t("cert.form.role")} required>
                  <input type="text" name="rol" required disabled={submitting} onInvalid={setFieldMessage} onInput={clearFieldMessage} />
                </CertField>
                <CertField label={t("cert.form.company")} required full>
                  <input type="text" name="empresa" required disabled={submitting} onInvalid={setFieldMessage} onInput={clearFieldMessage} />
                </CertField>
                <CertField label={t("cert.form.email")} required>
                  <input type="email" name="email" required disabled={submitting} onInvalid={setFieldMessage} onInput={clearFieldMessage} />
                </CertField>
                <CertField label={t("cert.form.phone")}>
                  <input type="tel" name="telefono" disabled={submitting} />
                </CertField>
                <div className="apply-actions">
                  <button type="submit" className="btn btn-primary" disabled={submitting}>
                    {submitting ? t("cert.form.sending") : <>{t("cert.form.submit")} <Arrow /></>}
                  </button>
                  <span className="apply-note">{t("cert.form.required")}</span>
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function CertField({ label, required, children, full }) {
  return (
    <label className={`fld ${full ? "fld-full" : ""}`}>
      <span className="fld-label">{label}{required && <em>*</em>}</span>
      {children}
    </label>
  );
}

// --- Respaldo institucional ---
function CertRespaldo() {
  const { t } = useLang();
  const blocks = [0, 1, 2].map((i) => ({
    a: t("cert.resp." + i + ".a"),
    s: t("cert.resp." + i + ".s"),
    b: t("cert.resp." + i + ".b")
  }));
  return (
    <section className="on-ink cert-respaldo">
      <div className="container">
        <span className="kicker"><span className="dot" />{t("cert.resp.kicker")}</span>
        <div className="cert-respaldo-grid">
          {blocks.map((bl, i) =>
            <p className="cert-respaldo-text" key={i}>{bl.a}<strong>{bl.s}</strong>{bl.b}</p>
          )}
        </div>
      </div>
    </section>
  );
}

window.CertHero = CertHero;
window.CertAudience = CertAudience;
window.CertBenefits = CertBenefits;
window.CertProcess = CertProcess;
window.CertDomains = CertDomains;
window.CertLevels = CertLevels;
window.CertPricing = CertPricing;
window.CertForm = CertForm;
window.CertRespaldo = CertRespaldo;