// Sticky bottom CTA — appears after 50% scroll, dismissable per session.
const StickyCTA = () => {
  const { useState, useEffect } = React;
  const [show, setShow] = useState(false);
  const [dismissed, setDismissed] = useState(() => {
    try { return sessionStorage.getItem("reqscan_sticky_dismissed") === "1"; } catch { return false; }
  });

  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement.scrollHeight - window.innerHeight;
      const p = h > 0 ? window.scrollY / h : 0;
      setShow(p > 0.45 && p < 0.92);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const dismiss = () => {
    setDismissed(true);
    try { sessionStorage.setItem("reqscan_sticky_dismissed", "1"); } catch {}
  };

  if (dismissed) return null;

  return (
    <div style={{
      position: "fixed", left: 16, right: 16, bottom: show ? 16 : -120,
      transition: "bottom .35s cubic-bezier(.4,0,.2,1)",
      zIndex: 50, display: "flex", justifyContent: "center", pointerEvents: show ? "auto" : "none",
    }}>
      <div style={{
        background: "var(--ink)", color: "#fff",
        borderRadius: 14, boxShadow: "0 24px 48px rgba(12,20,16,0.28)",
        padding: "12px 12px 12px 22px",
        display: "flex", alignItems: "center", gap: 16,
        maxWidth: 720, width: "100%",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flex: 1, minWidth: 0 }}>
          <span style={{ width: 32, height: 32, borderRadius: 8, background: "rgba(255,255,255,0.08)", display: "grid", placeItems: "center", flexShrink: 0 }}>
            <window.Icons.Upload size={16} stroke={2}/>
          </span>
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.25, minWidth: 0 }}>
            <span style={{ fontSize: 14, fontWeight: 600, letterSpacing: "-0.01em" }}>See Reqscan on your documents.</span>
            <span style={{ fontSize: 12, color: "rgba(255,255,255,0.6)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              30-minute walkthrough with our team. No commitment.
            </span>
          </div>
        </div>
        <a href="contact.html" className="btn arrow" style={{ background: "var(--green)", color: "#fff", flexShrink: 0 }}>
          Request free trial
        </a>
        <button onClick={dismiss} aria-label="Dismiss" style={{
          background: "transparent", border: 0, color: "rgba(255,255,255,0.5)",
          width: 32, height: 32, borderRadius: 8, display: "grid", placeItems: "center", flexShrink: 0,
        }}>
          <window.Icons.X size={14} stroke={2}/>
        </button>
      </div>
    </div>
  );
};

window.StickyCTA = StickyCTA;