/* MStheory website — Footer */
const { LanguageSwitcher } = window.MStheoryDesignSystem_61eb29;

function Footer({ t, lang, setLang }) {
  const colStyle = { display: "flex", flexDirection: "column", gap: "10px" };
  const head = { fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", letterSpacing: "var(--tracking-caps)", textTransform: "uppercase", color: "var(--text-gold)", marginBottom: "4px" };
  const link = { color: "var(--text-secondary)", fontSize: "var(--text-sm)", cursor: "pointer", textDecoration: "none" };
  // Slugs aligned to the label order of t.footer.links.* → each lands on page.html
  const slugs = {
    product: ["categorieen", "prijs", "demo", "examensimulatie"],
    company: ["over-ons", "contact", "reviews"],
    legal: ["voorwaarden", "privacy", "terugbetaling"],
  };
  const href = (col, i) => `page.html?p=${(slugs[col] || [])[i] || ""}`;
  return (
    <footer style={{ position: "relative", borderTop: "1px solid var(--border-subtle)", background: "var(--ink-950)", paddingBlock: "var(--space-16) var(--space-8)" }}>
      <div className="ms-container">
        <div className="ms-footer-grid">
          <div style={{ maxWidth: "300px" }}>
            <img src="../../assets/logo-wordmark.svg" alt="MStheory" height="36" style={{ marginBottom: "16px" }} />
            <p style={{ color: "var(--text-secondary)", fontSize: "var(--text-sm)", lineHeight: "var(--lh-relaxed)", marginBottom: "20px" }}>{t.footer.tag}</p>
            <LanguageSwitcher value={lang} onChange={setLang} />
          </div>
          <div style={colStyle}>
            <span style={head}>{t.footer.cols.product}</span>
            {t.footer.links.product.map((l, i) => <a key={i} style={link} href={href("product", i)}>{l}</a>)}
          </div>
          <div style={colStyle}>
            <span style={head}>{t.footer.cols.company}</span>
            {t.footer.links.company.map((l, i) => <a key={i} style={link} href={href("company", i)}>{l}</a>)}
          </div>
          <div style={colStyle}>
            <span style={head}>{t.footer.cols.legal}</span>
            {t.footer.links.legal.map((l, i) => <a key={i} style={link} href={href("legal", i)}>{l}</a>)}
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "12px", marginTop: "var(--space-12)", paddingTop: "var(--space-6)", borderTop: "1px solid var(--border-subtle)" }}>
          <span style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>© 2026 MStheory. {t.footer.rights}</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-muted)", letterSpacing: "var(--tracking-wide)" }}>Made for the road · 🇳🇱</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;