// Page liste des projets — filtrable par secteur
function ProjectsPage({ navigate }) {
  const [filter, setFilter] = React.useState('tous');
  const sectors = [{ id: 'tous', label: 'Tous les secteurs' }, ...window.SECTORS];

  const filtered = filter === 'tous' ?
  window.PROJECTS :
  window.PROJECTS.filter((p) => p.sector === filter);

  return (
    <main className="page-enter">
      <section className="page-head">
        <div className="page-head__row">
          <h1 className="page-head__title">
            Nos <span className="italic">projets.</span>
          </h1>
          <div className="page-head__count">
            <em>{String(filtered.length).padStart(2, '0')}</em> / {String(window.PROJECTS.length).padStart(2, '0')} projets affichés
          </div>
        </div>
      </section>

      <div className="filter-bar">
        {sectors.map((s) =>
        <button
          key={s.id}
          className={`filter-chip ${filter === s.id ? 'is-active' : ''}`}
          onClick={() => setFilter(s.id)}>
          
            {s.label}
          </button>
        )}
      </div>

      <section className="projects-list">
        {filtered.length === 0 ?
        <div style={{
          padding: '120px 0',
          textAlign: 'center',
          fontFamily: 'var(--serif)',
          fontStyle: 'italic',
          fontSize: 28,
          color: 'var(--ink-muted)',
          maxWidth: 640, margin: '0 auto'
        }}>
            Aucun projet à afficher dans ce secteur pour le moment.<br />
            <span style={{ fontSize: 16, fontStyle: 'normal', fontFamily: 'var(--sans)', display: 'block', marginTop: 14, letterSpacing: '0.04em' }}>
              Notre agence enrichit cette section au fur et à mesure des réalisations.
            </span>
          </div> :

        <div className="projects-list-grid">
            {filtered.map((p, i) =>
          <Reveal key={p.id} className="project-card" delay={i * 60} onClick={() => navigate('project-detail', p.id)}>
                <div className="project-card__media">
                  <div className="project-card__media-inner">
                    {p.cover ?
                <img src={p.cover} alt={p.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /> :
                <ArchPlaceholder seed={p.id} tone="warm" label={p.title} />}
                  </div>
                  <span className="project-card__badge">{p.sectorLabel}</span>
                  <div className="project-card__hover-cta"><ArrowNE size={14} /></div>
                </div>
                <div className="project-card__info">
                  <h3 className="project-card__title">
                    {p.title.replace(p.italic, '')}
                    <span className="italic">{p.italic}</span>
                  </h3>
                  <div className="project-card__meta">
                    <span className="project-card__meta-loc">{p.location}</span>
                    <span className="project-card__meta-year">{p.year}</span>
                  </div>
                </div>
              </Reveal>
          )}
          </div>
        }
      </section>

      <Marquee items={['Résidences — Hôtels — Refuges', 'Cabinets médicaux — dentaires — Pharmacies', 'Neuf — Réhabilitation — Rénovation — Extension', 'Espaces culturels polyvalents', 'Domaines viticoles — Agricoles', 'Commerces — Ateliers — Entrepôts', 'Vienne · depuis 2019']} />

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

}

window.ProjectsPage = ProjectsPage;