// Footer + final CTA
function Footer({ t }) {
  const isEn = t._lang === "en";
  const ucHref = isEn ? "use-cases.html" : "casos-de-uso.html";
  const intHref = isEn ? "integrations.html" : "integraciones.html";
  const fmHref = isEn ? "financial-models.html" : "modelos-financieros.html";
  const fcHref = isEn ? "forecast.html" : "forecast-ventas.html";
  const banksHref = isEn ? "banks.html" : "bancos.html";
  // Footer links are hand-curated to the pages that actually exist. We drop
  // the placeholder "#" entries (About / Customers / Careers / Docs / Guides
  // / Templates) until those pages are real — they only created broken-link
  // bounces. Re-add them here when the page exists.
  const cols = [
    {
      title: t.footer.product,
      items: [
        { label: t.footer.productLinks[0], href: "index.html#features" },
        { label: t.footer.productLinks[1], href: intHref },
        { label: t.footer.productLinks[2], href: fmHref },
        { label: t.footer.productLinks[3], href: fcHref },
        { label: t.footer.productLinks[4], href: "cashflow.html" },
        { label: t.footer.productLinks[5], href: isEn ? "/pricing.html" : "/es/precios.html" },
      ],
    },
    {
      title: t.footer.company,
      items: [
        { label: t.footer.companyLinks[3], href: isEn ? "/contact.html" : "/es/contacto.html" },
      ],
    },
    {
      title: t.footer.resources,
      items: [
        { label: t.footer.resourcesLinks[0], href: isEn ? "/blog/" : "/es/blog-es/" },
      ],
    },
    {
      title: t.footer.legal,
      items: [
        { label: t.footer.legalLinks[0], href: isEn ? "/privacy.html" : "/es/privacidad.html" },
        { label: t.footer.legalLinks[1], href: isEn ? "/terms.html" : "/es/terminos.html" },
      ],
    },
  ];
  return (
    <>
      <section style={{ borderTop: "none", paddingTop: 40, paddingBottom: 80 }}>
        <div className="container">
          <div className="cta-card reveal">
            <div>
              <div className="cta-h" dangerouslySetInnerHTML={{ __html: t.ctaFinal.title.replace(/(decidir|deciding)/i, '<em>$1</em>') }} />
              <div className="cta-sub">{t.ctaFinal.sub}</div>
              <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a className="btn btn-accent" href={window.appRegisterURL(t._lang)}>{t.ctaFinal.primary}<Icon name="arrow-right" size={14} /></a>
                <a className="btn" href={window.scheduleURL(t._lang)} style={{ color: "var(--paper)", border: "1px solid color-mix(in oklab, var(--paper) 28%, transparent)", background: "transparent" }}>{t.ctaFinal.secondary}</a>
              </div>
            </div>
            <div>
              <div className="hc-foot" style={{ marginTop: 0, gridTemplateColumns: "1fr 1fr" }}>
                <div className="cell"><div className="lbl">{t._lang === "en" ? "Setup" : "Setup"}</div><div className="val num">30 min</div></div>
                <div className="cell"><div className="lbl">{t._lang === "en" ? "Free trial" : "Prueba"}</div><div className="val num">14d</div></div>
                <div className="cell"><div className="lbl">{t._lang === "en" ? "Integrations" : "Integraciones"}</div><div className="val num">40+</div></div>
                <div className="cell"><div className="lbl">{t._lang === "en" ? "Customers" : "Clientes"}</div><div className="val num">800+</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer>
        <div className="container">
          <div className="foot-grid">
            <div className="foot-col">
              <div className="logo" style={{ marginBottom: 14 }}>
                <span className="logo-mark" /> NextScenario
              </div>
              <div style={{ color: "var(--mute)", fontSize: 14, maxWidth: 280 }}>{t.footer.tagline}</div>
            </div>
            {cols.map((c, i) => (
              <div key={i} className="foot-col">
                <h5>{c.title}</h5>
                {c.items.map((it, j) => <a key={j} href={it.href}>{it.label}</a>)}
              </div>
            ))}
          </div>
          <div className="foot-meta">
            <span>{t.footer.meta}</span>
            <span>nextscenario.com</span>
          </div>
        </div>
      </footer>
    </>
  );
}
window.Footer = Footer;