/* mtz. website — work as an interactive editorial index.
   Rows stay mounted (filter toggles a class) so motion.js hover-preview
   listeners persist. The floating cursor preview is built in motion.js.
   Projects + filters from content.json (window.mtzContent.work). */
function Work() {
  const c = mtzContent.work;
  const projects = c.projects;
  const cats = c.filters;
  const [active, setActive] = useState(cats[0]);

  return (
    <section className="mtz-work-sec" id="trabalhos">
      <div className="mtz-sec-head">
        <span className="mtz-eyebrow-row">{eb(c.eyebrow)}</span>
        <div className="mtz-filter" role="tablist">
          {cats.map((cat) => (
            <button key={cat} role="tab" aria-selected={active === cat}
              className={'mtz-filter__btn' + (active === cat ? ' is-active' : '')}
              onClick={() => setActive(cat)}>{cat}</button>
          ))}
        </div>
      </div>

      <div className="mtz-work-list">
        {projects.map((p) => {
          const hidden = active !== cats[0] && p.category !== active;
          return (
            <a key={p.n} href="#" className={'mtz-work-row' + (hidden ? ' is-hidden' : '')}
              data-initial={p.initial} data-bg={p.color}>
              <span className="mtz-work-row__n">{p.n}</span>
              <span className="mtz-work-row__t">{rt(p.title)}</span>
              <span className="mtz-work-row__cat">{p.category}</span>
              <span className="mtz-work-row__yr">{p.year}</span>
              <span className="mtz-work-row__arrow" aria-hidden="true">↗</span>
            </a>
          );
        })}
      </div>
    </section>
  );
}
window.Work = Work;