// 03.5 CAST — Editorial avatar/twin gallery strip
const Cast = () => {
  const R = (p) => (window.__r ? window.__r(p) : p);
  const models = [
  { img: R('images/cast-mateo.jpg'), name: 'Mateo R.', tag: 'DIGITAL TWIN · 01', loc: 'Madrid' },
  { img: R('images/cast-noemi.jpg'), name: 'Noemi B.', tag: 'DIGITAL TWIN · 02', loc: 'Lisbon' },
  { img: R('images/cast-jinwoo.jpg'), name: 'Jin-woo K.', tag: 'DIGITAL TWIN · 03', loc: 'Seoul' },
  { img: R('images/cast-julien.jpg'), name: 'Julien M.', tag: 'DIGITAL TWIN · 04', loc: 'Paris' },
  { img: R('images/cast-anders.jpg'), name: 'Anders V.', tag: 'DIGITAL TWIN · 05', loc: 'Copenhagen' }];


  return (
    <section className="cast" data-screen-label="03.5 Cast">
      <div className="cast__head">
        <div className="cast__head-l">
          <div className="section__eyebrow">— THE CAST</div>
          <h2 className="cast__title">
            100k+ digital twins, <br />
            <em className="serif">commercially licensed.</em>
          </h2>
        </div>
        <div className="cast__head-r">
          <p className="cast__intro">
            Official partner of <b>ModelManagement.com</b> — the largest pool of digital twins
            worldwide. Over 100,000 consented twins available for direct use on the platform.
            No composite faces. No grey zones.
          </p>
          <div className="cast__head-meta">
            <div>
              <div className="cast__head-k">ROSTER</div>
              <div className="cast__head-v">100,000+ models</div>
            </div>
            <div>
              <div className="cast__head-k">RIGHTS</div>
              <div className="cast__head-v">Worldwide, perpetual</div>
            </div>
            <div>
              <div className="cast__head-k">SOURCE</div>
              <div className="cast__head-v">ModelManagement.com</div>
            </div>
          </div>
        </div>
      </div>

      <div className="cast__scroller" aria-label="Digital twin gallery">
        <div className="cast__track">
          {[...models, ...models].map((m, i) =>
          <figure key={i} className="cast__card" aria-hidden={i >= models.length}>
              <div className="cast__card-media">
                <img src={m.img} alt={m.name} />
                <span className="cast__card-badge">{m.tag}</span>
              </div>
              <figcaption className="cast__card-cap">
                <span className="cast__card-name">{m.name}</span>
                <span className="cast__card-loc">{m.loc}</span>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

};

window.Cast = Cast;