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

      <section className="wall-page-hero" data-screen-label="Design hero">
        <div className="wall-door-shift">STUDIO SERVICE · DESIGN</div>
        <h1 className="wall-page-title tone-a">Concept. Model. Ready to make.</h1>
        <p className="wall-page-pitch">
          Product and industrial design out of Southside Studio. We take an idea
          from sketch to render to manufacturing-ready handoff.
        </p>
      </section>

      <section className="wall-sec" data-screen-label="How we design">
        <div className="wall-sec-kicker">HOW WE DESIGN</div>
        <h2 className="wall-sec-title">Sketch to spec</h2>
        <div className="wall-two">
          <article className="wall-cap tone-a">
            <h3 className="wall-cap-name">Concept &amp; 3D Modeling</h3>
            <p className="wall-cap-desc">
              CAD models, mechanical assemblies, original sculpts. We work the
              idea until the geometry holds up, with renders along the way.
            </p>
            <div className="wall-cap-tags">
              <span className="wall-cap-tag">CAD</span><span className="wall-cap-tag">ASSEMBLIES</span>
              <span className="wall-cap-tag">SCULPTS</span><span className="wall-cap-tag">RENDERS</span>
            </div>
          </article>
          <article className="wall-cap tone-a">
            <h3 className="wall-cap-name">Manufacturing Handoff</h3>
            <p className="wall-cap-desc">
              Printable files, tolerances checked, production notes included.
              Ready for our farm or your manufacturer.
            </p>
            <div className="wall-cap-tags">
              <span className="wall-cap-tag">TOLERANCES</span><span className="wall-cap-tag">PROTOTYPES</span>
              <span className="wall-cap-tag">PRODUCTION</span>
            </div>
          </article>
        </div>
      </section>

      <section className="wall-sec" data-screen-label="Featured projects">
        <div className="wall-sec-kicker">FEATURED PROJECTS</div>
        <h2 className="wall-sec-title">Off the drawing board</h2>
        <div className="wall-two" style={{ maxWidth: 1000, margin: '0 auto' }}>
          <figure className="wall-polaroid" style={{ transform: 'rotate(-1.5deg)', margin: 0 }}>
            <span className="wall-piece-cat">PRODUCT DESIGN</span>
            <div className="wall-piece-img-box" style={{ height: 300 }}><img src="images/design-cartridge-exploded.png" alt="Modular needle cartridge, exploded CAD view" /></div>
            <figcaption>Modular Needle Cartridge</figcaption>
            <div className="wall-piece-desc">Tattoo equipment redesign. Modular swap-in cartridge with custom tolerances, CAD through printable prototyping run.</div>
          </figure>
          <figure className="wall-polaroid" style={{ transform: 'rotate(1.2deg)', margin: 0 }}>
            <span className="wall-piece-cat">PRODUCT DESIGN</span>
            <div className="wall-piece-img-box" style={{ height: 300, background: '#f5e642' }}><img src="images/design-inkcup-hero.png" alt="Texas-shaped ink cup render" /></div>
            <figcaption>Texas Ink Cup</figcaption>
            <div className="wall-piece-desc">Branded ink cup for the tattoo industry. Full design through printable production with custom badging.</div>
          </figure>
        </div>
      </section>

      <section className="wall-big-cta" data-screen-label="Design CTA">
        <div className="wall-sec-kicker">READY WHEN YOU ARE</div>
        <h2 className="wall-sec-title">Got a part to design?</h2>
        <p className="wall-sec-sub">
          Bring a sketch, a broken part, or an idea on a napkin.
          We'll take it from there.
        </p>
        <a className="wall-cta-btn tone-a" href="Contact Page.html?service=design">START A DESIGN →</a>
      </section>

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