function VimeoFilmPlayer({ project }) {
  const [playing, setPlaying] = React.useState(false);
  return (
    <div className="zf-vimeo-player" style={{ aspectRatio: project.aspectRatio }}>
      {playing ? (
        <iframe src={`https://player.vimeo.com/video/${project.vimeoId}?h=${project.vimeoHash}&badge=0&autopause=1&playsinline=1&autoplay=1`}
          title={project.title}
          allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
          referrerPolicy="strict-origin-when-cross-origin" allowFullScreen/>
      ) : (
        <button className="zf-film-poster" aria-label={'Play ' + project.title} onClick={() => setPlaying(true)}>
          <img src={project.image} alt="" decoding="async"/>
          <span className="zf-film-poster-action"><Icon.Play size={24}/><span>Play film</span></span>
        </button>
      )}
    </div>
  );
}

// Dedicated film pages preserve the original Vimeo aspect ratios.
function ProjectDetail({ id, onNavigate }) {
  const index = window.FILMS.findIndex(film => film.id === id);
  const project = window.FILMS[index];
  const follow = (event, path) => {
    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
    event.preventDefault(); onNavigate(path);
  };

  if (!project) return (
    <section className="zf-film-missing zf-section-inner">
      <p className="meta">Film unavailable</p>
      <h1>Find your next film.</h1>
      <a className="zf-film-link" href="#/work" onClick={e => follow(e, '/work')}>View all work <Icon.ArrowRight/></a>
    </section>
  );

  const previous = window.FILMS[(index + window.FILMS.length - 1) % window.FILMS.length];
  const next = window.FILMS[(index + 1) % window.FILMS.length];
  const portrait = project.aspectRatio === '9 / 16';

  return (
    <article className="zf-film-page">
      <header className="zf-film-header zf-section-inner">
        <a className="zf-film-back" href="#/work" onClick={e => follow(e, '/work')}>
          <Icon.ArrowLeft size={14}/> Back to Work
        </a>
        <p className="meta">{project.type} <span aria-hidden="true">·</span> {project.year}</p>
        <h1 key={project.id} className="zf-film-title">{project.title}</h1>
      </header>

      <section className={'zf-vimeo-stage' + (portrait ? ' is-portrait' : '')} aria-label={project.title + ' video'}>
        <VimeoFilmPlayer key={project.vimeoId} project={project}/>
      </section>

      <section className="zf-film-info zf-section-inner">
        <div>
          <h2 className="meta">About the film</h2>
          <p className="zf-film-description">{project.description}</p>
          <p className="zf-film-tagline">{project.tagline}</p>
          <div className="zf-film-actions">
            <a className="zf-film-link" href={'https://vimeo.com/' + project.vimeoId + '/' + project.vimeoHash} target="_blank" rel="noopener noreferrer">
              Watch on Vimeo <Icon.ArrowRight size={16}/>
            </a>
            <a className="zf-film-link" href={window.SITE.whatsappUrl + '?text=' + encodeURIComponent('Hi Ziad, I would like to discuss a project after watching ' + project.title)} target="_blank" rel="noopener noreferrer">
              Discuss a project <Icon.Message size={18}/>
            </a>
          </div>
        </div>
        <dl className="zf-film-facts">
          <div><dt>A film by</dt><dd>{project.filmmaker}</dd></div>
          <div><dt>Location / Year</dt><dd>{project.location} · {project.year}</dd></div>
          <div><dt>Duration / Format</dt><dd>{project.duration} · {portrait ? 'Portrait' : 'Landscape'}</dd></div>
        </dl>
      </section>

      <nav className="zf-film-nav zf-section-inner" aria-label="More films">
        {[{ film: previous, label: 'Previous film' }, { film: next, label: 'Next film' }].map(({ film, label }) => (
          <a key={label} href={'#/work/' + film.id} onClick={e => follow(e, '/work/' + film.id)}>
            <span className="meta">{label}</span><span className="zf-film-nav-title">{film.title}</span>
          </a>
        ))}
      </nav>
    </article>
  );
}

window.ProjectDetail = ProjectDetail;