function Footer() {
  const cols = [
    { title: "Sezioni", items: ["Luoghi", "Eventi", "Spettacoli", "Itinerari", "Tradizioni", "Enogastronomia", "Storie"] },
    { title: "Province", items: ["Cosenza", "Catanzaro", "Reggio Calabria", "Crotone", "Vibo Valentia"] },
    { title: "La rivista", items: ["Chi siamo", "La redazione", "Contribuisci", "Contatti", "Archivio"] },
    { title: "Servizi", items: ["Newsletter", "Podcast", "Libro fotografico", "Mappe cartacee", "Shop"] },
  ];
  return (
    <footer style={{
      padding: "120px 0 40px",
      background: "var(--paper)",
      borderTop: "1px solid var(--line)",
    }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr repeat(4, 1fr)", gap: 48, alignItems: "start" }}>
          <div>
            <div style={{
              fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 500,
              letterSpacing: "-0.01em", lineHeight: 1,
            }}>
              <span style={{ fontStyle: "italic", fontWeight: 400 }}>Calabria</span>{" "}
              <span style={{ fontWeight: 600 }}>Svelata</span>
            </div>
            <p style={{ marginTop: 20, fontSize: 14, lineHeight: 1.6, color: "var(--muted)", maxWidth: 280 }}>
              Rivista digitale indipendente dedicata alla cultura, ai luoghi e alle storie della Calabria.
            </p>
            <div style={{ display: "flex", gap: 8, marginTop: 24 }}>
              {["IG", "FB", "YT", "SP", "RSS"].map(s => (
                <a key={s} href="#" style={{
                  width: 36, height: 36, border: "1px solid var(--line)", borderRadius: 999,
                  display: "grid", placeItems: "center", fontSize: 10, fontFamily: "var(--font-mono)",
                  letterSpacing: "0.08em", color: "var(--muted)",
                }}>{s}</a>
              ))}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.title}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em",
                textTransform: "uppercase", color: "var(--muted)", paddingBottom: 14,
                borderBottom: "1px solid var(--line)", marginBottom: 18,
              }}>{c.title}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {c.items.map(it => (
                  <li key={it} style={{ marginBottom: 10 }}>
                    <a href="#" style={{ fontSize: 14, color: "var(--ink)" }}>{it}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 80, paddingTop: 24, borderTop: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20,
          fontSize: 12, fontFamily: "var(--font-mono)", letterSpacing: "0.08em", color: "var(--muted)",
        }}>
          <div>© 2026 Calabria Svelata · P. IVA 03287650794</div>
          <div style={{ display: "flex", gap: 28 }}>
            <a href="#">Privacy</a>
            <a href="#">Cookie</a>
            <a href="#">Note legali</a>
            <a href="#">Accessibilità</a>
          </div>
          <div>Made with 𝑎𝑚𝑜𝑟𝑒 · Reggio Calabria</div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;