// 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";
  const cols = [
    { title: t.footer.product, links: t.footer.productLinks, hrefs: ["index.html#features", intHref, fmHref, fcHref, "cashflow.html", isEn ? "/pricing.html" : "/es/precios.html"] },
    { title: t.footer.company, links: t.footer.companyLinks, hrefs: ["#", "#", "#", isEn ? "/contact.html" : "/es/contacto.html"] },
    { title: t.footer.resources, links: t.footer.resourcesLinks, hrefs: ["/blog", "#", "#", "#"] },
  ];
  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.links.map((l, j) => <a key={j} href={(c.hrefs && c.hrefs[j]) || "#"}>{l}</a>)}
              </div>
            ))}
          </div>
          <div className="foot-meta">
            <span>{t.footer.meta}</span>
            <span>nextscenario.com</span>
          </div>
        </div>
      </footer>
    </>
  );
}
window.Footer = Footer;