const { Badge, Callout, Card, Button, IconButton, Icon, ArticleCard, Tooltip, Input, Dialog, Toast, StepList } = window.GuiaDiabeteDesignSystem_9d1af3;
const ART_AUD={kids:['Para crianças','caution','criancas'],family:['Família','brand','busca'],school:['Na escola','info','escola'],emergency:['Emergência','urgent','socorros'],recipe:['Receita','recipe','receitas']};
function Block({b}){
  if(b.t==='h2') return <h2 style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-h2)',lineHeight:'var(--lh-h2)',letterSpacing:'var(--ls-heading)',color:'var(--text-strong)',marginTop:'var(--space-6)'}}>{b.v}</h2>;
  if(b.t==='callout') return <Callout tone={b.tone} title={b.title}>{b.v}</Callout>;
  if(b.t==='steps') return <StepList tone={b.tone||'brand'} steps={b.v}/>;
  return <p style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body)',lineHeight:'var(--lh-body)',color:'var(--text-body)',margin:0}}>{b.v}</p>;
}
function Article({id='escola-hipo',go}){
  const posts=window.POSTS||[];
  const post=posts.find(p=>p.id===id)||posts[0];
  const [saved,setSaved]=React.useState(false),[dlg,setDlg]=React.useState(false),[copied,setCopied]=React.useState(false);
  React.useEffect(()=>{setSaved(false);setCopied(false)},[id]);
  const url=window.shareUrl('artigo/'+post.id);
  const share=t=>{if(t==='link')setCopied(true)};
  React.useEffect(()=>{if(!copied)return;const t=setTimeout(()=>setCopied(false),2600);return()=>clearTimeout(t)},[copied]);
  const [label,tone,cat]=ART_AUD[post.audience]||ART_AUD.family;
  const related=(post.related||[]).map(r=>posts.find(p=>p.id===r)).filter(Boolean);
  return <Page route={cat} go={go}>
    <Container width="var(--width-content)" style={{paddingTop:'var(--space-11)'}}>
      <Breadcrumb items={[['home','Início'],[cat,label],[null,post.title]]} go={go}/>
      <div style={{display:'flex',alignItems:'center',gap:'var(--space-5)',marginBottom:'var(--space-6)'}}>
        <Badge tone={tone}>{label}</Badge>
        <span style={{display:'inline-flex',alignItems:'center',gap:5,fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',color:'var(--text-muted)'}}><Icon name="clock" size={13}/>{post.readingTime}</span>
      </div>
      <h1 style={{fontSize:'var(--fs-h1)',lineHeight:'var(--lh-h1)',letterSpacing:'var(--ls-heading)'}}>{post.title}</h1>
      <p style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-lead)',lineHeight:'var(--lh-lead)',color:'var(--text-body)',marginTop:'var(--space-6)'}}>{post.lead}</p>
      <div style={{display:'flex',flexWrap:'wrap',alignItems:'center',justifyContent:'space-between',gap:'var(--space-6)',padding:'var(--space-6) 0',margin:'var(--space-8) 0',borderTop:'1px solid var(--line-hairline)',borderBottom:'1px solid var(--line-hairline)'}}>
        <div style={{display:'flex',flexDirection:'column',gap:2}}>
          <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-body-sm)',fontWeight:'var(--fw-medium)',color:'var(--text-strong)'}}>{post.reviewer}</span>
          <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',color:'var(--text-muted)'}}>Publicado em {post.date}</span>
        </div>
        <div data-no-print style={{display:'flex',gap:'var(--space-4)'}}>
          <IconButton icon={saved?'bookmark-check':'bookmark'} label="Salvar" variant="outline" onClick={()=>setSaved(!saved)}/>
          <IconButton icon="printer" label="Imprimir" variant="outline" onClick={window.printPage}/>
        </div>
      </div>
      <div data-no-print><Share url={url} title={post.title} onShare={share} copied={copied} style={{marginBottom:'var(--space-9)'}}/></div>
      <div style={{display:'flex',flexDirection:'column',gap:'var(--space-7)'}}>
        {post.body.map((b,i)=><Block key={i} b={b}/>)}
      </div>
      <div data-no-print style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:'var(--space-7)',flexWrap:'wrap',padding:'var(--space-7) 0',marginTop:'var(--space-10)',borderTop:'1px solid var(--line-hairline)',borderBottom:'1px solid var(--line-hairline)'}}>
        <span style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body-sm)',color:'var(--text-muted)',maxWidth:'34ch'}}>Este guia é feito para circular. Mande para quem cuida da criança junto com você.</span>
        <Share label="" url={url} title={post.title} onShare={share} copied={copied}/>
      </div>
      <Card tone="brand" data-no-print padding="var(--space-9)" style={{marginTop:'var(--space-10)',display:'flex',flexWrap:'wrap',alignItems:'center',justifyContent:'space-between',gap:'var(--space-7)'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)'}}>
          <strong style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-h3)',color:'var(--text-strong)'}}>Receba o guia por e-mail</strong>
          <span style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body-sm)',color:'var(--text-body)'}}>Um resumo por semana, sem alarmismo.</span>
        </div>
        <Button size="lg" onClick={()=>setDlg(true)}>Assinar</Button>
      </Card>
      {related.length>0&&<div data-no-print style={{marginTop:'var(--space-12)'}}>
        <h2 style={{fontSize:'var(--fs-h2)',marginBottom:'var(--space-7)'}}>Continue lendo</h2>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(260px,1fr))',gap:'var(--space-7)'}}>
          {related.map(r=><ArticleCard key={r.id} audience={r.audience} title={r.title} readingTime={r.readingTime} excerpt={r.excerpt} onClick={()=>go('artigo',r.id)}/>)}
        </div>
      </div>}
    </Container>
    <Dialog open={dlg} onClose={()=>setDlg(false)} title="Receber o guia por e-mail" description="Um resumo por semana, com os artigos revisados por profissionais." footer={<><Button variant="ghost" onClick={()=>setDlg(false)}>Agora não</Button><Button onClick={()=>setDlg(false)}>Assinar</Button></>}>
      <Input label="Seu e-mail" icon="mail" placeholder="nome@email.com"/>
    </Dialog>
    {copied&&<div style={{position:'fixed',left:0,right:0,bottom:'var(--space-13)',display:'flex',justifyContent:'center',zIndex:50}}><Toast tone="info" onClose={()=>setCopied(false)}>Link copiado para a área de transferência.</Toast></div>}
    {saved&&<div style={{position:'fixed',left:0,right:0,bottom:'var(--space-9)',display:'flex',justifyContent:'center',zIndex:50}}><Toast onClose={()=>setSaved(false)}>Artigo salvo na sua lista.</Toast></div>}
  </Page>;
}
window.Article=Article;