/* ============================================================
carousel.jsx — Hero carousel + Testimonial marquee
============================================================ */
const { useState, useEffect, useRef, useCallback } = React;
const PRM = () => typeof window.matchMedia === "function" &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ---------- HERO CAROUSEL ---------- */
const HERO_SLIDES = [
{
n: "01", kicker: "TECHNICAL ANALYSIS",
h1: "We map the markets, you make money.",
h1Bold: "We map the markets,",
h1Soft: " you make money.",
body: "20 charts daily. Bullish setups, key levels and real-time buy alerts with our full reasoning behind every one. The market at your fingertips.",
anchor: "#technical-analysis",
pageHref: "/technical-analysis",
ctaLabel: "Explore Technical Analysis",
visual: "spot",
aspect: "5 / 3",
},
{
n: "02", kicker: "FUNDAMENTAL ANALYSIS",
h1: "All You Need to Know About Your Stock.",
h1Bold: "All You Need to Know",
h1Soft: " About Your Stock.",
body: "Deep Dives, Equity Briefs and Valuation Analysis; written, dated and stood by. Full theses with financials, recommended position sizing, risks, catalysts and explicit price targets.",
anchor: "#fundamental-analysis",
pageHref: "/fundamental-analysis",
ctaLabel: "Explore Fundamental Analysis",
visual: "fundamentals",
aspect: "5 / 4",
},
{
n: "03", kicker: "RESEARCH",
h1: "We track the smart money.",
h1Bold: "We track",
h1Soft: " the smart money.",
body: "Quarterly tracking of what the world’s super‑investors are buying, selling and holding. Druckenmiller, Buffett, Marks, Klarman and many more. Their positions, conviction trades and where capital is concentrating.",
anchor: "#research",
pageHref: "/research",
ctaLabel: "Research",
visual: "money-flow",
aspect: "16 / 9",
},
{
n: "04", kicker: "COMMUNITY",
h1: "The 24/7 desk you can talk to.",
h1Bold: "The 24/7 desk",
h1Soft: " you can talk to.",
body: "A live, always-on community of retail investors and a team of professionals who actually respond. The real value isn't only the research; it's a room of investors all pushing to improve and reach their goals together.",
anchor: "#community",
pageHref: "/community",
ctaLabel: "Explore Community",
visual: "chat",
},
{
n: "05", kicker: "EDUCATION",
h1: "Don't just follow signals. Learn the framework.",
h1Bold: "Don't just follow signals.",
h1Soft: " Learn the framework.",
body: "The Elliott Wave course, the Learning Centre, video tutorials and our growing Lessons collection. Our goal isn't to hand you signals, it's to teach you to do what we do.",
anchor: "#education",
pageHref: "/education",
ctaLabel: "Explore Education",
visual: "course",
},
];
/* ---------- Fanned stack of fundamental docs ---------- */
function FundamentalStack() {
// Single composed image — Deep Dive ($NVO) and Equity Brief ($NFLX) on the
// left, Valuation ($SOFI) and an explicit Buy ($SOFI summary) on the right,
// fanned like a held hand of cards. The PNG has transparency between docs
// so a drop-shadow filter applies to EACH document, not the whole frame.
return (
);
}
window.FundamentalStack = FundamentalStack;
function HeroVisual({ kind }) {
if (kind === "spot") return (
);
if (kind === "fundamentals") return ;
if (kind === "money-flow") return (
);
if (kind === "chat") return (
);
if (kind === "course") return
;
return null;
}
function HeroCarousel() {
const [idx, setIdx] = useState(0);
const [paused, setPaused] = useState(false);
const [atTop, setAtTop] = useState(true);
const lastActiveRef = useRef(Date.now());
const bgVideoRef = useRef(null);
const ADVANCE_MS = 6000;
const reduced = PRM();
useEffect(() => {
const v = bgVideoRef.current;
if (!v) return;
v.playbackRate = 0.7;
const onEnded = () => { v.currentTime = 0; v.play().catch(() => {}); };
v.addEventListener("ended", onEnded);
return () => v.removeEventListener("ended", onEnded);
}, []);
// Only auto-advance while the hero is actually framed at the top of the
// page. The moment the user scrolls away, freeze the carousel — otherwise
// swapping to a slide of a different height reflows the page and yanks the
// viewport under the reader. (This was the "screen jumps on slide change".)
useEffect(() => {
const onScroll = () => setAtTop(window.scrollY < 80);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const frozen = paused || !atTop;
// Auto-advance
useEffect(() => {
if (frozen || reduced) return;
const id = setInterval(() => {
setIdx(i => (i + 1) % HERO_SLIDES.length);
}, ADVANCE_MS);
return () => clearInterval(id);
}, [frozen, reduced]);
// Resume after 8s of inactivity
const interact = (next) => {
lastActiveRef.current = Date.now();
setPaused(true);
setIdx(next);
};
useEffect(() => {
if (!paused) return;
const id = setInterval(() => {
if (Date.now() - lastActiveRef.current > 8000) setPaused(false);
}, 500);
return () => clearInterval(id);
}, [paused]);
const slide = HERO_SLIDES[idx];
return (
setPaused(true)}
onMouseLeave={() => { lastActiveRef.current = Date.now(); }}
onFocus={() => setPaused(true)}
style={{
position: "relative",
paddingTop: "calc(72px + 24px)",
paddingBottom: 32,
background:
"radial-gradient(120% 80% at 15% 0%, rgba(235,207,0,0.04) 0%, transparent 55%), #000",
minHeight: "calc(100vh - 90px)",
display: "flex",
alignItems: "center",
overflow: "hidden",
}}
>
);
if (kind === "fundamentals") return 
);
if (kind === "chat") return (