function WhatsApp() {
  const [open, setOpen] = React.useState(window.innerWidth > 768);
  return (
    <div style={{
      position:'fixed', bottom: 26, right: 26, zIndex: 200,
      display:'flex', flexDirection:'column', alignItems:'flex-end', gap: 12,
    }}>
      {open && (
        <div style={{
          width: 310,
          background: '#FFFDF9',
          borderRadius: 18,
          padding: 18,
          boxShadow: '0 24px 60px -20px rgba(0,0,0,.3)',
          border: '1px solid rgba(96,114,80,.12)',
          animation: 'fadeInUp .25s ease',
        }}>
          <div style={{
            display:'flex', justifyContent:'space-between', alignItems:'center',
            marginBottom: 12,
          }}>
            <div style={{display:'flex', alignItems:'center', gap: 10}}>
              <SemillasMark size={32}/>
              <div>
                <div style={{fontFamily: 'var(--serif)', fontSize: 16, fontWeight: 600, color: 'var(--verde-oscuro)'}}>Semillas</div>
                <div style={{fontSize: 11, color: '#25D366'}}>● En línea</div>
              </div>
            </div>
            <button onClick={()=> setOpen(false)} style={{
              color: 'var(--tinta-suave)', fontSize: 18, padding: 4,
            }}>×</button>
          </div>
          <div style={{
            padding: 14,
            background: 'var(--crema)',
            borderRadius: 12,
            fontSize: 14, lineHeight: 1.5,
            color: 'var(--verde-oscuro)',
          }}>
            Hola, somos SEMILLAS 🌱 Cuéntanos tu necesidad o haznos tu pregunta, estaremos felices de acompañarte. Te responderemos en breve.
          </div>
          <a href="https://wa.me/573107600860" target="_blank" rel="noopener noreferrer" style={{
            marginTop: 12,
            display:'flex', alignItems:'center', justifyContent:'center', gap: 10,
            padding: '12px 18px',
            background: '#25D366',
            color: '#fff',
            borderRadius: 12,
            fontSize: 13.5, fontWeight: 600,
          }}>
            <IconWA size={16}/> Iniciar conversación
          </a>
        </div>
      )}
      <button onClick={()=> setOpen(!open)} style={{
        width: 58, height: 58, borderRadius: '50%',
        background: '#25D366',
        color: '#fff',
        display:'grid', placeItems:'center',
        boxShadow: '0 14px 30px -10px rgba(37,211,102,.65)',
        cursor: 'pointer',
        transition: 'transform .25s',
      }}
      onMouseOver={(e)=> e.currentTarget.style.transform = 'scale(1.05)'}
      onMouseOut ={(e)=> e.currentTarget.style.transform = 'none'}
      >
        <IconWA size={26}/>
      </button>
    </div>
  );
}

window.WhatsApp = WhatsApp;