const { Badge } = window.WilliamPittsDesignSystem_a0390b;
function Header({ nav, onNav }) {
  const m = window.innerWidth <= 720;
  const link = (id, label) => (
    <button key={id} onClick={() => onNav(id)} style={{all:'unset',cursor:'pointer',fontFamily:'var(--font-mono)',fontSize:12,fontWeight:600,textTransform:'uppercase',letterSpacing:'.1em',padding:'6px 10px',background:nav===id?'var(--ink)':'transparent',color:nav===id?'var(--paper)':'var(--ink)'}}
      onMouseEnter={e=>{if(nav!==id){e.currentTarget.style.textDecoration='underline';e.currentTarget.style.textDecorationThickness='2px';e.currentTarget.style.textUnderlineOffset='4px'}}}
      onMouseLeave={e=>{e.currentTarget.style.textDecoration='none'}}>{label}</button>
  );
  return <header style={{display:'flex',alignItems:'center',justifyContent:'space-between',flexWrap:m?'wrap':'nowrap',gap:m?12:0,padding:m?'18px 20px':'18px 40px',borderBottom:'var(--border-frame) solid var(--ink)',background:'var(--paper)',position:'sticky',top:0,zIndex:20}}>
    <button onClick={() => onNav('home')} style={{all:'unset',cursor:'pointer',fontFamily:'var(--font-display)',fontSize:24,textTransform:'uppercase',lineHeight:.95,letterSpacing:'.01em'}}>William Pitts</button>
    <nav style={{display:'flex',alignItems:'center',flexWrap:m?'wrap':'nowrap',gap:m?10:20}}>
      {link('home','Work')}{link('about','About')}{link('contact','Contact')}
      <Badge variant="outline" dot>Open to work</Badge>
    </nav>
  </header>;
}
function Footer() {
  const m = window.innerWidth <= 720;
  return <footer style={{borderTop:'var(--border-frame) solid var(--ink)',background:'var(--ink)',color:'var(--paper)',padding:m?'28px 20px':'28px 40px',display:'flex',justifyContent:'space-between',alignItems:'baseline',flexWrap:'wrap',gap:12}}>
    <span style={{fontFamily:'var(--font-display)',fontSize:22,textTransform:'uppercase'}}>William Pitts</span>
    <span style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'.14em',textTransform:'uppercase'}}>github.com/reixyz22 · linkedin.com/in/william-pitts-2r2 · Email · Résumé · © 2026 · <a href="https://ronoxia.com/work" style={{color:'var(--paper)',textUnderlineOffset:'3px'}}>Designed by Rono Xia</a></span>
  </footer>;
}
Object.assign(window, { Header, Footer });