/* global React, Page, BOOKING_EMAIL, GENRES */

function About() {
  return (
    <Page current="about">
      <section className="page section" data-screen-label="about">
        <div className="wrap">
          <header className="page-head">
            <div className="eyebrow">File 01 · About</div>
            <h1 className="page-title display">Who is<br/>DJ Woodi?</h1>
            <div className="page-meta mono-tiny">Based · Chicago, IL &nbsp;·&nbsp; Status · Active &nbsp;·&nbsp; Updated · 2026</div>
          </header>

          <div className="about-grid">
            <div className="bio-text">
              <p className="bio-lede">
                Will — known on the decks as <em>DJ Woodi</em> — is a Chicago Southsider and House DJ
                raised on the blog era of hip-hop and the golden era of EDM, with one ear tuned to the
                West Coast rap that raised him and the other to the records his parents spun: '60s–'90s
                Motown, funk, soul, R&B, and hip-hop. He blends all of it into one journey of rhythm
                and groove.
              </p>
              <p>
                The mission is simple: <span className="hl">make people move</span>, whatever it takes. A set
                might thread Miami Bass into late-disco, drop a J. Cole house flip next to a techno edit
                of Lil Uzi, and end up somewhere nobody saw coming. Genre purity is for record stores —
                Woodi plays for the dancefloor.
              </p>
              <p>
                Catch him in rotation across Chicago — opening for and playing alongside Timmy V,
                Vince Lazarus, FourthCo., DJ Bern and Midnight Grooves, holding it down for the locals
                carrying the city's sound forward.
              </p>
            </div>

            <div className="spec-list">
              <div className="spec-row"><span className="spec-k">Operator</span><span className="spec-v">Will (DJ Woodi)</span></div>
              <div className="spec-row"><span className="spec-k">Base</span><span className="spec-v">Chicago, IL</span></div>
              <div className="spec-row"><span className="spec-k">BPM</span><span className="spec-v">110 – 132</span></div>
              <div className="spec-row"><span className="spec-k">Format</span><span className="spec-v">Open · Club · Lounge</span></div>
              <div className="spec-row"><span className="spec-k">Rig</span><span className="spec-v">Pioneer Flex 10 + Vari Club · or USB + venue system</span></div>
              <div className="spec-row"><span className="spec-k">Genres</span><span className="spec-v">{GENRES.map(g => <span key={g} className="chip">{g}</span>)}</span></div>
              <div className="spec-row"><span className="spec-k">Booking</span><span className="spec-v"><a href={`mailto:${BOOKING_EMAIL}`}>{BOOKING_EMAIL}</a></span></div>
            </div>
          </div>

          <PageNav prev={["/", "Home"]} next={["/music", "Music"]} />
        </div>
      </section>
    </Page>
  );
}

function PageNav({ prev, next }) {
  return (
    <div className="page-nav">
      <a href={prev[0]}>← {prev[1]}</a>
      <a href={next[0]}>{next[1]} →</a>
    </div>
  );
}

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