function Home({onOpen,onNav}){
  const {Button,Tag,Card,ProjectCard,TimelineItem,SectionHeading,Input}=window.DS;
  const S=window.SITE;
  const [sent,setSent]=React.useState(false);
  const [status,setStatus]=React.useState('idle');
  const submit=async e=>{e.preventDefault();setStatus('sending');
    try{const r=await fetch('https://formspree.io/f/xoejopkq',{method:'POST',headers:{Accept:'application/json'},body:new FormData(e.target)});
      if(r.ok){setSent(true);}else{setStatus('error');}}catch(_){setStatus('error');}};
  const wrap={maxWidth:'var(--content-max)',margin:'0 auto',padding:'0 var(--space-6)'};
  return (<>
    <section id="home" style={{...wrap,display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,380px),1fr))',gap:'var(--space-8)',alignItems:'center',padding:'var(--space-9) var(--space-6)'}}>
      <div style={{display:'flex',flexDirection:'column',gap:'var(--space-5)'}}>
        <Tag tone="sage" style={{alignSelf:'flex-start'}}>Open to full-time & freelance</Tag>
        <h1 style={{margin:0,font:'400 clamp(44px, 6.4vw, var(--text-display-xl))/var(--leading-tight) var(--font-serif)',letterSpacing:'var(--tracking-display)',color:'var(--ink)',textWrap:'balance'}}>Hi, I'm Anchal. I build React apps that <em style={{color:'var(--rose-deep)'}}>teams rely on.</em></h1>
        <p style={{margin:0,maxWidth:520,fontSize:'var(--text-lg)',color:'var(--ink-2)',textWrap:'pretty'}}>Senior Frontend Engineer with 5 years of shipping React, Next.js and TypeScript. My work is used by hundreds of people every day.</p>
        <div style={{display:'flex',gap:12,flexWrap:'wrap',marginTop:8}}>
          <Button onClick={()=>onNav('work')}>View my work</Button>
          <Button variant="gingham" tone="rose" iconRight="↗" href="/resume" target="_blank" rel="noopener">Download CV</Button>
        </div>
      </div>
      <Card surface="gingham" tone="rose" padding={20} style={{borderRadius:'var(--radius-lg)'}}>
        <Card padding={28} style={{borderRadius:'var(--radius-md)',border:'1.5px solid var(--ink)',boxShadow:'none'}}>
          <div style={{font:'12px var(--font-mono)',letterSpacing:'var(--tracking-eyebrow)',textTransform:'uppercase',color:'var(--rose-deep)'}}>At a glance</div>
          <dl style={{margin:'16px 0 0',display:'grid',gridTemplateColumns:'auto 1fr',gap:'10px 20px',fontSize:'var(--text-sm)'}}>
            {[['Role','Senior Frontend Engineer'],['Experience','5 years'],['Stack','React, Next.js, TypeScript'],['Location','Noida, India · remote']].map(([k,v])=><React.Fragment key={k}><dt style={{color:'var(--ink-3)'}}>{k}</dt><dd style={{margin:0,color:'var(--ink)'}}>{v}</dd></React.Fragment>)}
          </dl>
        </Card>
      </Card>
    </section>

    <section id="work" style={{...wrap,paddingBottom:'var(--space-9)'}}>
      <SectionHeading index="01" eyebrow="Selected work" title="Selected" italic="work" lede="What I built, what I owned, and what changed."/>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(300px,1fr))',gap:'var(--space-5)',marginTop:'var(--space-7)'}}>
        {S.projects.map(p=><ProjectCard key={p.id} {...p} onClick={e=>{e.preventDefault();onOpen(p.id);}}/>)}
      </div>
    </section>

    <section id="cv" style={{background:'var(--paper-2)',borderTop:'1px solid var(--line)',borderBottom:'1px solid var(--line)'}}>
      <div style={{...wrap,padding:'var(--space-9) var(--space-6)',display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,460px),1fr))',gap:'var(--space-8)'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-6)'}}>
          <SectionHeading index="02" eyebrow="Experience" title="Where I've" italic="worked" size="m"/>
          <div style={{display:'flex',flexWrap:'wrap',gap:8}}>{S.stack.map((t,i)=><Tag key={t} tone={['rose','sage','sky','butter','lilac','apricot'][i%6]}>{t}</Tag>)}</div>
          <Button variant="secondary" iconRight="↓" href="/resume" target="_blank" rel="noopener" style={{alignSelf:'flex-start'}}>Full CV (PDF)</Button>
        </div>
        <div>{S.experience.map((x,i)=><TimelineItem key={i} {...x} last={i===S.experience.length-1}/>)}</div>
      </div>
    </section>

    <section id="contact" style={{...wrap,padding:'var(--space-9) var(--space-6)',display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,360px),1fr))',gap:'var(--space-8)',alignItems:'start'}}>
      <SectionHeading index="03" eyebrow="Contact" title="Let's work" italic="together" lede="Hiring for a frontend role, or need help on a project? Send a message. I reply within two days."/>
      <Card padding={32}>
        {sent?<div style={{textAlign:'center',padding:'24px 0'}}><div style={{font:'400 36px var(--font-serif)',color:'var(--ink)'}}>Merci <em style={{color:'var(--rose-deep)'}}>beaucoup</em></div><p style={{color:'var(--ink-2)'}}>Thanks for writing — I'll reply within two days.</p></div>:
        <form onSubmit={submit} style={{display:'flex',flexDirection:'column',gap:18}}>
          <Input label="Your name" name="name" required placeholder="Marie Dupont"/>
          <Input label="Email" name="email" type="email" required placeholder="marie@company.com"/>
          <Input label="Message" name="message" required multiline rows={4} placeholder="Tell me about the role…"/>
          <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" style={{display:'none'}}/>
          <Button type="submit" disabled={status==='sending'} style={{alignSelf:'flex-start'}}>{status==='sending'?'Sending…':'Send message'}</Button>
          {status==='error'&&<p style={{margin:0,fontSize:'var(--text-sm)',color:'var(--danger)'}}>Something went wrong. Please try again or reach out on LinkedIn.</p>}
        </form>}
      </Card>
    </section>
  </>);
}
window.Home=Home;