// Case study deep-dive page
const CaseStudy = ({ id, setPage }) => {
  const p = PORTFOLIO.find(x => x.id === id) || PORTFOLIO[0];
  return (
    <div className="page">
      {/* Hero */}
      <section style={{padding:'56px 0 80px', borderBottom:'1px solid var(--line)', position:'relative', overflow:'hidden'}}>
        <div aria-hidden style={{position:'absolute', top:-200, right:-100, width:600, height:600, background:`radial-gradient(circle, ${p.color}1a, transparent 60%)`, pointerEvents:'none', filter:'blur(40px)'}}/>
        <div className="container" style={{position:'relative'}}>
          <button onClick={()=>setPage('home')} className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:32,display:'inline-flex',alignItems:'center',gap:6}}>
            ← BACK TO WORK
          </button>
          <div style={{display:'flex',gap:8,marginBottom:24}}>
            <Tag>{p.tag}</Tag>
            <Tag>{p.year}</Tag>
            <Tag accent>Case study</Tag>
          </div>
          <h1 style={{fontSize:'clamp(48px,7vw,96px)', lineHeight:0.95, letterSpacing:'-0.04em', fontWeight:500, marginBottom:28}}>
            {p.name}
          </h1>
          <p style={{fontSize:'clamp(18px,1.8vw,24px)', lineHeight:1.45, color:'var(--ink-2)', maxWidth:780, letterSpacing:'-0.005em'}}>
            {p.summary}
          </p>
        </div>
      </section>

      {/* Meta strip */}
      <section style={{padding:'0', borderBottom:'1px solid var(--line)'}}>
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0}}>
            {[
              ['CLIENT', p.name],
              ['ROLE', p.role.join(' · ')],
              ['STACK', p.stack.join(' · ')],
              [p.metric[0].toUpperCase(), p.metric[1]],
            ].map(([l,v],i) => (
              <div key={l} style={{padding:'28px 28px', borderLeft: i>0 ? '1px solid var(--line)' : 'none'}}>
                <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10}}>{l}</div>
                <div style={{fontSize: i===3 ? 24 : 15, color: i===3 ? 'var(--accent)' : 'var(--ink)', fontWeight:500, letterSpacing:'-0.01em'}}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Hero shot */}
      <section style={{padding:'80px 0'}}>
        <div className="container">
          <Placeholder label={`hero shot · ${p.name.toLowerCase()}`} code={p.id.toUpperCase()} color={`${p.color}22`} ratio="16/9"/>
        </div>
      </section>

      {/* Content */}
      <section style={{padding:'0 0 100px'}}>
        <div className="container" style={{display:'grid', gridTemplateColumns:'minmax(0,2fr) 280px', gap:64, alignItems:'start'}}>
          <article style={{display:'flex',flexDirection:'column',gap:48}}>
            {[
              {h:'The problem', b:`${p.name} came to us with a product that was working — and falling apart. Eight years of organic feature growth, a stack from 2017, and a team that had grown faster than the codebase could absorb. Page loads were trending the wrong direction. Onboarding completion was eroding. The team was burning out trying to patch the dam.`},
              {h:'What we did', b:`We started with a two-week discovery: code audit, performance trace, user-session review, and conversations with the people who actually use the product every day. The output was a rebuild plan with a clear sequence — what to rewrite, what to leave alone, what to delete. No big-bang rewrite. No ten-month dark mode.`},
              {h:'How it shipped', b:`We worked in two-week sprints, demoing every Friday. The team had access to a preview environment from day three. Every change shipped behind feature flags, gated by canary rollouts. By week eight, 60% of traffic was on the new system. By week twelve, the old code was deleted.`},
              {h:'The result', b:`${p.metric[0]} moved from baseline to ${p.metric[1]}. More importantly, the team can ship again — features that used to take three weeks now go out on Tuesday afternoons. The codebase doubled in lines but halved in complexity, because we replaced six bespoke abstractions with one.`},
            ].map(s => (
              <div key={s.h}>
                <h2 style={{fontSize:'clamp(26px,2.8vw,34px)',letterSpacing:'-0.025em',fontWeight:500,marginBottom:18}}>{s.h}</h2>
                <p style={{fontSize:17,lineHeight:1.65,color:'var(--ink-2)',maxWidth:680}}>{s.b}</p>
              </div>
            ))}

            <Placeholder label={`mid-page artwork · ${p.id}`} code="V.02" color={`${p.color}22`} ratio="16/9"/>

            <div>
              <h2 style={{fontSize:'clamp(26px,2.8vw,34px)',letterSpacing:'-0.025em',fontWeight:500,marginBottom:24}}>What we'd do differently</h2>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:18}}>
                {[
                  ['Spend a week on the test harness','before any production code. We retrofitted it in sprint 4 — it should have been sprint 0.'],
                  ['Push back harder on scope creep','during week 6. The 3 features we said yes to cost us 2 sprints and shipped 1 result.'],
                ].map(([t,d])=>(
                  <div key={t} className="card" style={{padding:'20px 22px'}}>
                    <div style={{fontSize:14,fontWeight:500,letterSpacing:'-0.005em',marginBottom:8,color:'var(--accent)'}}>{t}</div>
                    <div style={{fontSize:13,color:'var(--ink-2)',lineHeight:1.55}}>{d}</div>
                  </div>
                ))}
              </div>
            </div>
          </article>

          {/* TOC sidebar */}
          <aside style={{position:'sticky',top:140,display:'flex',flexDirection:'column',gap:16}}>
            <div className="card" style={{padding:'22px 24px'}}>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>ON THIS PAGE</div>
              <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:8,fontSize:13}}>
                {['The problem','What we did','How it shipped','The result','What we\'d do differently'].map(s => (
                  <li key={s}><a style={{color:'var(--ink-2)'}}>{s}</a></li>
                ))}
              </ul>
            </div>

            <div className="card" style={{padding:'22px 24px'}}>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>TEAM</div>
              <div style={{display:'flex',flexDirection:'column',gap:10,fontSize:13}}>
                {TEAM.slice(0,3).map(t => (
                  <div key={t.id} style={{display:'flex',alignItems:'center',gap:10}}>
                    <span style={{width:26,height:26,borderRadius:'50%',background:`linear-gradient(135deg, ${t.role_color}55, ${t.role_color}22)`,border:`1px solid ${t.role_color}44`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:10,color:t.role_color}}>{t.avatar}</span>
                    <div>
                      <div style={{fontSize:13}}>{t.name}</div>
                      <div style={{fontSize:11,color:'var(--ink-3)'}}>{t.role}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </aside>
        </div>
      </section>

      {/* Next case */}
      <section style={{padding:'80px 0', borderTop:'1px solid var(--line)'}}>
        <div className="container">
          <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:20}}>NEXT CASE STUDY</div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
            {PORTFOLIO.filter(x=>x.id!==p.id).slice(0,2).map(np => (
              <CaseCard key={np.id} p={np}/>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

window.CaseStudy = CaseStudy;