// CaseStudySection.jsx — Section 6. Homepage teaser for the founder-led brand case study.
// Editorial restraint: a quoted pull, founder meta, four operational numbers, link to full study.
const CaseStudySection = () => (
  <section className="section section--surface" id="case">
    <span className="edge-label">EM · 06 — CASE STUDY</span>
    <span className="gutter-mark" data-num="06"></span>

    <div className="shell">
      {/* Section header — small caps marker on left, headline on right */}
      <header className="case__header">
        <div className="case__header-meta">
          <div className="eyebrow eyebrow-rule">Selected work · 03 / 04</div>
        </div>
        <h2 className="case__title">
          Helping a founder-led fashion brand enter eyewear &mdash; without becoming an eyewear company.
        </h2>
      </header>

      {/* Main grid: product on left, pull-quote + meta + stats + read-more on right */}
      <div className="case__inner">
        <figure className="case__visual">
          <div className="case__visual-frame">
            <img
              src="./assets/imagery/case-study-cover.png"
              alt="Beyond the Vines collection — presentation box, hard case, sunglasses, and cleaning cloth."
            />
          </div>
          <figcaption className="case__visual-caption">
            <span>Acetate sunglass · first collection</span>
            <span>2025</span>
          </figcaption>
        </figure>

        <div className="case__body">
          <blockquote className="case__quote">
            &ldquo;We knew the brand we wanted. We didn&rsquo;t know how to get frames made. Emsley knew how to answer the questions we didn&rsquo;t know to ask.&rdquo;
          </blockquote>
          <div className="case__meta">
            <strong>Founder, apparel brand &middot; Southeast Asia</strong> &middot; Acetate &amp; metal collections, retail-direct &middot; First eyewear collection, 2025
          </div>

          <div className="case__stats" role="list">
            <div role="listitem">
              <div className="case__stat-num">8</div>
              <div className="case__stat-label">SKUs in first launch</div>
            </div>
            <div role="listitem">
              <div className="case__stat-num">14<span className="unit">wk</span></div>
              <div className="case__stat-label">Brief to retail</div>
            </div>
            <div role="listitem">
              <div className="case__stat-num">3</div>
              <div className="case__stat-label">Sampling rounds</div>
            </div>
          </div>

          <div className="case__readmore">
            <a className="link-arrow" href="case-study.html">Read the full case study</a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

window.CaseStudySection = CaseStudySection;