// ZIADFILMING — Page: Work (filter grid)

const ws = {
  wrap: { padding:'128px 0 128px' },
  inner: { maxWidth:1440, margin:'0 auto', padding:'0 48px' },
  head: { marginBottom:80 },
  h1: { fontFamily:'var(--font-display)', fontWeight:700,
        fontSize:'clamp(56px,8vw,128px)', color:'#fff', textTransform:'uppercase',
        letterSpacing:'-0.04em', lineHeight:0.9, margin:'0 0 48px' },
  tabs: { display:'flex', gap:48, borderBottom:'1px solid #18181b', paddingBottom:24, flexWrap:'wrap' },
  tab: (active) => ({
    position:'relative', cursor:'pointer', paddingBottom:8, background:'none', border:'none',
    fontSize:13, textTransform:'uppercase', letterSpacing:'0.1em',
    color: active ? '#fff' : '#71717a', transition:'color 200ms', fontFamily:'var(--font-sans)',
  }),
  under: { position:'absolute', left:0, right:0, bottom:-1, height:1, background:'#fff' },
  grid: { display:'grid', gridTemplateColumns:'repeat(2,1fr)', columnGap:48, rowGap:64 },
  empty: { gridColumn:'1 / -1', padding:'128px 0', textAlign:'center',
           border:'1px dashed #27272a', borderRadius:16, color:'#52525b',
           textTransform:'uppercase', letterSpacing:'0.1em', fontSize:12 },
};

function Work({ onNavigate }) {
  const [filter, setFilter] = React.useState('All');
  const tabs = ['All', ...new Set(window.FILMS.map(film => film.category))];
  const items = window.FILMS.filter(p => filter==='All' || p.category===filter);
  return (
    <div style={ws.wrap} className="zf-work-wrap">
      <div style={ws.inner} className="zf-section-inner">
        <header style={ws.head}>
          <h1 style={ws.h1} className="zf-reveal zf-work-h1">Work</h1>
          <div style={ws.tabs} className="zf-reveal zf-reveal-delay-1 zf-work-tabs">
            {tabs.map(t => (
              <button key={t} aria-pressed={filter===t} style={ws.tab(filter===t)} onClick={() => setFilter(t)}>
                {t}
                {filter===t && <span style={ws.under}/>}
              </button>
            ))}
          </div>
        </header>
        <div style={ws.grid} className="zf-work-grid">
          {items.length === 0 ? (
            <div style={ws.empty}>No projects found in this category</div>
          ) : items.map((p, i) => (
            <div key={p.id} className="zf-work-item">
              <ProjectCard {...p} onOpen={(id) => onNavigate('/work/' + id)} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Work = Work;