// Footer.jsx — closing band, refined
function Footer() {
  const { t } = useLang();
  return (
    <footer
      data-screen-label="Footer"
      style={{
        background: "var(--ferella-ink)",
        color: "var(--fg-on-dark)",
        borderTop: "1px solid var(--border-on-dark)",
      }}
    >
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "96px 56px 48px" }}>
        {/* Giant wordmark */}
        <div style={{
          fontFamily: "var(--font-serif)", fontWeight: 300,
          fontSize: "clamp(72px, 12vw, 220px)", lineHeight: 0.9,
          letterSpacing: "0.04em",
          color: "var(--fg-on-dark)",
          paddingBottom: 64,
          borderBottom: "1px solid var(--border-on-dark)",
        }}>
          Ferella <span style={{ fontStyle: "italic", opacity: 0.78 }}>Interiors</span>
        </div>

        <div style={{
          marginTop: 64,
          display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr",
          gap: 64,
        }}>
          <div>
            <div style={{
              fontFamily: "var(--font-serif)", fontStyle: "italic",
              fontWeight: 300, fontSize: 22, lineHeight: 1.5,
              color: "var(--fg-on-dark)", maxWidth: 460,
            }}>
              {t("footer.tagline")} <br />
              {t("footer.subline")}
            </div>
            <div style={{
              marginTop: 32,
              fontFamily: "var(--font-sans)", fontSize: 11,
              letterSpacing: "0.28em", textTransform: "uppercase",
              color: "var(--fg-on-dark-muted)",
            }}>info@ferella-interiors.de</div>
          </div>

          {[
            { h: t("footer.col.studio"),  links: [t("footer.studio.approach"), t("footer.studio.founder"), t("footer.studio.team"), t("footer.studio.press")] },
            { h: t("footer.col.work"),    links: [t("footer.work.private"), t("footer.work.hospitality"), t("footer.work.retail"), t("footer.work.office")] },
            { h: t("footer.col.connect"), links: [t("footer.connect.contact"), t("footer.connect.ig"), t("footer.connect.news"), t("footer.connect.career")] },
          ].map((col, i) => (
            <div key={i}>
              <div style={{
                fontFamily: "var(--font-sans)", fontSize: 10,
                letterSpacing: "0.32em", textTransform: "uppercase",
                color: "var(--fg-on-dark-muted)", marginBottom: 24,
              }}>{col.h}</div>
              <ul style={{
                listStyle: "none", padding: 0, margin: 0,
                display: "flex", flexDirection: "column", gap: 12,
              }}>
                {col.links.map(l => (
                  <li key={l}>
                    <a href="#" style={{
                      fontFamily: "var(--font-sans)", fontSize: 14,
                      color: "var(--fg-on-dark)", border: 0, textDecoration: "none",
                      opacity: 0.86,
                    }}>{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 80, paddingTop: 28,
          borderTop: "1px solid var(--border-on-dark)",
          display: "flex", justifyContent: "space-between",
          alignItems: "center", flexWrap: "wrap", gap: 16,
          fontFamily: "var(--font-sans)", fontSize: 10,
          letterSpacing: "0.28em", textTransform: "uppercase",
          color: "var(--fg-on-dark-muted)",
        }}>
          <div>{t("footer.copyright")}</div>
          <div style={{ display: "flex", gap: 32 }}>
            <a href="impressum.html" style={{ color: "inherit", border: 0, textDecoration: "none" }}>{t("footer.legal.imprint")}</a>
            <a href="kontakt.html" style={{ color: "inherit", border: 0, textDecoration: "none" }}>{t("footer.legal.contact")}</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;