const MARQUEE_ITEMS = [
  'BEAT BATTLE #7 · APR 24',
  'OPEN DECKS · MAY 2',
  'SYNTH MEET · MAY 9',
  'SPRING SHOWCASE · MAY 16',
  'THURSDAYS 7PM · RM 2540',
  'STUDIO B-207 · BOOKINGS BACK SOON',
  'NO AUDITION · ALL GENRES',
];

function App() {
  const joinRef = React.useRef(null);
  const goJoin = () => document.getElementById('join')?.scrollIntoView?.({ behavior: 'smooth' });
  // Avoid scrollIntoView per system guidance — use manual scroll instead.
  const goJoinSafe = () => {
    const el = document.getElementById('join');
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 20;
    window.scrollTo({ top, behavior: 'smooth' });
  };

  return (
    <>
      <Nav onJoin={goJoinSafe} />
      <Hero />
      <Marquee items={MARQUEE_ITEMS} />
      <About />
      <Events />
      <Gallery />
      <Spotlights />
      <Studio />
      <Watch />
      <Blog />
      <Footer />
      <Tweaks />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);