/* ============================================================
   <StickyCTA /> — floating "talk to the studio" bar that fades
   in once the user scrolls past the hero. Dismissible.
   ============================================================ */

function StickyCTA({
  threshold = 720,
  href = "index.html#contact",
  label = "Got a project in mind?",
  cta = "Talk to the studio",
}) {
  const [show, setShow] = React.useState(false);
  const [dismissed, setDismissed] = React.useState(() => {
    if (typeof window === "undefined") return false;
    try { return sessionStorage.getItem("sticky-cta:dismissed") === "1"; } catch { return false; }
  });

  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > threshold);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [threshold]);

  const dismiss = () => {
    setDismissed(true);
    try { sessionStorage.setItem("sticky-cta:dismissed", "1"); } catch {}
  };

  if (dismissed) return null;

  return (
    <div
      className={`sticky-cta ${show ? "is-shown" : ""}`}
      role="complementary"
      aria-hidden={!show}
    >
      <span className="sticky-cta__label">{label}</span>
      <a href={href} className="btn btn--primary btn--small sticky-cta__btn">
        {cta} <Arrow />
      </a>
      <button
        type="button"
        className="sticky-cta__close"
        onClick={dismiss}
        aria-label="Dismiss"
        data-cursor="Dismiss"
      >
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
        </svg>
      </button>
    </div>
  );
}

window.StickyCTA = StickyCTA;