const { Panel, Tag, Badge, Button } = window.WilliamPittsDesignSystem_a0390b;
function AboutScreen({ onContact }) {
  const m = window.innerWidth <= 720;
  const roles = [
    ['Northwestern','Teaching Assistant','Taught Python to gifted middle-schoolers.'],
    ['NEIU','Peer Leader — CS tutoring','Tutored core CS coursework.'],
    ['Chi-AWE','Solutions Intern','Built the email automation tool the nonprofit uses for outreach.'],
  ];
  return <main style={{padding:m?'48px 20px 64px':'48px 40px 64px',maxWidth:1040,margin:'0 auto'}}>
    <div style={{display:'flex',alignItems:'flex-end',gap:20,marginBottom:28}}>
      <span style={{fontFamily:'var(--font-display)',fontSize:'var(--display-lg)',lineHeight:.95}}>03</span>
      <h1 style={{fontSize:'var(--display-lg)'}}>About</h1>
    </div>
    <div style={{display:'grid',gridTemplateColumns:m?'1fr':'1.4fr 1fr',gap:'var(--panel-gutter)',alignItems:'start'}}>
      <div>
        <p style={{fontSize:16,lineHeight:1.7,margin:'0 0 16px',maxWidth:'62ch'}}>I'm a recent Computational Science grad (B.S., Northeastern Illinois University, GPA 3.5) with full-stack and Python fundamentals — and real hands-on fluency building with agentic AI tools.</p>
        <p style={{fontSize:16,lineHeight:1.7,margin:'0 0 28px',maxWidth:'62ch',color:'var(--text-muted)'}}>First place at the NEIU Spring 2025 Hackathon (~200 participants). Anthropic "AI Fluency" certificate and CodePath AI Open Source Capstone.</p>
        <div style={{display:'flex',flexDirection:'column'}}>
          {roles.map(([where, what, note]) => (
            <div key={what} style={{display:'grid',gridTemplateColumns:'130px 1fr',gap:16,padding:'14px 0',borderTop:'var(--border-hair) solid var(--border-subtle)'}}>
              <span style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--text-muted)'}}>{where}</span>
              <div><strong style={{fontSize:14}}>{what}</strong><div style={{fontSize:13,color:'var(--text-muted)',marginTop:2}}>{note}</div></div>
            </div>
          ))}
        </div>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:'var(--panel-gutter)'}}>
        <Panel title="Stack" tone="10">
          <div style={{display:'flex',gap:8,flexWrap:'wrap',background:'var(--paper)',padding:10,border:'var(--border-hair) solid var(--ink)'}}>
            {['Python','TypeScript','Next.js','React','Tailwind','Prisma','PostgreSQL','TensorFlow','Godot','Claude'].map(t => <Tag key={t}>{t}</Tag>)}
          </div>
        </Panel>
        <Panel inverse title="Now">
          <div style={{display:'flex',flexDirection:'column',gap:10,fontSize:13}}>
            <span>◐ Seeking full-time engineering roles</span>
            <span>● Chicago, IL · Open to work</span>
          </div>
          <div style={{marginTop:16}}><Button variant="secondary" style={{background:'var(--paper)'}} onClick={onContact}>Get in touch →</Button></div>
        </Panel>
      </div>
    </div>
  </main>;
}
Object.assign(window, { AboutScreen });