/* ===== Footer ===== */
function Footer() {
  const cols = [
    ['Services', ['Counseling', 'Consultation', 'Assessment', 'Workshops']],
    ['Rooms', ['Hilom', 'Sibol']],
    ['Clinic', ['Consultants', 'About', 'Mission & Values', 'Contact']],
  ];
  return (
    <footer style={{ background: 'var(--hs-cream)', borderTop: '1px solid var(--hs-line-soft)' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '54px 32px 28px' }}>
        <div className="hs-foot-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 36 }}>
          <div>
            <Logo height={44} />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.6, color: 'var(--hs-ink-2)', margin: '16px 0 0', maxWidth: 260 }}>
              A safe healing space for everyone. Lipa City, Batangas.
            </p>
          </div>
          {cols.map(([h, items]) => (
            <div key={h}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--hs-teal)', marginBottom: 14 }}>{h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                {items.map(it => <a key={it} href="#services" onClick={(e) => e.preventDefault()} style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--hs-ink-2)', textDecoration: 'none' }} onMouseEnter={(e) => e.target.style.color = 'var(--hs-sky)'} onMouseLeave={(e) => e.target.style.color = 'var(--hs-ink-2)'}>{it}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid var(--hs-line)', marginTop: 40, paddingTop: 20, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--hs-ink-3)' }}>© 2026 HealSpace Psychological Clinic · By appointment only</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--hs-ink-3)' }}>+63 927 034 9050 · hello@healspacelipa.com</div>
        </div>
        <div style={{ marginTop: 14, fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--hs-ink-3)', textAlign: 'center' }}>
          Website created by <a href="https://bespokedigitalsolutions.com" target="_blank" rel="noopener" style={{ color: 'var(--hs-teal)', fontWeight: 600, textDecoration: 'none' }} onMouseEnter={(e) => e.target.style.color = 'var(--hs-sky)'} onMouseLeave={(e) => e.target.style.color = 'var(--hs-teal)'}>Bespoke Digital Solutions</a>
        </div>
      </div>
    </footer>
  );
}
Object.assign(window, { Footer });