function Footer() {
  const cols = [
    { h: 'Продукт', l: [
      { t: 'Результат', href: '#newbaseline' },
      { t: 'Как работает', href: '#how-works' },
      { t: 'AI', href: '#coach' },
      { t: 'Ещё', href: '#features' },
      { t: 'Нутрициолог', href: '#specialists' },
      { t: 'Тарифы', href: '#pricing' },
    ] },
    { h: 'Компания', l: [
      { t: 'О нас', href: '#' },
      { t: 'Контакты', href: 'mailto:hi@minicorn.app' },
    ] },
  ];
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: '64px 0 28px' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr', gap: 32 }} className="footer-grid">
          <div>
            <Wordmark size={32}/>
            <p style={{ marginTop: 16, color: 'var(--ink-3)', fontSize: 14, lineHeight: 1.6, maxWidth: '34ch' }}>
              AI-помощник в кармане.<br/>А ещё AI: нутрициолог, биохимик, коуч.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
              {['ig', 'tt', 'yt'].map((s, i) => (
                <a key={i} href="#" style={{
                  width: 36, height: 36, borderRadius: '50%',
                  background: 'rgba(255,255,255,0.05)', border: '1px solid var(--line-2)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--ink-2)', textDecoration: 'none',
                  fontFamily: 'var(--mono)', fontSize: 11, textTransform: 'uppercase',
                }}>{s}</a>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <div className="eyebrow" style={{ marginBottom: 16, color: 'var(--ink-3)' }}>{c.h}</div>
              <ul className="clean" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.l.map((x, j) => (
                  <li key={j}>
                    <a href={x.href} style={{ color: 'var(--ink-2)', textDecoration: 'none', fontSize: 14 }}>{x.t}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 56, paddingTop: 24, borderTop: '1px solid var(--line)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
          fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em',
        }}>
          <span>© 2026 MINICORN · MADE WITH 💜</span>
          <span>v2.4 · ВСЕГДА НА СВЯЗИ</span>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){
          .footer-grid{ grid-template-columns: 1fr 1fr !important; row-gap: 32px; }
          .footer-grid > :nth-child(1){ order: 3; grid-column: 1 / -1; margin-top: 10px; }
          .footer-grid > :nth-child(2){ order: 1; }
          .footer-grid > :nth-child(3){ order: 2; }
        }
      `}</style>
    </footer>
  );
}
window.Footer = Footer;