// page-work.jsx — Work index page

const WorkCSS = `
.page .wk-grid{ padding:60px 56px 80px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px 24px; }
.page .wk-card{ display:block; text-decoration:none; color:inherit; }
.page .wk-card .img{ aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:var(--paper); transition:transform .35s; }
.page .wk-card .img img{ width:100%; height:100%; object-fit:cover; display:block; }
.page .wk-card:hover .img{ transform:translateY(-4px) rotate(-.5deg); box-shadow:0 30px 60px -25px rgba(0,0,0,.3); }
.page .wk-card .meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; }
.page .wk-card h3{ font-family:'Instrument Serif',serif; font-style:italic; font-size:32px; line-height:1; margin:0; }
.page .wk-card .yr{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-soft); }
.page .wk-card .sub{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; color:var(--ink-soft); margin-top:4px; }

.page .wk-filters{ display:flex; gap:8px; padding:24px 56px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); align-items:center; flex-wrap:wrap; }
.page .wk-filters .label{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-right:12px; }
.page .wk-filters .chip{ padding:7px 14px; border:1px solid var(--rule); border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.page .wk-filters .chip.on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

.page .wk-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:80px 56px; border-top:1px solid var(--rule); text-align:center; }
.page .wk-stats .stat{ display:flex; flex-direction:column; align-items:center; gap:0; }
.page .wk-stats .stat .n{ font-family:'Instrument Serif',serif; font-style:italic; font-size:96px; line-height:1; color:var(--terra); }
.page .wk-stats .stat .l{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.12em; color:var(--ink-soft); text-transform:uppercase; margin-top:8px; }
`;

function WorkPage(){
  const [filter, setFilter] = React.useState('All');
  const filters = ['All','Squarespace','Shopify','WordPress','Webflow'];
  const filtered = filter==='All' ? PROJECTS : PROJECTS.filter(p=>p.platform===filter);
  return (
    <PageShell active="work">
      <style>{WorkCSS}</style>
      <header className="pghdr">
        <div className="eyebrow">Selected work · 2015 — 2026</div>
        <h1>A small <em>collection</em><br/>of nice websites.</h1>
        <p className="lede">{PROJECTS.length} recent projects, organised mostly by year. Click any to read the case study.</p>
        <Note at={{ bottom: 44, right: 70 }} rot={5}>each one shipped<br/>on time <span className="arr">↘</span></Note>
        <Tape at={{ bottom: 12, left: 56 }} rot={3} color="olive" />
        <Doodle at={{ top: 24, right: 180 }} rot={-20}>✦</Doodle>
        <Sticker at={{ top: 32, left: 200 }} rot={-6} color="rose" mobileHide={true}>portfolio ↓</Sticker>
      </header>

      <div className="wk-filters" style={{position:'relative'}}>
          <Tape at={{ top: -12, right: '30%' }} rot={2} color="rose" mobileHide={true} />
        <span className="label">Filter by</span>
        {filters.map(f => (
          <span key={f} className={'chip' + (f===filter ? ' on' : '')} onClick={()=>setFilter(f)}>{f}</span>
        ))}
        <span className="label" style={{marginLeft:'auto'}}>Showing {filtered.length} of {PROJECTS.length}</span>
      </div>

      <section className="wk-grid">
        {filtered.map(p => (
          <a key={p.id} className="wk-card" href={'case-study.html?slug=' + p.id}>
            <div className="img"><img src={p.img} alt={p.name + ' — ' + p.kind}/></div>
            <div className="meta">
              <h3>{p.name}</h3>
              <span className="yr">{p.year}</span>
            </div>
            <div className="sub">{p.kind} · {p.platform}</div>
          </a>
        ))}
      </section>

      <section className="wk-stats" style={{position:'relative'}}>
        <Tape at={{ top: -10, left: '40%' }} rot={-4} color="terra" />
        <Note at={{ top: 20, right: 56 }} rot={6} mobileHide={true}>the proof<br/>is in here ↓</Note>
        <div className="stat"><div className="n">140+</div><div className="l">sites shipped</div></div>
        <div className="stat"><div className="n">11</div><div className="l">years independent</div></div>
        <div className="stat"><div className="n">3</div><div className="l">platforms, fluently</div></div>
        <div className="stat"><div className="n">0</div><div className="l">retainers I regret</div></div>
      </section>

      <section className="cta-strip" style={{position:'relative'}}>
        <Doodle at={{ top: 30, left: 56 }} rot={-10} mobileHide={true}>→</Doodle>
        <Sticker at={{ top: -20, right: 80 }} rot={8} color="ink" mobileHide={true}>let's chat ✨</Sticker>
        <h2>Have a <em>project</em> in mind?</h2>
        <p>Tell me about it. I respond within a day, usually faster.</p>
        <a className="btn" href="contact.html">Get in touch ↗</a>
      </section>
    </PageShell>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<WorkPage/>);