// SP11 — Marketing standalone pages: /services, /process, /work
// Three deep public pages, sharing the editorial visual language.

// ═════════════════════════════════════════════════════════════════
// SERVICES PAGE
// ═════════════════════════════════════════════════════════════════

const ServicesPage = ({ setPage }) => {
  const [active, setActive] = React.useState(null);

  return (
    <div className="page">
      {/* Hero */}
      <section style={{padding:'56px 0 60px', 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, rgba(212,255,58,0.06), transparent 60%)', filter:'blur(40px)'}}/>
        <div className="container" style={{position:'relative'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:32,flexWrap:'wrap',gap:16}}>
            <div className="eyebrow"><span className="dot"/>Services · M11 · {SERVICES.length} offerings</div>
            <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>FROM $1,800 · 2–10 WEEKS TYPICAL</div>
          </div>
          <h1 style={{fontSize:'clamp(48px,8vw,120px)', lineHeight:0.92, letterSpacing:'-0.045em', fontWeight:500, marginBottom:28, maxWidth:1100}}>
            Six things, <span className="serif" style={{color:'var(--accent)'}}>done</span> deliberately.
          </h1>
          <p style={{fontSize:'clamp(17px,1.6vw,21px)', lineHeight:1.5, color:'var(--ink-2)', maxWidth:720}}>
            We don't try to be everything. Here's what we ship — at a level you can put in front of paying users tomorrow. Each is fixed-scope, weekly-demoed, and ends with a working product, not a slide deck.
          </p>
        </div>
      </section>

      {/* Anchor nav */}
      <section style={{padding:'20px 0', position:'sticky', top:68, zIndex:30, background:'rgba(10,10,10,0.85)', backdropFilter:'blur(18px)', borderBottom:'1px solid var(--line)'}}>
        <div className="container" style={{display:'flex',gap:6,alignItems:'center',flexWrap:'wrap'}}>
          <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginRight:8}}>JUMP TO</span>
          {SERVICES.map(s => (
            <a key={s.id} href={`#${s.id}`} onClick={e=>{e.preventDefault();document.getElementById(s.id)?.scrollIntoView({behavior:'smooth',block:'start'})}} style={{
              padding:'5px 10px',borderRadius:6,fontSize:12,color:'var(--ink-3)',border:'1px solid var(--line)',
              fontFamily:'var(--mono)',letterSpacing:'0.02em'
            }}>{s.code} · {s.title.split(',')[0]}</a>
          ))}
        </div>
      </section>

      {/* Detailed services */}
      <section style={{padding:'60px 0 40px'}}>
        <div className="container" style={{display:'flex',flexDirection:'column',gap:60}}>
          {SERVICES.map((s, i) => (
            <ServiceBlock key={s.id} s={s} idx={i}/>
          ))}
        </div>
      </section>

      {/* Process strip */}
      <section style={{padding:'60px 0', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', background:'var(--bg-2)'}}>
        <div className="container">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:32,flexWrap:'wrap',gap:16}}>
            <div>
              <div className="eyebrow" style={{marginBottom:10}}><span className="dot"/>How we work</div>
              <h2 style={{fontSize:'clamp(28px,3.4vw,42px)',letterSpacing:'-0.03em',fontWeight:500}}>The same four phases. Always.</h2>
            </div>
            <button onClick={()=>setPage('process')} className="btn btn-ghost" style={{padding:'8px 14px',fontSize:12}}>Read the process →</button>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:1,background:'var(--line)',border:'1px solid var(--line)',borderRadius:'var(--radius)',overflow:'hidden'}}>
            {[
              {n:'01',t:'Discover',d:'Workshop, audit, define scope. 1 week.',c:'#7c9bff'},
              {n:'02',t:'Design',d:'Mocks, prototype, sign-off. 1–2 weeks.',c:'#ff8a3a'},
              {n:'03',t:'Build',d:'2-week sprints, weekly demos.',c:'#d4ff3a'},
              {n:'04',t:'Ship',d:'Launch, monitor, iterate.',c:'#a78bfa'},
            ].map(p=>(
              <div key={p.n} style={{padding:'28px 32px',background:'var(--bg-2)'}}>
                <div className="mono" style={{fontSize:11,color:p.c,letterSpacing:'0.06em',marginBottom:14}}>STEP {p.n}</div>
                <div style={{fontSize:22,fontWeight:500,letterSpacing:'-0.02em',marginBottom:8}}>{p.t}</div>
                <div style={{fontSize:13,color:'var(--ink-3)',lineHeight:1.5}}>{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{padding:'80px 0'}}>
        <div className="container">
          <ServicesCTA setPage={setPage}/>
        </div>
      </section>
    </div>
  );
};

const ServiceBlock = ({ s, idx }) => {
  const accents = ['#7c9bff','#a78bfa','#7ee787','#ff8a3a','#fde047','#22d3ee'];
  const c = accents[idx % accents.length];
  return (
    <div id={s.id} style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)',gap:48,alignItems:'start',scrollMarginTop:140}}>
      <div>
        <div className="mono" style={{fontSize:12,color:c,letterSpacing:'0.08em',marginBottom:18}}>{s.code} · {s.tag || 'SERVICE'}</div>
        <h2 style={{fontSize:'clamp(34px,4.6vw,58px)',lineHeight:1,letterSpacing:'-0.035em',fontWeight:500,marginBottom:24}}>{s.title}</h2>
        <p style={{fontSize:18,lineHeight:1.55,color:'var(--ink-2)',marginBottom:28,maxWidth:520}}>{s.summary}</p>

        <div style={{padding:'20px 22px',borderRadius:10,border:'1px solid var(--line)',background:'var(--bg-2)',marginBottom:24}}>
          <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:12,textTransform:'uppercase'}}>What's included</div>
          <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:8}}>
            {s.deliverables.map(d => (
              <li key={d} style={{display:'flex',alignItems:'center',gap:10,fontSize:14,color:'var(--ink-2)'}}>
                <span style={{color:c}}>{Icon.check()}</span>{d}
              </li>
            ))}
          </ul>
        </div>

        <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
          <button className="btn btn-primary">Start a project {Icon.arrow()}</button>
          <button className="btn btn-ghost">Sample work ↗</button>
        </div>
      </div>

      <aside style={{display:'flex',flexDirection:'column',gap:14}}>
        {/* Big stat card */}
        <div className="card" style={{padding:'28px 30px',background:`linear-gradient(135deg, ${c}14, var(--bg-2))`,borderColor:`${c}33`}}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:0}}>
            <div style={{paddingRight:20}}>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:8}}>STARTS AT</div>
              <div style={{fontSize:32,fontWeight:500,letterSpacing:'-0.02em',color:c}}>{s.starts}</div>
            </div>
            <div style={{paddingLeft:20,borderLeft:'1px solid var(--line)'}}>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:8}}>TIMELINE</div>
              <div style={{fontSize:32,fontWeight:500,letterSpacing:'-0.02em'}}>{s.timeline}</div>
            </div>
          </div>
        </div>

        {/* Tech */}
        <div className="card" style={{padding:'22px 24px'}}>
          <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>STACK & TOOLS</div>
          <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
            {s.bullets.map(b => <Tag key={b}>{b}</Tag>)}
          </div>
        </div>

        {/* FAQ */}
        <div className="card" style={{padding:'22px 24px'}}>
          <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>COMMON QUESTIONS</div>
          <div style={{display:'flex',flexDirection:'column',gap:0}}>
            {[
              ['When do you need our content?',  'A week before kickoff. We can write drafts if you don\'t have any.'],
              ['What if scope changes mid-project?',  'We pause and write a Change Order. You approve, then we proceed.'],
              ['Do you sign NDAs?',  'Yes, before discovery starts.'],
            ].map(([q,a],i) => (
              <details key={i} style={{padding:'10px 0',borderTop: i>0 ? '1px solid var(--line)' : 'none'}}>
                <summary style={{cursor:'pointer',fontSize:13,fontWeight:500,letterSpacing:'-0.005em',display:'flex',justifyContent:'space-between'}}>
                  {q}<span style={{color:'var(--ink-3)'}}>+</span>
                </summary>
                <p style={{marginTop:8,fontSize:12,color:'var(--ink-3)',lineHeight:1.55}}>{a}</p>
              </details>
            ))}
          </div>
        </div>
      </aside>
    </div>
  );
};

