function ProjectDetail({id,onBack,onOpen,onContact}){
  const {Button,Tag,Card,SectionHeading}=window.DS;
  const S=window.SITE; const i=S.projects.findIndex(p=>p.id===id); const p=S.projects[i]; const next=S.projects[(i+1)%S.projects.length];
  const label={font:'11px var(--font-mono)',letterSpacing:'var(--tracking-eyebrow)',textTransform:'uppercase',color:'var(--ink-3)'};
  const h3={margin:0,fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'var(--text-display-s)',color:'var(--ink)',lineHeight:1.15};
  return (
    <article style={{maxWidth:'var(--content-max)',margin:'0 auto',padding:'var(--space-7) var(--space-6) var(--space-9)'}}>
      <Button variant="ghost" size="sm" onClick={onBack}>← All work</Button>
      <div style={{marginTop:'var(--space-6)',display:'flex',flexDirection:'column',gap:'var(--space-4)'}}>
        <SectionHeading eyebrow={'Case study · '+p.kind+' · '+p.year} title={p.title} size="xl" lede={p.description}/>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,220px),1fr))',gap:'var(--space-4)',margin:'var(--space-7) 0'}}>
        {p.metrics.map(([n,l])=><Card key={l} surface="pastel" tone={p.tone} padding={24}><div style={{font:'400 44px/1 var(--font-serif)',color:'var(--ink)'}}>{n}</div><div style={{marginTop:8,fontSize:'var(--text-sm)',color:'var(--ink-2)'}}>{l}</div></Card>)}
        <Card padding={24} style={{display:'flex',flexDirection:'column',gap:10}}>
          <div><div style={label}>Role</div><div style={{color:'var(--ink)',marginTop:2}}>{p.role}</div></div>
          <div style={{display:'flex',flexWrap:'wrap',gap:6}}>{p.tags.map(t=><Tag key={t}>{t}</Tag>)}</div>
        </Card>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,300px),1fr))',gap:'var(--space-7)'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)'}}><h3 style={h3}>The problem</h3><p style={{margin:0,color:'var(--ink-2)',textWrap:'pretty'}}>{p.problem}</p></div>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)'}}><h3 style={h3}>What I did</h3><p style={{margin:0,color:'var(--ink-2)',textWrap:'pretty'}}>{p.summary}</p></div>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)'}}><h3 style={h3}>The result</h3><ul style={{margin:0,paddingLeft:20,color:'var(--ink-2)',display:'flex',flexDirection:'column',gap:6}}>{p.points.map(x=><li key={x}>{x}</li>)}</ul></div>
      </div>
      {p.decisions&&<div style={{marginTop:'var(--space-8)',display:'flex',flexDirection:'column',gap:'var(--space-4)'}}><h3 style={h3}>Key decisions</h3><div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,300px),1fr))',gap:'var(--space-4)'}}>{p.decisions.map(([t,d])=><Card key={t} padding={24}><div style={{fontWeight:600,color:'var(--ink)'}}>{t}</div><p style={{margin:'6px 0 0',color:'var(--ink-2)',textWrap:'pretty'}}>{d}</p></Card>)}</div></div>}
      <div style={{height:300,margin:'var(--space-8) 0 0',background:'var(--gingham-'+p.tone+'-lg)',border:'1.5px solid var(--ink)',borderRadius:'var(--radius-lg)',display:'grid',placeItems:'center'}}>
        <span style={{font:'12px var(--font-mono)',background:'var(--white)',border:'1px solid var(--ink)',padding:'6px 14px',borderRadius:'var(--radius-pill)',color:'var(--ink-2)'}}>recreated mock or architecture diagram</span>
      </div>
      <Card surface="gingham" tone={p.tone} padding={16} style={{marginTop:'var(--space-8)',borderRadius:'var(--radius-lg)'}}>
        <Card padding={32} style={{border:'1.5px solid var(--ink)',boxShadow:'none',display:'flex',justifyContent:'space-between',alignItems:'center',gap:'var(--space-5)',flexWrap:'wrap'}}>
          <div style={{maxWidth:520}}><div style={{font:'400 34px/1.1 var(--font-serif)',color:'var(--ink)'}}>Building something <em style={{color:'var(--rose-deep)'}}>similar?</em></div><p style={{margin:'8px 0 0',color:'var(--ink-2)'}}>I'm open to full-time frontend roles and freelance projects.</p></div>
          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}><Button onClick={onContact} iconRight="→">Get in touch</Button><Button variant="secondary" iconRight="↓">Download CV</Button></div>
        </Card>
      </Card>
      <Card surface="linen" interactive padding={28} style={{marginTop:'var(--space-6)',cursor:'pointer',display:'flex',justifyContent:'space-between',alignItems:'center'}} onClick={()=>onOpen(next.id)}>
        <div><div style={label}>Next case study</div><div style={{font:'400 36px var(--font-serif)',color:'var(--ink)'}}>{next.title}</div></div>
        <span style={{fontSize:28,color:'var(--ink)'}}>→</span>
      </Card>
    </article>
  );
}
window.ProjectDetail=ProjectDetail;