// screenplay.jsx — title-card treatment for upcoming projects

function ScreenplayCard({ proj, idx, total, onOpen }) {
  return (
    <article className="scr-card" onClick={onOpen}>
      {/* hole punches like a screenplay binder */}
      <div className="punch"><span></span><span></span><span></span></div>

      <div className="fadein">FADE IN:</div>
      <div className="slug">{proj.slug_label}</div>
      <div className="action">{proj.action}</div>

      <div className="centered">{proj.centered}</div>

      <div className="title-block">
        <div className="pres">{proj.presents}</div>
        <h4 className="ttl"><em>{proj.titleDisplay}</em></h4>
        <div className="by">{proj.by}</div>
      </div>

      <div className="footer-line">
        <span>{proj.medium.toUpperCase()}</span>
        <span>{proj.status.toUpperCase()} · {proj.year}</span>
      </div>
    </article>
  );
}

// alt: marquee variant — dark, theatrical
function ScreenplayMarquee({ items, onOpen }) {
  return (
    <div className="scr-marquee">
      {items.map((p, i) => (
        <div key={p.slug} className="scr-marquee-item"
             onClick={() => onOpen && onOpen(p)}>
          <div className="row">{p.slug_label} <span className="punch">●</span> {p.codename}</div>
          <h3 className="name"><em>{p.titleDisplay}</em></h3>
          <div className="row scr-marquee-row2">{p.medium} — {p.status} — {p.year}</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { ScreenplayCard, ScreenplayMarquee });