// app.jsx — landing world site composition.
function LandingApp() {
  const [active, setActive] = React.useState('welt');
  const go = (id) => {
    setActive(id);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 56, behavior: 'smooth' });
  };
  return (
    <div className="lp-root">
      <SpiralCanvas />
      <Nav active={active} onNav={go} />
      <main>
        <Hero onEnter={go} />
        <Events />
        <Teaser id="studio" accent="cyan" glyph="🎚️"
          eyebrow="// das studio"
          title="Bau dir einen Beat 🥁"
          body="Ein begehbarer Step-Sequencer im Browser — freaky Instrumente, Scope, live. Self-hosted, kein Fremddienst. Das ist unser Klang-Spielplatz."
          cta="▶ Studio öffnen" onGo={() => go('studio')} />
        <Teaser id="gym" accent="magenta" glyph="🪩"
          eyebrow="// das besetzte gym"
          title="Komm rein, der Hausflur ist offen"
          body="Ein begehbarer 3D-Raum — Gather.town trifft Squat-Rave. Passwortgeschützte Räume, Instrumente im Raum, Voice als 7. Instrument. Wir treffen uns hier."
          cta="Ins Gym 🌀" onGo={() => go('gym')} />
        <Kollektiv />
      </main>
      <Footer />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<LandingApp />);