const { Panel, Tag, Button } = window.WilliamPittsDesignSystem_a0390b;
function ProjectScreen({ id, onBack, onOpen }) {
  const m = window.innerWidth <= 720;
  const p = window.PROJECTS.find(x => x.id === id) || window.PROJECTS[0];
  const next = window.PROJECTS[(window.PROJECTS.indexOf(p) + 1) % window.PROJECTS.length];
  return <main style={{padding:m?'48px 20px 56px':'48px 40px 56px',maxWidth:1040,margin:'0 auto'}}>
    <button onClick={onBack} style={{all:'unset',cursor:'pointer',fontFamily:'var(--font-mono)',fontSize:12,fontWeight:600,textTransform:'uppercase',letterSpacing:'.1em'}}
      onMouseEnter={e=>{e.currentTarget.style.background='var(--ink)';e.currentTarget.style.color='var(--paper)'}}
      onMouseLeave={e=>{e.currentTarget.style.background='transparent';e.currentTarget.style.color='var(--ink)'}}>← All work</button>
    <div style={{display:'flex',alignItems:'flex-end',gap:20,margin:'28px 0 14px'}}>
      <span style={{fontFamily:'var(--font-display)',fontSize:'var(--display-lg)',lineHeight:.95}}>{p.num}</span>
      <h1 style={{fontSize:'clamp(40px, 6vw, 72px)',whiteSpace:m?'normal':'nowrap'}}>{p.title}</h1>
    </div>
    <div style={{display:'flex',gap:8,marginBottom:16,flexWrap:'wrap'}}>{p.tags.map(t => <Tag key={t}>{t}</Tag>)}</div>
    {p.link && <div style={{fontFamily:'var(--font-mono)',fontSize:13,marginBottom:32}}>→ {p.link}</div>}
    {p.stats && <div style={{display:'grid',gridTemplateColumns:m?'repeat(2,1fr)':`repeat(${p.stats.length},1fr)`,gap:'var(--panel-gutter)',marginBottom:36}}>
      {p.stats.map(([n, l]) => (
        <Panel key={l} padded={false}>
          <div style={{padding:'18px 20px'}}>
            <div style={{fontFamily:'var(--font-display)',fontSize:'var(--display-md)',lineHeight:1,textTransform:'uppercase'}}>{n}</div>
            <div style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'.14em',textTransform:'uppercase',color:'var(--text-muted)',marginTop:6}}>{l}</div>
          </div>
        </Panel>
      ))}
    </div>}
    <div style={{maxWidth:'68ch'}}>
      {p.body.map((para, i) => <p key={i} style={{fontSize:16,lineHeight:1.7,margin:'0 0 18px'}}>{para}</p>)}
    </div>
    <div style={{marginTop:44,borderTop:'var(--border-frame) solid var(--ink)',paddingTop:24,display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:12}}>
      <span style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'.14em',textTransform:'uppercase',color:'var(--text-muted)'}}>Next chapter</span>
      <Button variant="secondary" onClick={() => onOpen(next.id)}>{next.num} — {next.title} →</Button>
    </div>
  </main>;
}
Object.assign(window, { ProjectScreen });