/* global React, useLang */
const { useMemo } = React;

const FRAUD_ROWS = [
  { id: "verificacion-identidad", visualKind: "kyc", reverse: false },
  { id: "inteligencia-dispositivo", visualKind: "device", reverse: true },
  { id: "perfil-digital", visualKind: "profile", reverse: false },
  { id: "geo-intelligence", visualKind: "geo", reverse: true },
  { id: "risk-engine", visualKind: "risk", reverse: false },
  { id: "machine-learning", visualKind: "ml", reverse: true },
  { id: "user-360", visualKind: "user360", reverse: false },
  { id: "anomalias", visualKind: "anomaly", reverse: true }
];

function fraudBullets(t, i) {
  const b = [];
  for (let j = 0; j < 16; j++) {
    const k = "fraud.p" + i + ".b" + j;
    const v = t(k);
    if (v === k) break;
    b.push(v);
  }
  return b;
}

function useFraudProducts() {
  const { t, lang } = useLang();
  return useMemo(() => FRAUD_ROWS.map((row, i) => ({
    id: row.id,
    visualKind: row.visualKind,
    reverse: row.reverse,
    kicker: t("fraud.p" + i + ".kicker"),
    title: t("fraud.p" + i + ".title"),
    lead: t("fraud.p" + i + ".lead"),
    placeholder: t("fraud.p" + i + ".ph"),
    bullets: fraudBullets(t, i)
  })), [lang, t]);
}

function FraudHero() {
  const { t, lang } = useLang();
  const segments = useMemo(() => [
    { type: "text", value: t("fraud.typ.a") },
    { type: "underline", value: t("fraud.typ.u") },
    { type: "text", value: t("fraud.typ.b") }
  ], [lang, t]);
  const products = useFraudProducts();
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid" style={{ gridTemplateColumns: "1fr" }}>
          <div className="hero-lower-left" style={{ maxWidth: 1100 }}>
            <span className="kicker"><span className="dot" />{t("fraud.hero.kicker")}</span>
            <h1 className="hero-headline" style={{ marginTop: 22 }}>
              <TypedHeadline key={lang} segments={segments} />
            </h1>
            <p className="hero-sub" style={{ maxWidth: "62ch", marginTop: 36 }}>
              {t("fraud.hero.sub")}
            </p>
            <div className="fp-toc" aria-label="Productos en esta página">
              {products.map((p) =>
                <a key={p.id} href={`#${p.id}`}>{p.kicker.replace(/[\[\]]/g, "").trim()}</a>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FraudProducts() {
  const products = useFraudProducts();
  return (
    <section id="capacidades" className="on-paper">
      <div className="container">
        {products.map((p) => (
          <div key={p.id} id={p.id}>
            <FeatRow {...p} />
          </div>
        ))}
      </div>
    </section>
  );
}

function FraudCTA() {
  return <PageDemoCTA />;
}

window.FraudHero = FraudHero;
window.FraudProducts = FraudProducts;
window.FraudCTA = FraudCTA;