const { Button, ArticleCard, Card, Badge, Tag, Icon, Callout } = window.GuiaDiabeteDesignSystem_9d1af3;
function Home({go}){
  const [aud,setAud]=React.useState('todos');const mobile=useMobile();
  const posts=(window.POSTS||[]).slice(0,6);
  const shown=aud==='todos'?posts:posts.filter(p=>p.audience===aud);
  return <Page route="home" go={go}>
    <Container style={{paddingTop:'var(--space-13)',paddingBottom:'var(--space-12)'}}>
      <div style={{display:'grid',gridTemplateColumns:mobile?'1fr':'1.15fr .85fr',gap:'var(--space-11)',alignItems:'center'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-7)'}}>
          <span className="eyebrow">Informação revisada</span>
          <h1 style={{fontSize:'var(--fs-display)',lineHeight:'var(--lh-display)',letterSpacing:'var(--ls-display)'}}>Diabete explicado sem susto</h1>
          <p style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-lead)',lineHeight:'var(--lh-lead)',color:'var(--text-body)',maxWidth:'var(--measure-prose)'}}>Tipos de diabete, sinais de alerta e primeiros socorros — escrito para famílias, escolas e para as próprias crianças.</p>
          <div style={{display:'flex',flexWrap:'wrap',gap:'var(--space-5)'}}>
            <Button size="lg" icon="book-open" onClick={()=>go('tipos')}>Começar pelos tipos</Button>
            <Button size="lg" variant="outline" icon="heart-pulse" onClick={()=>go('socorros')}>Primeiros socorros</Button>
          </div>
        </div>
        <Card tone="brand" padding="var(--space-9)" style={{display:'flex',flexDirection:'column',gap:'var(--space-6)'}}>
          <span className="eyebrow" style={{color:'var(--teal-700)'}}>Referência rápida</span>
          <h3 style={{fontSize:'var(--fs-h3)'}}>Glicemia capilar em crianças</h3>
          <div style={{display:'flex',flexDirection:'column',gap:'var(--space-5)'}}>
            {[['low','Abaixo de 70 mg/dL','Hipoglicemia — aja agora'],['target','70 a 180 mg/dL','Faixa-alvo na maioria dos casos'],['high','Acima de 180 mg/dL','Hiperglicemia — investigue']].map(([tone,v,l])=>
              <div key={v} style={{display:'flex',alignItems:'center',gap:'var(--space-5)'}}>
                <Badge tone={tone}>{v}</Badge>
                <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-body-sm)',color:'var(--text-muted)'}}>{l}</span>
              </div>)}
          </div>
          <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',color:'var(--text-faint)'}}>Valores gerais. Siga sempre a meta definida pela equipe médica.</span>
        </Card>
      </div>
    </Container>
    <Container>
      <Callout tone="urgent" title="Se a criança desmaiar ou tiver convulsão">Ligue 192 imediatamente e não ofereça nada pela boca. O passo a passo completo está no <a href="#" onClick={e=>{e.preventDefault();go('socorros')}}>guia de primeiros socorros</a>.</Callout>
    </Container>
    <Container style={{marginTop:'var(--space-12)'}}>
      <div style={{display:'flex',flexWrap:'wrap',alignItems:'baseline',justifyContent:'space-between',gap:'var(--space-6)',marginBottom:'var(--space-7)'}}>
        <div style={{display:'flex',alignItems:'baseline',gap:'var(--space-6)'}}><h2 style={{fontSize:'var(--fs-h2)'}}>Publicados recentemente</h2><a href="#" onClick={e=>{e.preventDefault();go('busca')}} style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-body-sm)',fontWeight:'var(--fw-medium)'}}>Ver todos</a></div>
        <div style={{display:'flex',flexWrap:'wrap',gap:'var(--space-4)'}}>
          {[['todos','Todos','neutral'],['family','Família','family'],['school','Na escola','school'],['kids','Para crianças','kids'],['emergency','Emergência','emergency'],['recipe','Receitas','recipe']].map(([id,l,a])=>
            <Tag key={id} audience={a} selected={aud===id} onClick={()=>setAud(id)}>{l}</Tag>)}
        </div>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(260px,1fr))',gap:'var(--space-7)'}}>
        {shown.map(p=><ArticleCard key={p.id} audience={p.audience} title={p.title} readingTime={p.readingTime} excerpt={p.excerpt} onClick={()=>go('artigo',p.id)}/>)}
      </div>
    </Container>
  </Page>;
}
window.Home=Home;