// WhatsAppButton — floating contact launcher with a small prompt bubble.
const BP_WA_NUMBER = "12064460449";
const BP_WA_TEXT = "Hi Blad,";
if (!document.getElementById("bp-wa-css")) {
  const s = document.createElement("style");
  s.id = "bp-wa-css";
  s.textContent = ".bp-wa-dot{position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:99px;background:#e5342b;border:2.5px solid var(--surface-page,#fff)}";
  document.head.appendChild(s);
}

function WhatsAppButton() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setOpen(true), 1400);
    return () => clearTimeout(t);
  }, []);
  const dismiss = () => setOpen(false);
  const href = "https://wa.me/" + BP_WA_NUMBER + "?text=" + encodeURIComponent(BP_WA_TEXT);
  return (
    <div className="bp-wa" style={{ position: "fixed", right: 22, bottom: 22, zIndex: 90, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 12 }}>
      {open && (
        <div className="bp-wa-bubble" style={{ position: "relative", maxWidth: 268, background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", boxShadow: "0 18px 44px -20px rgba(4,10,18,.35)", padding: "18px 20px 20px", paddingRight: 46 }}>
          <button onClick={dismiss} aria-label="Close" style={{ position: "absolute", top: 2, right: 2, width: 44, height: 44, display: "grid", placeItems: "center", background: "none", border: "none", cursor: "pointer", fontSize: 20, lineHeight: 1, color: "var(--text-muted)", padding: 0 }}>×</button>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".04em", fontSize: 15, color: "var(--text-strong)", marginBottom: 4 }}>Questions?</div>
          <p style={{ margin: "0 0 14px", fontSize: 14.5, lineHeight: 1.55, color: "var(--text-body)" }}>Message us on booking a fishing charter or ask questions. Captain Blad will get back to you.</p>
          <a href={href} target="_blank" rel="noopener noreferrer" onClick={dismiss} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 13.5, textTransform: "uppercase", letterSpacing: ".06em", textDecoration: "none", color: "#fff", background: "#25d366", padding: "13px 18px", borderRadius: "var(--radius-md)" }}>Start Chat</a>
        </div>
      )}
      <a href={href} target="_blank" rel="noopener noreferrer" aria-label="Message Blue Phoenix on WhatsApp" onClick={dismiss} style={{ position: "relative", width: 58, height: 58, borderRadius: 99, background: "#25d366", display: "grid", placeItems: "center", boxShadow: "0 10px 26px -8px rgba(37,211,102,.6)", textDecoration: "none" }}>
        <span className="bp-wa-dot" aria-hidden="true"></span>
        <svg width="31" height="31" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><path d="M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07-.3-.15-1.13-.42-2.15-1.33-.8-.71-1.34-1.59-1.49-1.89-.15-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.01-1.04 2.47 0 1.46 1.06 2.87 1.21 3.07.15.2 2.09 3.2 5.07 4.37.71.31 1.26.49 1.69.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.42-.07-.12-.27-.2-.57-.35zM12.04 21.5h-.01a9.4 9.4 0 0 1-4.79-1.31l-.34-.2-3.56.93.95-3.47-.22-.36a9.38 9.38 0 0 1-1.44-5.01c0-5.19 4.23-9.41 9.42-9.41 2.52 0 4.88.98 6.66 2.76a9.34 9.34 0 0 1 2.76 6.66c0 5.19-4.23 9.41-9.39 9.41zm8-17.41A11.35 11.35 0 0 0 12.04.75C5.8.75.73 5.82.73 12.06c0 1.99.52 3.94 1.51 5.66L.62 23.25l5.67-1.49a11.3 11.3 0 0 0 5.75 1.55h.01c6.23 0 11.3-5.07 11.31-11.31 0-3.02-1.18-5.86-3.32-8z"/></svg>
      </a>
    </div>
  );
}
window.WhatsAppButton = WhatsAppButton;