// Team page — placeholder portraits + positioning. Kenosa is small by design.

const TeamHero = () => (
  <section style={{paddingTop:168, paddingBottom:80, background:'#fff', position:'relative', overflow:'hidden'}}>
    <div className="grid-pattern" style={{position:'absolute', inset:0, opacity:0.5}}/>
    <div className="container" style={{position:'relative'}}>
      <Chip>The Team</Chip>
      <h1 className="display" style={{marginTop:22, marginBottom:24, maxWidth:1040}}>
        Small by design. <span className="accent">Deep by necessity.</span>
      </h1>
      <p className="lede" style={{maxWidth:760, fontSize:22}}>
        Building an evidence substrate is not a headcount problem. It is a taste problem. A small team of people who can hold the whole pipeline in their heads ships a better substrate than a large team that can't.
      </p>
    </div>
  </section>
);

// Avatar placeholder — tinted gradient with initials. Keeps the aesthetic technical.
const Avatar = ({ initials, tint = 0 }) => {
  const grads = [
    'linear-gradient(135deg, #000080 0%, #3B82F6 100%)',
    'linear-gradient(135deg, #1E3A8A 0%, #6366F1 100%)',
    'linear-gradient(135deg, #0F172A 0%, #475569 100%)',
    'linear-gradient(135deg, #000080 0%, #1E293B 100%)',
  ];
  return (
    <div style={{width:'100%', aspectRatio:'1', borderRadius:14, background:grads[tint % grads.length], display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontFamily:'var(--font-mono)', fontWeight:700, fontSize:36, letterSpacing:'0.05em', position:'relative', overflow:'hidden', boxShadow:'0 20px 40px -20px rgba(0,0,128,0.4)'}}>
      <div style={{position:'absolute', inset:0, backgroundImage:'radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 50%)', pointerEvents:'none'}}/>
      <div style={{position:'absolute', inset:0, backgroundImage:'linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px)', backgroundSize:'20px 20px', pointerEvents:'none'}}/>
      <span style={{position:'relative'}}>{initials}</span>
    </div>
  );
};

const TeamGrid = () => {
  const members = [
    {initials:'NK', name:'N. Kalosa-Kenyon', role:'Founder · Substrate lead',    bio:'Previously: intelligence analyst, quantitative social science. Directs the pipeline, evidence methodology, and calibration framework.'},
    {initials:'—',  name:'Senior ML Engineer',      role:'Open role',               bio:'Leads corpus alignment and topic modeling. Ownership over the Qwen3-8B embedding space and cross-corpus merge quality gates.'},
    {initials:'—',  name:'Senior Federal Analyst', role:'Open role',               bio:'Leads ICD 203 calibration and evidence-chain review. Background in agency oversight (GAO / IC / DoD).'},
    {initials:'—',  name:'Partnerships Lead',       role:'Open role',               bio:'Owns the GovCon AI platform channel. Embeds FPDS inside partner product surfaces; calibrates reseller economics.'},
  ];
  return (
    <Section tint>
      <div style={{maxWidth:820, marginBottom:48}}>
        <div className="reveal"><Eyebrow>Current team + open roles</Eyebrow></div>
        <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>Four seats. <span className="accent">Three hiring now.</span></h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:20}}>
        {members.map((m,i)=>(
          <div key={i} className={`reveal delay-${(i%4)+1}`} style={{background:'#fff', border:'1px solid var(--slate-200)', borderRadius:16, padding:20, display:'flex', flexDirection:'column', gap:16}}>
            <Avatar initials={m.initials} tint={i}/>
            <div>
              <div style={{fontSize:17, fontWeight:700, color:'var(--slate-900)', letterSpacing:'-0.01em'}}>{m.name}</div>
              <div className="mono-label" style={{color: m.role==='Open role' ? '#FBBF24' : '#000080', fontSize:10, marginTop:6}}>{m.role}</div>
            </div>
            <p style={{fontSize:13, lineHeight:1.55, color:'var(--slate-600)', margin:0}}>{m.bio}</p>
          </div>
        ))}
      </div>
    </Section>
  );
};

const TeamHiring = () => (
  <Section>
    <div style={{maxWidth:820, marginBottom:40}}>
      <div className="reveal"><Eyebrow>Hiring Bar</Eyebrow></div>
      <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>What we look for.</h2>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
      {[
        {title:'Analytic taste', body:'An instinct for what a claim should carry before it is issued. Calibration is learned, but taste is the ceiling.'},
        {title:'End-to-end range', body:'We hire people who can reason about the pipeline at the level of topic-model coherence and at the level of a partnership contract. Siloed skills don\'t scale here.'},
        {title:'Federal literacy', body:'You understand appropriations, continuing resolutions, the difference between an IDIQ and a BPA, and why a KO\'s tenure is predictive.'},
      ].map((x,i)=>(
        <div key={x.title} className={`reveal delay-${i+1}`} style={{padding:'26px 24px', border:'1px dashed var(--slate-300)', borderRadius:14, background:'#fff'}}>
          <h4 style={{fontSize:18, fontWeight:700, margin:'0 0 10px'}}>{x.title}</h4>
          <p style={{fontSize:14, lineHeight:1.55, color:'var(--slate-600)', margin:0}}>{x.body}</p>
        </div>
      ))}
    </div>
    <div className="reveal delay-4" style={{marginTop:40, padding:'26px 28px', background:'var(--slate-50)', border:'1px solid var(--slate-200)', borderRadius:14, display:'flex', justifyContent:'space-between', alignItems:'center', gap:24, flexWrap:'wrap'}}>
      <div>
        <div style={{fontSize:17, fontWeight:700, color:'var(--slate-900)'}}>Interested in a role?</div>
        <div style={{fontSize:14, color:'var(--slate-600)', marginTop:4}}>Send a note with your background and what you'd want to own.</div>
      </div>
      <a href="#/contact" className="btn-primary">Get in touch <Icon name="arrow" size={14}/></a>
    </div>
  </Section>
);

window.TeamHero = TeamHero;
window.TeamGrid = TeamGrid;
window.TeamHiring = TeamHiring;
