function Footer() {
  return (
    <footer style={{
      background: "var(--forest)",
      color: "var(--cream)",
      padding: "80px 0 40px",
      position: "relative",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at 80% 0%, rgba(240, 193, 120, 0.1), transparent 60%)",
        pointerEvents: "none",
      }} />
      <div className="wrap" style={{ position: "relative" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
          gap: 48, marginBottom: 56,
        }} className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
              <span style={{
                display: "grid", placeItems: "center",
                width: 40, height: 40, borderRadius: "50%",
                background: "var(--cream)", color: "var(--forest)",
              }}>
                <IconSprout size={22} />
              </span>
              <span className="serif" style={{ fontSize: 28, letterSpacing: "-0.01em" }}>
                Zeezoo
              </span>
            </div>
            <p style={{
              fontSize: 14.5, lineHeight: 1.65,
              color: "rgba(245, 239, 225, 0.65)",
              maxWidth: 320,
            }}>
              A small, soft place to do tender work. Solo therapy practice based
              in Oakland, California — serving clients across the East Bay and
              the state via telehealth.
            </p>
          </div>

          <div>
            <h4 style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.18em", color: "var(--sun)", marginBottom: 18 }}>
              Explore
            </h4>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                ["About", "#about"], ["Services", "#services"],
                ["How it works", "#how"], ["Pricing", "#pricing"], ["FAQ", "#faq"],
              ].map(([l, h]) => (
                <li key={l}>
                  <a href={h} style={{
                    color: "rgba(245, 239, 225, 0.75)", textDecoration: "none",
                    fontSize: 14.5,
                  }}>{l}</a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.18em", color: "var(--sun)", marginBottom: 18 }}>
              Contact
            </h4>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10, fontSize: 14.5, color: "rgba(245, 239, 225, 0.75)" }}>
              <li><a href="tel:+15551234567" style={{ color: "inherit", textDecoration: "none" }}>(555) 123-4567</a></li>
              <li><a href="mailto:hello@example.therapy" style={{ color: "inherit", textDecoration: "none" }}>hello@example.therapy</a></li>
              <li>123 Main St, #100<br/>San Francisco, CA 94100</li>
            </ul>
          </div>

          <div>
            <h4 style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.18em", color: "var(--sun)", marginBottom: 18 }}>
              Hours
            </h4>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10, fontSize: 14.5, color: "rgba(245, 239, 225, 0.75)" }}>
              <li>Thursdays · 9am–6pm</li>
              <li>Fridays · 9am–6pm</li>
              <li style={{ marginTop: 8, fontStyle: "italic", color: "rgba(245, 239, 225, 0.55)" }}>
                Closed weekends & holidays
              </li>
            </ul>
          </div>
        </div>

        {/* Disclaimer */}
        <div style={{
          padding: "20px 24px",
          background: "rgba(245, 239, 225, 0.06)",
          border: "1px solid rgba(245, 239, 225, 0.12)",
          borderRadius: 8,
          fontSize: 13, lineHeight: 1.6,
          color: "rgba(245, 239, 225, 0.7)",
          marginBottom: 32,
        }}>
          <strong style={{ color: "var(--cream)", fontWeight: 600 }}>Disclaimer.</strong> Zeezoo
          is operated by Alex Morgan, a Marriage and Family Therapy Trainee
          providing services under the supervision of Sarah Chen, LMFT
          (CA #12345). Content on this site is for informational purposes only
          and does not constitute medical or psychological advice. If you are
          experiencing a mental-health emergency, please call <a href="tel:988" style={{ color: "var(--sun)" }}>988</a> or
          go to your nearest emergency room.
        </div>

        <div style={{
          display: "flex", justifyContent: "space-between",
          alignItems: "center", gap: 16, flexWrap: "wrap",
          paddingTop: 24, borderTop: "1px solid rgba(245, 239, 225, 0.15)",
          fontSize: 13, color: "rgba(245, 239, 225, 0.55)",
        }}>
          <div>© 2026 Zeezoo Therapy · Alex Morgan</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Good faith estimate</a>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Accessibility</a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
        }
        @media (max-width: 540px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;