// Page détail d'un projet
function ProjectDetailPage({ navigate, projectId }) {
  const project = window.PROJECTS.find((p) => p.id === projectId) || window.PROJECTS[0];
  const idx = window.PROJECTS.findIndex((p) => p.id === project.id);
  const nextProject = window.PROJECTS[(idx + 1) % window.PROJECTS.length];

  const gallery = project.gallery && project.gallery.length > 0 ?
  project.gallery :
  project.cover ? [project.cover] : [];

  return (
    <main className="page-enter">
      <section className="detail-head">
        <button className="detail-back" onClick={() => navigate('projects')}>
          <ArrowLeft size={12} /> Tous les projets
        </button>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div style={{ fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 18, fontWeight: 500 }}>
              Secteur · {project.sectorLabel}
            </div>
            <h1 className="detail-title">
              {project.title.replace(project.italic, '')}
              <span className="italic">{project.italic}</span>
            </h1>
          </div>
          <div style={{ fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-muted)', textAlign: 'right' }}>
            Projet № {String(idx + 1).padStart(2, '0')}<br />
            <span style={{ color: 'var(--ink)' }}>{project.location}</span>
          </div>
        </div>
        <dl className="detail-meta-row">
          <div>
            <dt>Programme</dt>
            <dd style={{ whiteSpace: 'pre-line' }}>{project.programme}</dd>
          </div>
          <div>
            <dt>Maître d'ouvrage</dt>
            <dd>{project.maitreOuvrage}</dd>
          </div>
          <div>
            <dt>Surface</dt>
            <dd>{project.surface}</dd>
          </div>
          <div>
            <dt>Calendrier</dt>
            <dd>{project.calendrier}</dd>
          </div>
        </dl>
      </section>

      <section className="detail-hero">
        <Reveal className="detail-hero__img">
          {project.cover ?
          <img src={project.cover} alt={project.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /> :
          <ArchPlaceholder seed={project.id + '-hero'} tone="warm" label={project.title} />}
        </Reveal>
      </section>

      <section className="section">
        <div className="container">
          <div className="detail-body">
            <Reveal className="detail-body__lede">
              <span style={{ fontFamily: 'var(--sans)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-muted)', display: 'block', marginBottom: 18, fontWeight: 500 }}>
                — le projet
              </span>
              <p>{project.summary}</p>
            </Reveal>
            <Reveal className="detail-body__cols" delay={120}>
              <div>
                {project.body.slice(0, Math.ceil(project.body.length / 2)).map((p, i) =>
                <p key={i}>{p}</p>
                )}
              </div>
              <div>
                {project.body.slice(Math.ceil(project.body.length / 2)).map((p, i) =>
                <p key={i}>{p}</p>
                )}
                {project.link &&
                <a href={project.link.url} target="_blank" rel="noopener noreferrer" className="detail-body__link">
                  {project.link.label}
                  <ArrowNE size={12} />
                </a>}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {gallery.length > 1 &&
      <section className="section section--alt">
          <div className="container">
            <div className="sec-head">
              <Reveal>
                <span className="section-tag" style={{ marginBottom: 20, display: 'inline-flex' }}>Galerie</span>
                <h2 className="sec-head__title">
                  Photos <span className="italic">de chantier.</span>
                </h2>
              </Reveal>
              <Reveal className="sec-head__right" delay={120}>
                <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--ink-muted)' }}>
                  {String(gallery.length).padStart(2, '0')} vues
                </span>
              </Reveal>
            </div>
            <div className="detail-gallery">
              {gallery.map((src, i) => {
              // Les plans sont affichés en entier (non rognés), pleine largeur
              const isPlan = /plan|facade|façade|masse/i.test(src);
              const isWide = isPlan || i % 3 === 0;
              return (
                <Reveal key={i} className={`detail-gallery__cell ${isWide ? 'wide' : ''} ${isPlan ? 'is-plan' : ''}`} delay={Math.min(i * 50, 300)}>
                    <img
                    src={src}
                    alt={`${project.title} — ${isPlan ? "plan d'aménagement" : 'vue ' + (i + 1)}`}
                    style={{ width: '100%', height: '100%', objectFit: isPlan ? 'contain' : 'cover', display: 'block' }}
                    loading="lazy" />
                  
                  </Reveal>);

            })}
            </div>
          </div>
        </section>
      }

      <section className="section">
        <div className="container">
          <div className="spec">
            <Reveal className="spec__content">
              <span className="section-tag" style={{ marginBottom: 18, display: 'inline-flex' }}>Fiche projet</span>
              <h2 className="spec__title">
                Le projet, <span className="italic">en détails.</span>
              </h2>
              <dl className="spec__table">
                <div className="spec__row"><dt>Programme</dt><dd style={{ whiteSpace: 'pre-line' }}>{project.programme}</dd></div>
                <div className="spec__row"><dt>Maître d'ouvrage</dt><dd>{project.maitreOuvrage}</dd></div>
                <div className="spec__row"><dt>Montant des travaux</dt><dd>{project.montant}</dd></div>
                <div className="spec__row"><dt>Type de mission </dt><dd>{project.mission}</dd></div>
                <div className="spec__row"><dt>Surface</dt><dd>{project.surface}</dd></div>
                <div className="spec__row"><dt>Calendrier</dt><dd>{project.calendrier}</dd></div>
                <div className="spec__row"><dt>Localisation</dt><dd>{project.location}</dd></div>
                <div className="spec__row"><dt>Secteur</dt><dd>{project.sectorLabel}</dd></div>
              </dl>
            </Reveal>
            <Reveal className="spec__image" delay={120}>
              {project.specImage ?
              <img src={project.specImage} alt={project.title + ' — détail'} style={{ width: '100%', height: '100%', objectFit: /charpente|plan|facade|masse/i.test(project.specImage) ? 'contain' : 'cover', background: '#fff', display: 'block' }} /> :
              gallery[1] || project.cover ?
              <img src={gallery[1] || project.cover} alt={project.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /> :
              <ArchPlaceholder seed={project.id + '-spec'} tone="warm" />}
            </Reveal>
          </div>
        </div>
      </section>

      {/* Projet suivant */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <button
            onClick={() => navigate('project-detail', nextProject.id)}
            style={{
              width: '100%', textAlign: 'left',
              display: 'flex', flexDirection: 'column', cursor: 'pointer'
            }}>
            
            <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: '1px solid var(--line)', paddingTop: 24, marginBottom: 24, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>
              <span style={{ color: 'var(--ink-muted)' }}>Projet suivant · {nextProject.sectorLabel}</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                {nextProject.location} <ArrowNE size={11} />
              </span>
            </div>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(48px, 7vw, 120px)', lineHeight: 0.95, letterSpacing: '-0.02em', fontWeight: 500 }}>
              {nextProject.title.replace(nextProject.italic, '')}
              <span style={{ fontStyle: 'italic', fontWeight: 500 }}>{nextProject.italic}</span>
            </h3>
          </button>
        </div>
      </section>

      <ClosingCTA navigate={navigate} />
    </main>);

}

window.ProjectDetailPage = ProjectDetailPage;