function Footer({ navigate }) {
  const go = (e, id) => { e.preventDefault(); if (navigate) navigate(id); };
  const cols = [
    { h: "Services", links: [["Speech Therapy", "services"], ["Occupational Therapy", "services"], ["Physical Therapy", "services"], ["Feeding Therapy", "services"]] },
    { h: "Bloom Well", links: [["About Us", "about"], ["Getting Started", "getting-started"], ["Contact", "contact"], ["Careers", "about"]] },
    { h: "Families", links: [["Parent Portal", "home"], ["New Family Guide", "getting-started"], ["Insurance & Fees", "contact"], ["FAQs", "about"]] },
  ];
  return (
    <footer style={{ background: "var(--surface-card)", borderTop: "1px solid var(--border-subtle)" }}>
      <div className="bw-footer__grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <img src="../../assets/logomark.svg" width="30" height="34" alt="" />
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19 }}>
              <span style={{ color: "var(--sky-700)" }}>Bloom</span> <span style={{ color: "var(--sage-600)" }}>Well</span>
            </span>
          </div>
          <p style={{ fontSize: 14, color: "var(--text-muted)", margin: "14px 0 0", maxWidth: "30ch", lineHeight: 1.55 }}>
            Whole-child pediatric therapy. Warm, clear, and built around your family.
          </p>
          <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
            {["instagram", "facebook", "youtube"].map((s) => (
              <IconButton key={s} label={s} variant="soft" size="sm"><Icon name={s} size={18} /></IconButton>
            ))}
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14, color: "var(--text-strong)", marginBottom: 12 }}>{c.h}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 9 }}>
              {c.links.map(([l, id]) => (
                <li key={l}><a href="#" onClick={(e) => go(e, id)} style={{ fontSize: 14, color: "var(--text-muted)", textDecoration: "none" }}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="bw-footer__legal">
        <span>© 2026 Bloom Well Therapy. All rights reserved.</span>
        <span style={{ display: "flex", gap: 18 }}><a href="#" style={{ color: "var(--text-subtle)", textDecoration: "none" }}>Privacy</a><a href="#" style={{ color: "var(--text-subtle)", textDecoration: "none" }}>Terms</a><a href="#" style={{ color: "var(--text-subtle)", textDecoration: "none" }}>Accessibility</a></span>
      </div>
    </footer>
  );
}
window.Footer = Footer;