// ============================================================
// THE PLAYBOOK. Reference pages from /content, presented like
// the Journal: a row of cards that scroll as a carousel.
//
// FIXED list. To add a page, drop the HTML in /content and add
// an entry here (href + title + desc + thumb).
// ============================================================
// Per-page thumbnails. Small inline SVGs of a representative pattern
// from the destination page. Colors mirror the SVG palette on those
// pages: bullish green #4BDE80; continuation muted via --fg-muted.
const ThumbThreeWhiteSoldiers = () => {
const g = '#4BDE80';
return (
);
};
const ThumbFlagLoose = () => {
const c = 'var(--fg-muted)';
const guide = 'var(--fg-dim)';
return (
);
};
const ThumbLingo = () => {
const gold = 'var(--gold-400)';
const muted = 'var(--fg-dim)';
return (
);
};
const CONTENT_ITEMS = [
{
href: '/content/candlesticks.html',
title: 'Candlestick patterns',
desc: 'A visual reference to the candlestick patterns traders watch for, what each one looks like and what it typically signals.',
thumb: ,
},
{
href: '/content/chart-patterns.html',
title: 'Chart patterns',
desc: 'A visual reference to the chart patterns traders watch for, what each one looks like and what it typically signals.',
thumb: ,
},
{
href: '/content/lingo.html',
title: 'Trading lingo',
desc: 'An essential glossary of MNQ futures and day-trading terms, from rollover and margin to order flow, VWAP, and risk.',
thumb: ,
},
];
const Content = () => {
const { t } = useI18n();
const scrollerRef = React.useRef(null);
const [arrows, setArrows] = React.useState({ left: false, right: false });
// Track scroll position to enable/disable the carousel arrows. The
// carousel is manual; arrows only appear when there's something to
// scroll to in that direction.
React.useEffect(() => {
const el = scrollerRef.current;
if (!el) return;
const update = () => {
const overflow = el.scrollWidth > el.clientWidth + 1;
setArrows({
left: overflow && el.scrollLeft > 4,
right: overflow && el.scrollLeft + el.clientWidth < el.scrollWidth - 4,
});
};
update();
el.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', update);
return () => {
el.removeEventListener('scroll', update);
window.removeEventListener('resize', update);
};
}, []);
const scrollByOne = (dir) => {
const el = scrollerRef.current;
if (!el) return;
const item = el.querySelector('.blog-item');
const step = item ? item.getBoundingClientRect().width + 32 : el.clientWidth * 0.4;
el.scrollBy({ left: dir * step, behavior: 'smooth' });
};
if (CONTENT_ITEMS.length === 0) return null;
return (