const Receipts = () => {
  const cases = [
    ['Shopify', 'assets/shopify.svg', 'Strategy · Acquisition', '30+', 'International markets launched across 5 acquisition channels.'],
    ['TransUnion', 'assets/transunion.png', 'CRO · Creative', '+58%', 'Mobile conversion rate after we rebuilt the mobile experience.'],
    ['Hero Bread', 'assets/hero-bread.svg', 'Acquisition · Creative', '7', 'Acquisition channels launched over 2+ years, with full creative strategy support.'],
    ['ABCmouse', 'assets/abcmouse.svg', 'Acquisition · CRO', 'Flat CPO', 'Held while scaling budget, with subscriber growth year over year from 2024 to 2025.'],
  ];
  const metrics = [['$1B+', 'In media managed'], ['6', 'Growth functions run by one team'], ['14×', 'Average lift in creative asset output'], ['17 yrs', 'Median experience on your account team']];
  return (
    <section className="sec sec-tint" id="work">
      <div className="wrap">
        <div className="sec-head" data-reveal>
          <span className="label eyebrow">Results</span>
          <h2 className="h2">We drive revenue through conversions, not impressions.</h2>
          <p className="lede">We hold every engagement to <strong>the number your business actually runs on</strong>: revenue, pipeline, demos booked, cost per signup, payback.</p>
        </div>
        <div className="case-grid">
          {cases.map(([n, logo, tag, big, txt]) => (
            <article className="card case-card" key={n} data-reveal>
              <div className="case-card-top"><img src={logo} alt={n} /><span className="label">{tag}</span></div>
              <div className="big">{big}</div>
              <p>{txt}</p>
            </article>
          ))}
        </div>
        <div className="metrics">{metrics.map(([b, s]) => <div className="card metric" key={s} data-reveal><b>{b}</b><span>{s}</span></div>)}</div>
        <div className="asof tag-illus">As of Q4 2026</div>
      </div>
    </section>
  );
};

Object.assign(window, { Receipts });