function Footer() {
  const colStyle = { display: 'flex', flexDirection: 'column', gap: 10 };
  const linkStyle = { font: 'var(--t-body-sm)', color: 'var(--ink-700)', textDecoration: 'none', cursor: 'pointer' };
  return (
    <footer style={{ background: 'var(--bg-soft)', padding: '64px 0 32px' }}>
      <div className="footer-grid" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 24px',
        display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1.2fr', gap: 48 }}>
        <div>
          <img src="assets/logo-prashanti.png" style={{ height: 44, marginBottom: 18 }} alt="Prashanti Clinic" />
          <p style={{ font: 'var(--t-body-sm)', color: 'var(--fg-2)', maxWidth: 340, margin: '0 0 16px', lineHeight: 1.7 }}>
            A multi-specialty out-patient polyclinic offering Psychiatry, Neurology and Ophthalmology — serving South Gujarat since 1962.
          </p>
          <div style={{ font: 'var(--t-caption)', color: 'var(--fg-3)' }}>Established 1962 · Surat, Gujarat</div>
        </div>

        <div style={colStyle}>
          <div className="overline" style={{ marginBottom: 4 }}>Specialties</div>
          {SPECIALTIES.map(s => (
            <Link key={s.id} to={'specialty/' + s.id} style={linkStyle}>{s.name}</Link>
          ))}
        </div>

        <div style={colStyle}>
          <div className="overline" style={{ marginBottom: 4 }}>Practice</div>
          <Link to="doctors" style={linkStyle}>Our Doctors</Link>
          <Link to="conditions" style={linkStyle}>Conditions We Treat</Link>
          <Link to="diagnostics" style={linkStyle}>Diagnostics</Link>
          <Link to="locations" style={linkStyle}>Locations</Link>
        </div>

        <div style={colStyle}>
          <div className="overline" style={{ marginBottom: 4 }}>Contact</div>
          {(typeof CONTACT_NUMBERS !== 'undefined' ? CONTACT_NUMBERS : []).map(c => (
            <a key={c.label} href={`tel:${c.number.replace(/\s/g, '')}`} style={{ ...linkStyle, display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 4 }}>
              <span style={{ font: 11, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{c.label}</span>
              <span style={{ font: 'var(--t-body-sm)', color: 'var(--ink-900)', fontFeatureSettings: '"tnum"' }}>{c.number}</span>
            </a>
          ))}
          <a href="mailto:care@prashanticlinic.com" style={{ ...linkStyle, marginTop: 8 }}>care@prashanticlinic.com</a>
        </div>
      </div>

      <div style={{ maxWidth: 'var(--container)', margin: '48px auto 0', padding: '24px 24px 0',
        borderTop: '1px solid var(--hairline-cool)', display: 'flex', justifyContent: 'space-between',
        gap: 16, flexWrap: 'wrap',
        font: 'var(--t-caption)', color: 'var(--fg-2)' }}>
        <span>© Prashanti Clinic. All rights reserved.</span>
        <span>Privacy · Terms · Patient Rights</span>
      </div>

      <style>{`
        @media (max-width: 760px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 460px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}
window.Footer = Footer;