// Leonard's Farm full-screen article reader for the learning center. // Opens over the page when a guide's "Read more" is clicked. Preserves site // styling, tokens and gentle motion; scroll-locks the page while open. const LFReaderBtn = Button; const LFReaderCard = ArticleCard; function ArticleReader({ guide, onClose, onNavigate }) { const [visible, setVisible] = React.useState(false); const scrollRef = React.useRef(null); // Entrance animation React.useEffect(() => { const id = requestAnimationFrame(() => setVisible(true)); return () => cancelAnimationFrame(id); }, []); // Lock page scroll while the reader is open React.useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; }, []); // Escape closes; reset scroll to top when switching guides React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') requestClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = 0; }, [guide.slug]); const requestClose = () => { setVisible(false); setTimeout(onClose, 320); }; const relatedGuides = (guide.related || []) .map((s) => window.LF_GUIDES.find((g) => g.slug === s)) .filter(Boolean); return (

{guide.title}

{sec.heading}