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

const TX_ROWS = [
  { id: "pagos", visualKind: "pay", reverse: false },
  { id: "transferencias", visualKind: "transfer", reverse: true },
  { id: "retiros", visualKind: "withdraw", reverse: false },
  { id: "promociones", visualKind: "promo", reverse: true }
];

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

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

function TxHero() {
  const { t, lang } = useLang();
  const products = useTxProducts();
  const segments = useMemo(() => [
    { type: "text", value: t("tx.typ.a") },
    { type: "underline", value: t("tx.typ.u") },
    { type: "text", value: t("tx.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("tx.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("tx.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 TxProducts() {
  const products = useTxProducts();
  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 TxStrategy() {
  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 TxCTA() {
  return <PageDemoCTA />;
}

window.TxHero = TxHero;
window.TxProducts = TxProducts;
window.TxStrategy = TxStrategy;
window.TxCTA = TxCTA;