// Software service page in the Wall language
function SoftwarePage() {
  return (
    <div className="wall-root wall-bg-plain tone-a">
      <WallTopbar active="STUDIO" />

      <section className="wall-page-hero" data-screen-label="Software hero">
        <div className="wall-door-shift">STUDIO SERVICE · SOFTWARE</div>
        <h1 className="wall-page-title tone-a">Built in-house. Shipped to real players.</h1>
        <p className="wall-page-pitch">
          Python and Java projects from the studio floor. Tools we actually use,
          built for the tabletop community we're part of.
        </p>
      </section>

      <section className="wall-sec" data-screen-label="Arbiter tools">
        <div className="wall-sec-kicker">PROOF OF WORK</div>
        <h2 className="wall-sec-title">Three tools, one Arbiter</h2>
        <p className="wall-sec-sub">
          Arbiter is our AI-assisted rules engine for tabletop games. Magic, 40K,
          Warmachine, Redemption CCG. Running daily at app.s3hobbies.com.
        </p>
        <div className="wall-caps" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
          <article className="wall-cap tone-a">
            <h3 className="wall-cap-name">Arbiter Web</h3>
            <p className="wall-cap-desc">
              Match tracking, deck lists, league standings, event sign-ups, and
              the MVP singles browser. The shop in your pocket.
            </p>
            <div className="wall-cap-tags">
              <span className="wall-cap-tag">WEB APP</span><span className="wall-cap-tag">LEAGUES</span><span className="wall-cap-tag">INVENTORY</span>
            </div>
          </article>
          <article className="wall-cap tone-a">
            <h3 className="wall-cap-name">Arbiter Admin</h3>
            <p className="wall-cap-desc">
              The back office. Stock management, pricing, event control, and
              MVP administration for the counter.
            </p>
            <div className="wall-cap-tags">
              <span className="wall-cap-tag">ADMIN</span><span className="wall-cap-tag">PRICING</span><span className="wall-cap-tag">EVENTS</span>
            </div>
          </article>
          <article className="wall-cap tone-a">
            <h3 className="wall-cap-name">Arbiter Discord Bot</h3>
            <p className="wall-cap-desc">
              Rules questions answered in the server, pairings pushed to
              channels, results logged from chat.
            </p>
            <div className="wall-cap-tags">
              <span className="wall-cap-tag">DISCORD</span><span className="wall-cap-tag">AI RULES</span><span className="wall-cap-tag">PAIRINGS</span>
            </div>
          </article>
        </div>
        <div className="wall-two" style={{ maxWidth: 900, margin: '40px auto 0' }}>
          <img src="images/arbiter-ai.webp" alt="Arbiter AI rules engine in use" style={{ width: '100%', border: '2px solid var(--line)', transform: 'rotate(-0.6deg)', boxShadow: '0 18px 50px rgba(0,0,0,0.6)' }} />
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div className="wall-sec-kicker" style={{ textAlign: 'left' }}>WHAT WE TAKE ON</div>
            <p style={{ fontFamily: '"Grindy Brush", sans-serif', fontSize: 20, lineHeight: 1.65, color: 'var(--grey)' }}>
              Discord bots, internal tools, AI-assisted services, scrapers,
              dashboards, and the glue code between them. Python and Java,
              deployed and maintained, not handed off and forgotten.
            </p>
          </div>
        </div>
      </section>

      <section className="wall-big-cta" data-screen-label="Software CTA">
        <div className="wall-sec-kicker">READY WHEN YOU ARE</div>
        <h2 className="wall-sec-title">Got a project in mind?</h2>
        <p className="wall-sec-sub">
          A bot for your server, a tool for your league, a service for your
          shop. Describe the job and we'll scope it.
        </p>
        <a className="wall-cta-btn tone-a" href="Contact Page.html?service=software">START A BUILD →</a>
      </section>

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