// M04 — Public developer profile page
const DevProfile = ({ id, setPage, openCase }) => {
  const d = TEAM.find(t => t.id === id) || TEAM[0];
  const projects = PORTFOLIO.slice(0, 4);
  const posts = POSTS.filter((_, i) => i < 2);

  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, ${d.role_color}1a, transparent 60%)`, filter:'blur(40px)', pointerEvents:'none'}}/>
        <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'}}>← TEAM</button>

          <div style={{display:'grid', gridTemplateColumns:'minmax(0,2fr) minmax(280px,360px)', gap:48, alignItems:'start'}}>
            <div>
              <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:20}}>
                <span style={{display:'inline-flex',alignItems:'center',gap:6,padding:'4px 10px',borderRadius:999,background:'rgba(126,231,135,0.1)',border:'1px solid rgba(126,231,135,0.3)'}}>
                  <span style={{width:6,height:6,borderRadius:'50%',background:'var(--ok)'}}/>
                  <span className="mono" style={{fontSize:10,color:'var(--ok)',letterSpacing:'0.04em'}}>AVAILABLE · JUNE</span>
                </span>
                <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>⌖ {d.location.toUpperCase()}</span>
              </div>

              <h1 style={{fontSize:'clamp(48px,7vw,96px)', lineHeight:0.95, letterSpacing:'-0.04em', fontWeight:500, marginBottom:20}}>
                {d.name}
              </h1>
              <div className="serif" style={{fontSize:'clamp(22px,2.4vw,32px)',color:'var(--accent)',marginBottom:28,letterSpacing:'-0.01em'}}>
                {d.role}.
              </div>
              <p style={{fontSize:'clamp(17px,1.6vw,21px)', lineHeight:1.55, color:'var(--ink-2)', maxWidth:680, marginBottom:32}}>
                {d.bio} Available for full-stack engagements, technical leadership on complex builds, and one-off audits for teams who need a second pair of eyes before shipping.
              </p>

              <div style={{display:'flex', gap:10, flexWrap:'wrap'}}>
                <button className="btn btn-primary">Hire {d.name.split(' ')[0]} {Icon.arrow()}</button>
                <button className="btn btn-ghost">Download CV</button>
                <button className="btn btn-ghost">Book intro call</button>
              </div>
            </div>

            {/* Avatar + quick stats */}
            <aside>
              <div style={{
                aspectRatio:'1', borderRadius:'var(--radius)',
                background:`linear-gradient(135deg, ${d.role_color}33, ${d.role_color}0a)`,
                border:`1px solid ${d.role_color}44`,
                display:'flex',alignItems:'center',justifyContent:'center',
                fontFamily:'var(--mono)',fontSize:120,fontWeight:600,
                color: d.role_color,
                marginBottom:20,
                position:'relative',
                overflow:'hidden'
              }}>
                <svg style={{position:'absolute',inset:0,opacity:0.3}} width="100%" height="100%">
                  <defs>
                    <pattern id="devbg" width="20" height="20" patternUnits="userSpaceOnUse">
                      <circle cx="10" cy="10" r="0.5" fill={d.role_color}/>
                    </pattern>
                  </defs>
                  <rect width="100%" height="100%" fill="url(#devbg)"/>
                </svg>
                <span style={{position:'relative',letterSpacing:'-0.04em'}}>{d.avatar}</span>
              </div>

              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, border:'1px solid var(--line)', borderRadius:'var(--radius)', overflow:'hidden'}}>
                {[
                  ['PROJECTS', d.projects],
                  ['YEARS XP', d.years],
                  ['HIRE RATE', '$140/h'],
                  ['RESPONSE', '<24h'],
                ].map(([l,v],i) => (
                  <div key={l} style={{padding:'16px 18px', borderLeft: i%2===1 ? '1px solid var(--line)' : 'none', borderTop: i>1 ? '1px solid var(--line)' : 'none', background:'var(--bg-2)'}}>
                    <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:6}}>{l}</div>
                    <div style={{fontSize:20,fontWeight:500,letterSpacing:'-0.015em'}}>{v}</div>
                  </div>
                ))}
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* Expertise */}
      <section style={{padding:'80px 0', borderBottom:'1px solid var(--line)'}}>
        <div className="container">
          <div style={{display:'grid', gridTemplateColumns:'200px 1fr', gap:48}}>
            <div className="eyebrow"><span className="dot"/>Expertise</div>
            <div>
              <h2 style={{fontSize:'clamp(28px,3.6vw,44px)',letterSpacing:'-0.03em',fontWeight:500,marginBottom:32,maxWidth:720}}>
                What I work on.
              </h2>
              <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(220px,1fr))', gap:14}}>
                {[
                  ...d.skills,
                  'System architecture','Performance','Code review','Mentoring'
                ].slice(0,8).map((s,i) => (
                  <div key={i} style={{padding:'18px 20px',borderRadius:10,border:'1px solid var(--line)',background:'var(--bg-2)'}}>
                    <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:8}}>0{i+1}</div>
                    <div style={{fontSize:15,fontWeight:500,letterSpacing:'-0.005em'}}>{s}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Projects */}
      <section style={{padding:'80px 0', borderBottom:'1px solid var(--line)'}}>
        <div className="container">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:32}}>
            <div>
              <div className="eyebrow" style={{marginBottom:10}}><span className="dot"/>Selected projects</div>
              <h2 style={{fontSize:'clamp(28px,3.6vw,44px)',letterSpacing:'-0.03em',fontWeight:500}}>Recent builds.</h2>
            </div>
            <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{d.projects} SHIPPED TOTAL</span>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:24}}>
            {projects.map(p => (
              <div key={p.id} onClick={()=>openCase?.(p)} className="clickable"><CaseCard p={p}/></div>
            ))}
          </div>
        </div>
      </section>

      {/* Articles */}
      <section style={{padding:'80px 0', borderBottom:'1px solid var(--line)'}}>
        <div className="container">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:32}}>
            <div>
              <div className="eyebrow" style={{marginBottom:10}}><span className="dot"/>Writing</div>
              <h2 style={{fontSize:'clamp(28px,3.6vw,44px)',letterSpacing:'-0.03em',fontWeight:500}}>What I've written.</h2>
            </div>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:0,border:'1px solid var(--line)',borderRadius:'var(--radius)',overflow:'hidden'}}>
            {posts.map((p, i) => (
              <div key={p.id} style={{display:'grid',gridTemplateColumns:'100px 1fr 110px 60px',gap:20,padding:'24px 28px',alignItems:'center',borderTop: i>0 ? '1px solid var(--line)' : 'none',background:'var(--bg-2)',transition:'background .2s ease'}}
                onMouseEnter={e=>e.currentTarget.style.background='#131314'}
                onMouseLeave={e=>e.currentTarget.style.background='var(--bg-2)'}>
                <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{p.date}</span>
                <div>
                  <div style={{display:'flex',gap:8,marginBottom:6}}>
                    <Tag>{p.category}</Tag>
                  </div>
                  <div style={{fontSize:17,fontWeight:500,letterSpacing:'-0.01em',marginBottom:4}}>{p.title}</div>
                  <div style={{fontSize:13,color:'var(--ink-3)',lineHeight:1.5}}>{p.excerpt}</div>
                </div>
                <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{p.read}</span>
                <span style={{color:'var(--ink-3)',justifySelf:'end'}}>{Icon.arrow()}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Schedule */}
      <section style={{padding:'80px 0', borderBottom:'1px solid var(--line)'}}>
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:48,alignItems:'center'}}>
            <div>
              <div className="eyebrow" style={{marginBottom:14}}><span className="dot"/>Availability</div>
              <h2 style={{fontSize:'clamp(28px,3.6vw,44px)',letterSpacing:'-0.03em',fontWeight:500,marginBottom:20,maxWidth:520}}>
                Book a slot directly.
              </h2>
              <p style={{fontSize:16,color:'var(--ink-2)',lineHeight:1.55,marginBottom:24,maxWidth:520}}>
                I work in two-week sprints, Monday through Friday, with a one-hour overlap with US Pacific each day. Limited number of clients at a time — quality over volume.
              </p>
              <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
                <button className="btn btn-primary">Pick a time {Icon.arrow()}</button>
                <button className="btn btn-ghost">Email me directly</button>
              </div>
            </div>
            <div className="card" style={{padding:'24px 28px'}}>
              <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:16}}>● NEXT 12 WEEKS</div>
              <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:4}}>
                {Array.from({length:12}).map((_,i) => {
                  const status = i < 3 ? 'booked' : i < 6 ? 'partial' : 'open';
                  const colors = {booked:'#3a3a3a',partial:'#7c9bff',open:'var(--accent)'};
                  return (
                    <div key={i} style={{
                      aspectRatio:'1',borderRadius:6,
                      background: colors[status],
                      opacity: status==='booked' ? 0.6 : 1,
                      display:'flex',alignItems:'center',justifyContent:'center',
                      fontFamily:'var(--mono)',fontSize:11,color: status==='open' || status==='partial' ? '#0a0a0a' : 'var(--ink-3)',
                      fontWeight:500
                    }}>W{20+i}</div>
                  );
                })}
              </div>
              <div style={{display:'flex',gap:14,marginTop:16,paddingTop:16,borderTop:'1px solid var(--line)',fontSize:11}}>
                {[['Booked','#3a3a3a'],['Partial','#7c9bff'],['Open','var(--accent)']].map(([l,c]) => (
                  <div key={l} style={{display:'flex',alignItems:'center',gap:6}}>
                    <span style={{width:10,height:10,borderRadius:3,background:c}}/>
                    <span style={{color:'var(--ink-3)'}}>{l}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* More team */}
      <section style={{padding:'80px 0'}}>
        <div className="container">
          <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:20}}>MORE FROM THE STUDIO</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(220px,1fr))', gap:14}}>
            {TEAM.filter(t => t.id !== d.id).map(t => (
              <button key={t.id} onClick={()=>setPage('dev:'+t.id)} className="card clickable" style={{padding:'20px 22px',textAlign:'left'}}>
                <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:14}}>
                  <span style={{width:36,height:36,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:12,fontWeight:600,color:t.role_color}}>{t.avatar}</span>
                  <span style={{width:6,height:6,borderRadius:'50%',background:'var(--ok)'}}/>
                </div>
                <div style={{fontSize:14,fontWeight:500,marginBottom:4}}>{t.name}</div>
                <div style={{fontSize:12,color:'var(--ink-3)'}}>{t.role}</div>
              </button>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

window.DevProfile = DevProfile;