/* global React */
function Footer({ onNav }) {
  const { isMobile, isTablet } = useBreakpoint();
  const cols = [
    ["Program", [["Uvod i indikacije", "program"], ["Osteopatski testovi", "program"], ["Mobilizacione tehnike", "program"], ["HVLA manipulacije", "program"], ["Visceralne tehnike", "program"]]],
    ["Tehnike", [["Vratna kičma", "tehnike"], ["Torakalna kičma", "tehnike"], ["LS kičma", "tehnike"], ["SI zglob", "tehnike"], ["Visceralne i periferne", "tehnike"]]],
    ["OMT Centar", [["O nama", "about"], ["Kursevi i termini", "kursevi"], ["Galerija", "galerija"], ["Blog", "blog"], ["FAQ", "faq"], ["Kontakt", "contact"]]],
  ];

  const gridCols = isMobile ? "1fr" : isTablet ? "1fr 1fr" : "1.6fr 1fr 1fr 1fr";

  return (
    <footer style={{ background: "var(--surface-ink)", color: "#fff", marginTop: 96, padding: isMobile ? "48px 20px 24px" : "72px 32px 28px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: gridCols, gap: isMobile ? 36 : 48, alignItems: "start" }}>
          {/* Brand column */}
          <div>
            <img src="assets/logomark.svg" alt="" style={{ width: 40, filter: "brightness(0) invert(1)" }} />
            <div style={{ marginTop: 14, fontSize: 20, fontWeight: 700, letterSpacing: "-0.02em" }}>OMT Centar</div>
            <div style={{ fontSize: 12, marginTop: 3, color: "rgba(255,255,255,0.5)", letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 600 }}>
              Osteopatija · Kiropraktika
            </div>
            <p style={{ marginTop: 12, fontSize: 13, lineHeight: 1.6, color: "rgba(255,255,255,0.6)", maxWidth: 300 }}>
              Aleksandar Bisić D.O.O. — diplomirani osteopata i fizioterapeut specijalista.
              Individualna obuka iz osteopatije, kiropraktike i manuelne terapije.
            </p>
            <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 8, color: "rgba(255,255,255,0.7)", fontSize: 13 }}>
              <a href="tel:+381641973737" style={{ color: "inherit", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8 }}>
                <Icon name="phone" size={14} /> 064 197 3737
              </a>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                <Icon name="mapPin" size={14} /> Beograd, Centar
              </span>
              <a href="mailto:kontakt@omtcentar.rs" style={{ color: "inherit", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8 }}>
                <Icon name="mail" size={14} /> kontakt@omtcentar.rs
              </a>
            </div>
            <div style={{ marginTop: 20, display: "flex", gap: 8 }}>
              {[["instagram","https://www.instagram.com/omtcentar/"],["facebook","https://www.facebook.com/profile.php?id=100094927268527"],["whatsapp","https://wa.me/381641973737"]].map(([ic, href]) => (
                <a key={ic} href={href} target="_blank" rel="noreferrer" style={{ width: 34, height: 34, borderRadius: "50%", background: "rgba(255,255,255,0.08)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#fff", textDecoration: "none" }}>
                  <Icon name={ic} size={15} />
                </a>
              ))}
            </div>
          </div>

          {/* Link columns */}
          {cols.map(([title, items]) => (
            <div key={title}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,0.45)", marginBottom: 14 }}>{title}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 9 }}>
                {items.map(([label, k]) => (
                  <li key={label}><a onClick={() => onNav(k)} style={{ cursor: "pointer", color: "rgba(255,255,255,0.8)", textDecoration: "none", fontSize: 14, fontWeight: 500 }}>{label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 48, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,0.08)",
          display: "flex", flexDirection: isMobile ? "column" : "row",
          justifyContent: "space-between", alignItems: isMobile ? "flex-start" : "center",
          fontSize: 11, color: "rgba(255,255,255,0.4)", gap: 12,
        }}>
          <span>© 2026 OMT Centar · Aleksandar Bisić D.O.O. · Sva prava zadržana.</span>
          <span style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
            <a onClick={() => onNav("uslovi")} style={{ color: "inherit", cursor: "pointer" }}>Uslovi korišćenja</a>
            <a onClick={() => onNav("privatnost")} style={{ color: "inherit", cursor: "pointer" }}>Politika privatnosti</a>
            <a onClick={() => onNav("admin")} style={{ color: "rgba(255,255,255,0.2)", cursor: "pointer" }}>Admin</a>
          </span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;