function Footer() {
  const cols = [
    ["Μαθήματα", [["Φιλολογικά", "#"], ["Θετικά", "#"], ["Ξένες Γλώσσες", "#"], ["Πανελλήνιες", "#"]]],
    ["Πλατφόρμα", [["Σημειώσεις", "#"], ["Ασκήσεις", "#"], ["Τεστ Κατανόησης", "#"], ["Dashboard", "#"]]],
    ["Στήριξη", [["Επικοινωνία", "#"], ["Συχνές Ερωτήσεις", "#"], ["Για Γονείς", "#"], ["Για Καθηγητές", "#"]]],
    ["Νομικά", [["Όροι Χρήσης", "/terms"], ["Απόρρητο", "/terms"], ["Cookies", "/terms"], ["GDPR", "/terms"]]],
  ];
  return (
    <footer className="sfy-foot" style={{
      background: "var(--ink)", color: "var(--paper)",
      padding: "80px 32px 32px",
    }}>
      <div style={{maxWidth: 1400, margin: "0 auto"}}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.6fr repeat(4, 1fr)",
          gap: 48, paddingBottom: 60,
          borderBottom: "1px solid rgba(241,236,224,0.18)",
        }} className="sfy-foot-grid">
          <div>
            <div style={{display: "flex", alignItems: "center", gap: 12, marginBottom: 24}}>
              <img src="/images/logo.png" alt="" style={{height: 38, width: 38, objectFit: "contain"}} />
              <span style={{fontFamily: "var(--serif)", fontSize: 24, fontWeight: 500}}>
                StudyForYou<span style={{color: "var(--ember)"}}>.</span>gr
              </span>
            </div>
            <p style={{
              fontFamily: "var(--serif)", fontSize: 17,
              lineHeight: 1.5, opacity: 0.7, maxWidth: 320,
              fontStyle: "italic",
            }}>
              "Μελέτησε έξυπνα, πέτυχε περισσότερα — με σύστημα και σεβασμό στον χρόνο σου."
            </p>
            <div style={{
              marginTop: 28, fontFamily: "var(--mono)",
              fontSize: 11, letterSpacing: "0.18em", opacity: 0.5,
            }}>★ ΑΘΉΝΑ · MMXXVI</div>
          </div>
          {cols.map(([h, items], i) => (
            <div key={i}>
              <div style={{
                fontFamily: "var(--mono)", fontSize: 10.5,
                letterSpacing: "0.22em", textTransform: "uppercase",
                color: "var(--ember)", marginBottom: 18,
              }}>{h}</div>
              <ul style={{listStyle: "none", display: "flex", flexDirection: "column", gap: 10}}>
                {items.map(([label, href], j) => (
                  <li key={j}>
                    <a href={href} style={{
                      fontSize: 14, color: "var(--paper)", opacity: 0.85,
                    }}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Giant wordmark */}
        <div aria-hidden className="sfy-foot-wordmark" style={{
          fontFamily: "var(--serif)", fontWeight: 300,
          fontSize: "clamp(80px, 14vw, 220px)",
          letterSpacing: "-0.04em", lineHeight: 1,
          padding: "60px 0 20px", textAlign: "center",
          color: "var(--paper)",
          fontVariationSettings: '"opsz" 144',
        }}>
          STUDY<em style={{color: "var(--ember)", fontWeight: 300}}>FOR</em>YOU<span style={{color:"var(--ember)"}}>.</span>
        </div>

        <div className="sfy-foot-bottom" style={{
          paddingTop: 24, fontFamily: "var(--mono)", fontSize: 11,
          letterSpacing: "0.15em", opacity: 0.5, textTransform: "uppercase",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12,
        }}>
          <span>© 2026 StudyForYou.gr — Όλα τα δικαιώματα διατηρούνται.</span>
          <span>Επιμέλεια: Δέσποινα Μανέττα</span>
        </div>
        <style>{`
          @media (max-width: 980px) {
            .sfy-foot-grid { grid-template-columns: 1fr 1fr !important; }
          }
          @media (max-width: 600px) {
            .sfy-foot-grid { grid-template-columns: 1fr !important; }
          }
          /* ── Mobile ────────────────────────────────────────── */
          @media (max-width: 640px) {
            .sfy-foot { padding: 56px 20px 24px !important; }
            .sfy-foot-grid { gap: 28px !important; padding-bottom: 36px !important; }
            .sfy-foot-wordmark { font-size: 64px !important; padding: 36px 0 12px !important; }
            .sfy-foot-bottom { font-size: 10px !important; letter-spacing: 0.12em !important; }
          }
        `}</style>
      </div>
    </footer>
  );
}
window.Footer = Footer;