// 03 You're at the right place if… — compact 3-up row, image-led, no calcs/links
const RightPlace = () => {
  const R = (p) => (window.__r ? window.__r(p) : p);
  const cases = [
    {
      num: '01',
      kicker: 'LOWER COST',
      title: 'Produce content at a fraction of the cost.',
      body: 'Reduce cost per SKU. Eliminate shoot logistics. Scale without increasing budget.',
      img: R('images/rightplace-01-horse.jpg'),
      imgAlt: 'Model on horse in shallow water — editorial',
      pos: 'center 55%',
    },
    {
      num: '02',
      kicker: 'MORE SPEED',
      title: 'From three-week cycles to three days.',
      body: 'Test visuals quickly across channels and markets — campaign, ecom, social, print.',
      img: R('images/rightplace-02-rock.jpg'),
      imgAlt: 'Model resting on rock by water — editorial',
      pos: 'center 45%',
      scale: 1.05,
    },
    {
      num: '03',
      kicker: 'SAFELY STRUCTURED',
      title: 'Step into AI on solid, legal ground.',
      body: 'Move beyond fragmented generic tools. Real-model digital twins with guided onboarding.',
      img: R('images/rightplace-03-shoe.jpg'),
      imgAlt: 'Slingback heel on inflatable — editorial',
      pos: 'center 65%',
    },
  ];

  return (
    <section className="rp rp--compact" data-screen-label="03 Right Place">
      <div className="rp__header">
        <div className="rp__header-left">
          <div className="section__eyebrow">— WHO IT'S FOR</div>
          <h2 className="rp__title">
            You're in the right place, if you'd like to<em className="serif">…</em>
          </h2>
        </div>
        <div className="rp__header-right">
          <p className="rp__intro">
            Three reasons fashion brands move their production to Stoodio.
            Not feature lists — real outcomes in every drop.
          </p>
        </div>
      </div>

      <div className="rp__row">
        {cases.map((c) => (
          <article key={c.num} className="rp-card">
            <div className="rp-card__stamp">
              <span className="rp-card__stamp-num">{c.num}</span>
              <span className="rp-card__stamp-label">{c.kicker}</span>
            </div>
            <div className="rp-card__body">
              <h3 className="rp-card__title">{c.title}</h3>
              <p className="rp-card__text">{c.body}</p>
            </div>
            <div className="rp-card__media" style={{ '--img-scale': c.scale || 1 }}>
              <img
                src={c.img}
                alt={c.imgAlt}
                style={{ objectPosition: c.pos }}
              />
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

window.RightPlace = RightPlace;