const { ArticleCard, Card, Badge, Tag, Button, Icon, Input, Callout } = window.GuiaDiabeteDesignSystem_9d1af3;
const FEED_DATES={'bolo-cenoura':'20 de março','lanche-mochila':'16 de março','suco-hipo':'11 de março','pizza-caseira':'6 de março','escola-hipo':'12 de março','insulina-crianca':'9 de março','tipo1-tipo2':'5 de março','cetoacidose':'28 de fevereiro','carboidratos':'24 de fevereiro','mochila':'19 de fevereiro','ficha-escola':'14 de fevereiro','educacao-fisica':'8 de fevereiro','festa':'2 de fevereiro','monitor':'27 de janeiro'};
const FEED_AUD={kids:['var(--tag-kids)','Para crianças','caution'],family:['var(--tag-family)','Família','brand'],school:['var(--tag-school)','Na escola','info'],emergency:['var(--tag-emergency)','Emergência','urgent'],recipe:['var(--tag-recipe)','Receita','recipe']};
function FeedRow({post,go}){
  const [hover,setHover]=React.useState(false);
  const mobile=useMobile();
  const [color,label,tone]=FEED_AUD[post.audience]||FEED_AUD.family;
  return <article onClick={()=>go('artigo',post.id)} onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
    style={{display:'grid',gridTemplateColumns:mobile?'1fr':'112px 1fr',gap:mobile?'var(--space-5)':'var(--space-8)',padding:'var(--space-8) 0',borderTop:'1px solid var(--line-hairline)',cursor:'pointer'}}>
    <div style={{display:'flex',flexDirection:mobile?'row':'column',alignItems:mobile?'center':'stretch',gap:mobile?'var(--space-5)':'var(--space-3)'}}>
      <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',color:'var(--text-muted)'}}>{FEED_DATES[post.id]||''}</span>
      <span style={{display:'inline-flex',alignItems:'center',gap:6,fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',fontWeight:'var(--fw-medium)',color:'var(--text-faint)'}}>
        <span style={{width:7,height:7,borderRadius:'var(--radius-pill)',background:color,flex:'0 0 auto'}}/>{label}</span>
    </div>
    <div style={{display:'flex',flexDirection:'column',gap:'var(--space-4)'}}>
      <h3 style={{fontSize:'var(--fs-h3)',lineHeight:'var(--lh-h3)',color:hover?'var(--teal-700)':'var(--text-strong)',transition:'color var(--dur-fast) var(--ease-standard)'}}>{post.title}</h3>
      <p style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body)',lineHeight:'var(--lh-body)',color:'var(--text-muted)',maxWidth:'var(--measure-prose)'}}>{post.excerpt}</p>
      <span style={{display:'inline-flex',alignItems:'center',gap:5,fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',color:'var(--text-faint)'}}><Icon name="clock" size={13}/>{post.readingTime}</span>
    </div>
  </article>;
}
function HomeFeed({go}){
  const mobile=useMobile();
  const posts=(window.POSTS||[]);
  const [aud,setAud]=React.useState('todos');
  const [page,setPage]=React.useState(1);
  const filtered=aud==='todos'?posts:posts.filter(p=>p.audience===aud);
  const lead=filtered[0];
  const rest=filtered.slice(1,1+page*5);
  const maisLidos=posts.slice(2,7);
  return <Page route="feed" go={go}>
    <Container style={{paddingTop:'var(--space-10)'}}>
      <div style={{display:'flex',flexWrap:'wrap',alignItems:'baseline',justifyContent:'space-between',gap:'var(--space-6)',paddingBottom:'var(--space-7)',borderBottom:'var(--border-rule) solid var(--ink-900)'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)'}}>
          <span className="eyebrow">Publicações</span>
          <h1 style={{fontSize:'var(--fs-h1)',lineHeight:'var(--lh-h1)'}}>Últimos artigos</h1>
        </div>
        <span style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body-sm)',color:'var(--text-muted)',maxWidth:'34ch',textAlign:mobile?'left':'right'}}>Informação sobre diabete revisada por profissionais, em ordem de publicação.</span>
      </div>
      <div style={{display:'flex',gap:'var(--space-4)',flexWrap:'wrap',padding:'var(--space-7) 0'}}>
        {[['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);setPage(1)}}>{l}</Tag>)}
      </div>
      <div style={{display:'grid',gridTemplateColumns:mobile?'1fr':'1fr 320px',gap:mobile?'var(--space-11)':'var(--space-11)',alignItems:'start'}}>
        <div>
          {lead&&<div onClick={()=>go('artigo',lead.id)} style={{cursor:'pointer',paddingBottom:'var(--space-9)'}}>
            <div style={{display:'flex',alignItems:'center',gap:'var(--space-5)',marginBottom:'var(--space-6)'}}>
              <Badge tone={(FEED_AUD[lead.audience]||FEED_AUD.family)[2]}>{(FEED_AUD[lead.audience]||FEED_AUD.family)[1]}</Badge>
              <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',color:'var(--text-muted)'}}>{FEED_DATES[lead.id]} · {lead.readingTime}</span>
            </div>
            <h2 style={{fontSize:'var(--fs-h1)',lineHeight:'var(--lh-h1)',letterSpacing:'var(--ls-heading)',maxWidth:'24ch'}}>{lead.title}</h2>
            <p style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-lead)',lineHeight:'var(--lh-lead)',color:'var(--text-body)',maxWidth:'var(--measure-prose)',marginTop:'var(--space-6)'}}>{lead.excerpt}</p>
            <div style={{marginTop:'var(--space-7)'}}><Button variant="secondary" iconAfter="arrow-right">Ler o artigo</Button></div>
          </div>}
          {rest.map(p=><FeedRow key={p.id} post={p} go={go}/>)}
          {rest.length===0&&!lead&&<Card tone="sunken" padding="var(--space-9)"><span style={{fontFamily:'var(--font-editorial)',color:'var(--text-muted)'}}>Nenhum artigo nesta combinação de filtros.</span></Card>}
          {1+page*5<filtered.length&&<div style={{paddingTop:'var(--space-9)',borderTop:'1px solid var(--line-hairline)',display:'flex',justifyContent:'center'}}>
            <Button variant="outline" icon="plus" onClick={()=>setPage(page+1)}>Carregar mais artigos</Button></div>}
        </div>
        <aside style={{display:'flex',flexDirection:'column',gap:'var(--space-7)',position:mobile?'static':'sticky',top:96}}>
          <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)'}}>Hipoglicemia, hiperglicemia e cetoacidose: passo a passo em uma página, pronta para imprimir.</span>
            <Button variant="urgent" icon="heart-pulse" onClick={()=>go('socorros')}>Primeiros socorros</Button>
          </Card>
          <Card padding="var(--space-8)" style={{display:'flex',flexDirection:'column',gap:'var(--space-6)'}}>
            <span className="eyebrow">Mais lidos</span>
            {maisLidos.map((p,i)=><a key={p.id} href="#" onClick={e=>{e.preventDefault();go('artigo',p.id)}} style={{display:'flex',gap:'var(--space-5)',textDecoration:'none'}}>
              <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-body)',fontWeight:'var(--fw-semibold)',color:'var(--teal-300)',minWidth:18}}>{i+1}</span>
              <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-body-sm)',lineHeight:1.45,fontWeight:'var(--fw-medium)',color:'var(--text-strong)'}}>{p.title}</span>
            </a>)}
          </Card>
          <Card padding="var(--space-8)" style={{display:'flex',flexDirection:'column',gap:'var(--space-6)'}}>
            <span className="eyebrow">Seções</span>
            {[['tipos','Tipos de diabete'],['socorros','Primeiros socorros'],['escola','Na escola'],['criancas','Para crianças'],['sobre','Sobre']].map(([r,l])=>
              <a key={l} href="#" onClick={e=>{e.preventDefault();go(r)}} style={{display:'flex',alignItems:'center',justifyContent:'space-between',fontFamily:'var(--font-ui)',fontSize:'var(--fs-body-sm)',fontWeight:'var(--fw-medium)',color:'var(--text-body)',textDecoration:'none'}}>
                {l}<Icon name="chevron-right" size={14} color="var(--text-faint)"/></a>)}
          </Card>
          <Card tone="sunken" padding="var(--space-8)" style={{display:'flex',flexDirection:'column',gap:'var(--space-6)'}}>
            <span className="eyebrow">Resumo semanal</span>
            <span style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body-sm)',lineHeight:'var(--lh-body-sm)',color:'var(--text-body)'}}>Um e-mail por semana, sem alarmismo.</span>
            <Input icon="mail" placeholder="nome@email.com"/>
            <Button fullWidth>Assinar</Button>
          </Card>
        </aside>
      </div>
    </Container>
  </Page>;
}
window.HomeFeed=HomeFeed;
