function Footer({ brandName = "Samika" }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div className="footer__brand">
            <div className="footer__wordmark">{brandName}</div>
            <p className="footer__tag">Every patient call answered. Every appointment earned.</p>
          </div>
          <div className="footer__cols">
            <div>
              <div className="footer__h">Product</div>
              <a href="#how">How it works</a>
              <a href="#specialty">By specialty</a>
              <a href="#roi">ROI calculator</a>
              <a href="#demo">Sample call</a>
            </div>
            <div>
              <div className="footer__h">Company</div>
              <a href="#">About</a>
              <a href="#">Careers</a>
              <a href="#">Press</a>
              <a href="#book">Contact</a>
            </div>
            <div>
              <div className="footer__h">Trust</div>
              <a href="#">HIPAA notice</a>
              <a href="#">BAA</a>
              <a href="#">Security</a>
              <a href="#">Privacy</a>
            </div>
          </div>
        </div>
        <div className="footer__bot">
          <div>© 2025 {brandName} Health, Inc.</div>
          <div>SOC-2 Type II in progress · BAA on file</div>
        </div>
      </div>
      <style>{`
        .footer__top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; padding-bottom: 48px; border-bottom: 1px solid rgba(247,241,228,0.1); }
        .footer__wordmark { font-family: var(--font-display); font-style: italic; font-size: 36px; color: var(--cream-100); margin-bottom: 12px; }
        .footer__tag { color: rgba(247,241,228,0.55); font-size: 14px; max-width: 30ch; line-height: 1.5; margin: 0; }
        .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .footer__cols > div { display: flex; flex-direction: column; gap: 10px; }
        .footer__h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,241,228,0.4); margin-bottom: 6px; }
        .footer__bot { display: flex; justify-content: space-between; padding-top: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(247,241,228,0.45); flex-wrap: wrap; gap: 12px; }
        @media (max-width: 800px) {
          .footer__top { grid-template-columns: 1fr; }
          .footer__cols { grid-template-columns: 1fr 1fr; }
        }
      `}</style>
    </footer>
  );
}
window.Footer = Footer;