// BottomBar.jsx — persistent campaign CTA bar, desktop-only with scroll-triggered fade-in
function BottomBar({ raised, onDonate, onDismiss, compact = false, preview = false }) {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    if (preview) { setVisible(true); return; }
    function check() {
      var docH = document.documentElement.scrollHeight - window.innerHeight;
      if (docH > 0 && window.scrollY / docH >= 0.40) setVisible(true);
    }
    window.addEventListener("scroll", check, { passive: true });
    check();
    return () => window.removeEventListener("scroll", check);
  }, [preview]);

  const baseStyle = preview
    ? { ...bb.bar, position: "relative", boxShadow: "var(--lin_shadow-md)", borderRadius: "var(--lin_radius-lg)", borderTop: "none" }
    : {
        ...bb.bar,
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0)" : "translateY(12px)",
        transition: "opacity 0.4s ease, transform 0.4s ease",
        pointerEvents: visible ? "auto" : "none",
      };

  return (
    <div data-component="BottomBar" style={baseStyle}>
      <div style={bb.inner}>
        {compact ? (
          <>
            <div style={bb.compactText}>
              <span style={bb.label}>Summer Heat Campaign</span>
              <span style={bb.sep}>—</span>
              <span style={bb.sub}>Help reach $50,000.</span>
            </div>
            <button onClick={() => openGivebutter()} style={bb.btnPrimary}>Donate</button>
          </>
        ) : (
          <>
            <div style={bb.fullText}>
              <span style={bb.label}>Summer Heat Campaign</span>
              <div style={{ flex: 1, minWidth: 180, maxWidth: "70%", marginLeft: "var(--lin_space-10)" }}>
                <CoolingThermometer raised={raised} goal={50000} compact />
              </div>
            </div>
            <div style={bb.actions}>
              <button onClick={() => openGivebutter()} style={bb.btnPrimary}>Donate</button>
              <button onClick={onDismiss} style={bb.btnDismiss} aria-label="Dismiss">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                  <line x1="1" y1="1" x2="13" y2="13"/><line x1="13" y1="1" x2="1" y2="13"/>
                </svg>
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

const bb = {
  bar: {
    position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 90,
    background: "var(--lin_surface-navy)",
    borderTop: "1px solid var(--lin_navy-700)",
    boxShadow: "0 -4px 24px rgba(13,15,16,0.18)",
  },
  inner: {
    maxWidth: "var(--lin_container-xl)", margin: "0 auto",
    padding: "var(--lin_space-4) var(--lin_space-8)",
    display: "flex", alignItems: "center", justifyContent: "space-between",
    gap: "var(--lin_space-6)",
  },
  fullText: { display: "flex", alignItems: "center", gap: "var(--lin_space-4)", flexWrap: "wrap", flex: 1 },
  compactText: { display: "flex", alignItems: "center", gap: "var(--lin_space-3)", flex: 1 },
  label: { fontSize: "var(--lin_text-sm)", fontWeight: "var(--lin_weight-semibold)", color: "#fff" },
  sep: { color: "var(--lin_navy-600)" },
  sub: { fontSize: "var(--lin_text-sm)", color: "var(--lin_grey-300)" },
  progressPill: { background: "var(--lin_navy-700)", color: "var(--lin_blue-400)", padding: "var(--lin_space-1) var(--lin_space-3)", borderRadius: "var(--lin_radius-full)", fontSize: "var(--lin_text-xs)", fontWeight: "var(--lin_weight-semibold)" },
  tagline: { fontSize: "var(--lin_text-sm)", color: "var(--lin_grey-400)", fontStyle: "italic" },
  actions: { display: "flex", gap: "var(--lin_space-3)", alignItems: "center" },
  btnPrimary: { background: "var(--lin_blue-500)", color: "#fff", border: "none", padding: "var(--lin_space-3) var(--lin_space-6)", borderRadius: "var(--lin_radius-md)", fontSize: "var(--lin_text-sm)", fontWeight: "var(--lin_weight-semibold)", letterSpacing: "var(--lin_tracking-wide)", cursor: "pointer", whiteSpace: "nowrap" },
  btnDismiss: { background: "transparent", border: "none", color: "var(--lin_grey-400)", cursor: "pointer", padding: "var(--lin_space-2)", display: "flex", alignItems: "center" },
};

Object.assign(window, { BottomBar });