/* global React, Page */

/* Landing — big centered photo, wordmark, and 5 link tiles */
function Landing() {
  return (
    <Page current="home">
      <section className="hero" id="top" data-screen-label="hero">
        <div className="hero-photo">
          <img src="img/press.jpeg" alt="DJ Woodi" />
          <div className="hero-photo-grain" />
        </div>
        <div className="hero-subtitle">Chicago · 2026 · House &amp; Beyond</div>
        <div className="hero-signature">~ the electro steppa ~</div>
      </section>

      {/* Page menu */}
      <section className="landing-menu" data-screen-label="menu">
        <ul className="lm-list">
          <li><a href="/about"><span className="lm-num">01</span><span className="lm-label">About</span><span className="lm-meta">Bio · Genres · Rig</span></a></li>
          <li><a href="/music"><span className="lm-num">02</span><span className="lm-label">Music</span><span className="lm-meta">Mixes · Edits</span></a></li>
          <li><a href="/video"><span className="lm-num">03</span><span className="lm-label">Video</span><span className="lm-meta">In the booth</span></a></li>
          <li><a href="/tour"><span className="lm-num">04</span><span className="lm-label">Tour</span><span className="lm-meta">Upcoming shows</span></a></li>
          <li><a href="/friends"><span className="lm-num">05</span><span className="lm-label">Friends</span><span className="lm-meta">Venues · Bills</span></a></li>
          <li className="lm-cta"><a href="/book"><span className="lm-num">→</span><span className="lm-label">Book</span><span className="lm-meta">Reply within 48h</span></a></li>
        </ul>
      </section>
    </Page>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Landing />);