// Hero.jsx — full-floor hero, centered, matching the real landing:
// mono tag eyebrow → neon/glitch "AUFN PUNKT." wordmark → lead → pill CTAs.
function Hero({ onEnter }) {
  return (
    <header className="lp-hero" id="welt">
      <div className="lp-hero-inner">
        <span className="lp-hero-tag">// Kunst im öffentlichen Raum · Berlin</span>
        <h1 className="lp-hero-title neon glitch" data-text="AUFN PUNKT.">AUFN<br />PUNKT.</h1>
        <p className="lp-hero-lead">
          Wir sind ein Kollektiv. Raves als kollektive, nicht-kommerzielle Kunstform —
          Musik, Visuals, Technologie und Menschen, die's möglich machen. ❤️‍🔥
        </p>
        <div className="lp-hero-cta">
          <a className="lp-cta" onClick={() => onEnter('events')}>▶ Nächste Floors</a>
          <a className="lp-cta ghost" onClick={() => onEnter('gym')}>Ins Gym 🪩</a>
        </div>
        <div className="lp-hero-tags">
          <span className="lp-tag">Downtempo</span><span className="lp-tag">Techno</span>
          <span className="lp-tag">House</span><span className="lp-tag">Disco</span>
          <span className="lp-tag">Proggy</span><span className="lp-tag">Breaks</span>
        </div>
      </div>
    </header>
  );
}
window.Hero = Hero;