/* global React */
// ============================================================
// WhatsAppFab — botón flotante de ventas, fijo abajo-derecha.
//   · Tratamiento limpio acorde al design system: pastilla blanca,
//     borde sutil y sombra suave; el verde de WhatsApp vive solo en
//     el glifo (reconocible, sin fondo estridente).
//   · z-index alto para quedar por encima de cualquier otro flotante.
//   · En móvil se reduce y se separa de los bordes para no tapar CTAs.
//   · El número es un PLACEHOLDER: wa.me/MARCADOR_NUMERO
// ============================================================
function WhatsAppFab() {
  return (
    <a
      className="wa-fab"
      href="https://wa.me/MARCADOR_NUMERO"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Escríbenos por WhatsApp"
      data-hover="1"
    >
      <span className="wa-fab-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="26" height="26">
          <path
            fill="#25D366"
            d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.2h.004c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01zM12.04 20.15h-.003a8.23 8.23 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.24 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.17.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.12-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43l-.48-.01c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z"
          />
        </svg>
      </span>
      <span className="wa-fab-label">Ventas por WhatsApp</span>
      <style>{WA_FAB_CSS}</style>
    </a>
  );
}

const WA_FAB_CSS = `
.wa-fab{
  position:fixed; right:24px; bottom:24px; z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px 10px 12px;
  background:#fff; color:var(--fg-1);
  border:1px solid var(--line); border-radius:9999px;
  box-shadow:0 1px 0 rgba(15,23,42,.02), 0 14px 30px -12px rgba(15,23,42,.22);
  text-decoration:none; font-family:var(--font-body);
  font-size:14px; font-weight:500; line-height:1;
  transition:transform .26s var(--ease-out-soft),
             box-shadow .26s var(--ease-smooth),
             border-color .26s var(--ease-smooth);
}
.wa-fab:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(15,23,42,.02), 0 22px 44px -14px rgba(37,211,102,.30);
  border-color:rgba(37,211,102,.45);
}
.wa-fab-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9999px; flex:0 0 34px;
  background:rgba(37,211,102,.10);
}
.wa-fab-label{ white-space:nowrap; }

/* Tablet/móvil: pasa a botón circular (solo glifo) para no tapar
   contenido ni los CTAs fijos del header móvil. */
@media (max-width:760px){
  .wa-fab{ right:16px; bottom:16px; padding:0; }
  .wa-fab-icon{ width:52px; height:52px; flex:0 0 52px; background:#fff; }
  .wa-fab-label{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wa-fab{ transition:none; }
  .wa-fab:hover{ transform:none; }
}
`;

window.WhatsAppFab = WhatsAppFab;