// 07 Case study — Kismet Yoga / Sylvia
// Editorial 2-column layout: hero image left, brand+metrics+quote right.
const CaseStudy = () => {
  return (
    <section className="case" data-screen-label="07 Case Study">
      <div className="case__layout">
        {/* LEFT — editorial hero image */}
        <div className="case__hero">
          <img
            className="case__hero-img"
            src={(window.__r||(p=>p))('images/case-kismet.jpg')}
            alt="Kismet Yoga — model in locker room editorial"
          />
          <div className="case__hero-credit">
            <span className="case__hero-credit-k">Production cycle</span>
            <span className="case__hero-credit-v">3 weeks <i>→</i> 3 days</span>
          </div>
        </div>

        {/* RIGHT — content stack */}
        <div className="case__content">
          <div className="case__brand" aria-label="Kismet Yoga">
            <img className="case__brand-logo" src={(window.__r||(p=>p))('images/logos/kismet-yoga.png')} alt="Kismet Yoga + Fitness" />
            <span className="case__brand-tag">Sustainable activewear · Berlin</span>
          </div>

          <div className="case__eyebrow">
            <span className="pill pill--dark">
              <span className="pill__dot pill__dot--lav" />
              CASE STUDY
            </span>
          </div>

          <div className="case__metrics case__metrics--stacked">
            <div className="case__metric">
              <div className="case__metric-num">−40<span className="case__metric-unit">%</span></div>
              <div className="case__metric-label">Cost per SKU</div>
            </div>
            <div className="case__metric-divider" />
            <div className="case__metric">
              <div className="case__metric-num">
                <span className="case__metric-small">3w</span>
                <span className="case__metric-arrow">→</span>
                <span>3d</span>
              </div>
              <div className="case__metric-label">Cycle time</div>
            </div>
            <div className="case__metric-divider" />
            <div className="case__metric">
              <div className="case__metric-num">2<span className="case__metric-unit">×</span></div>
              <div className="case__metric-label">Content output</div>
            </div>
          </div>

          <blockquote className="case__quote case__quote--right">
            <span className="case__quote-mark">“</span>
            We went from 3-week production cycles to <em className="serif">3 days.</em>
          </blockquote>

          <div className="case__attrib">
            <div className="case__attrib-text">
              <span className="case__attrib-name">Sylvia Klein</span>
              <span className="case__attrib-role">Founder · Kismet Yoga</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.CaseStudy = CaseStudy;