const { ArticleCard, Tag, Card, Callout, Button, Badge, Icon, Input } = window.GuiaDiabeteDesignSystem_9d1af3;
const LIST_CATS={
 escola:{eyebrow:'Categoria',title:'Na escola',lead:'Guias para professores, coordenação e secretaria — o que combinar antes e o que fazer no momento.',audience:'school',
   aside:{title:'Antes do primeiro dia',items:['Ficha de emergência assinada','Cópia do plano de correção','Contatos da família e da equipe médica','Onde fica o kit da criança']}},
 criancas:{eyebrow:'Categoria',title:'Para crianças',lead:'Textos escritos para adultos lerem junto com a criança. Frases curtas, sem eufemismo e sem susto.',audience:'kids',
   aside:{title:'Como usar estes textos',items:['Leia junto, em voz alta','Pare em cada pergunta','Repita os números importantes','Deixe a criança contar de novo']}},
 receitas:{eyebrow:'Categoria',title:'Receitas',lead:'Receitas pensadas para crianças com diabete, com o carboidrato já contado por porção. Comida de casa, não dieta.',audience:'recipe',
   aside:{title:'Como usamos as receitas',items:['Carboidrato contado por porção','Medidas caseiras, sem balança','Sempre com a porção padronizada','Revisadas por nutrição clínica']}},
 busca:{eyebrow:'Busca',title:'Resultados',lead:'Todos os artigos publicados, dos mais recentes aos mais antigos.',audience:null,aside:null}};
function Listing({cat='escola',initialQuery='',go}){
  const mobile=useMobile();
  const c=LIST_CATS[cat]||LIST_CATS.escola;
  const [aud,setAud]=React.useState(c.audience||'todos');
  React.useEffect(()=>{setAud(c.audience||'todos')},[cat]);
  const [q,setQ]=React.useState(initialQuery);
  React.useEffect(()=>{setQ(cat==='busca'?initialQuery:'')},[cat,initialQuery]);
  const posts=(window.POSTS||[]);
  const norm=s=>(s||'').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');
  const terms=norm(q).split(/\s+/).filter(Boolean);
  const byAud=aud==='todos'?posts:posts.filter(p=>p.audience===aud);
  const haystack=p=>norm([p.title,p.excerpt,p.lead,(p.body||[]).map(b=>typeof b.v==='string'?b.v:(b.v||[]).map(s=>s.title+' '+(s.body||'')).join(' ')).join(' ')].join(' '));
  const shown=terms.length?byAud.filter(p=>{const h=haystack(p);return terms.every(t=>h.includes(t))}):byAud;
  return <Page route={cat} go={go}>
    <Container style={{paddingTop:'var(--space-11)'}}>
      <Breadcrumb items={[['home','Início'],[null,c.title]]} go={go}/>
      <span className="eyebrow">{c.eyebrow}</span>
      <h1 style={{fontSize:'var(--fs-h1)',lineHeight:'var(--lh-h1)',margin:'var(--space-5) 0 var(--space-6)'}}>{c.title}</h1>
      <p style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-lead)',lineHeight:'var(--lh-lead)',color:'var(--text-body)',maxWidth:'var(--measure-prose)'}}>{c.lead}</p>
      {cat==='busca'&&<div style={{maxWidth:420,marginTop:'var(--space-8)'}}><Input icon="search" placeholder="Buscar por sintoma, situação ou tipo…" value={q} onChange={e=>setQ(e.target.value)}/></div>}
      <div style={{display:'grid',gridTemplateColumns:(c.aside&&!mobile)?'1fr 320px':'1fr',gap:'var(--space-10)',marginTop:'var(--space-10)',alignItems:'start'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-8)'}}>
          <div style={{display:'flex',gap:'var(--space-4)',flexWrap:'wrap'}}>
            {[['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>
          <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',color:'var(--text-muted)'}}>{shown.length} artigo{shown.length===1?'':'s'}{terms.length?' para “'+q.trim()+'”':''}</span>
          <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>
          {shown.length===0&&<Card tone="sunken" padding="var(--space-9)" style={{display:'flex',flexDirection:'column',alignItems:'flex-start',gap:'var(--space-6)'}}>
            <span style={{fontFamily:'var(--font-editorial)',color:'var(--text-muted)'}}>{terms.length?'Nenhum artigo encontrado para “'+q.trim()+'”.':'Nenhum artigo nesta combinação de filtros.'}</span>
            {terms.length>0&&<Button variant="outline" icon="x" onClick={()=>setQ('')}>Limpar a busca</Button>}
          </Card>}
        </div>
        {c.aside&&<div style={{display:'flex',flexDirection:'column',gap:'var(--space-7)'}}>
          <Card padding="var(--space-8)" style={{display:'flex',flexDirection:'column',gap:'var(--space-6)'}}>
            <span className="eyebrow">{c.aside.title}</span>
            {c.aside.items.map(i=><div key={i} style={{display:'flex',gap:'var(--space-5)',alignItems:'center'}}>
              <Icon name="check" size={16} color="var(--teal-600)"/>
              <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-body-sm)',color:'var(--text-body)'}}>{i}</span></div>)}
          </Card>
          <Card tone="brand" padding="var(--space-8)" style={{display:'flex',flexDirection:'column',alignItems:'flex-start',gap:'var(--space-6)'}}>
            <Badge tone="urgent" icon="triangle-alert">Emergência</Badge>
            <span style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body-sm)',lineHeight:'var(--lh-body-sm)',color:'var(--text-body)'}}>O passo a passo de hipoglicemia, hiperglicemia e cetoacidose está reunido em uma página só, pronta para imprimir.</span>
            <Button variant="outline" icon="heart-pulse" onClick={()=>go('socorros')}>Ver primeiros socorros</Button>
          </Card>
        </div>}
      </div>
    </Container>
  </Page>;
}
window.Listing=Listing;