// ============================================================
// VIDEO LESSONS. Longer-form trading tutorials, shown as a
// featured 16:9 player below The Playbook on the homepage.
//
// FIXED list. To add a lesson, add an entry here (id + titleKey)
// and a matching title string in i18n.jsx for each language.
// The first entry is rendered as the featured video.
// ============================================================
const VIDEO_LESSONS = [
{ id: 'df_n58z792M', titleKey: 'lessons.v1.title' },
{ id: 'FfSCmJfY6wo', titleKey: 'lessons.v2.title' },
{ id: 'wQW9BpU8r-I', titleKey: 'lessons.v3.title' },
{ id: 'w30UGwRiofI', titleKey: 'lessons.v4.title' },
];
const VideoLesson = ({ id, title }) => {
const [playing, setPlaying] = React.useState(false);
return (
{playing ? (
) : (
)}
{title}
);
};
const VideoLessons = () => {
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 the videos overflow the
// available width (i.e. they can't all sit side by side).
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 (VIDEO_LESSONS.length === 0) return null;
return (