function Footer() {
  const cols = [
    { title: 'COMPANY', links: [
      { label: 'About', href: 'about.html' },
      { label: 'Services', href: 'index.html#services' },
      { label: 'Pricing', href: 'pricing.html' },
      { label: 'Client Login', href: 'https://client.chekbooks.com/client-login', external: true },
    ] },
    { title: 'RESOURCES', links: [
      { label: 'Reviews',      href: 'reviews.html' },
      { label: 'Service Areas', href: 'service-areas.html' },
      { label: 'FAQ', href: 'pricing.html#faq' },
      { label: 'Contact', href: 'contact.html' },
    ] },
  ];

  return (
    <footer style={{ background: '#163F34', color: '#faf9f6', padding: '64px 32px 28px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="ck-footer-grid" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1px 1fr 1fr 1fr', gap: 48,
          alignItems: 'flex-start',
        }}>
          {/* Logo + tagline */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
            <div style={{ marginBottom: 20 }}><Logo dark size={64}/></div>
            <p style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.6)', lineHeight: 1.65, margin: 0, maxWidth: 280 }}>
              Professional accounting for service businesses.
            </p>
          </div>

          {/* Divider */}
          <div className="ck-footer-divider" style={{ width: 1, alignSelf: 'stretch', background: 'rgba(255,255,255,0.1)' }}/>

          {/* Contact column */}
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.55)', marginBottom: 16 }}>CONTACT</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <a href="tel:+15599093596" style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5, color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}>
                <Phone size={14} /> (559) 909-3596
              </a>
              <a href="mailto:macen@chekbooks.com" style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5, color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}>
                <Mail size={14} /> macen@chekbooks.com
              </a>
              <div style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.55)', marginTop: 4 }}>
                48-hour response time
              </div>
            </div>
          </div>

          {cols.map(c => (
            <div key={c.title}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.55)', marginBottom: 16 }}>{c.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.links.map(l => (
                  <li key={l.label}><a href={l.href} {...(l.external ? { target: '_blank', rel: 'noopener' } : {})} style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#ddb06e'}
                    onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.85)'}
                  >{l.label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="ck-footer-bottom" style={{
          marginTop: 56, paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.1)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
        }}>
          <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.45)' }}>© 2026 Chekbooks Virtual Bookkeeping. All rights reserved.</div>
          <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.45)' }}>No contracts · cancel anytime · books by the 15th</div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .ck-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px 32px !important; }
          .ck-footer-divider { display: none; }
        }
        @media (max-width: 520px) {
          .ck-footer-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 24px 16px !important; }
          .ck-footer-grid > div:first-child { grid-column: 1 / -1 !important; }
          .ck-footer-grid div[style*="letterSpacing"] { font-size: 9px !important; margin-bottom: 10px !important; }
          .ck-footer-grid a { font-size: 11px !important; }
          .ck-footer-grid li { line-height: 1.4 !important; }
          .ck-footer-grid ul { gap: 7px !important; }
          .ck-footer-grid > div:nth-child(3) > div { gap: 8px !important; }
          .ck-footer-grid > div:nth-child(3) a,
          .ck-footer-grid > div:nth-child(3) div { font-size: 11px !important; }
          .ck-footer-bottom { font-size: 10px !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
          .ck-footer-bottom > div { font-size: 10px !important; }
        }
      `}</style>
    </footer>
  );
}
Object.assign(window, { Footer });