function Events() { const sectionRef = React.useRef(null); const [visible, setVisible] = React.useState(false); const [data, setData] = React.useState(null); // Load events from data/events.json — edit that file to update events React.useEffect(() => { fetch('./data/events.json') .then(r => r.json()) .then(setData) .catch(console.error); }, []); React.useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } }, { threshold: 0.08 } ); if (sectionRef.current) observer.observe(sectionRef.current); return () => observer.disconnect(); }, [data]); // re-observe when data loads so the ref points to the real section if (!data) return
; const { featured, upcoming } = data; return ( <>
{/* Header */}

What's On

Every night,
a new show.

{/* Featured event */}

{featured.tag}

{featured.title}

{featured.artist}

{featured.desc}

Reserve a Table
{/* Upcoming cards */}
{upcoming.map((ev, i) => (
{ev.title}
{ev.title} {ev.artist} {ev.tag}
))}
); }