const { StepList, Callout, Card, Button, Badge, Checkbox, Icon, Tabs } = window.GuiaDiabeteDesignSystem_9d1af3;
const AID_SIT={
 'Hipoglicemia':{tone:'urgent',steps:[{title:'Meça a glicemia',body:'Abaixo de 70 mg/dL, siga para o passo 2. Não espere os sintomas passarem.'},{title:'Ofereça 15 g de açúcar rápido',body:'Meio copo de suco de laranja, três balas de glicose ou uma colher de sopa de açúcar em água.'},{title:'Espere 15 minutos e meça de novo',body:'Se continuar abaixo de 70 mg/dL, repita a oferta uma vez.'},{title:'Depois que normalizar, ofereça um alimento com carboidrato',body:'Um pão ou uma fruta evitam nova queda.'},{title:'Registre o episódio',body:'Horário, valor e o que foi oferecido. A equipe médica precisa desse histórico.'}]},
 'Hiperglicemia':{tone:'brand',steps:[{title:'Confirme a medição',body:'Acima de 250 mg/dL, meça novamente com as mãos limpas e secas.'},{title:'Ofereça água',body:'Sem açúcar, em pequenas quantidades e com frequência.'},{title:'Verifique cetonas, se houver tiras',body:'Cetonas presentes com glicemia alta pedem contato médico imediato.'},{title:'Siga o plano de correção da equipe médica',body:'Nunca improvise dose de insulina.'}]},
 'Cetoacidose':{tone:'urgent',steps:[{title:'Reconheça os sinais',body:'Respiração rápida e profunda, hálito adocicado, vômito, dor abdominal, sonolência.'},{title:'Ligue 192 ou vá ao pronto-socorro',body:'Cetoacidose é emergência. Não trate em casa.'},{title:'Não ofereça insulina por conta própria',body:'A hidratação e a dose correta precisam ser feitas com acompanhamento.'},{title:'Leve o glucômetro e o registro recente',body:'Ajuda a equipe a agir mais rápido.'}]}};
function FirstAid({go}){
  const [sit,setSit]=React.useState('Hipoglicemia');const s=AID_SIT[sit];const mobile=useMobile();
  const [kit,setKit]=React.useState({a:true,b:true,c:false,d:false});
  return <Page route="socorros" go={go}>
    <div style={{background:'var(--coral-50)',borderBottom:'1px solid var(--coral-200)'}}>
      <Container style={{paddingTop:'var(--space-10)',paddingBottom:'var(--space-11)'}}>
        <Breadcrumb items={[['home','Início'],[null,'Primeiros socorros']]} go={go}/>
        <div style={{display:'flex',alignItems:'center',gap:'var(--space-5)',marginBottom:'var(--space-6)'}}>
          <Badge tone="urgent" icon="triangle-alert">Emergência</Badge>
          <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',color:'var(--coral-700)'}}>Revisado em março de 2026</span>
        </div>
        <h1 style={{fontSize:'var(--fs-h1)',lineHeight:'var(--lh-h1)',maxWidth:'20ch'}}>Primeiros socorros em crianças</h1>
        <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)'}}>Três situações, uma sequência de passos cada. Imprima e deixe uma cópia na mochila e outra na secretaria da escola.</p>
        <div data-no-print style={{display:'flex',gap:'var(--space-5)',marginTop:'var(--space-8)',alignItems:'center',flexWrap:'wrap'}}>
          <Button variant="urgent" size="lg" icon="phone-call" as="a" href="tel:192">Ligar 192</Button>
          <Button variant="outline" size="lg" icon="printer" onClick={window.printPage}>Imprimir o guia</Button>
          <Share label="" url={window.shareUrl('socorros')} title="Primeiros socorros em crianças com diabete" style={{marginLeft:'var(--space-4)'}}/>
        </div>
      </Container>
    </div>
    <Container style={{paddingTop:'var(--space-11)'}}>
      <div data-no-print style={{overflowX:'auto'}}><Tabs items={Object.keys(AID_SIT)} value={sit} onChange={setSit} style={{minWidth:'max-content'}}/></div>
      <div style={{display:'grid',gridTemplateColumns:mobile?'1fr':'1.25fr .75fr',gap:'var(--space-10)',marginTop:'var(--space-9)'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-9)'}}>
          <Callout tone={s.tone==='urgent'?'urgent':'caution'} title={sit==='Cetoacidose'?'Procure atendimento agora':'Aja nos primeiros minutos'}>
            {sit==='Cetoacidose'?'Não há passo a passo caseiro para cetoacidose. Os passos abaixo servem para reconhecer e buscar ajuda.':'Quanto mais cedo a medição, menor a chance de agravamento.'}
          </Callout>
          <StepList tone={s.tone} steps={s.steps}/>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-7)',alignSelf:'start'}}>
          <Card padding="var(--space-8)" style={{display:'flex',flexDirection:'column',gap:'var(--space-6)'}}>
            <span className="eyebrow">Kit da mochila</span>
            <Checkbox label="Glucômetro" description="Com fitas e lancetas de reserva" checked={kit.a} onChange={()=>setKit({...kit,a:!kit.a})}/>
            <Checkbox label="Açúcar de ação rápida" description="Balas de glicose ou suco em caixinha" checked={kit.b} onChange={()=>setKit({...kit,b:!kit.b})}/>
            <Checkbox label="Ficha de emergência assinada" checked={kit.c} onChange={()=>setKit({...kit,c:!kit.c})}/>
            <Checkbox label="Contatos da família e da equipe médica" checked={kit.d} onChange={()=>setKit({...kit,d:!kit.d})}/>
          </Card>
          <Card tone="sunken" padding="var(--space-8)" style={{display:'flex',flexDirection:'column',gap:'var(--space-5)'}}>
            <span className="eyebrow">Quando ligar 192</span>
            {['Desmaio ou convulsão','Vômito que não para','Respiração rápida e profunda','Sonolência que não melhora'].map(i=>
              <div key={i} style={{display:'flex',gap:'var(--space-5)',alignItems:'center'}}><Icon name="circle-alert" size={16} color="var(--coral-500)"/><span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-body-sm)',color:'var(--text-body)'}}>{i}</span></div>)}
          </Card>
        </div>
      </div>
    </Container>
  </Page>;
}
window.FirstAid=FirstAid;