const FOOTER_NAV = [
  { label: 'Capacidades', href: '#servicios' },
  { label: 'Proyectos', href: '#trabajo' },
  { label: 'Notas', href: '#cuaderno' },
];

const Footer = () => {
  const [ref, visible] = window.useReveal({ threshold: 0.1 });
  return (
    <footer ref={ref} className={`reveal ${visible ? 'is-visible' : ''}`} style={{
      borderTop: '2px solid #111',
      padding: 'clamp(40px, 6vh, 64px) clamp(16px, 4vw, 48px) clamp(24px, 3vh, 40px)',
      position: 'relative', zIndex: 1,
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        gap: 40,
      }}>
        <div>
          <div style={{ marginBottom: 16, display: 'flex', flexDirection: 'column', gap: 4 }}>
            <Logo size={20} showTag={false} href="#" />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)' }}>
              // AI engineering
            </span>
          </div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#666', lineHeight: 1.6, margin: 0 }}>
            Agentes de IA, servidores MCP, automatización y cloud. México / Remoto.
          </p>
        </div>

        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#999', letterSpacing: '0.08em', marginBottom: 16 }}>NAVEGACIÓN</div>
          {FOOTER_NAV.map(l => (
            <a key={l.href} href={l.href} style={{
              display: 'block', fontFamily: 'var(--font-mono)', fontSize: 13,
              color: '#111', textDecoration: 'none', padding: '4px 0',
            }} className="footer-link">{l.label}</a>
          ))}
        </div>

        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#999', letterSpacing: '0.08em', marginBottom: 16 }}>CONTACTO</div>
          <a href="mailto:hola@xmau.dev" style={{ display: 'block', fontFamily: 'var(--font-mono)', fontSize: 13, color: '#111', textDecoration: 'none', padding: '4px 0' }} className="footer-link">hola@xmau.dev</a>
          <a href="#" style={{ display: 'block', fontFamily: 'var(--font-mono)', fontSize: 13, color: '#111', textDecoration: 'none', padding: '4px 0' }} className="footer-link">GitHub</a>
          <a href="#" style={{ display: 'block', fontFamily: 'var(--font-mono)', fontSize: 13, color: '#111', textDecoration: 'none', padding: '4px 0' }} className="footer-link">LinkedIn</a>
        </div>

        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#999', letterSpacing: '0.08em', marginBottom: 16 }}>NEWSLETTER</div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#666', lineHeight: 1.5, margin: '0 0 12px' }}>
            Notas sobre IA, agentes y sistemas. Sin spam. Cuando hay algo que decir.
          </p>
          <div style={{ display: 'flex', gap: 0 }}>
            <input type="email" placeholder="tu@email.com" style={{
              fontFamily: 'var(--font-mono)', fontSize: 13,
              padding: '10px 12px', border: '2px solid #111',
              borderRight: 'none', background: '#fff', flex: 1,
              outline: 'none', minWidth: 0,
              transition: 'background 0.2s ease',
            }} onFocus={(e) => e.target.style.background = '#FFFEFB'}
               onBlur={(e) => e.target.style.background = '#fff'} />
            <button style={{
              fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
              background: '#111', color: '#F4EFE6',
              padding: '10px 16px', border: '2px solid #111',
              cursor: 'pointer',
              transition: 'background 0.2s ease',
            }} onMouseEnter={(e) => e.target.style.background = 'var(--accent)'}
               onMouseLeave={(e) => e.target.style.background = '#111'}>OK →</button>
          </div>
        </div>
      </div>

      <div style={{
        maxWidth: 1280, margin: '40px auto 0',
        borderTop: '1px solid #C9C2B4', paddingTop: 20,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 8,
      }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#999' }}>
          © 2026 mau.dev — Todos los derechos reservados
        </span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#999' }}>
          Hecho con claude!
        </span>
      </div>
    </footer>
  );
};

window.Footer = Footer;