// FooterV2 — bilingual, updated section map.
function FooterV2() {
  const { lang } = React.useContext(window.LangContext);
  const { isMobile, isTablet } = window.useBreakpoint();

  const sections = lang === 'de'
    ? [
        ["Philosophie",   "#philosophy"],
        ["Leistungen",    "#capabilities"],
        ["Methode",       "#method"],
        ["Einsatzfelder", "#notfor"],
        ["Bausteine",     "#addons"],
        ["Positionierung","#position"],
        ["Notizen",       "#thinking"],
      ]
    : [
        ["Philosophy",    "#philosophy"],
        ["Services",      "#capabilities"],
        ["Method",        "#method"],
        ["Focus Areas",   "#notfor"],
        ["Add-ons",       "#addons"],
        ["Position",      "#position"],
        ["Notes",         "#thinking"],
      ];

  const practiceLabel = lang === 'de' ? "Praxis" : "Practice";
  const connectLabel  = lang === 'de' ? "Kontakt" : "Connect";

  return (
    <footer style={{
      position: "relative", zIndex: 2,
      padding: isMobile ? "60px 24px 40px" : isTablet ? "60px 40px 40px 40px" : "80px 80px 56px 120px",
      display: "grid",
      gridTemplateColumns: isMobile ? "1fr" : isTablet ? "1fr 1fr" : "1.4fr 1fr 1fr 1fr",
      gap: isMobile ? 40 : isTablet ? 32 : 48,
      alignItems: "start",
    }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-start" }}>
        <div style={{ display: "flex", flexDirection: "column", width: 150 }}>
          <Logotype height={40} />
          <div style={{
            width: "100%", height: 1, marginTop: 2,
            background: "linear-gradient(90deg, rgba(216,221,232,0) 0%, rgba(216,221,232,0.55) 18%, rgba(184,192,208,0.85) 50%, rgba(216,221,232,0.55) 82%, rgba(216,221,232,0) 100%)",
          }}></div>
        </div>
        <div style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 13, color: "#9898a8", lineHeight: 1.6, letterSpacing: "0.01em" }}>
          Clarity by design. Systems for people.
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <span className="label label--wide" style={{ color: "#8080a0", marginBottom: 6 }}>{practiceLabel}</span>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 20px" }}>
          {sections.map(([l, h]) => (
            <a key={l} href={h} style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 13, color: "#bcbcc6", textDecoration: "none" }}>
              {l}
            </a>
          ))}
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <span className="label label--wide" style={{ color: "#8080a0", marginBottom: 6 }}>{connectLabel}</span>
        <a href="mailto:hello@ondion.de" style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 13, color: "#bcbcc6", textDecoration: "none" }}>
          hello@ondion.de
        </a>
        <a href="#connect" style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 13, color: "#bcbcc6", textDecoration: "none" }}>
          {lang === 'de' ? 'Termin buchen' : 'Book a call'}
        </a>
        <a href="https://www.linkedin.com/in/martina-assum" target="_blank" rel="noopener noreferrer" style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 13, color: "#bcbcc6", textDecoration: "none" }}>
          LinkedIn
        </a>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12, textAlign: (isMobile || isTablet) ? "left" : "right" }}>
        <div style={{ marginTop: 18, display: "flex", gap: 10, justifyContent: (isMobile || isTablet) ? "flex-start" : "flex-end", flexWrap: "wrap", alignItems: "center" }}>
          <a href="impressum.html" style={{ fontFamily: "Montserrat", fontSize: 10, color: "#606068", fontWeight: 400, letterSpacing: "0.22em", textTransform: "uppercase", textDecoration: "none" }}
             onMouseEnter={e => e.currentTarget.style.color = "#a8a8b8"} onMouseLeave={e => e.currentTarget.style.color = "#606068"}>Impressum</a>
          <span style={{ fontFamily: "Montserrat", fontSize: 10, color: "#606068" }}>·</span>
          <a href="datenschutz.html" style={{ fontFamily: "Montserrat", fontSize: 10, color: "#606068", fontWeight: 400, letterSpacing: "0.22em", textTransform: "uppercase", textDecoration: "none" }}
             onMouseEnter={e => e.currentTarget.style.color = "#a8a8b8"} onMouseLeave={e => e.currentTarget.style.color = "#606068"}>Datenschutz</a>
        </div>
        <div style={{ fontFamily: "Montserrat", fontSize: 10, color: "#606068", fontWeight: 400, letterSpacing: "0.22em", textTransform: "uppercase" }}>
          © 2026 Ondion
        </div>
      </div>
    </footer>
  );
}

window.FooterV2 = FooterV2;