function Footer() {
  return (
    <footer style={{
      position: 'relative', zIndex: 1,
      borderTop: '1px solid var(--line)',
      paddingTop: 80, paddingBottom: 40,
      background: 'linear-gradient(180deg, transparent, rgba(5,6,15,0.6))',
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.5fr 1fr 1fr 1fr',
          gap: 48,
          marginBottom: 64,
        }} className="footer-grid">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, maxWidth: 360 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Logo size={44}/>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, letterSpacing: '-0.01em' }}>TecnoEducando</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.16em', color: 'var(--fg-3)', textTransform: 'uppercase' }}>SOFTWARE · ED · AQP</span>
              </div>
            </div>
            <p style={{ fontSize: 14 }}>
              Desarrollamos sistemas informáticos a medida desde Arequipa para Perú y Latinoamérica.
              Software que se adapta a cómo trabaja tu empresa — no al revés.
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              {['F','X','in','▶'].map(s => (
                <a key={s} href="#" style={{
                  width: 36, height: 36, borderRadius: 10,
                  background: 'rgba(120,140,255,0.06)',
                  border: '1px solid var(--line)',
                  display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 13,
                  color: 'var(--fg-2)',
                  transition: 'all .2s',
                }}
                onMouseEnter={e=>{e.currentTarget.style.background='var(--grad-soft)'; e.currentTarget.style.color='var(--fg)';}}
                onMouseLeave={e=>{e.currentTarget.style.background='rgba(120,140,255,0.06)'; e.currentTarget.style.color='var(--fg-2)';}}
                >{s}</a>
              ))}
            </div>
          </div>

          <FooterCol title="Servicios" items={[
            'Sistemas a medida', 'Aplicaciones web', 'Apps móviles',
            'Alojamiento web', 'Mantenimiento', 'Asesoramiento',
          ]}/>
          <FooterCol title="Empresa" items={[
            'Nosotros', 'Proyectos', 'Proceso', 'Capacitaciones', 'Contacto',
          ]}/>
          <FooterCol title="Contacto" items={[
            'Av. Arequipa #627', 'Arequipa, Perú', '+51 979 771 040', 'webmaster@tecnoeducando.edu.pe',
          ]} mono/>
        </div>

        <div className="divider"/>

        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 24, flexWrap: 'wrap', gap: 16,
        }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '.06em' }}>
            © 2017–2026 TecnoEducando · Diseño y desarrollo por el equipo TE
          </div>
          <div style={{ display: 'flex', gap: 24, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.08em' }}>
            <a href="#" style={{ color: 'var(--fg-3)' }}>Política de privacidad</a>
            <a href="#" style={{ color: 'var(--fg-3)' }}>Términos</a>
            <a href="#" style={{ color: 'var(--fg-3)' }}>Ayuda</a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px){
          .footer-grid{ grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
          .footer-grid > div:first-child{ grid-column: span 2; }
        }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, items, mono }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 11,
        letterSpacing: '.16em', textTransform: 'uppercase',
        color: 'var(--fg-3)', marginBottom: 4,
      }}>{title}</div>
      {items.map(it => (
        <a key={it} href="#" style={{
          fontSize: mono ? 13 : 14,
          color: 'var(--fg-2)',
          fontFamily: mono ? 'var(--font-mono)' : 'var(--font-body)',
          transition: 'color .2s',
        }}
          onMouseEnter={e=>e.currentTarget.style.color='var(--fg)'}
          onMouseLeave={e=>e.currentTarget.style.color='var(--fg-2)'}
        >{it}</a>
      ))}
    </div>
  );
}

window.Footer = Footer;