Contextual CTA

1"use client"
2 
3import { ArrowRight, X } from "lucide-react"
4import Link from "next/link"
5import { usePathname } from "next/navigation"
6import { useEffect, useState } from "react"
7 
8/**
9 * Edit CONTENT to change the sticky scroll CTA copy and thresholds.
10 * Simplified vs the docs package demo (no analytics experiment wiring).
11 */
12const CONTENT = {
13  stamp: "Free intro",
14  headline: "Ready to ship?",
15  body: "Book a 15-min intro - no pitch deck.",
16  cta: "Book a call",
17  href: "/contact#book",
18  hideOn: ["/contact"],
19  showAtPct: 28,
20  hideAtPct: 94,
21  dismissKey: "atroui_cta_dismissed",
22}
23 
24export type ContextualCtaProps = {
25  /** Docs / demos: skip scroll gating and render inline. */
26  preview?: boolean
27}
28 
29export function ContextualCta({ preview = false }: ContextualCtaProps) {
30  const pathname = usePathname()
31  const [visible, setVisible] = useState(preview)
32  const [dismissed, setDismissed] = useState(false)
33  const [ready, setReady] = useState(preview)
34 
35  useEffect(() => {
36    if (preview) return
37    try {
38      if (sessionStorage.getItem(CONTENT.dismissKey) === "1") {
39        setDismissed(true)
40      }
41    } catch {
42      /* ignore */
43    }
44    setReady(true)
45  }, [preview])
46 
47  useEffect(() => {
48    if (preview || !ready || dismissed) return
49 
50    const onScroll = () => {
51      const denom =
52        document.documentElement.scrollHeight - window.innerHeight
53      if (denom <= 0) {
54        setVisible(false)
55        return
56      }
57      const pct = (window.scrollY / denom) * 100
58      setVisible(pct >= CONTENT.showAtPct && pct < CONTENT.hideAtPct)
59    }
60 
61    onScroll()
62    window.addEventListener("scroll", onScroll, { passive: true })
63    return () => window.removeEventListener("scroll", onScroll)
64  }, [dismissed, ready, pathname, preview])
65 
66  const onHiddenPath =
67    !preview &&
68    CONTENT.hideOn.some(
69      (p) => pathname === p || pathname.startsWith(`${p}/`),
70    )
71 
72  if (!ready || dismissed || !visible || onHiddenPath) return null
73 
74  const dismiss = () => {
75    setDismissed(true)
76    if (preview) return
77    try {
78      sessionStorage.setItem(CONTENT.dismissKey, "1")
79    } catch {
80      /* ignore */
81    }
82  }
83 
84  return (
85    <div
86      className={
87        preview
88          ? "relative w-full pb-3"
89          : "fixed inset-x-0 bottom-0 z-40 pb-[max(0.75rem,env(safe-area-inset-bottom))]"
90      }
91      role="complementary"
92      aria-label="Suggested action"
93    >
94// … truncated