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

const AML_ROWS = [
  { id: "verificacion-identidad", visualKind: "kyc", reverse: false },
  { id: "screening", visualKind: "compliance", reverse: true },
  { id: "risk-matrix", visualKind: "matrix", reverse: false },
  { id: "transactional-monitoring", visualKind: "tx", reverse: true },
  { id: "alertas-casos", visualKind: "cases", reverse: false },
  { id: "user-360", visualKind: "user360", reverse: true },
  { id: "reportes", visualKind: "compliance", reverse: false }
];

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

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

function AmlHero() {
  const { t, lang } = useLang();
  const products = useAmlProducts();
  const segments = useMemo(() => [
    { type: "text", value: t("aml.typ.l1") },
    { type: "br" },
    { type: "underline", value: t("aml.typ.u") },
    { type: "text", value: t("aml.typ.l2") }
  ], [lang, t]);
  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("aml.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("aml.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 AmlProducts() {
  const products = useAmlProducts();
  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 AmlCTA() {
  return <PageDemoCTA />;
}

window.AmlHero = AmlHero;
window.AmlProducts = AmlProducts;
window.AmlCTA = AmlCTA;