// The Studio, day shift page in the Wall language
function StudioPage() {
  return (
    <div className="wall-root wall-bg-plain tone-a">
      <WallTopbar active="STUDIO" />

      <section className="wall-page-hero" data-screen-label="Studio hero">
        <div className="wall-door-shift">DAY SHIFT · BY APPOINTMENT</div>
        <h1 className="wall-page-title tone-a">The Studio</h1>
        <p className="wall-page-pitch">
          We design, print, paint and build. Resin and filament prints,
          miniatures on the bench, original product and prop work, custom
          software when the project calls for it.
        </p>
      </section>

      <section className="wall-sec" id="capabilities" data-screen-label="Capabilities">
        <div className="wall-sec-kicker">WHAT WE MAKE</div>
        <h2 className="wall-sec-title">The four trades</h2>
        <p className="wall-sec-sub">
          Every project starts as a conversation. From there it becomes a print,
          a paint job, a design file, a piece of software, or all four.
        </p>
        <div className="wall-caps">
          <a href="3D Printing Page.html" style={{ textDecoration: 'none' }}><article className="wall-cap" style={{ height: '100%' }}>
            <h3 className="wall-cap-name">3D Printing</h3>
            <p className="wall-cap-desc">Filament and resin prints, one-off props, terrain runs, production batches off the print farm.</p>
            <div className="wall-cap-tags"><span className="wall-cap-tag">FDM</span><span className="wall-cap-tag">RESIN</span><span className="wall-cap-tag">BATCH</span></div>
          </article></a>
          <a href="Design Page.html" style={{ textDecoration: 'none' }}><article className="wall-cap" style={{ height: '100%' }}>
            <h3 className="wall-cap-name">Design</h3>
            <p className="wall-cap-desc">CAD, product design, mechanical assemblies, original sculpts. Sketch to printable file.</p>
            <div className="wall-cap-tags"><span className="wall-cap-tag">CAD</span><span className="wall-cap-tag">PRODUCT</span><span className="wall-cap-tag">SCULPT</span></div>
          </article></a>
          <a href="Painting Page.html" style={{ textDecoration: 'none' }}><article className="wall-cap" style={{ height: '100%' }}>
            <h3 className="wall-cap-name">Painting</h3>
            <p className="wall-cap-desc">Tabletop minis, display pieces, commissioned paint jobs at table-ready or showcase finish.</p>
            <div className="wall-cap-tags"><span className="wall-cap-tag">TABLETOP</span><span className="wall-cap-tag">DISPLAY</span><span className="wall-cap-tag">COMMISSION</span></div>
          </article></a>
          <a href="Software Page.html" style={{ textDecoration: 'none' }}><article className="wall-cap" style={{ height: '100%' }}>
            <h3 className="wall-cap-name">Software</h3>
            <p className="wall-cap-desc">Python and Java, Discord bots, internal tools, AI-assisted services. Deployed and maintained.</p>
            <div className="wall-cap-tags"><span className="wall-cap-tag">PYTHON</span><span className="wall-cap-tag">JAVA</span><span className="wall-cap-tag">AI</span></div>
          </article></a>
        </div>
      </section>

      <section className="wall-sec" id="work" data-screen-label="Recent work">
        <div className="wall-sec-kicker">RECENT WORK</div>
        <h2 className="wall-sec-title">Things we've made</h2>
        <p className="wall-sec-sub">A few projects out of the studio recently. Full gallery coming soon.</p>
        <div className="wall-pieces">
          <figure className="wall-polaroid" style={{ transform: 'rotate(-1.8deg)', margin: 0 }}>
            <span className="wall-piece-cat">3D PRINTING</span>
            <img src="images/event-flyer.jpg" alt="Mayhem in the Pines event print run" style={{ height: 240 }} />
            <figcaption>Mayhem in the Pines</figcaption>
            <div className="wall-piece-desc">Event terrain, promo prints and table accessories for Mayhem in the Pines.</div>
          </figure>
          <figure className="wall-polaroid" style={{ transform: 'rotate(1.2deg)', margin: 0 }}>
            <span className="wall-piece-cat">DESIGN</span>
            <div className="wall-piece-img-box"><img src="images/design-cartridge-exploded.png" alt="Modular needle cartridge exploded view" /></div>
            <figcaption>Modular Needle Cartridge</figcaption>
            <div className="wall-piece-desc">Tattoo equipment redesign. Modular swap-in cartridge, CAD and printable prototyping run.</div>
          </figure>
          <figure className="wall-polaroid" style={{ transform: 'rotate(-1deg)', margin: 0 }}>
            <span className="wall-piece-cat">PRODUCT</span>
            <div className="wall-piece-img-box" style={{ background: '#f5e642' }}><img src="images/design-inkcup-hero.png" alt="Texas ink cup product render" /></div>
            <figcaption>Texas Ink Cup</figcaption>
            <div className="wall-piece-desc">Branded ink cup for the tattoo industry, design through printable production.</div>
          </figure>
          <figure className="wall-polaroid" style={{ transform: 'rotate(1.6deg)', margin: 0 }}>
            <span className="wall-piece-cat">SOFTWARE</span>
            <img src="images/arbiter-ai.webp" alt="Arbiter AI rules engine" style={{ height: 240 }} />
            <figcaption>Arbiter</figcaption>
            <div className="wall-piece-desc">AI-assisted rules engine for tabletop games. Multi-game, hosted, in daily use.</div>
          </figure>
        </div>
      </section>

      <section className="wall-sec" id="process" data-screen-label="Process">
        <div className="wall-sec-kicker">HOW IT WORKS</div>
        <h2 className="wall-sec-title">From idea to delivery</h2>
        <p className="wall-sec-sub">Three steps. Same shape whether it's a single resin print or a multi-month build.</p>
        <div className="wall-steps">
          <div className="wall-step">
            <div className="wall-step-num">1</div>
            <div className="wall-step-name">Inquiry</div>
            <p className="wall-step-desc">Tell us what you're after. Reference images, dimensions, deadlines. The rougher the better, we sharpen it together.</p>
          </div>
          <div className="wall-step">
            <div className="wall-step-num">2</div>
            <div className="wall-step-name">Quote</div>
            <p className="wall-step-desc">We scope, price, and lock a timeline. Clear scope up front, deposit holds your slot in the queue.</p>
          </div>
          <div className="wall-step">
            <div className="wall-step-num">3</div>
            <div className="wall-step-name">Build</div>
            <p className="wall-step-desc">We design, print, paint, code. Progress shots along the way. Arranged pickup or shipped.</p>
          </div>
        </div>
      </section>

      <section className="wall-big-cta" id="consult" data-screen-label="Consultation CTA">
        <div className="wall-sec-kicker">BOOKING OPEN</div>
        <h2 className="wall-sec-title">Schedule a consultation</h2>
        <p className="wall-sec-sub">
          Pick a time that works for you. We'll walk through your project,
          align on scope, and lock a timeline before any work starts.
        </p>
        <a className="wall-cta-btn tone-a" href="https://cal.com/southsidestudio/30min">FIND A TIME →</a>
      </section>

      <div className="wall-strip">
        <b>student + educator discount:</b> show your school ID at booking for a flat discount on commission work
      </div>

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