/* global FilmsRow */
const motion = window.motion;

function FilmsRow() {
  const films = [
    { n: 1, t: 'Lifelong',            ctx: 'Brand Film · As DP',               tag: 'As DP',              href: 'https://www.youtube.com/watch?v=c178nMpgxx4',  thumbStyle: { backgroundImage: "url('https://img.youtube.com/vi/c178nMpgxx4/maxresdefault.jpg')",  backgroundSize: 'cover', backgroundPosition: 'center' } },
    { n: 2, t: 'Zingbus',             ctx: 'Commercial · Production Designer',  tag: 'Production Designer',href: 'https://www.youtube.com/watch?v=CZE9rQv3eaY',  thumbStyle: { backgroundImage: "url('https://img.youtube.com/vi/CZE9rQv3eaY/maxresdefault.jpg')",  backgroundSize: 'cover', backgroundPosition: 'center' } },
    { n: 3, t: 'Daawat',              ctx: 'Commercial · Production Designer',  tag: 'Production Designer',href: 'https://www.youtube.com/watch?v=jLnxWcixcZI',  thumbStyle: { backgroundImage: "url('https://img.youtube.com/vi/jLnxWcixcZI/maxresdefault.jpg')",  backgroundSize: 'cover', backgroundPosition: 'center' } },
    { n: 4, t: 'Paytm',               ctx: 'Campaign · As DP',                  tag: 'As DP',              href: 'https://www.youtube.com/watch?v=DQvTOBjbZ3w',  thumbStyle: { backgroundImage: "url('https://img.youtube.com/vi/DQvTOBjbZ3w/maxresdefault.jpg')",  backgroundSize: 'cover', backgroundPosition: 'center' } },
    { n: 5, t: 'Fit India Quiz 2023', ctx: 'Government of India · 2023',        tag: 'Produced & Shot',    href: 'https://www.youtube.com/watch?v=2W1C_cRkn_U',  thumbStyle: { backgroundImage: "url('https://img.youtube.com/vi/2W1C_cRkn_U/maxresdefault.jpg')",  backgroundSize: 'cover', backgroundPosition: 'center' } },
    { n: 6, t: 'Tailcall',            ctx: 'Motion Graphics · Produced',        tag: 'Produced',           href: 'https://www.youtube.com/watch?v=-hgzB5JhWJQ', thumbStyle: { backgroundImage: "url('https://img.youtube.com/vi/-hgzB5JhWJQ/maxresdefault.jpg')", backgroundSize: 'cover', backgroundPosition: 'center' } },
    { n: 7, t: 'Zee Music',           ctx: 'Music Video · Directed',            tag: 'Directed · ★ Award', href: 'https://www.youtube.com/watch?v=f0JajnXMNbw',  thumbStyle: { backgroundImage: "url('https://img.youtube.com/vi/f0JajnXMNbw/maxresdefault.jpg')",  backgroundSize: 'cover', backgroundPosition: 'center' } },
    { n: 8, t: 'The Veshti Company',  ctx: 'Campaign · Produced & Shot',        tag: 'Produced & Shot',    href: 'https://www.youtube.com/watch?v=P1uxpJxgmfw',  thumbStyle: { backgroundImage: "url('https://img.youtube.com/vi/P1uxpJxgmfw/maxresdefault.jpg')",  backgroundSize: 'cover', backgroundPosition: 'center' } },
    { n: 9, t: 'Kra',                 ctx: 'Documentary · As DP',               tag: 'As DP',              href: 'https://www.youtube.com/watch?v=QU4V7zwKpyU',  thumbStyle: { backgroundImage: "url('https://img.youtube.com/vi/QU4V7zwKpyU/maxresdefault.jpg')",  backgroundSize: 'cover', backgroundPosition: 'center' } },
    { n: 10, t: 'Merino Laminates',   ctx: 'Agency Film · Lowe Lintas',         tag: '★ Spikes Asia',      href: 'https://www.dropbox.com/scl/fi/hrez9qj1zei9hzbm288gh/Merino-Laminates-BD-Campaign_Final-Draft.mp4?rlkey=bm0p4memqcv4z2ac2z9zit81o&e=1&st=rp4ho520&dl=0', thumbStyle: { backgroundImage: "url('https://img.youtube.com/vi/QB-AeSUEfBQ/maxresdefault.jpg')", backgroundSize: 'cover', backgroundPosition: 'center' } },
  ];

  return (
    <section id="films-row" className="films-marquee" data-screen-label="Featured Films">
      <div className="section-head">
        <div>
          <span className="eyebrow" style={{ color:'var(--ofa-films-red)' }}>04 — Selected films</span>
          <h2>Stories<br/>we made.</h2>
        </div>
        <p>Films directed, shot, produced and set-designed across brands, agencies and independent commissions. All part of the OFA Films portfolio.</p>
      </div>
      <div className="films-track-wrap">
        <motion.div
          className="films-track"
          initial={{ opacity: 0, x: 40 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true, amount: 0.1 }}
          transition={{ duration: 0.7, ease: [0.2, 0.7, 0.1, 1] }}
        >
          {films.map((f) => (
            <article className="film-tile" key={f.n} data-comment-anchor={`film-${f.n}`}>
              <a href={f.href} target="_blank" rel="noopener noreferrer" className="frame" style={{ display: 'block', textDecoration: 'none' }}>
                <div className="thumb" style={f.thumbStyle}></div>
                <span className="play-glyph" aria-hidden="true"></span>
                <span className="badge">{f.tag}</span>
              </a>
              <div className="meta">
                <div>
                  <h4>{f.t}</h4>
                  <div className="ctx">{f.ctx}</div>
                </div>
                <a href={f.href} target="_blank" rel="noopener noreferrer" className="tag">View →</a>
              </div>
            </article>
          ))}
        </motion.div>
      </div>
    </section>
  );
}
window.FilmsRow = FilmsRow;