// WhySection.jsx — Section 3. Why Emsley exists. Dark inversion for emphasis.
const WhySection = () => (
  <section className="why section" id="why">
    <span className="edge-label edge-label--dark">EM · 03 — POSITIONING</span>
    <div className="shell">
      <div className="why__grid">
        <div>
          <div className="eyebrow eyebrow-rule eyebrow-rule--inverted eyebrow--inverted">Section · 03 — Why Emsley</div>
          <h2 className="section-title section-title--inverted">We've built brands with decades-old factory partnerships.</h2>
        </div>
        <div>
          <p className="why__paragraph">
            Emsley exists in the middle. We've built brands and we've operated factories.
            We know what brand teams need from a partner and what factories need from a brief.
            The result is fewer rounds, fewer surprises, and frames that arrive looking like
            the ones you sampled.
          </p>
          <p className="why__paragraph">
            We also operate optical retail stores, which means we see what happens
            after production — fit issues, returns, repairs, packaging damage,
            sell-through. We bring that downstream knowledge upstream into your
            design phase.
          </p>
          <p className="why__paragraph">
            The lessons — what fails QC at scale, what 3PLs need on a carton, how
            returns actually flow — are already part of how we work.
          </p>
          <p className="why__paragraph why__paragraph--summary">
            Brand experience and factory experience in the same room. Retail reality folded in.
            Packaging treated as a system, not an afterthought.
          </p>
        </div>
      </div>
    </div>
  </section>
);

window.WhySection = WhySection;