function Footer() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const cols = [
    { title: 'Legal', links: [
      { label: 'Privacy', href: 'privacy.html' },
      { label: 'Terms', href: 'terms.html' },
      { label: 'DPA', href: 'dpa.html' },
      { label: 'Security', href: 'security.html' },
    ] },
  ];
  return (
    <footer style={{
      borderTop: '1px solid var(--line)',
      padding: isMobile ? '48px 20px 32px' : '64px 48px 40px',
      background: 'var(--bg-2)',
    }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr auto', gap: isMobile ? 36 : 48, marginBottom: isMobile ? 40 : 56 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <Logo />
              <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>CallAxis</span>
            </div>
            <p style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, marginBottom: 20, maxWidth: 280 }}>
              The AI voice agent for any business that can't afford to miss a call.
            </p>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>
              <span className="live-dot" style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: 'var(--accent)', marginRight: 8, verticalAlign: 'middle' }}/>
              ALL SYSTEMS NORMAL
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.title}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.1em', marginBottom: 16 }}>
                {c.title.toUpperCase()}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.links.map((l) => {
                  const isObj = typeof l === 'object' && l !== null;
                  const label = isObj ? l.label : l;
                  const href = isObj ? l.href : '#';
                  return (
                    <a key={label} href={href} style={{ fontSize: 13, color: 'var(--ink-2)' }}>{label}</a>
                  );
                })}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 24, borderTop: '1px solid var(--line)',
          fontSize: 12, color: 'var(--ink-3)',
          gap: 24, flexWrap: 'wrap',
        }}>
          <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            <span>© 2026 CallAxis</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              Powered by{' '}
              <a
                href="http://AmalAxis.ai"
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  color: 'var(--ink)',
                  fontWeight: 600,
                  display: 'inline-flex', alignItems: 'center', gap: 5,
                  borderBottom: '1px solid var(--accent)',
                  paddingBottom: 1,
                }}
              >
                <span style={{
                  width: 6, height: 6, borderRadius: 999,
                  background: 'var(--accent)', display: 'inline-block',
                }}/>
                AmalAxis.ai
              </a>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;