// The Hobbies, night shift page in the Wall language
function HobbiesPage() {
  return (
    <div className="wall-root wall-bg-plain tone-b">
      <WallTopbar active="HOBBIES" />

      <section className="wall-page-hero" data-screen-label="Hobbies hero">
        <div className="wall-door-shift">NIGHT SHIFT · OPENING AUGUST</div>
        <h1 className="wall-page-title tone-b">The Hobbies</h1>
        <p className="wall-page-pitch">
          Pull up a chair. Game tables and leagues, paint stations and supplies,
          TCG singles at MVP rates, sealed product at MSRP, cosplay and
          sculpture printing on demand.
        </p>
      </section>

      <section className="wall-sec" id="space" data-screen-label="The space">
        <div className="wall-sec-kicker">THE SPACE</div>
        <h2 className="wall-sec-title">Walk in, sit down, do the thing</h2>
        <p className="wall-sec-sub">
          The hobby side is the back half of the building. We're renovating it now so we can host you safely, with doors opening to guests by August.
        </p>
        <div className="wall-caps">
          <article className="wall-cap">
            <h3 className="wall-cap-name">Play</h3>
            <p className="wall-cap-desc">Game tables and league nights for MTG, 40K, Warmachine, Redemption, and whatever else players bring to the table.</p>
            <div className="wall-cap-tags"><span className="wall-cap-tag">TABLES</span><span className="wall-cap-tag">LEAGUES</span><span className="wall-cap-tag">CASUAL</span></div>
          </article>
          <article className="wall-cap">
            <h3 className="wall-cap-name">Paint</h3>
            <p className="wall-cap-desc">Paint stations, lit benches, supply runs, and paint nights for everyone from new brush to display painter.</p>
            <div className="wall-cap-tags"><span className="wall-cap-tag">STATIONS</span><span className="wall-cap-tag">PAINT NIGHTS</span><span className="wall-cap-tag">SUPPLIES</span></div>
          </article>
          <article className="wall-cap">
            <h3 className="wall-cap-name">Shop</h3>
            <p className="wall-cap-desc">Singles in the case, sealed product on the wall, accessories at the counter. MVPs get MVP rates.</p>
            <div className="wall-cap-tags"><span className="wall-cap-tag">SINGLES</span><span className="wall-cap-tag">SEALED</span><span className="wall-cap-tag">ACCESSORIES</span></div>
          </article>
          <article className="wall-cap">
            <h3 className="wall-cap-name">Print</h3>
            <p className="wall-cap-desc">Cosplay parts, sculpture prints, custom terrain runs. Drop off a file, pick up a print.</p>
            <div className="wall-cap-tags"><span className="wall-cap-tag">COSPLAY</span><span className="wall-cap-tag">SCULPTURE</span><span className="wall-cap-tag">TERRAIN</span></div>
          </article>
        </div>
      </section>

      <section className="wall-sec" id="events" data-screen-label="Events">
        <div className="wall-sec-kicker">EVENTS &amp; LEAGUES</div>
        <h2 className="wall-sec-title">On the calendar</h2>
        <p className="wall-sec-sub">Recurring nights, league sessions, and limited-run events.</p>
        <div className="wall-events">
          <div className="wall-event">
            <div className="wall-event-when">date TBD · studio event</div>
            <div>
              <div className="wall-event-name">MAGIC IN THE PINES</div>
              <p className="wall-event-desc">Our recurring MTG tournament series. Format, prize support, and next date announced through the studio.</p>
            </div>
          </div>
          <div className="wall-event">
            <div className="wall-event-when">Fridays · 6 to 11 PM</div>
            <div>
              <div className="wall-event-name">COMMANDER NIGHT</div>
              <p className="wall-event-desc">Casual EDH pods, all power levels. Drop in, bring a deck, get paired up.</p>
            </div>
          </div>
          <div className="wall-event">
            <div className="wall-event-when">Tuesdays · 6 to 9 PM</div>
            <div>
              <div className="wall-event-name">COMMUNITY PAINT NIGHT</div>
              <p className="wall-event-desc">Open paint night at the bench, all skill levels. Bring a model, we'll bring the lights.</p>
            </div>
          </div>
          <div className="wall-event">
            <div className="wall-event-when">Wed &amp; Sat · from 4 PM</div>
            <div>
              <div className="wall-event-name">MVP GAME NIGHT</div>
              <p className="wall-event-desc">MVPs-only, MVPs' choice. Whatever's getting played, you're on the list.</p>
            </div>
          </div>
          <div className="wall-event">
            <div className="wall-event-when">Saturdays · 8 PM to 2 AM</div>
            <div>
              <div className="wall-event-name">ADULT SWIM</div>
              <p className="wall-event-desc">MVPs-only late shift. 21+, BYOB welcome. Loud games and long stories until last call.</p>
            </div>
          </div>
        </div>
        <div className="wall-strip">
          tournaments and trophies run on community. <a href="Sponsorship Page.html" style={{ color: 'var(--acc-b)' }}><b>see sponsors &amp; partners →</b></a>
        </div>
      </section>

      <section className="wall-sec" id="programs" data-screen-label="Programs">
        <div className="wall-sec-kicker">CLASSES &amp; COMMUNITY · COMING SOON</div>
        <h2 className="wall-sec-title">More than tables</h2>
        <p className="wall-sec-sub">
          Once the doors open, the hobby side runs classes and community programs alongside open
          play. Here's what's coming. Schedule and pricing land with the renovation, targeting August.
        </p>
        <div className="wall-caps">
          <article className="wall-cap">
            <h3 className="wall-cap-name">Workshops</h3>
            <p className="wall-cap-desc">Hands-on classes: painting technique, 3D printing basics, CAD, and terrain building. MVP rates for members.</p>
            <div className="wall-cap-tags"><span className="wall-cap-tag">PAINT</span><span className="wall-cap-tag">PRINT</span><span className="wall-cap-tag">CAD</span></div>
          </article>
          <article className="wall-cap">
            <h3 className="wall-cap-name">STEM &amp; kids</h3>
            <p className="wall-cap-desc">After-school maker sessions, STEM nights, robotics and coding, and beginner painting for younger makers, with supervised group time.</p>
            <div className="wall-cap-tags"><span className="wall-cap-tag">STEM</span><span className="wall-cap-tag">ROBOTICS</span><span className="wall-cap-tag">KIDS</span></div>
          </article>
          <article className="wall-cap">
            <h3 className="wall-cap-name">Book the space</h3>
            <p className="wall-cap-desc">Birthday parties, private paint nights, group events, and the workshop floor for your own session. Reserve the room when booking opens.</p>
            <div className="wall-cap-tags"><span className="wall-cap-tag">PARTIES</span><span className="wall-cap-tag">RENTALS</span><span className="wall-cap-tag">PRIVATE</span></div>
          </article>
          <article className="wall-cap">
            <h3 className="wall-cap-name">Sponsorships</h3>
            <p className="wall-cap-desc">Tournaments and trophies run on community, so we put our bench behind local events. We sponsored Brian Meier's Mayhem in the Pines with trophy and showcase paint, printed hardware, and prize support.</p>
            <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
              <img src="images/print-mayhem-1.jpg" alt="Mayhem in the Pines goblin trophy, back detail" style={{ width: 'calc(33.33% - 6px)', aspectRatio: '1', objectFit: 'cover', border: '1px solid var(--line)' }} />
              <img src="images/print-mayhem-3.jpg" alt="Mayhem in the Pines best painted army trophy" style={{ width: 'calc(33.33% - 6px)', aspectRatio: '1', objectFit: 'cover', border: '1px solid var(--line)' }} />
              <img src="images/print-mayhem-5.jpg" alt="Mayhem in the Pines finished trophy off the bench" style={{ width: 'calc(33.33% - 6px)', aspectRatio: '1', objectFit: 'cover', border: '1px solid var(--line)' }} />
            </div>
            <div className="wall-cap-tags"><span className="wall-cap-tag">TROPHIES</span><span className="wall-cap-tag">PRIZE SUPPORT</span><span className="wall-cap-tag">EVENTS</span></div>
            <p style={{ marginTop: 18, marginBottom: 0, lineHeight: 1.9 }}>
              <a href="Sponsorship Page.html" style={{ color: 'var(--acc-b)', fontFamily: '"Space Mono", monospace', fontSize: 14, letterSpacing: 1 }}><b>EVENTS WE SPONSOR →</b></a><br />
              <a href="https://www.facebook.com/brian.meier.797949" target="_blank" rel="noopener" style={{ color: 'var(--grey)', fontFamily: '"Space Mono", monospace', fontSize: 14, letterSpacing: 1 }}>BRIAN ON FACEBOOK →</a>
            </p>
          </article>
        </div>
      </section>

      <section className="wall-sec" id="arbiter" data-screen-label="Arbiter app">
        <div className="wall-app">
          <div>
            <div className="wall-sec-kicker">REGISTER WITH ARBITER</div>
            <h2 className="wall-sec-title">Your seat is in the app</h2>
            <p className="wall-sec-sub">
              Match tracking, deck lists, league standings, event sign-ups, and
              the MVP singles browser all live in the Arbiter app. Open it on
              your phone, jump in.
            </p>
            <a className="wall-cta-btn tone-b" href="https://app.s3hobbies.com">OPEN ARBITER →</a>
          </div>
          <img src="images/arbiter-ai.webp" alt="Arbiter app, AI rules engine" />
        </div>
      </section>

      <section className="wall-big-cta" id="reserve" data-screen-label="Reserve CTA">
        <div className="wall-sec-kicker">BOOKING OPEN</div>
        <h2 className="wall-sec-title">MVPs get the VIP</h2>
        <p className="wall-sec-sub">
          The MVP membership unlocks MSRP on every sealed product, plus a flat discount
          on every single in the case.
        </p>
        <div className="wall-perks">
          <div className="wall-perk">
            <div className="wall-perk-label">SEALED</div>
            <div className="wall-perk-value">MSRP</div>
            <div className="wall-perk-sub">MVPs at sticker. Boxes, packs, decks.</div>
          </div>
          <div className="wall-perk">
            <div className="wall-perk-label">SINGLES</div>
            <div className="wall-perk-value">MVP rates</div>
            <div className="wall-perk-sub">MVP discount, every card.</div>
          </div>
        </div>
        <div className="wall-tier">
          <div className="wall-tier-name">MVP</div>
          <p className="wall-tier-pitch">Regulars at the tables. MVP rates, priority sign-ups, reserved seating on MVP nights.</p>
          <ul className="wall-tier-list">
            <li>MVP singles discount, every card</li>
            <li>Priority sign-up on events and leagues</li>
            <li>Reserved seat on MVP nights</li>
            <li>Reserved table time during peak nights</li>
            <li>Priority on cosplay and sculpture print orders</li>
          </ul>
          <span className="wall-tier-soon">pricing coming soon</span>
        </div>
      </section>

      <div className="wall-strip">
        <b>student discount:</b> show your school ID at sign-up for a flat discount on the MVP membership
      </div>

      <WallFooter />
    </div>
  );
}
window.HobbiesPage = HobbiesPage;