// Players load on dedicated film pages, keeping the Work grid lightweight.
function ProjectCard({ id, title, type, duration, image, onOpen }) {
  return (
    <a className="zf-film-card" href={'#/work/' + id}
       onClick={(e) => {
         if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
         e.preventDefault(); onOpen(id);
       }}>
      <div className="zf-film-card-image zf-card-imgwrap">
        <img src={image} alt={title + ' — film thumbnail'} loading="lazy" decoding="async"/>
        <span className="zf-film-card-play" aria-hidden="true"><Icon.Play size={20}/></span>
        <span className="zf-film-card-duration">{duration}</span>
      </div>
      <div className="zf-film-card-meta">
        <div><h2>{title}</h2><p>{type}</p></div>
        <Icon.ArrowRight size={18}/>
      </div>
    </a>
  );
}

window.ProjectCard = ProjectCard;