const CaseStudy = () => (
  <section id="case">
    <Container>
      <div style={{ marginBottom: 40, maxWidth: 680 }}>
        <span className="eyebrow">Case study</span>
        <h2 style={{ marginTop: 18 }}>2XSR, a military-grade modular pack, <span style={{color:'var(--orange)'}}>shipped in 11 months.</span></h2>
      </div>

      <div className="casehero">
        <div className="casehero__imgwrap">
          <img src="assets/case-2.jpg" alt="2XSR modular backpack, front, back and side views" />
        </div>
        <div className="casehero__content">
          <div className="casehero__brand">
            <img src="assets/2xsr-logo.png" alt="2XSR" />
            <span>Client · Tactical / EDC</span>
          </div>
          <h2>From loose spec sheet to 3,200 units on the water.</h2>
          <p>Started with a 4-page spec and a material wishlist. We re-engineered the load-bearing system, filed two design patents, vetted three factories, and delivered first production run inside a year, roughly half the industry norm for a new tactical pack.</p>

          <div className="case__stats">
            <div className="case__stat"><div className="n">11mo</div><div className="l">Sketch → ship</div></div>
            <div className="case__stat"><div className="n">2</div><div className="l">Patents filed</div></div>
            <div className="case__stat"><div className="n">3,200</div><div className="l">First run units</div></div>
          </div>

          <a href="#contact" className="btn btn--primary case__cta">Read the full teardown <Arrow /></a>
        </div>
      </div>
    </Container>
  </section>
);

window.CaseStudy = CaseStudy;