// 13 — WhatsApp flotante
function CWhatsapp() {
  const [, t] = window.useLang();
  // número placeholder — sustituir por el real
  const phone = "34628126263";
  const msg = encodeURIComponent("Hola, me gustaría contactar con la Cátedra de Gastronomía CLM");
  const url = `https://wa.me/${phone}?text=${msg}`;
  return (
    <a href={url} target="_blank" rel="noreferrer" className="cgclm-wa">
      <style>{`
        .cgclm-wa {
          position: fixed;
          bottom: 24px; left: 24px;
          z-index: 100;
          display: inline-flex; align-items: center; gap: 12px;
          padding: 14px 20px 14px 14px;
          background: var(--c-green-deep);
          color: var(--c-cream);
          border-radius: 999px;
          text-decoration: none;
          font: 600 14px var(--font-body);
          letter-spacing: 0.01em;
          box-shadow: 0 14px 36px -12px rgba(92, 138, 40, 0.5);
          transition: transform .25s, box-shadow .25s, background .25s;
        }
        .cgclm-wa:hover {
          transform: translateY(-3px);
          background: var(--c-red);
          box-shadow: 0 18px 40px -10px rgba(200, 37, 62, 0.6);
        }
        .cgclm-wa-icon {
          width: 32px; height: 32px;
          background: var(--c-cream);
          border-radius: 50%;
          display: inline-flex; align-items: center; justify-content: center;
          color: var(--c-green-deep);
          transition: color .25s;
        }
        .cgclm-wa:hover .cgclm-wa-icon { color: var(--c-red); }
        .cgclm-wa-text { line-height: 1.1; }
        .cgclm-wa-text small {
          display: block;
          font: 500 10px var(--font-body);
          letter-spacing: 0.06em;
          text-transform: uppercase;
          opacity: 0.85;
        }
        @media (max-width: 600px) {
          .cgclm-wa { bottom: 16px; left: 16px; padding: 12px; }
          .cgclm-wa-text { display: none; }
        }
      `}</style>
      <span className="cgclm-wa-icon">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
          <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3z"/>
          <path d="M20.5 3.5C18.3 1.2 15.2 0 12 0 5.4 0 0 5.4 0 12c0 2.1.6 4.1 1.6 5.9L0 24l6.3-1.6c1.7.9 3.7 1.4 5.7 1.4 6.6 0 12-5.4 12-12 0-3.2-1.2-6.2-3.5-8.3zM12 21.8c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4c-1-1.6-1.5-3.4-1.5-5.3 0-5.5 4.5-9.9 9.9-9.9 2.6 0 5.1 1 7 2.9 1.9 1.9 2.9 4.4 2.9 7 .1 5.5-4.4 9.9-9.9 9.9z"/>
        </svg>
      </span>
      <span className="cgclm-wa-text">
        <small>{t.whatsapp.short}</small>
        {t.whatsapp.label}
      </span>
    </a>
  );
}
window.CWhatsapp = CWhatsapp;