/* 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}}>
            BOBAX no es una<br/>
            herramienta más.<br/>
            <span style={{
              background:'linear-gradient(90deg, var(--brand-300), var(--brand-400))',
              WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
            }}>Es tu mejor aliado.</span>
          </h2>
          <p style={{marginTop: 18, fontSize: 18, color:'rgba(255,255,255,0.7)', textWrap:'pretty'}}>
            Agendemos una llamada de 20 minutos.
          </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}}>
              La plataforma para redes que quieren crecer en serio.
              Hecho por VADAI Agencia desde Querétaro, México.
            </div>
          </div>

          {[
            { title:'Pilares', links:[['Páginas web', '#pillar-pages'], ['Tráfico Meta', '#pillar-traffic'], ['Biblioteca', '#pillar-content'], ['Academia', '#pillar-academy']] },
            { title:'Compañía', links:[['Precios', '#book', true], ['FAQ', '#faq'], ['Testimonios', '#testimonials'], ['Contacto', '#book', true]] },
            { title:'Legal', links:[['Política de Privacidad', '/politicas-privacidad/'], ['Términos y Condiciones', '/terminos-condiciones/'], ['Soporte', '#book', true]] },
          ].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, bookCall], k) => (
                  <li key={k}>
                    <a href={h} {...(bookCall ? {'data-book-call': true} : {})} 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()} BOBAX · Operado por Hecho Está, S.C.
          </div>
          <div style={{display:'flex', alignItems:'center', gap:14, flexWrap:'wrap'}}>
            <a href="/politicas-privacidad/" style={{fontSize:12, color:'rgba(255,255,255,0.6)', fontFamily:'var(--f-mono)'}}>Privacidad</a>
            <a href="/terminos-condiciones/" style={{fontSize:12, color:'rgba(255,255,255,0.6)', fontFamily:'var(--f-mono)'}}>Términos</a>
            <span 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
            </span>
          </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;