/* global React */
const CASES = [
  {
    client: 'Mastercard',
    sector: 'Global · Financial Services',
    metric: 'Multi-platform',
    image: 'assets/clients/mastercard-photo.jpg',
    blurb: 'Consulted major issuers on paid media strategy across TikTok, Instagram, Google, Facebook, and LinkedIn. Led the creative development pipeline from brief to high resolution delivery, driving measurable ROAS lift across every channel.',
  },
  {
    client: 'Irdrea',
    sector: 'Los Angeles · Footwear & Goods',
    metric: '−55% CPA',
    image: 'assets/clients/irdrea-photo.jpg',
    blurb: 'Deployed Instagram creative for a Los Angeles studio designing idiosyncratic, story driven product. The work reduced CPA by 55 percent and produced a consistent stream of qualified purchases.',
  },
  {
    client: 'Motivated Moises',
    sector: 'Imperial Valley · Real Estate',
    metric: 'Inbound engine',
    image: 'assets/clients/moises-photo.jpg',
    blurb: 'Owned strategy, copy, and creative end to end for an Imperial Valley realtor, translating local market insight into a paid system that delivers consistent inbound leads month over month.',
  },
];

function Work() {
  return (
    <section className="rn-work" id="work" aria-label="Selected work">
      <div className="rn-work__head">
        <div className="rn-work__head-l">
          <div className="rn-work__eyebrow">Selected work</div>
          <h2 className="rn-work__h">Quiet results.<br/>Loud creative.</h2>
        </div>
        <div className="rn-work__head-r">Hover any case to read the story.</div>
      </div>

      <div className="rn-work__grid">
        {CASES.map((c, i) => (
          <article className="rn-case" key={c.client}>
            <div className="rn-case__media" style={{ backgroundImage: `url(${c.image})` }} />
            <div className="rn-case__shade" />
            <div className="rn-case__shade--hover" />
            <div className="rn-case__halftone" />
            <span className="rn-case__index">{String(i+1).padStart(2,'0')}</span>
            <span className="rn-case__metric-pill">{c.metric}</span>
            <div className="rn-case__body">
              <h3 className="rn-case__client">{c.client}</h3>
              <span className="rn-case__sector">{c.sector}</span>
              <p className="rn-case__blurb">{c.blurb}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}
window.Work = Work;