// Team section
const Team = () => {
  const [active, setActive] = React.useState(TEAM[0].id);
  const sel = TEAM.find(t => t.id === active) || TEAM[0];
  return (
    <Section
      id="team"
      label="03 / Team"
      kicker="Engineers under the SolidAtoms roof"
      title="A small studio. By design."
      subtitle="Each engineer has a public profile linked to the work they've shipped. Hire one of us, or hire the whole studio for bigger lifts."
    >
      <div style={{display:'grid',gridTemplateColumns:'minmax(280px,360px) 1fr',gap:32}}>
        {/* List */}
        <div style={{display:'flex',flexDirection:'column',gap:6}}>
          {TEAM.map((t, i) => (
            <button key={t.id} onClick={()=>setActive(t.id)} style={{
              display:'grid', gridTemplateColumns:'40px 1fr auto', gap:14, alignItems:'center',
              padding:'14px 16px', borderRadius:10, textAlign:'left',
              background: active===t.id ? 'var(--bg-2)' : 'transparent',
              border:'1px solid', borderColor: active===t.id ? 'var(--line-2)' : 'transparent',
              transition:'all .15s ease'
            }}
            onMouseEnter={e=>{if(active!==t.id) e.currentTarget.style.background='rgba(255,255,255,0.02)'}}
            onMouseLeave={e=>{if(active!==t.id) e.currentTarget.style.background='transparent'}}>
              <span style={{
                width:40,height:40,borderRadius:'50%',
                background: `linear-gradient(135deg, ${t.role_color}33, ${t.role_color}11)`,
                border:`1px solid ${t.role_color}44`,
                display:'flex',alignItems:'center',justifyContent:'center',
                fontFamily:'var(--mono)',fontSize:12,fontWeight:600,color:t.role_color,letterSpacing:'0.02em'
              }}>{t.avatar}</span>
              <div>
                <div style={{fontSize:14,fontWeight:500,letterSpacing:'-0.005em',marginBottom:2}}>{t.name}</div>
                <div style={{fontSize:12,color:'var(--ink-3)'}}>{t.role}</div>
              </div>
              <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>0{i+1}</span>
            </button>
          ))}
          <button style={{
            display:'flex',alignItems:'center',justifyContent:'center',gap:8,
            padding:'14px 16px', borderRadius:10, border:'1px dashed var(--line-2)',
            color:'var(--ink-3)', fontSize:13, marginTop:8,
            background:'transparent'
          }}>
            {Icon.plus()} Invite a developer
          </button>
        </div>

        {/* Active profile */}
        <div style={{border:'1px solid var(--line)', borderRadius:'var(--radius)', overflow:'hidden', background:'var(--bg-2)'}}>
          <div style={{padding:'32px 36px', borderBottom:'1px solid var(--line)', background:`linear-gradient(135deg, ${sel.role_color}10, transparent)`}}>
            <div style={{display:'flex',alignItems:'flex-start',gap:20,marginBottom:24}}>
              <div style={{
                width:72,height:72,borderRadius:'50%',
                background:`linear-gradient(135deg, ${sel.role_color}55, ${sel.role_color}22)`,
                border:`1px solid ${sel.role_color}66`,
                display:'flex',alignItems:'center',justifyContent:'center',
                fontFamily:'var(--mono)',fontSize:22,fontWeight:600,color:sel.role_color
              }}>{sel.avatar}</div>
              <div style={{flex:1}}>
                <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:6}}>
                  <h3 style={{fontSize:26,fontWeight:500,letterSpacing:'-0.025em'}}>{sel.name}</h3>
                  <span style={{display:'inline-flex',alignItems:'center',gap:5,padding:'3px 8px',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</span>
                  </span>
                </div>
                <div style={{fontSize:14,color:'var(--ink-2)',marginBottom:4}}>{sel.role}</div>
                <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>⌖ {sel.location}</div>
              </div>
            </div>
            <p style={{color:'var(--ink-2)',fontSize:15,lineHeight:1.55,maxWidth:600}}>{sel.bio}</p>
          </div>

          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',borderBottom:'1px solid var(--line)'}}>
            <Stat label="PROJECTS" value={sel.projects}/>
            <Stat label="YEARS XP" value={sel.years} divider/>
            <Stat label="SKILLS" value={sel.skills.length} divider/>
          </div>

          <div style={{padding:'24px 36px'}}>
            <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>EXPERTISE</div>
            <div style={{display:'flex',flexWrap:'wrap',gap:6,marginBottom:24}}>
              {sel.skills.map(sk => <Tag key={sk}>{sk}</Tag>)}
            </div>

            <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>RECENT WORK</div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:12}}>
              {PORTFOLIO.slice(0,3).map(p => (
                <div key={p.id} style={{aspectRatio:'4/3',borderRadius:8,position:'relative',overflow:'hidden',
                  background:`linear-gradient(135deg, ${p.color}33, #0a0a0a)`, border:'1px solid var(--line)'}}>
                  <div style={{position:'absolute',inset:0,padding:12,display:'flex',flexDirection:'column',justifyContent:'flex-end'}}>
                    <div style={{fontSize:13,fontWeight:500}}>{p.name}</div>
                    <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{p.year}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{display:'flex',gap:10,marginTop:28}}>
              <button className="btn btn-primary">View full profile {Icon.arrow()}</button>
              <button className="btn btn-ghost">Hire {sel.name.split(' ')[0]}</button>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
};

const Stat = ({ label, value, divider }) => (
  <div style={{padding:'18px 28px', borderLeft: divider ? '1px solid var(--line)' : 'none'}}>
    <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:6}}>{label}</div>
    <div style={{fontSize:24,letterSpacing:'-0.02em',fontWeight:500}}>{value}</div>
  </div>
);

window.Team = Team;