// ===== Botão flutuante de WhatsApp · premium =====
// Padrão Apple/Notion: container glass, micro-shadow, expand on hover.

function WhatsAppFab({ phone = "5511987654321", message = "Olá! Vim do site da Pleita e quero saber mais." }) {
  const [open, setOpen]       = React.useState(false);
  const [hover, setHover]     = React.useState(false);
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => {
    const t = setTimeout(() => setMounted(true), 800);
    return () => clearTimeout(t);
  }, []);

  const url = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;

  return (
    <div
      className={`fixed bottom-5 right-5 md:bottom-7 md:right-7 z-50 flex flex-col items-end gap-3 transition-all duration-500 ${
        mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"
      }`}
    >
      {/* Painel — bolha de mensagem premium */}
      <div
        className={`origin-bottom-right transition-all duration-300 ${
          open ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2 pointer-events-none"
        }`}
      >
        <div className="w-[280px] rounded-2xl bg-pleita-paper border border-pleita-line shadow-pl-md overflow-hidden">
          {/* Header com gradiente sutil */}
          <header
            className="px-4 py-3 flex items-center gap-3"
            style={{ background: "linear-gradient(135deg, #075E54 0%, #128C7E 100%)" }}
          >
            <div className="size-10 rounded-full bg-white/15 grid place-items-center backdrop-blur">
              <svg viewBox="0 0 32 32" className="size-5 text-white" fill="currentColor" aria-hidden>
                <path d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.8 6.5L3 29l6.7-1.8c1.9 1 4.1 1.6 6.3 1.6 7.2 0 13-5.8 13-13S23.2 3 16 3zm0 23.6c-2 0-4-.5-5.7-1.5l-.4-.2-4.2 1.1 1.1-4-.3-.4c-1.1-1.8-1.7-3.8-1.7-5.9C4.8 9.8 9.8 4.8 16 4.8s11.2 5 11.2 11.2-5 10.8-11.2 10.8zm6.2-8.1c-.3-.2-2-1-2.3-1.1-.3-.1-.5-.2-.8.2s-.9 1.1-1.1 1.4c-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.3-.2-.3 0-.5.1-.7.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5s-.8-1.9-1-2.6c-.3-.7-.6-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9 0 1.7 1.2 3.3 1.4 3.6.2.2 2.4 3.7 5.9 5.2.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 2-.8 2.3-1.6.3-.8.3-1.5.2-1.6-.1-.1-.3-.2-.6-.4z"/>
              </svg>
            </div>
            <div className="text-white">
              <div className="font-display text-base leading-none">Equipe Pleita</div>
              <div className="pl-num text-[10px] tracking-wider uppercase opacity-80 mt-1 flex items-center gap-1.5">
                <span className="size-1.5 rounded-full bg-pleita-lime animate-pulse" />
                online · respondemos em ~3min
              </div>
            </div>
            <button onClick={() => setOpen(false)} aria-label="Fechar" className="ml-auto size-6 rounded-full hover:bg-white/15 grid place-items-center text-white/80 text-sm">
              ✕
            </button>
          </header>

          {/* Mensagem decorativa estilo WhatsApp */}
          <div className="px-4 py-5" style={{ background: "rgb(229 221 213 / .25)" }}>
            <div className="relative max-w-[230px] rounded-lg rounded-tl-none bg-pleita-paper border border-pleita-line/60 px-3.5 py-2.5 shadow-pl-sm">
              <p className="text-sm text-pleita-ink leading-relaxed">
                Oi! 👋 Quer ajuda pra começar a licitar? <br/>Conversamos por WhatsApp.
              </p>
              <div className="pl-num text-[10px] text-pleita-stone-2 text-right mt-1">agora ✓✓</div>
            </div>
          </div>

          {/* CTA */}
          <a
            href={url}
            target="_blank"
            rel="noopener noreferrer"
            className="block px-4 py-3 border-t border-pleita-line/60 bg-surface-card hover:bg-surface-2 transition-colors"
          >
            <div className="flex items-center justify-between gap-3">
              <div className="min-w-0">
                <div className="text-sm text-pleita-ink font-medium">Iniciar conversa</div>
                <div className="pl-num text-[11px] text-pleita-stone-2">grátis · sem cadastro</div>
              </div>
              <span className="pl-num text-xs px-3 py-1.5 rounded-full font-semibold text-white whitespace-nowrap" style={{ background: "#25D366" }}>
                Abrir →
              </span>
            </div>
          </a>
        </div>
      </div>

      {/* Botão principal */}
      <button
        onClick={() => setOpen((v) => !v)}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        aria-label={open ? "Fechar chat" : "Abrir conversa no WhatsApp"}
        className="group relative flex items-center gap-3 rounded-full px-4 md:px-5 py-3 md:py-3.5 transition-all duration-300 active:scale-95"
        style={{
          background: open ? "#0F1E3A" : "#25D366",
          color: "#fff",
          boxShadow: open
            ? "0 8px 24px -6px rgba(15,30,58,.4), 0 2px 8px -2px rgba(15,30,58,.3)"
            : "0 8px 24px -6px rgba(37,211,102,.55), 0 2px 8px -2px rgba(37,211,102,.4), inset 0 1px 0 rgba(255,255,255,.18)",
        }}
      >
        {/* Anel pulse — só quando fechado e não em hover */}
        {!open && (
          <span
            aria-hidden
            className={`absolute inset-0 rounded-full transition-opacity ${hover ? "opacity-0" : "opacity-100"}`}
            style={{
              boxShadow: "0 0 0 0 #25D366",
              animation: "wa-pulse 2.4s ease-out infinite",
            }}
          />
        )}

        {/* Ícone */}
        <span className="relative size-5 md:size-6 grid place-items-center">
          {open ? (
            <svg viewBox="0 0 24 24" className="size-4 md:size-5" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
              <line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" />
            </svg>
          ) : (
            <svg viewBox="0 0 32 32" fill="currentColor" className="size-5 md:size-6" aria-hidden>
              <path d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.8 6.5L3 29l6.7-1.8c1.9 1 4.1 1.6 6.3 1.6 7.2 0 13-5.8 13-13S23.2 3 16 3zm0 23.6c-2 0-4-.5-5.7-1.5l-.4-.2-4.2 1.1 1.1-4-.3-.4c-1.1-1.8-1.7-3.8-1.7-5.9C4.8 9.8 9.8 4.8 16 4.8s11.2 5 11.2 11.2-5 10.8-11.2 10.8zm6.2-8.1c-.3-.2-2-1-2.3-1.1-.3-.1-.5-.2-.8.2s-.9 1.1-1.1 1.4c-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.3-.2-.3 0-.5.1-.7.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5s-.8-1.9-1-2.6c-.3-.7-.6-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9 0 1.7 1.2 3.3 1.4 3.6.2.2 2.4 3.7 5.9 5.2.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 2-.8 2.3-1.6.3-.8.3-1.5.2-1.6-.1-.1-.3-.2-.6-.4z"/>
            </svg>
          )}
        </span>

        {/* Label expansível em hover */}
        <span
          className={`pl-num text-xs md:text-sm font-semibold tracking-tight whitespace-nowrap transition-all overflow-hidden ${
            hover && !open ? "max-w-[140px] opacity-100" : "max-w-0 opacity-0 md:max-w-0"
          }`}
          style={{ transitionProperty: "max-width, opacity", transitionDuration: "300ms" }}
        >
          Fale com a gente
        </span>

        {/* Badge "1" — notificação não lida */}
        {!open && (
          <span className="absolute -top-1 -right-1 size-5 rounded-full bg-pleita-lime text-pleita-ink pl-num text-[10px] font-bold grid place-items-center border-2 border-white shadow-pl-sm">
            1
          </span>
        )}
      </button>

      <style>{`
        @keyframes wa-pulse {
          0%   { box-shadow: 0 0 0 0   rgba(37,211,102,.55); }
          70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0);   }
          100% { box-shadow: 0 0 0 0   rgba(37,211,102,0);    }
        }
      `}</style>
    </div>
  );
}

window.WhatsAppFab = WhatsAppFab;