/* global React, ReactDOM, Page, GIGS */

function Tour() {
  return (
    <Page current="tour">
      <section className="page section tour" data-screen-label="tour">
        <div className="wrap">
          <header className="page-head tour-page-head">
            <div className="eyebrow">File 04 · Tour</div>
            <h1 className="tour-title display">DJ WOODI</h1>
            <div className="tour-sub">Chicago &amp; Beyond · 2026</div>
          </header>

          <ul className="tour-list">
            {GIGS.map((g, i) => (
              <li className="tour-row" key={i}>
                <span className="tr-date">{g.date}</span>
                <span className="tr-city">{g.city}</span>
                <span className="tr-venue">{g.venue}</span>
                <span className="tr-status">
                  {g.status === "sold-out" && <span className="pill">SOLD OUT</span>}
                  {g.status === "on-sale"  && <a href="/book" className="pill tickets">Tickets</a>}
                  {g.status === "tba"      && <span className="pill tba">TBA</span>}
                </span>
              </li>
            ))}
          </ul>

          <div className="tour-cta">
            <p>Want DJ Woodi at your spot?</p>
            <a href="/book" className="btn">Book a date</a>
          </div>

          <div className="page-nav">
            <a href="/video">← Video</a>
            <a href="/friends">Friends →</a>
          </div>
        </div>
      </section>
    </Page>
  );
}

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