const ServicesCTA = ({ setPage }) => (
  <div style={{padding:'48px 56px',borderRadius:'var(--radius)',border:'1px solid var(--accent)',background:'linear-gradient(135deg, rgba(212,255,58,0.05), transparent)',display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:32,alignItems:'center'}}>
    <div>
      <div className="mono" style={{fontSize:11,color:'var(--accent)',letterSpacing:'0.08em',marginBottom:14}}>● TAKING WORK · JUNE</div>
      <h3 style={{fontSize:'clamp(28px,3.4vw,40px)',letterSpacing:'-0.025em',fontWeight:500,marginBottom:14}}>Don't see what you need?</h3>
      <p style={{fontSize:15,color:'var(--ink-2)',lineHeight:1.55,maxWidth:520}}>If your project doesn't fit neatly into one of these six, get in touch. Most of our best work started with "we don't quite do this, but…"</p>
    </div>
    <div style={{display:'flex',flexDirection:'column',gap:10}}>
      <button onClick={()=>{setPage('home');setTimeout(()=>document.getElementById('contact')?.scrollIntoView({behavior:'smooth'}),60)}} className="btn btn-primary" style={{justifyContent:'center',padding:'14px 20px'}}>Start a project {Icon.arrow()}</button>
      <button onClick={()=>setPage('pricing')} className="btn btn-ghost" style={{justifyContent:'center',padding:'13px 20px'}}>See pricing tiers</button>
    </div>
  </div>
);

