// workindex.jsx - full filterable grid of all 14 projects (with empty-state fallback)
const { useState: useStateW } = React;

function WorkCard({ p, go }) {
  return (
    <button onClick={() => go('/work/' + p.id)} className="work-card" style={{ textAlign: 'left',
      cursor: 'pointer', background: '#fff', border: '1px solid var(--hairline)', borderRadius: 18,
      padding: 14, fontFamily: 'var(--font-text)', display: 'flex', flexDirection: 'column',
      transition: 'border-color .2s ease' }}>
      <div className="work-card-img" style={{ transition: 'transform .4s cubic-bezier(.22,.61,.36,1)' }}>
        <RenderFrame p={p} ratio="16 / 10" radius={10} />
      </div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', margin: '16px 2px 0' }}>
        {p.tags.map(t => <span key={t} className="t-micro-legal" style={{ color: 'var(--ink-muted-48)',
          border: '1px solid var(--hairline)', borderRadius: 9999, padding: '4px 9px' }}>{t}</span>)}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10, margin: '12px 2px 0' }}>
        <span className="t-body-strong" style={{ color: 'var(--ink)' }}>{p.name}</span>
        <span className="t-caption" style={{ color: 'var(--ink-muted-48)', whiteSpace: 'nowrap' }}>{p.year}</span>
      </div>
      <div className="t-caption" style={{ color: 'var(--ink-muted-48)', margin: '3px 2px 0', textWrap: 'pretty' }}>{p.tagline}</div>
      <div style={{ flex: 1 }} />
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, color: 'var(--primary)',
        fontSize: 14, margin: '16px 2px 2px' }}>View case study <Icon name="arrowR" size={15} color="var(--primary)" /></div>
    </button>
  );
}

function WorkIndex({ go }) {
  const [filter, setFilter] = useStateW('All');
  const shown = filter === 'All' ? PROJECTS : PROJECTS.filter(p => p.tags.includes(filter));
  return (
    <div style={{ background: '#fff' }}>
      <section style={{ padding: 'clamp(48px,6vw,80px) clamp(18px,4vw,40px) 0' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <Reveal>
            <Eyebrow>Work</Eyebrow>
            <h1 className="t-hero" style={{ color: 'var(--ink)', margin: '10px 0 0', letterSpacing: '-0.03em' }}>Everything I’ve built.</h1>
            <p className="t-lead" style={{ color: 'var(--ink-muted-48)', margin: '16px 0 0', maxWidth: 620, textWrap: 'pretty' }}>
              {PROJECTS.length} projects across mechanical design, robotics, AI/ML, and quant: {PROJECTS.filter(p => p.featured).length} full case studies, plus a deeper bench of coursework, hackathons, and personal research.</p>
          </Reveal>
          <Reveal delay={80}>
            <div style={{ display: 'flex', gap: 10, margin: '34px 0 0', flexWrap: 'wrap', alignItems: 'center' }}>
              {FILTERS.map(c => {
                const sel = filter === c;
                return (
                  <button key={c} onClick={() => setFilter(c)} style={{
                    background: sel ? 'var(--ink)' : '#fff',
                    border: `1px solid ${sel ? 'var(--ink)' : 'var(--hairline)'}`,
                    color: sel ? '#fff' : 'var(--ink)', borderRadius: 9999, padding: '9px 16px',
                    fontSize: 14, cursor: 'pointer', fontFamily: 'var(--font-text)',
                    transition: 'background .2s ease, border-color .2s ease' }}>{c}</button>
                );
              })}
              <span className="t-caption" style={{ color: 'var(--ink-muted-48)', marginLeft: 4 }}>
                {shown.length} {shown.length === 1 ? 'project' : 'projects'}</span>
            </div>
          </Reveal>
        </div>
      </section>
      <section style={{ padding: 'clamp(28px,4vw,40px) clamp(18px,4vw,40px) clamp(64px,8vw,96px)' }}>
        {shown.length === 0 ? (
          <div style={{ maxWidth: 1180, margin: '0 auto', textAlign: 'center', padding: 'clamp(36px,7vw,84px) 0' }}>
            <p className="t-lead" style={{ color: 'var(--ink)', margin: 0 }}>No projects tagged “{filter}” yet.</p>
            <p className="t-body" style={{ color: 'var(--ink-muted-48)', margin: '8px 0 0' }}>Try another filter, or browse the whole portfolio.</p>
            <button onClick={() => setFilter('All')} style={{ marginTop: 20, background: 'var(--ink)',
              border: '1px solid var(--ink)', color: '#fff', borderRadius: 9999, padding: '10px 18px',
              fontSize: 14, cursor: 'pointer', fontFamily: 'var(--font-text)',
              transition: 'background .2s ease, border-color .2s ease' }}>View all projects</button>
          </div>
        ) : (
          <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(290px, 1fr))', gap: 22 }}>
            {shown.map((p, i) => (
              <Reveal key={p.id} delay={Math.min(i * 35, 240)} style={{ display: 'flex' }}>
                <div style={{ display: 'flex', width: '100%' }}><WorkCard p={p} go={go} /></div>
              </Reveal>
            ))}
          </div>
        )}
      </section>
    </div>
  );
}

Object.assign(window, { WorkIndex, WorkCard });