// CATEGORY page — Behance-style grid of project thumbs
const { useState, useMemo } = React;

window.CategoryPage = function CategoryPage({ navigate, lang, categoryId }) {
  const t = STRINGS[lang];
  const data = window.PORTFOLIO_DATA;
  const cat = data.categories.find(c => c.id === categoryId);
  const projects = data.projects[categoryId] || [];

  const [filter, setFilter] = useState('all');

  // Build tag filters
  const allTags = useMemo(() => {
    const s = new Set();
    projects.forEach(p => p.tags.forEach(tag => s.add(tag)));
    return Array.from(s);
  }, [projects]);

  const filtered = filter === 'all' ? projects : projects.filter(p => p.tags.includes(filter));

  return (
    <section className="page fade-in" data-screen-label={`02 ${cat.label.en}`}>
      <div className="page-head">
        <div>
          <div className="crumb">
            <button onClick={() => navigate({ name: 'home' })} style={{ opacity: 0.6 }}>← {t.work}</button>
            <span style={{ margin: '0 10px', opacity: 0.4 }}>/</span>
            <span>{cat.number} · {cat.label[lang]}</span>
          </div>
          <h1>{cat.label[lang]}</h1>
        </div>
        <p className="lede">{cat.caption[lang]}</p>
      </div>

      <div className="filter-row">
        <span className="filter-label">{t.filter}</span>
        <button className={filter === 'all' ? 'active' : ''} onClick={() => setFilter('all')}>{t.allProjects} · {projects.length}</button>
        {allTags.map(tag => (
          <button key={tag} className={filter === tag ? 'active' : ''} onClick={() => setFilter(tag)}>{tag}</button>
        ))}
      </div>

      <div className="proj-grid">
        {filtered.map(p => (
          <button key={p.id} className="proj-card" onClick={() => navigate({ name: 'project', id: p.id, categoryId })}>
            <div className="thumb">
              <div className="thumb-inner">
                <ColorField hue={p.cover.hue} lightness={p.cover.lightness} chroma="rich" label={p.title} src={p.cover.src} />
              </div>
            </div>
            <div className="meta">
              <div className="meta-l">
                <h3>{p.title}</h3>
                <div className="tags">{p.tags.join(' · ')}</div>
              </div>
              <div className="year">{p.year}</div>
            </div>
          </button>
        ))}
      </div>
    </section>
  );
};