// ═════════════════════════════════════════════════════════════════
// PROCESS PAGE
// ═════════════════════════════════════════════════════════════════

const ProcessPage = ({ setPage }) => {
  const phases = [
    {n:'01',t:'Discover',d:'1 week. We figure out what you\'re actually building.',c:'#7c9bff',
     items:[
       ['Discovery workshop','Half-day call with stakeholders. We map goals, users, constraints, success criteria.'],
       ['Technical audit','If there\'s existing code: a top-to-bottom audit. Performance trace, security scan, architecture review.'],
       ['Scope doc','One-page SOW. Modules, sprints, fixed price, fixed deadline.'],
     ]},
    {n:'02',t:'Design',d:'1–2 weeks. We turn the doc into something you can click.',c:'#ff8a3a',
     items:[
       ['Information architecture','Site map, user flows, key states. Reviewed before any pixels are pushed.'],
       ['Hi-fi prototype','Clickable Figma or coded prototype. Real copy, real data, real interactions.'],
       ['Design system','Tokens, components, primitives. Everything we build sits on this foundation.'],
     ]},
    {n:'03',t:'Build',d:'2–10 weeks. 2-week sprints. Weekly demos.',c:'#d4ff3a',
     items:[
       ['Sprint planning','Every other Monday, 10:00. We commit to a 2-week scope, broken into stories with point estimates.'],
       ['Daily standup','09:30 each weekday. 15 minutes. What I shipped, what I\'m doing, what\'s blocking me.'],
       ['Friday demo','Every Friday at 16:00 we ship a build to staging and walk through what changed.'],
       ['Retrospective','Last 30 minutes of every other Friday. What worked, what didn\'t, what changes for next sprint.'],
     ]},
    {n:'04',t:'Ship',d:'1 week. Launch, monitor, hand off.',c:'#a78bfa',
     items:[
       ['Production rollout','Feature flags + canary deploys. We ramp from 1% to 100% over a few days.'],
       ['Monitoring + alerts','Sentry, PostHog, Vercel Analytics wired up. You get the dashboard on day one.'],
       ['Handoff session','Live walkthrough of the codebase + architecture. Recorded so the next engineer can watch it later.'],
       ['Support window','90 days / 12 months / ongoing depending on tier. Bug fixes free, new features quoted.'],
     ]},
  ];

  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, left:-100, width:600, height:600, background:'radial-gradient(circle, rgba(212,255,58,0.06), transparent 60%)', filter:'blur(40px)'}}/>
        <div className="container" style={{position:'relative'}}>
          <div className="eyebrow" style={{marginBottom:24}}><span className="dot"/>The process · M11 · v0.4</div>
          <h1 style={{fontSize:'clamp(48px,8vw,120px)', lineHeight:0.92, letterSpacing:'-0.045em', fontWeight:500, marginBottom:28, maxWidth:1100}}>
            The same way, <span className="serif" style={{color:'var(--accent)'}}>every</span> time.
          </h1>
          <p style={{fontSize:'clamp(17px,1.6vw,21px)', lineHeight:1.5, color:'var(--ink-2)', maxWidth:720}}>
            Four phases, two-week sprints, weekly demos. We don't reinvent the wheel for every project — we invented one good wheel and put it under every car.
          </p>
        </div>
      </section>

      {/* The four phases */}
      <section style={{padding:'80px 0'}}>
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'200px 1fr',gap:48,marginBottom:48}}>
            <div className="eyebrow"><span className="dot"/>The four phases</div>
            <h2 style={{fontSize:'clamp(28px,3.6vw,44px)',letterSpacing:'-0.03em',fontWeight:500,maxWidth:720}}>From "we should build something" to "it's live."</h2>
          </div>

          <div style={{display:'flex',flexDirection:'column',gap:48}}>
            {phases.map((p, i) => (
              <div key={p.n} style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)',gap:48,padding:'40px 0',borderTop: i>0 ? '1px solid var(--line)' : 'none'}}>
                <div>
                  <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:24}}>
                    <span className="serif" style={{fontSize:80,letterSpacing:'-0.04em',color:p.c,lineHeight:0.9}}>{p.n}</span>
                    <div>
                      <h3 style={{fontSize:36,fontWeight:500,letterSpacing:'-0.025em',lineHeight:1,marginBottom:6}}>{p.t}</h3>
                      <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>PHASE {p.n}</div>
                    </div>
                  </div>
                  <p style={{fontSize:18,color:'var(--ink-2)',lineHeight:1.55,maxWidth:480,marginBottom:20}}>{p.d}</p>
                  <div style={{padding:'14px 16px',borderRadius:8,background:'var(--bg-2)',border:'1px solid var(--line)',display:'flex',alignItems:'center',gap:14,fontSize:13}}>
                    <span className="mono" style={{fontSize:10,color:p.c,letterSpacing:'0.06em'}}>OWNED BY</span>
                    <span style={{color:'var(--ink-2)'}}>{['Engineering lead','Design lead','Whole team','Engineering lead'][i]}</span>
                    <div style={{flex:1}}/>
                    <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{['DELIVERABLE: SOW','DELIVERABLE: PROTOTYPE','DELIVERABLE: BUILDS','DELIVERABLE: LIVE SITE'][i]}</span>
                  </div>
                </div>

                <div style={{display:'flex',flexDirection:'column',gap:1,border:'1px solid var(--line)',borderRadius:'var(--radius)',overflow:'hidden',background:'var(--line)'}}>
                  {p.items.map(([t,d],j) => (
                    <div key={t} style={{padding:'20px 24px',background:'var(--bg-2)'}}>
                      <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
                        <span className="mono" style={{fontSize:10,color:p.c,letterSpacing:'0.06em'}}>0{j+1}</span>
                        <h4 style={{fontSize:15,fontWeight:500,letterSpacing:'-0.005em'}}>{t}</h4>
                      </div>
                      <p style={{fontSize:13,color:'var(--ink-3)',lineHeight:1.55}}>{d}</p>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Sprint cadence */}
      <section style={{padding:'80px 0', borderTop:'1px solid var(--line)', background:'var(--bg-2)'}}>
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'200px 1fr',gap:48,marginBottom:32}}>
            <div className="eyebrow"><span className="dot"/>Sprint cadence</div>
            <h2 style={{fontSize:'clamp(28px,3.6vw,44px)',letterSpacing:'-0.03em',fontWeight:500,maxWidth:720}}>Two weeks at a time. No exceptions.</h2>
          </div>

          <div style={{border:'1px solid var(--line)',borderRadius:'var(--radius)',padding:'32px 36px',background:'var(--bg)'}}>
            {/* Days */}
            <div style={{display:'grid',gridTemplateColumns:'140px repeat(10,1fr)',gap:0,marginBottom:14}}>
              <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em'}}>WEEK 1 → 2</div>
              {Array.from({length:10},(_,i) => (
                <div key={i} className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.04em',textAlign:'center',borderLeft:'1px solid var(--line)',padding:'0 4px'}}>
                  {['MON','TUE','WED','THU','FRI','MON','TUE','WED','THU','FRI'][i]}
                </div>
              ))}
            </div>

            {[
              {n:'Standup',d:'09:30 daily · 15 min',cells:[1,2,3,4,5,6,7,8,9,10],c:'#7c9bff',weak:[2,4,7,9]},
              {n:'Planning',d:'Mon week 1 · 60 min',cells:[1],c:'#d4ff3a'},
              {n:'Design review',d:'Wed · 60 min',cells:[3,8],c:'#ff8a3a'},
              {n:'Demo + retro',d:'Fri week 2 · 90 min',cells:[10],c:'#a78bfa'},
              {n:'Coding hours',d:'~6h focused per day',cells:[1,2,3,4,5,6,7,8,9],c:'rgba(212,255,58,0.5)'},
            ].map((row, ri) => (
              <div key={row.n} style={{display:'grid',gridTemplateColumns:'140px repeat(10,1fr)',gap:0,alignItems:'center',padding:'10px 0',borderTop:'1px dashed var(--line)'}}>
                <div style={{paddingRight:12}}>
                  <div style={{fontSize:12,fontWeight:500,letterSpacing:'-0.005em'}}>{row.n}</div>
                  <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.04em',marginTop:2}}>{row.d}</div>
                </div>
                {Array.from({length:10},(_,i) => (
                  <div key={i} style={{display:'flex',justifyContent:'center',alignItems:'center',height:24,borderLeft:'1px solid var(--line)'}}>
                    {row.cells.includes(i+1) && <div style={{
                      width: ri===4 ? '90%' : 8, height: ri===4 ? 4 : 8,
                      borderRadius: ri===4 ? 2 : 4,
                      background: row.c,
                      opacity: row.weak?.includes(i+1) ? 0.4 : 1
                    }}/>}
                  </div>
                ))}
              </div>
            ))}
          </div>

          {/* Ceremonies */}
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginTop:24}}>
            {[
              {t:'Mon 10:00',l:'Sprint planning',d:'Commit to scope. Break stories. Estimate points.'},
              {t:'Daily 09:30',l:'Standup',d:'15 min. Async on Slack if anyone\'s out.'},
              {t:'Wed 14:00',l:'Design review',d:'Sana + engineering. Walk current designs.'},
              {t:'Fri 16:00',l:'Demo + retro',d:'Show what shipped. Discuss what to change.'},
            ].map(r => (
              <div key={r.l} className="card" style={{padding:'18px 20px'}}>
                <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:8}}>{r.t.toUpperCase()}</div>
                <div style={{fontSize:14,fontWeight:500,letterSpacing:'-0.005em',marginBottom:5}}>{r.l}</div>
                <div style={{fontSize:12,color:'var(--ink-3)',lineHeight:1.5}}>{r.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Principles */}
      <section style={{padding:'80px 0', borderTop:'1px solid var(--line)'}}>
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'200px 1fr',gap:48,marginBottom:40}}>
            <div className="eyebrow"><span className="dot"/>Principles</div>
            <h2 style={{fontSize:'clamp(28px,3.6vw,44px)',letterSpacing:'-0.03em',fontWeight:500,maxWidth:720}}>Five rules we don't bend.</h2>
          </div>
          <div style={{display:'grid',gap:1,background:'var(--line)',border:'1px solid var(--line)',borderRadius:'var(--radius)',overflow:'hidden'}}>
            {PRINCIPLES.map(p => (
              <div key={p.n} style={{padding:'32px 36px', background:'var(--bg-2)', display:'grid', gridTemplateColumns:'120px 1fr', gap:32, alignItems:'start'}}>
                <div className="serif" style={{fontSize:64,letterSpacing:'-0.04em',color:'var(--accent)',lineHeight:1}}>{p.n}</div>
                <div>
                  <h3 style={{fontSize:24,letterSpacing:'-0.02em',fontWeight:500,marginBottom:12}}>{p.t}</h3>
                  <p style={{fontSize:16,color:'var(--ink-2)',lineHeight:1.55,maxWidth:680}}>{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Tools */}
      <section style={{padding:'80px 0', borderTop:'1px solid var(--line)', background:'var(--bg-2)'}}>
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'200px 1fr',gap:48,marginBottom:32}}>
            <div className="eyebrow"><span className="dot"/>Tools</div>
            <h2 style={{fontSize:'clamp(28px,3.6vw,44px)',letterSpacing:'-0.03em',fontWeight:500,maxWidth:720}}>What we use to run the studio.</h2>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(260px,1fr))',gap:14}}>
            {[
              ['Linear','Project mgmt'],['GitHub','Code + reviews'],['Vercel','Deploys'],['Figma','Design'],
              ['Slack','Team chat'],['Loom','Async demos'],['Notion','Docs + specs'],['Sentry','Errors'],
              ['PostHog','Analytics'],['Cal.com','Scheduling'],['Stripe','Payments'],['Resend','Email'],
            ].map(([n,l]) => (
              <div key={n} style={{padding:'16px 18px',borderRadius:8,border:'1px solid var(--line)',background:'var(--bg)',display:'flex',alignItems:'center',gap:12}}>
                <span style={{width:30,height:30,borderRadius:6,background:'rgba(255,255,255,0.04)',border:'1px solid var(--line-2)',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:600,fontSize:13,color:'var(--ink-2)'}}>{n[0]}</span>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:13,fontWeight:500}}>{n}</div>
                  <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{l.toUpperCase()}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{padding:'80px 0'}}>
        <div className="container">
          <ServicesCTA setPage={setPage}/>
        </div>
      </section>
    </div>
  );
};

