// Projects index page

function ProjectsPage({ navigate }) {
  const { PROJECTS } = window.feinData;
  const [filter, setFilter] = React.useState('Alle');
  const types = ['Alle', 'Wohnen', 'Gewerbe', 'Öffentlich', 'Wettbewerb'];
  const filtered = filter === 'Alle' ? PROJECTS : PROJECTS.filter(p => p.type === filter);

  return (
    <>
      <Header route="projects" navigate={navigate} />
      <section className="page-hero">
        <div className="crumb"><a onClick={() => navigate('home')}>Start</a> / Projekte</div>
        <h1>
          <span style={{ fontWeight: 200 }}>Projekte —</span><br />
          ein <span className="b">Querschnitt</span> aus zehn <span className="ital">Jahren</span>.
        </h1>
        <div className="page-hero__row">
          <p className="lead">
            Wohnen, Gewerbe, öffentliche Bauten. Neubau, Sanierung, Innenausbau. Was die Projekte verbindet, ist nicht ein Stil — sondern eine Arbeitsweise.
          </p>
          <p className="meta-mono">{PROJECTS.length} Projekte · 2018–2026 · Baden-Württemberg</p>
        </div>
      </section>

      <div className="proj-filter">
        <span className="fl">Filter</span>
        {types.map(t => (
          <button key={t} className={`chip ${filter === t ? 'active' : ''}`} onClick={() => setFilter(t)}>{t}</button>
        ))}
        <span style={{ flex: 1 }} />
        <span className="meta-mono">{filtered.length} {filtered.length === 1 ? 'Ergebnis' : 'Ergebnisse'}</span>
      </div>

      <div className="proj-grid">
        {filtered.map(p => (
          <div key={p.slug} className="proj-card" onClick={() => navigate(`project/${p.slug}`)}>
            <div className="proj-card__img"><img src={p.thumb} loading="lazy" width="800" height="600" alt={`Architekt Stuttgart – ${p.title.map(t => typeof t === 'string' ? t : t.ital).join('')} – feinplaner`} /></div>
            <div className="proj-card__rule" />
            <div className="proj-card__top">
              <span className="proj-card__nr">{p.nr} / {String(PROJECTS.length).padStart(2, '0')}</span>
              <span className="proj-card__yr">{p.year}</span>
            </div>
            <h3 className="proj-card__title">
              {p.title.map((part, i) => typeof part === 'string' ? <span key={i}>{part}</span> : <span key={i} className="ital">{part.ital}</span>)}
            </h3>
            <div className="proj-card__bottom">
              <span className="meta">{p.typeLabel} · {p.location}</span>
              <span className="proj-card__tag">{p.status}</span>
            </div>
          </div>
        ))}
      </div>

      <CtaStrip navigate={navigate} />
      <Footer navigate={navigate} />
    </>
  );
}

window.ProjectsPage = ProjectsPage;