const { Panel, Tag, Button, Badge } = window.WilliamPittsDesignSystem_a0390b;
const PROJECTS = [
  { id:'email', num:'01', title:'Chi-AWE Email Tool', featured:true, link:'github.com/reixyz22/Email',
    blurb:'CSV-driven personalized bulk email for a 501(c)(3) nonprofit — built solo to cut hours of manual outreach.',
    tags:['Python','Automated tests'],
    body:['A Python utility built solo for Chi-AWE, the 501(c)(3) nonprofit where I interned: CSV-driven personalized bulk email, with DOCX-to-HTML conversion and PDF attachments, plus a test suite.','Built to cut hours of manual outreach for a real organization — a small tool doing a real job.'],
    stats:[['Solo','end-to-end build'],['DOCX→HTML','+ PDF attachments'],['Tested','automated suite']] },
  { id:'contact', num:'02', title:'Contact-Editor-Next', link:'github.com/reixyz22/Contact-Editor-Next',
    blurb:'A full-stack contact manager built front to back to learn the modern TypeScript stack — typed from the database to the UI.',
    tags:['Next.js','React','TypeScript','Tailwind','Prisma','PostgreSQL'],
    body:['A full-stack contact manager (CRUD) built solo, front to back, to learn the modern TypeScript stack end to end: typed from the database to the UI.','Next.js and React on the front, Prisma and PostgreSQL behind it. Docker setup in progress.'],
    stats:[['CRUD','front to back'],['Typed','database → UI'],['Docker','in progress']] },
  { id:'jobhunter', num:'03', title:'Claude Cowork Job Hunter', link:'github.com/reixyz22/Claude-Cowork-Job-Hunter',
    blurb:'An early-stage Claude Cowork plugin that automates my own daily job hunt: nightly run, morning brief, scored job boards.',
    tags:['Claude Cowork skills','Python','LaTeX'],
    body:['An early-stage Claude Cowork plugin built to automate my own daily job hunt: packaged skills for setup, a nightly run, and a morning brief, plus a LaTeX résumé template.','It finds postings, drafts tailored materials, and scores which job boards actually produce leads — a small learning loop built on Claude’s platform. What it shows: real fluency working with agentic AI tooling, and product thinking — measure the boards, not just the applications.'],
    stats:[['Nightly','automated run'],['Morning','brief'],['Boards','scored for yield']] },
  { id:'ml', num:'04', title:'ML Course Notebooks', link:'github.com/reixyz22/Machine-Learning-Course-Notebook', coursework:true,
    blurb:'Coursework machine learning, from regression to neural networks.',
    tags:['Python','TensorFlow','NumPy','Pandas'],
    body:['Coursework machine learning notebooks, working from regression through neural networks.'] },
  { id:'godot', num:'05', title:'Godot Village', link:'reixyz.itch.io/godot-village', coursework:true,
    blurb:'A student 2D game taken through the full SDLC: requirements, design, build, test, deploy, iterate.',
    tags:['Godot','GDScript'],
    body:['A student 2D game taken through the full software development lifecycle: requirements, design, build, test, deploy, iterate.'] },
];
const HIGHLIGHTS = [
  { mark:'1st', head:'NEIU Spring 2025 Hackathon', note:'First place among ~200 participants.' },
  { mark:'AI', head:'Certified fluency', note:'Anthropic "AI Fluency" certificate + CodePath AI Open Source Capstone.' },
  { mark:'E2E', head:'Solo, end to end', note:'A full-stack TypeScript app and a Python automation tool used at a nonprofit.' },
];
function HomeScreen({ onOpen, onContact }) {
  const m = window.innerWidth <= 720;
  const kicker = {fontFamily:'var(--font-mono)',fontSize:12,letterSpacing:'.14em',textTransform:'uppercase',color:'var(--text-muted)'};
  const sectionHead = (num, label) => (
    <div style={{display:'flex',alignItems:'baseline',gap:16,marginBottom:28}}>
      <span style={{fontFamily:'var(--font-display)',fontSize:'var(--display-md)',lineHeight:1}}>{num}</span>
      <h2 style={{fontSize:'var(--display-sm)'}}>{label}</h2>
      <span style={{flex:1,borderBottom:'var(--border-frame) solid var(--ink)'}}></span>
    </div>);
  const featured = PROJECTS[0];
  return <main>
    <section style={{position:'relative',padding:m?'64px 20px 56px':'64px 40px 56px',borderBottom:'var(--border-frame) solid var(--ink)',overflow:'hidden'}}>
      <div className="tone-25 tone-fade-up" style={{position:'absolute',top:0,right:0,bottom:0,left:'64%',pointerEvents:'none',display:m?'none':'block'}}></div>
      <div style={{position:'relative',maxWidth:980}}>
        <div style={{...kicker,marginBottom:16}}>Software engineer — recent grad</div>
        <h1 style={{fontSize:'clamp(56px, 8vw, 112px)'}}>William<br/>Pitts</h1>
        <p style={{fontSize:18,maxWidth:'52ch',margin:'24px 0 12px'}}>Hackathon-winning Computational Science grad with full-stack and Python fundamentals — and real hands-on fluency building with agentic AI tools.</p>
        <div style={{...kicker,marginBottom:28}}>Chicago, IL · Open to work</div>
        <div style={{display:'flex',gap:14,flexWrap:'wrap'}}>
          <Button size="lg" onClick={() => onOpen('email')}>View work →</Button>
          <Button size="lg" variant="secondary">Résumé</Button>
          <Button size="lg" variant="ghost" onClick={onContact}>Email</Button>
        </div>
      </div>
    </section>
    <section style={{display:'grid',gridTemplateColumns:m?'1fr':'repeat(3,1fr)',borderBottom:'var(--border-frame) solid var(--ink)'}}>
      {HIGHLIGHTS.map((h, i) => (
        <div key={h.mark} style={{position:'relative',overflow:'hidden',padding:'20px 24px',borderRight:(!m && i < 2) ? 'var(--border-frame) solid var(--ink)' : 'none',borderBottom:(m && i < 2) ? 'var(--border-frame) solid var(--ink)' : 'none',display:'flex',gap:16,alignItems:'flex-start'}}>
          {i === 0 && <div className="burst" style={{position:'absolute',top:-70,left:-70,width:120,height:120,pointerEvents:'none'}}></div>}
          <span style={{position:'relative',fontFamily:'var(--font-display)',fontSize:34,lineHeight:1,textTransform:'uppercase',flex:'none'}}>{h.mark}</span>
          <div style={{position:'relative'}}><strong style={{fontSize:14}}>{h.head}</strong><div style={{fontSize:13,color:'var(--text-muted)',marginTop:2}}>{h.note}</div></div>
        </div>
      ))}
    </section>
    <section style={{padding:m?'56px 20px 0':'56px 40px 0'}}>
      {sectionHead('01','Featured')}
      <Panel number={featured.num} title={featured.title} heavy shadow interactive onClick={() => onOpen(featured.id)}>
        <div style={{display:'grid',gridTemplateColumns:m?'1fr':'1.5fr 1fr',gap:28,alignItems:'start'}}>
          <div>
            <p style={{margin:0,fontSize:15,lineHeight:1.65}}>{featured.body[0]}</p>
            <p style={{margin:'10px 0 0',fontSize:15,lineHeight:1.65,color:'var(--text-muted)'}}>{featured.body[1]}</p>
          </div>
          <div>
            <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>{featured.tags.map(t => <Tag key={t}>{t}</Tag>)}</div>
            <div style={{fontFamily:'var(--font-mono)',fontSize:12,marginTop:14}}>→ {featured.link}</div>
            <div style={{fontFamily:'var(--font-mono)',fontSize:12,fontWeight:600,textTransform:'uppercase',letterSpacing:'.1em',marginTop:14}}>Read case study →</div>
          </div>
        </div>
      </Panel>
    </section>
    <section style={{padding:m?'48px 20px':'48px 40px'}}>
      {sectionHead('02','Projects')}
      <div style={{display:'grid',gridTemplateColumns:m?'1fr':'1fr 1fr',gap:'var(--panel-gutter)'}}>
        {PROJECTS.filter(p => !p.featured && !p.coursework).map(p => (
          <Panel key={p.id} number={p.num} title={p.title} interactive onClick={() => onOpen(p.id)}>
            <p style={{margin:0,fontSize:14}}>{p.blurb}</p>
            <div style={{display:'flex',gap:8,margin:'14px 0 16px',flexWrap:'wrap'}}>{p.tags.map(t => <Tag key={t}>{t}</Tag>)}</div>
            <span style={{fontFamily:'var(--font-mono)',fontSize:12,fontWeight:600,textTransform:'uppercase',letterSpacing:'.1em'}}>Read case study →</span>
          </Panel>
        ))}
      </div>
      <div style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'.14em',textTransform:'uppercase',color:'var(--text-muted)',margin:'28px 0 14px'}}>Coursework &amp; other</div>
      <div style={{display:'grid',gridTemplateColumns:m?'1fr':'1fr 1fr',gap:'var(--panel-gutter)'}}>
        {PROJECTS.filter(p => p.coursework).map(p => (
          <Panel key={p.id} interactive onClick={() => onOpen(p.id)}>
            <div style={{display:'flex',alignItems:'baseline',gap:10}}>
              <span style={{fontFamily:'var(--font-display)',fontSize:18,textTransform:'uppercase'}}>{p.num}</span>
              <strong style={{fontFamily:'var(--font-display)',fontSize:18,textTransform:'uppercase',fontWeight:400}}>{p.title}</strong>
            </div>
            <p style={{margin:'8px 0 12px',fontSize:13,color:'var(--text-muted)'}}>{p.blurb}</p>
            <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>{p.tags.map(t => <Tag key={t}>{t}</Tag>)}</div>
          </Panel>
        ))}
      </div>
    </section>
    <section style={{margin:m?'0 20px 56px':'0 40px 56px',border:'var(--border-heavy) solid var(--ink)',background:'var(--ink)',color:'var(--paper)',padding:m?'24px':'40px',display:'grid',gridTemplateColumns:m?'1fr':'auto 1fr',gap:32,alignItems:'center'}}>
      <span style={{fontFamily:'var(--font-display)',fontSize:'var(--display-md)',lineHeight:.95,textTransform:'uppercase'}}>03<br/>About</span>
      <div>
        <p style={{margin:0,fontSize:15,maxWidth:'62ch'}}>B.S. Computational Science, Northeastern Illinois University (GPA 3.5). Teaching Assistant at Northwestern — taught Python to gifted middle-schoolers. Peer Leader (CS tutoring) at NEIU. Solutions Intern at Chi-AWE, a 501(c)(3) nonprofit.</p>
        <div style={{display:'flex',gap:10,marginTop:16}}><Badge variant="outline" style={{background:'transparent',borderColor:'var(--paper)',color:'var(--paper)'}}>Chicago, IL</Badge><Badge variant="outline" style={{background:'transparent',borderColor:'var(--paper)',color:'var(--paper)'}}>Open to work</Badge></div>
      </div>
    </section>
  </main>;
}
Object.assign(window, { HomeScreen, PROJECTS });