// ═════════════════════════════════════════════════════════════════
// WORK INDEX PAGE
// ═════════════════════════════════════════════════════════════════

const WorkPage = ({ setPage, openCase }) => {
  const [tag, setTag] = React.useState('All');
  const [year, setYear] = React.useState('All');
  const [layout, setLayout] = React.useState('editorial');

  const tags = ['All', ...new Set(PORTFOLIO.map(p=>p.tag))];
  const years = ['All', ...new Set(PORTFOLIO.map(p=>p.year))].sort().reverse();
  const filtered = PORTFOLIO.filter(p =>
    (tag === 'All' || p.tag === tag) &&
    (year === 'All' || p.year === year)
  );

  return (
    <div className="page">
      {/* Hero */}
      <section style={{padding:'56px 0 60px', 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, rgba(212,255,58,0.06), transparent 60%)', filter:'blur(40px)'}}/>
        <div className="container" style={{position:'relative'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:32,flexWrap:'wrap',gap:16}}>
            <div className="eyebrow"><span className="dot"/>Selected work · {PORTFOLIO.length} cases · since 2022</div>
            <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>EVERY PROJECT HAS A CASE STUDY</div>
          </div>
          <h1 style={{fontSize:'clamp(48px,8vw,120px)', lineHeight:0.92, letterSpacing:'-0.045em', fontWeight:500, marginBottom:28, maxWidth:1100}}>
            What we've <span className="serif" style={{color:'var(--accent)'}}>shipped</span>.
          </h1>
          <p style={{fontSize:'clamp(17px,1.6vw,21px)', lineHeight:1.5, color:'var(--ink-2)', maxWidth:720}}>
            41 projects across fintech, AI, commerce, healthcare, and dev tools. Every entry links to a full case study — the build log, the decisions, the things we'd do differently.
          </p>

          {/* Quick stats */}
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0,marginTop:48,border:'1px solid var(--line)',borderRadius:'var(--radius)',overflow:'hidden'}}>
            {[
              ['Cases shipped','41','since 2022'],
              ['Repeat clients','73%','past projects'],
              ['Avg engagement','9 weeks','sprint cadence'],
              ['On-time delivery','94%','of milestones'],
            ].map(([l,v,sub],i) => (
              <div key={l} style={{padding:'24px 28px', borderLeft: i>0 ? '1px solid var(--line)' : 'none', background:'var(--bg-2)'}}>
                <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10}}>{l.toUpperCase()}</div>
                <div style={{fontSize:32,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4,color: i===0 || i===2 ? 'var(--accent)' : 'var(--ink)'}}>{v}</div>
                <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em',textTransform:'uppercase'}}>{sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Filters */}
      <section style={{padding:'24px 0',position:'sticky',top:68,zIndex:30,background:'rgba(10,10,10,0.85)',backdropFilter:'blur(18px)',borderBottom:'1px solid var(--line)'}}>
        <div className="container" style={{display:'flex',gap:24,alignItems:'center',flexWrap:'wrap'}}>
          <div style={{display:'flex',alignItems:'center',gap:8}}>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginRight:6}}>TAG</span>
            <div style={{display:'flex',gap:4,flexWrap:'wrap'}}>
              {tags.map(t => (
                <button key={t} onClick={()=>setTag(t)} style={{
                  padding:'5px 10px',borderRadius:6,fontSize:12,
                  background: tag===t ? 'rgba(255,255,255,0.06)' : 'transparent',
                  color: tag===t ? 'var(--ink)' : 'var(--ink-3)',
                  border:'1px solid', borderColor: tag===t ? 'var(--line-2)' : 'transparent'
                }}>{t}</button>
              ))}
            </div>
          </div>
          <div style={{width:1,height:24,background:'var(--line)'}}/>
          <div style={{display:'flex',alignItems:'center',gap:8}}>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginRight:6}}>YEAR</span>
            <div style={{display:'flex',gap:4}}>
              {years.map(y => (
                <button key={y} onClick={()=>setYear(y)} style={{
                  padding:'5px 10px',borderRadius:6,fontSize:12,
                  background: year===y ? 'rgba(255,255,255,0.06)' : 'transparent',
                  color: year===y ? 'var(--ink)' : 'var(--ink-3)',
                  border:'1px solid', borderColor: year===y ? 'var(--line-2)' : 'transparent'
                }}>{y}</button>
              ))}
            </div>
          </div>
          <div style={{flex:1}}/>
          <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{filtered.length} OF {PORTFOLIO.length}</span>
          <div style={{display:'flex',gap:2,padding:2,borderRadius:7,border:'1px solid var(--line)'}}>
            {[['editorial','▦'],['list','☰']].map(([k,ic]) => (
              <button key={k} onClick={()=>setLayout(k)} style={{padding:'4px 9px',borderRadius:5,fontSize:13,background: layout===k ? 'var(--bg-3)' : 'transparent',color: layout===k ? 'var(--ink)' : 'var(--ink-3)'}}>{ic}</button>
            ))}
          </div>
        </div>
      </section>

      {/* Featured */}
      {tag === 'All' && year === 'All' && (
        <section style={{padding:'48px 0 24px'}}>
          <div className="container">
            <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:18}}>● FEATURED</div>
            <div onClick={()=>openCase(filtered[0])} className="clickable">
              <CaseCard p={filtered[0]} big/>
            </div>
          </div>
        </section>
      )}

      {/* Grid */}
      <section style={{padding:'40px 0 80px'}}>
        <div className="container">
          {layout === 'editorial' && (
            <div style={{display:'grid',gridTemplateColumns:'repeat(12,1fr)',gap:24}}>
              {filtered.slice(tag==='All' && year==='All' ? 1 : 0).map((p, i) => {
                const span = i % 3 === 1 ? 6 : i % 3 === 2 ? 6 : 12;
                const actualSpan = filtered.length > 6 ? (i % 2 === 0 ? 7 : 5) : 6;
                return (
                  <div key={p.id} onClick={()=>openCase(p)} className="clickable" style={{gridColumn:`span ${actualSpan}`}}>
                    <CaseCard p={p}/>
                  </div>
                );
              })}
            </div>
          )}
          {layout === 'list' && (
            <div style={{border:'1px solid var(--line)',borderRadius:'var(--radius)',overflow:'hidden'}}>
              {filtered.map((p, i) => (
                <div key={p.id} onClick={()=>openCase(p)} className="clickable" style={{
                  display:'grid', gridTemplateColumns:'80px 80px 1.5fr 1.2fr 1fr 60px',gap:24,alignItems:'center',
                  padding:'24px 28px',borderTop: i>0 ? '1px solid var(--line)' : 'none',
                  transition:'background .2s ease'
                }}
                onMouseEnter={e=>e.currentTarget.style.background='var(--bg-2)'}
                onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                  <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{String(i+1).padStart(2,'0')}</span>
                  <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{p.year}</span>
                  <div>
                    <div style={{fontSize:18,fontWeight:500,letterSpacing:'-0.01em',marginBottom:4}}>{p.name}</div>
                    <div style={{fontSize:13,color:'var(--ink-3)'}}>{p.summary}</div>
                  </div>
                  <div>
                    <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:3,textTransform:'uppercase'}}>{p.metric[0]}</div>
                    <div style={{fontSize:14,color:'var(--accent)'}}>{p.metric[1]}</div>
                  </div>
                  <div style={{fontSize:12,color:'var(--ink-2)'}}>{p.stack.join(' · ')}</div>
                  <span style={{justifySelf:'end',color:'var(--ink-3)'}}>{Icon.arrow()}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* CTA */}
      <section style={{padding:'40px 0 80px',borderTop:'1px solid var(--line)'}}>
        <div className="container">
          <div style={{padding:'48px 56px',borderRadius:'var(--radius)',border:'1px solid var(--line)',background:'var(--bg-2)',display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:32,alignItems:'center'}}>
            <div>
              <div className="mono" style={{fontSize:11,color:'var(--accent)',letterSpacing:'0.08em',marginBottom:14}}>● ACCEPTING NEW WORK</div>
              <h3 style={{fontSize:'clamp(28px,3.4vw,40px)',letterSpacing:'-0.025em',fontWeight:500,marginBottom:14}}>Yours could be next.</h3>
              <p style={{fontSize:15,color:'var(--ink-2)',lineHeight:1.55,maxWidth:520}}>Two slots left for June starts. July is filling. Tell us about your project — we'll come back within 24 hours.</p>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              <button onClick={()=>{setPage('home');setTimeout(()=>document.getElementById('contact')?.scrollIntoView({behavior:'smooth'}),60)}} className="btn btn-primary" style={{justifyContent:'center',padding:'14px 20px'}}>Start a project {Icon.arrow()}</button>
              <button onClick={()=>setPage('services')} className="btn btn-ghost" style={{justifyContent:'center',padding:'13px 20px'}}>See services</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { ServicesPage, ProcessPage, WorkPage });