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

const DIG_ROWS = [
  { id: "registro", visualKind: "register", reverse: false },
  { id: "login", visualKind: "login", reverse: true },
  { id: "modificaciones", visualKind: "ato", reverse: false },
  { id: "solicitud-productos", visualKind: "product", reverse: true }
];

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

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

function DigitalHero() {
  const { t, lang } = useLang();
  const products = useDigitalProducts();
  const segments = useMemo(() => [
    { type: "text", value: t("dig.typ.a") },
    { type: "underline", value: t("dig.typ.u") },
    { type: "text", value: t("dig.typ.b") }
  ], [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("dig.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("dig.hero.sub")}
            </p>
            <div className="fp-toc" aria-label="Eventos 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 DigitalProducts() {
  const products = useDigitalProducts();
  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 StrategyConsistente() {
  const { t } = useLang();
  return (
    <section id="estrategia">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("strat.kicker")}</span>
            <h2 className="section" style={{ marginTop: 18 }}>
              {t("strat.l1a")}<span className="underline-mark">{t("strat.l1u")}</span>{t("strat.l1b")}<br />
              <span className="underline-mark">{t("strat.l2u")}</span>{t("strat.l2b")}
            </h2>
          </div>
          <p className="lead" style={{ alignSelf: "end" }}>
            {t("strat.lead")}
            <br /><br />
            <strong style={{ color: "var(--ink)" }}>{t("strat.bold")}</strong>
          </p>
        </div>
      </div>
    </section>);

}

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

window.DigitalHero = DigitalHero;
window.DigitalProducts = DigitalProducts;
window.StrategyConsistente = StrategyConsistente;
window.DigitalCTA = DigitalCTA;