/* global React */
function Footer() {
  const Icons = window.Icons || {};
  return (
    <footer id="contact" style={{background:'#06070d', color:'white', paddingTop:100, paddingBottom: 44, position:'relative', overflow:'hidden'}}>
      <div aria-hidden="true" style={{
        position:'absolute', top:0, left:0, right:0, height: 500,
        background:'radial-gradient(800px 400px at 50% 0%, color-mix(in oklab, var(--brand-600) 35%, transparent), transparent 60%)',
        opacity:0.55,
      }} />

      <div className="container" style={{position:'relative'}}>
        <div className="reveal" style={{textAlign:'center', maxWidth: 820, margin:'0 auto'}}>
          <h2 className="display" style={{fontSize:'clamp(38px, 5.2vw, 72px)', letterSpacing:'-0.025em', color:'white', margin:0, lineHeight:1.05}}>
            Tu red merece<br/>
            <span style={{
              background:'linear-gradient(90deg, var(--brand-300), var(--brand-400))',
              WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
            }}>tecnología de verdad.</span>
          </h2>
          <p style={{marginTop: 18, fontSize: 18, color:'rgba(255,255,255,0.7)', textWrap:'pretty'}}>
            Agendemos una llamada de 20 minutos. Te enseñamos cómo se ve por dentro.
          </p>
          <div style={{marginTop: 28, display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
            <a href="#book" data-book-call className="btn btn-primary" style={{padding:'16px 28px', fontSize: 16}}>
              Agendar mi llamada {Icons.ArrowRight && <Icons.ArrowRight size={16}/>}
            </a>
            <a href="https://wa.me/5215588972297" target="_blank" rel="noopener" className="btn btn-emerald" style={{padding:'16px 22px', fontSize: 16}}>
              {Icons.Whatsapp && <Icons.Whatsapp size={16}/>} WhatsApp directo
            </a>
          </div>
        </div>

        <div style={{
          marginTop: 96, paddingTop: 48,
          borderTop:'1px solid rgba(255,255,255,0.08)',
          display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap: 36,
        }} id="footer-grid">
          <div>
            <div style={{fontFamily:'var(--f-display)', fontWeight:700, letterSpacing:'-0.02em', fontSize:28, color:'white'}}>BOBAX</div>
            <div style={{marginTop: 14, fontSize: 14, color:'rgba(255,255,255,0.55)', maxWidth: 320, lineHeight: 1.6}}>
              Tecnología multinivel para redes que quieren crecer en serio.
              Hecho por VADAI Agencia desde Querétaro, México.
            </div>
          </div>

          {[
            { title:'Producto', links:[['Cómo funciona', '#how'], ['Portales', '#portals'], ['Campañas Meta', '#afiliads'], ['Calculadora', '#roi']] },
            { title:'Compañía', links:[['Precios', '#pricing'], ['FAQ', '#faq'], ['Testimonios', '#testimonials'], ['Contacto', '#contact']] },
            { title:'Legal', links:[['Términos', '#'], ['Privacidad', '#'], ['Soporte', '#']] },
          ].map((col, i) => (
            <div key={i}>
              <div style={{fontFamily:'var(--f-mono)', fontSize: 11, letterSpacing:'0.14em', textTransform:'uppercase', color:'rgba(255,255,255,0.45)', fontWeight:600}}>
                {col.title}
              </div>
              <ul style={{margin:'14px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap: 10}}>
                {col.links.map(([l, h], k) => (
                  <li key={k}><a href={h} style={{fontSize: 14, color:'rgba(255,255,255,0.78)'}}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 48, paddingTop: 24,
          borderTop:'1px solid rgba(255,255,255,0.06)',
          display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:14,
        }}>
          <div style={{fontSize:12, color:'rgba(255,255,255,0.45)', fontFamily:'var(--f-mono)'}}>
            © {new Date().getFullYear()} VADAI Agencia · BOBAX™
          </div>
          <div style={{fontSize:12, color:'rgba(255,255,255,0.45)', fontFamily:'var(--f-mono)', display:'flex', alignItems:'center', gap:6}}>
            <span style={{width:6, height:6, borderRadius:999, background:'var(--emerald-500)'}} />
            Todo funcionando perfecto
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          #footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
        }
        @media (max-width: 520px) {
          #footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;