// Footer.jsx — responsive footer
const Footer = () => {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const cols = [
    { title: 'Platform', items: [
      { label: 'Medical', href: '/' },
      { label: 'Pharmacy', href: '/' },
      { label: 'Compliance', href: '/' },
      { label: 'Acquisition', href: '/' },
    ]},
    { title: 'Founders', items: [
      { label: 'Apply', href: '/apply' },
      { label: 'How it works', href: '/convert' },
      { label: 'Case studies', href: '/' },
    ]},
    { title: 'Company', items: [
      { label: 'About', href: '/' },
      { label: 'Contact', href: '/apply' },
    ]},
    { title: 'Legal', items: [
      { label: 'Privacy', href: '/' },
      { label: 'Terms', href: '/' },
      { label: 'HIPAA notice', href: '/' },
    ]},
  ];

  return (
    <footer style={{ background: '#0F0F0F', color: '#FFF', paddingTop: isMobile ? 48 : 96, paddingBottom: isMobile ? 32 : 48 }}>
      <div className="container">
        <div style={{
          display: isMobile ? 'flex' : 'grid',
          flexDirection: 'column',
          gridTemplateColumns: '5fr 7fr',
          gap: isMobile ? 40 : 96,
          paddingBottom: isMobile ? 40 : 80
        }}>
          <div>
            <img src="/assets/logo-transparent.png" alt="503.health" style={{ height: 24, width: 'auto', filter: 'invert(1)', marginBottom: 20 }} />
            <p style={{ color: 'rgba(255,255,255,0.6)', maxWidth: 320, fontSize: 14, lineHeight: 1.6 }}>
              Telehealth infrastructure for compliant peptide brands. Built for operators who plan to sell.
            </p>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
            gap: isMobile ? 32 : 24
          }}>
            {cols.map(c => (
              <div key={c.title} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.4)' }}>{c.title}</div>
                {c.items.map(it => (
                  <a key={it.label} href={it.href} style={{ color: 'rgba(255,255,255,0.85)', fontSize: 14, textDecoration: 'none' }}>{it.label}</a>
                ))}
              </div>
            ))}
          </div>
        </div>
        <div style={{
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          justifyContent: 'space-between',
          gap: isMobile ? 12 : 0,
          borderTop: '1px solid rgba(255,255,255,0.12)',
          paddingTop: 24,
          fontSize: 12,
          color: 'rgba(255,255,255,0.5)'
        }}>
          <div>&copy; 2026 503.health, Inc. All rights reserved.</div>
          <div>Not medical advice. Services available only where legally permitted.</div>
        </div>
      </div>
    </footer>
  );
};
window.Footer = Footer;