// Shared sub-page nav + footer. Reads ns_lang from localStorage so labels and
// hrefs match the SPA's language toggle.
const SubNav = ({ current }) => {
  const lang = (window.detectInitialLang ? window.detectInitialLang() : "es");
  const links = [
    { k: "casos-de-uso", h: lang === "en" ? "use-cases.html" : "casos-de-uso.html", n: lang === "en" ? "Use cases" : "Casos de uso" },
    { k: "integraciones", h: lang === "en" ? "integrations.html" : "integraciones.html", n: lang === "en" ? "Integrations" : "Integraciones" },
    { k: "bancos", h: lang === "en" ? "banks.html" : "bancos.html", n: lang === "en" ? "Banks" : "Bancos" },
    { k: "modelos-financieros", h: lang === "en" ? "financial-models.html" : "modelos-financieros.html", n: lang === "en" ? "Financial models" : "Modelos financieros" },
    { k: "forecast", h: lang === "en" ? "forecast.html" : "forecast-ventas.html", n: "Forecast" },
    { k: "cashflow", h: "cashflow.html", n: "Cashflow" },
  ];
  const isActive = (l) => current === l.h || current === l.k;
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="index.html" className="logo"><span className="logo-mark" /> NextScenario</a>
        <div className="nav-links">
          {links.map(l => (
            <a key={l.h} href={l.h} style={isActive(l) ? { opacity: 1, color: "var(--ink)", fontWeight: 500 } : {}}>{l.n}</a>
          ))}
          <a href={lang === "en" ? "/pricing.html" : "/es/precios.html"}>{lang === "en" ? "Pricing" : "Precios"}</a>
        </div>
        <div className="nav-right">
          <a href="index.html" className="btn btn-ghost" style={{ fontSize: 13 }}>{lang === "en" ? "← Home" : "← Inicio"}</a>
          <a className="btn btn-primary" href={window.appRegisterURL(lang)} style={{ padding: "8px 14px", fontSize: 13 }}>{lang === "en" ? "Start free" : "Empieza gratis"}</a>
        </div>
      </div>
    </nav>
  );
};

const SubFooter = () => {
  const lang = (window.detectInitialLang ? window.detectInitialLang() : "es");
  return (
    <footer>
      <div className="container">
        <div className="foot-meta" style={{ borderTop: 0, marginTop: 0, paddingTop: 0 }}>
          <span>{lang === "en" ? "© 2026 NextScenario · Built in Madrid with real numbers" : "© 2026 NextScenario · Hecho en Madrid con números reales"}</span>
          <span><a href="/blog" style={{ color: "inherit", marginRight: 16 }}>Blog</a>nextscenario.com</span>
        </div>
      </div>
    </footer>
  );
};

const SubCTA = ({ title, sub }) => {
  const lang = (window.detectInitialLang ? window.detectInitialLang() : "es");
  const t = title || (lang === "en" ? "Start deciding with real-time data." : "Empieza a decidir con datos en tiempo real.");
  const s = sub || (lang === "en" ? "14 days free. No card. 30-minute setup." : "14 días gratis. Sin tarjeta. Instalación en 30 minutos.");
  return (
    <section className="sub-cta" style={{ borderTop: 0, padding: 0 }}>
      <div className="container">
        <div className="cta-card">
          <div>
            <div className="cta-h"><em>{t}</em></div>
            <div className="cta-sub">{s}</div>
            <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-accent" href={window.appRegisterURL(lang)}>{lang === "en" ? "Start free →" : "Empieza gratis →"}</a>
              <a className="btn" href={window.scheduleURL(lang)} style={{ color: "var(--paper)", border: "1px solid color-mix(in oklab, var(--paper) 28%, transparent)", background: "transparent" }}>{lang === "en" ? "Schedule a meeting" : "Agendar una reunión"}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.SubNav = SubNav; window.SubFooter = SubFooter; window.SubCTA = SubCTA;