function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: '80px 0 40px', background: 'var(--bg)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 60, marginBottom: 80 }} className="foot-grid">
          <div className="foot-brand">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 28 }}>
              <LogoMark size={24} />
              <span className="serif" style={{ fontSize: 20, letterSpacing: '-0.01em' }}>
                Método <span className="italic">PHI</span>
              </span>
            </div>
            <p className="serif" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', letterSpacing: '-0.02em', lineHeight: 1.1, maxWidth: 560 }}>
              Estratégia. Inteligência. <em className="italic">Conversão.</em>
            </p>
            <p style={{ marginTop: 28, fontSize: 14, color: 'var(--fg-mute)', maxWidth: 480, lineHeight: 1.6 }}>
              Direção de produto para quem cansou de tratar sintoma. O visual é a última coisa a se resolver — e resolve-se sozinho quando o resto está no lugar.
            </p>
          </div>

          <FootCol title="Navegação" items={[
            ['Método', '#metodo'],
            ['Entregáveis', '#entregaveis'],
            ['Cases', '#cases'],
            ['Dúvidas', '#objecoes'],
          ]} />
          <FootCol title="Contato" items={[
            ['contato@metodophi.com.br', 'mailto:contato@metodophi.com.br'],
            ['Agendar diagnóstico', '#diagnostico'],
          ]} />
          <FootCol title="Redes" items={[
            ['LinkedIn', '#'],
            ['Instagram', '#'],
            ['Newsletter', '#'],
          ]} />
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 32, borderTop: '1px solid var(--line-soft)', color: 'var(--fg-mute)', fontSize: 12, letterSpacing: '0.04em' }} className="mono foot-end">
          <span>© 2026 Método PHI — Direção de Produto Físico</span>
          <span>Feito com mercado, não com moodboard.</span>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; margin-bottom: 48px !important; }
          .foot-brand { grid-column: 1 / -1 !important; }
          .foot-end { flex-direction: column; gap: 8px; text-align: left; }
        }
        @media (max-width: 480px) {
          .foot-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          footer { padding: 56px 0 32px !important; }
        }
      `}</style>
    </footer>
  );
}

function FootCol({ title, items }) {
  return (
    <div>
      <div className="mono" style={{ marginBottom: 20 }}>{title}</div>
      <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map(([label, href]) => (
          <li key={label}>
            <a href={href} style={{ color: 'var(--fg-dim)', fontSize: 15, transition: 'color .3s' }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--fg)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--fg-dim)'}
            >{label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Footer = Footer;