/* global React, ReactDOM */ /* ============================================================ FUNNEL — the signature D-01 visual Orbital layout: 5 stages on an arc with curves back to a central "your context" anchor, visualizing the shared-context promise of the product (not a flat pipeline). ============================================================ */ const STAGES = [ { n: "01", name: "Company Intel", verb: "Research", micro: ["Brief the target", "Cards & follow-ups"], soon: false, icon: ( ) }, { n: "02", name: "Resume Review", verb: "Apply", micro: ["Tailor for fit", "Score & rewrite"], soon: false, icon: ( ) }, { n: "03", name: "First Touch", verb: "Connect", micro: ["Reach the team", "Get a reply"], soon: true, icon: ( ) }, { n: "04", name: "Interview Prep", verb: "Prep", micro: ["Practice rounds", "Graded · re-answer"], soon: false, icon: ( ) }, { n: "05", name: "Last Touch", verb: "Close", micro: ["Stay top of mind", "Through to offer"], soon: true, icon: ( ) } ]; /* Compute orbital positions: an arc from ~210° to ~330° (top half), stage 1 left → stage 5 right. Center anchor sits below the arc. */ function arcPos(i, n, radius, cx, cy) { const startDeg = 200; const endDeg = 340; const t = i / (n - 1); const deg = startDeg + t * (endDeg - startDeg); const rad = (deg * Math.PI) / 180; return { x: cx + Math.cos(rad) * radius, y: cy + Math.sin(rad) * radius }; } /* Compute pill positions: evenly spaced HORIZONTALLY across the canvas, with a gentle symmetric arch in Y so the middle pill sits highest. This guarantees uniform spacing and predictable line geometry. */ function pillPos(i, n, W, archTop, archBottom) { // Even horizontal spacing with padding from the edges. const padX = W * 0.10; const t = n === 1 ? 0.5 : i / (n - 1); const x = padX + t * (W - 2 * padX); // Symmetric arch: y = top + (bottom - top) * (1 - cos(theta))/... // simpler: parabolic in (t-0.5) so middle is highest. const arch = 4 * Math.pow(t - 0.5, 2); // 1 at edges, 0 in middle const y = archTop + (archBottom - archTop) * arch; return { x, y }; } function Funnel({ active, hover: hoverProp, onHover, onLeave, onPick }) { // Allow legacy callers (no hover wiring): fall back to local hover state. const [localHover, setLocalHover] = React.useState(null); const hover = hoverProp !== undefined ? hoverProp : localHover; const focus = hover !== null ? hover : active; const handleEnter = (i) => { onHover ? onHover(i) : setLocalHover(i); }; const handleLeaveNode = () => { onLeave ? onLeave() : setLocalHover(null); }; const W = 1100, H = 560; const CX = W / 2; const ANCHOR_Y = 410; // y of the anchor center const ANCHOR_R = 94; // anchor circle radius (was 78, +20%) const ARCH_TOP = 130; // y of the middle (highest) pill const ARCH_BOTTOM = 230; // y of the outer pills return (

{/* Stage nodes as HTML overlay for crisp typography + a11y */}

{STAGES.map((s, i) => { const p = pillPos(i, STAGES.length, W, ARCH_TOP, ARCH_BOTTOM); const left = (p.x / W) * 100; const top = (p.y / H) * 100; const isActive = focus === i; return ( ); })}

{/* Verb caption row, mapped 1:1 to stages */}

); } /* Mount on the element with id=funnel-root */ const AUTO_INTERVAL_MS = 5000; (function mountFunnel() { const el = document.getElementById("funnel-root"); if (!el) return; const root = ReactDOM.createRoot(el); function App() { const [active, setActive] = React.useState(0); const [hover, setHover] = React.useState(null); const focus = hover !== null ? hover : active; // Auto-cycle through stages; pause on hover. React.useEffect(() => { if (hover !== null) return; // paused const id = setTimeout(() => { setActive((prev) => (prev + 1) % STAGES.length); }, AUTO_INTERVAL_MS); return () => clearTimeout(id); }, [active, hover]); // When the user stops hovering, resume cycling from the pill they were on. const handleHover = React.useCallback((i) => setHover(i), []); const handleLeave = React.useCallback(() => { setHover((h) => { if (h !== null) setActive(h); // restart from where we paused return null; }); }, []); // Allow click-to-pin: clicking a pill snaps active there and clears hover. const handlePick = React.useCallback((i) => { setHover(null); setActive(i); }, []); return ( ); } root.render(); })();