// Footer

const Footer = () => {
  const cols = [
    { title:'Producto', links:['Agenda','Historia clínica','ERP & Caja','WhatsApp','Booking público','IA clínica','Portal del tutor'] },
    { title:'Empresa', links:['Sobre DrVet.app','Blog clínico','Casos de éxito','Carreras','Prensa'] },
    { title:'Recursos', links:['Documentación','API pública','Status','Soporte','Roadmap'] },
    { title:'Legal', links:['Términos','Privacidad','Procesamiento de datos','Seguridad'] },
  ];
  return (
    <footer style={{ padding:'80px 0 40px', background:'var(--ink)', color:'#FAFAF7', position:'relative', overflow:'hidden' }}>
      {/* Background paw watermarks */}
      <div aria-hidden style={{ position:'absolute', inset:0, pointerEvents:'none' }}>
        <div style={{ position:'absolute', right:'-2%', top:40, width:200, height:200, color:'var(--accent)', opacity:0.07, transform:'rotate(18deg)' }}>
          <PetArt.paw style={{ width:'100%', height:'100%' }}/>
        </div>
        <div style={{ position:'absolute', left:'40%', bottom:'10%', width:120, height:120, color:'#FAFAF7', opacity:0.04, transform:'rotate(-25deg)' }}>
          <PetArt.paw style={{ width:'100%', height:'100%' }}/>
        </div>
        <div style={{ position:'absolute', left:'-2%', top:'30%', width:90, height:90, color:'#FAFAF7', opacity:0.05, transform:'rotate(8deg)' }}>
          <PetArt.cat style={{ width:'100%', height:'100%' }}/>
        </div>
        <div style={{ position:'absolute', right:'30%', bottom:'30%', width:70, height:70, color:'var(--accent)', opacity:0.08, transform:'rotate(-12deg)' }}>
          <PetArt.bird style={{ width:'100%', height:'100%' }}/>
        </div>
      </div>
      <div className="container" style={{ position:'relative' }}>
        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,1.4fr) repeat(4, minmax(0,1fr))', gap:40 }} className="f-grid">
          <div>
            <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:18 }}>
              <Logo/>
              <span className="serif" style={{ fontSize:24, fontWeight:500 }}>DrVet.app</span>
            </div>
            <p className="serif" style={{
              fontSize:22, fontStyle:'italic', lineHeight:1.25, color:'var(--accent)',
              margin:'0 0 24px', maxWidth: 320, fontWeight:400
            }}>
              Cada visita,<br/>un cliente para siempre.
            </p>
            <div style={{ display:'flex', gap:8 }}>
              {['EN','ES','PT'].map((l,i) => (
                <button key={l} style={{
                  padding:'6px 10px', fontSize:11,
                  background: i===1 ? 'rgba(250,250,247,0.1)' : 'transparent',
                  border:'1px solid rgba(250,250,247,0.15)', color:'#FAFAF7',
                  borderRadius:6, fontFamily:"'JetBrains Mono', monospace"
                }}>{l}</button>
              ))}
            </div>
          </div>
          {cols.map((c,i) => (
            <div key={i}>
              <div className="mono" style={{ fontSize:10.5, color:'rgba(250,250,247,0.5)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:18 }}>{c.title}</div>
              <ul style={{ margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:10 }}>
                {c.links.map(l => (
                  <li key={l}><a href="#" style={{ fontSize:13, color:'rgba(250,250,247,0.85)' }}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          marginTop:60, paddingTop:24, borderTop:'1px solid rgba(250,250,247,0.1)',
          display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:16
        }}>
          <div className="mono" style={{ fontSize:11, color:'rgba(250,250,247,0.5)' }}>
            © 2026 DrVet.app · Hecho con cariño para quienes cuidan a los que no hablan.
          </div>
          <div style={{ display:'flex', gap:16, fontSize:12, color:'rgba(250,250,247,0.6)' }}>
            <span>v2.4.1</span>
            <span style={{ display:'flex', alignItems:'center', gap:6 }}>
              <span style={{ width:6, height:6, borderRadius:99, background:'var(--ok)', animation:'pulse-dot 1.6s infinite' }}/>
              Todos los sistemas operativos
            </span>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px){
          .f-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 560px){
          .f-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
};

window.Footer = Footer;