// NowPlaying.jsx — Horizontal film-strip of recent releases.
const REEL = [
  { thumb: "assets/case-study-twilio-bg.png",    tag: "EPISODE 04", client: "Twilio",      title: "Production SMS at scale", len: "04:12" },
  { thumb: "assets/case-study-circle-bg.png",    tag: "LAUNCH FILM",client: "Circle",      title: "CCTP, in one diagram",    len: "02:38" },
  { thumb: "assets/case-study-cloudflare-bg.png",tag: "EXPLAINER",  client: "Cloudflare",  title: "Workers, Durable Objects",len: "01:54" },
  { thumb: "assets/case-study-mathstream-bg.png",tag: "SERIES 02",  client: "MATHstream",  title: "Teaching fractions, visually", len: "03:20" },
  { thumb: "assets/hero-reel-street-interview.jpg",    tag: "DOCUMENTARY",client: "freeCodeCamp",title: "Meet the developer advocates", len: "12:40" },
];
const NowPlaying = () => (
  <section className="pc-section pc-nowplaying">
    <div className="pc-now-head">
      <h2 className="pc-now-title">Recent <em>work</em>.</h2>
      <div className="pc-now-hint">Drag ↔ or scroll horizontally</div>
    </div>
    <div className="pc-now-scroll">
      {REEL.map((r, i) => (
        <article key={i} className="pc-reel-card">
          <div className="pc-reel-card-img" style={{backgroundImage:`url(${r.thumb})`}}>
            <div className="pc-reel-card-play">▶</div>
            <div className="pc-reel-card-len">{r.len}</div>
          </div>
          <div className="pc-reel-card-meta">
            <span className="pc-rivet-sm">{r.tag} · {r.client}</span>
            <span>No. {String(i+1).padStart(2,"0")}</span>
          </div>
          <div className="pc-reel-card-title">{r.title}</div>
        </article>
      ))}
    </div>
  </section>
);
window.NowPlaying = NowPlaying;