function Work(){
  const { go } = useRoute();

  return (
    <>
      <Marquee items={MARQUEE_ITEMS} />

      <section className="container work">
        <div className="work-head">
          <span className="eyebrow">§ Work · <span style={{color:'var(--accent)'}}>♥</span></span>
          <h1>Past <em>parties.</em></h1>
          <p>A look back at what we&rsquo;ve thrown — <AceSig />.</p>
        </div>

        {/* TACOS N' TEQUILA */}
        <article className="work-item">
          <div className="work-flyer">
            <img src="assets/tacos-flyer.jpeg" alt="tacos n' tequila by ace flyer" />
          </div>
          <div className="work-body">
            <span className="eyebrow" style={{color:'var(--accent)'}}>♥ Cinco de Mayo · 2026</span>
            <h2>tacos n&rsquo; tequila <span className="muted">by ace</span></h2>
            <p className="work-recap">
              A sold-out Cinco de Mayo dinner in Frisco — three courses, a tequila pour
              for every guest, and <em>dj pauly p</em> running the room till close. The one
              that set the tone for the year.
            </p>
            <div className="work-meta">
              <div className="wm">
                <div className="wm-lbl">Venue</div>
                <div className="wm-val">Twelve Cowboys Way<br/>Frisco, Texas</div>
              </div>
              <div className="wm">
                <div className="wm-lbl">Lineup</div>
                <div className="wm-val">dj pauly p</div>
              </div>
              <div className="wm">
                <div className="wm-lbl">Format</div>
                <div className="wm-val">Dinner + three drinks<br/>$50 / person</div>
              </div>
              <div className="wm">
                <div className="wm-lbl">Turnout</div>
                <div className="wm-val">Full house · sold out</div>
              </div>
            </div>
          </div>
        </article>

        {/* JADACHELLA */}
        <article className="work-item">
          <div className="work-flyer">
            <img src="assets/jadachella.gif" alt="jadachella by ace animated recap" loading="lazy" />
          </div>
          <div className="work-body">
            <span className="eyebrow" style={{color:'var(--accent)'}}>♠ May 30 · 2026</span>
            <h2>jadachella <span className="muted">by ace</span></h2>
            <p className="work-recap">
              A festival-day takeover — Coachella energy brought home for one night only.
              Roll the <em>reel.</em>
            </p>
            <div className="work-meta">
              <div className="wm">
                <div className="wm-lbl">When</div>
                <div className="wm-val">May 30 · 2026</div>
              </div>
              <div className="wm">
                <div className="wm-lbl">Format</div>
                <div className="wm-val">Festival pop-up</div>
              </div>
              <div className="wm">
                <div className="wm-lbl">Venue</div>
                <div className="wm-val">Details soon</div>
              </div>
              <div className="wm">
                <div className="wm-lbl">Recap</div>
                <div className="wm-val">Loop ↑</div>
              </div>
            </div>
          </div>
        </article>

        <div className="work-foot">
          <span className="eyebrow">Want this energy at your thing?</span>
          <a href="#inquiry" className="cta-link" onClick={(e)=>{e.preventDefault(); go('inquiry');}}>Start an inquiry <span className="arw">→</span></a>
        </div>
      </section>

      <Marquee alt items={MARQUEE_ITEMS} />
    </>
  );
}
window.Work = Work;