function FloatingActions() {
  const [open, setOpen] = useState(false);
  const S = CMGS_DATA.social;

  const socials = [
    {
      label: 'Facebook',
      url:   S.facebook,
      bg:    '#1877F2',
      svg:   <svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 9V7a1 1 0 0 1 1-1h2V3h-3a4 4 0 0 0-4 4v2H8v3h2v9h3v-9h2.5l.5-3H13"/></svg>,
    },
    {
      label: 'Instagram',
      url:   S.instagram,
      bg:    'linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5)',
      svg:   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>,
    },
    {
      label: 'TikTok',
      url:   S.tiktok,
      bg:    '#000',
      svg:   <svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 3v3.2a4.8 4.8 0 0 0 4.5 3.3v3.1a8 8 0 0 1-4.5-1.3v6a5.6 5.6 0 1 1-5.6-5.6v3.1a2.5 2.5 0 1 0 2.5 2.5V3H16Z"/></svg>,
    },
    {
      label: 'YouTube',
      url:   S.youtube,
      bg:    '#FF0000',
      svg:   <svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 8s-.2-1.4-.8-2c-.8-.8-1.6-.8-2-.9C16 5 12 5 12 5s-4 0-7.2.1c-.4 0-1.2 0-2 .9C2.2 6.6 2 8 2 8s-.2 1.6-.2 3.3v1.5C1.8 14.5 2 16 2 16s.2 1.4.8 2c.8.8 1.8.8 2.2.9C7 19 12 19 12 19s4 0 7.2-.1c.4 0 1.2 0 2-.9.6-.6.8-2 .8-2s.2-1.6.2-3.3v-1.5C22.2 9.6 22 8 22 8ZM10 15V9l5.2 3L10 15Z"/></svg>,
    },
  ];

  return (
    <div className="cmgs-fab">
      <button
        className={`cmgs-fab-btn cmgs-fab-globe ${open ? 'is-open' : ''}`}
        onClick={() => setOpen(o => !o)}
        aria-label="Redes sociales"
      >
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <circle cx="12" cy="12" r="9"/>
          <ellipse cx="12" cy="12" rx="4" ry="9"/>
          <line x1="3" y1="12" x2="21" y2="12"/>
          <path d="M3.5 8h17M3.5 16h17"/>
        </svg>
      </button>

      <div className={`cmgs-fab-fanout ${open ? 'is-open' : ''}`}>
        {socials.map((s, i) => (
          <a
            key={s.label}
            href={s.url}
            target="_blank"
            rel="noopener"
            className="cmgs-fab-mini"
            style={{ background: s.bg, transitionDelay: `${i * 50}ms` }}
            aria-label={s.label}
            title={s.label}
          >
            {s.svg}
          </a>
        ))}
      </div>

      <a href={S.whatsapp} target="_blank" rel="noopener" className="cmgs-fab-btn cmgs-fab-wa" aria-label="WhatsApp">
        <svg width="30" height="30" viewBox="0 0 32 32" fill="currentColor">
          <path d="M16 .4a15.6 15.6 0 0 0-13.4 23.5L0 32l8.4-2.5A15.6 15.6 0 1 0 16 .4Zm0 28.5a12.8 12.8 0 0 1-6.6-1.8l-.5-.3-4.9 1.5 1.5-4.8-.3-.5A12.8 12.8 0 1 1 16 28.9Zm7.1-9.6c-.4-.2-2.3-1.1-2.6-1.2-.3-.1-.6-.2-.9.2-.3.4-1 1.2-1.2 1.5-.2.2-.4.3-.8.1-2.3-1.2-3.8-2.1-5.4-4.8-.4-.7.4-.7 1.2-2.2.1-.2.1-.5 0-.7-.1-.2-.9-2.2-1.2-2.9-.3-.8-.6-.7-.9-.7h-.7c-.3 0-.7.1-1.1.5s-1.5 1.4-1.5 3.5 1.5 4.1 1.7 4.4c.2.3 3 4.6 7.3 6.4 2.7 1.2 3.8 1.3 5.2 1.1.8-.1 2.3-1 2.6-1.9.3-.9.3-1.7.2-1.9-.1-.1-.4-.2-.9-.4Z"/>
        </svg>
        <span className="cmgs-fab-tip">¡Escríbenos!</span>
      </a>

      <style>{`
        .cmgs-fab {
          position: fixed; right: 20px; bottom: 20px; z-index: 90;
          display:flex; flex-direction: column; gap: 14px; align-items: center;
        }
        .cmgs-fab-btn {
          width: 58px; height: 58px; border-radius: 999px;
          display:flex; align-items:center; justify-content:center;
          color:#fff; border: 0; cursor: pointer;
          box-shadow: 0 8px 22px rgba(0,0,0,0.25);
          transition: all 260ms var(--ease-out);
          position: relative;
        }
        .cmgs-fab-btn:hover { transform: translateY(-3px) scale(1.06); }
        .cmgs-fab-wa { background: #25D366; animation: wa-pulse 2.2s ease-in-out infinite; }
        @keyframes wa-pulse {
          0%,100% { box-shadow: 0 8px 22px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0.55); }
          50%     { box-shadow: 0 8px 22px rgba(0,0,0,0.25), 0 0 0 14px rgba(37,211,102,0); }
        }
        .cmgs-fab-globe { background: var(--navy-700); border: 1.5px solid var(--gold-500); }
        .cmgs-fab-globe.is-open { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); transform: rotate(180deg); }

        .cmgs-fab-tip {
          position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(8px);
          background: var(--navy-900); color: #fff; padding: 8px 12px; border-radius: 6px;
          font: 600 10px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
          white-space: nowrap; opacity: 0; pointer-events: none;
          transition: all 200ms; border: 1px solid var(--gold-500);
        }
        .cmgs-fab-btn:hover .cmgs-fab-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

        .cmgs-fab-fanout {
          position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%);
          display:flex; flex-direction:column; gap: 10px;
          pointer-events: none;
        }
        .cmgs-fab-mini {
          width: 44px; height: 44px; border-radius: 999px;
          display:flex; align-items:center; justify-content:center;
          color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.22);
          opacity: 0; transform: scale(0.4) translateY(20px);
          transition: all 260ms var(--ease-bounce);
        }
        .cmgs-fab-mini svg { width: 22px; height: 22px; display:block; }
        .cmgs-fab-fanout.is-open { pointer-events: auto; }
        .cmgs-fab-fanout.is-open .cmgs-fab-mini { opacity: 1; transform: scale(1) translateY(0); }
        .cmgs-fab-mini:hover { transform: scale(1.12) !important; }
      `}</style>
    </div>
  );
}

Object.assign(window, { FloatingActions });