// Footer + final CTA
function Footer({ t }) {
  const cols = [
    { title: t.footer.product, links: t.footer.productLinks, hrefs: ["#features","integrations.html","financial-models.html","forecast.html","cashflow.html","#pricing"] },
    { title: t.footer.company, links: t.footer.companyLinks },
    { title: t.footer.resources, links: t.footer.resourcesLinks },
  ];
  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.appLoginURL(t._lang)}>{t.ctaFinal.primary}<Icon name="arrow-right" size={14} /></a>
                <a className="btn" href={window.appLoginURL(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;