const { Card, Callout, Button, Badge, Icon, Input, Select, Radio, Switch, Tooltip, Toast } = window.GuiaDiabeteDesignSystem_9d1af3;
function Sobre({go}){
  const [sent,setSent]=React.useState(false);
  const [pref,setPref]=React.useState('semanal');
  const [big,setBig]=React.useState(false);const mobile=useMobile();
  return <Page route="sobre" go={go}>
    <Container width="var(--width-content)" style={{paddingTop:'var(--space-11)'}}>
      <Breadcrumb items={[['home','Início'],[null,'Sobre']]} go={go}/>
      <span className="eyebrow">Sobre</span>
      <h1 style={{fontSize:'var(--fs-h1)',lineHeight:'var(--lh-h1)',margin:'var(--space-5) 0 var(--space-6)'}}>Quem escreve e quem revisa</h1>
      <p style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-lead)',lineHeight:'var(--lh-lead)',color:'var(--text-body)'}}>O Além do Açúcar publica informação sobre diabete em português, com foco em crianças e nos adultos que cuidam delas. Todo artigo passa por revisão profissional antes de ir ao ar.</p>
      <Callout tone="info" title="O que este site não é" style={{marginTop:'var(--space-9)'}}>Conteúdo informativo. Não substitui consulta médica, não prescreve doses e não define metas individuais de glicemia.</Callout>
      <div className="prose" style={{display:'flex',flexDirection:'column',gap:'var(--space-7)',marginTop:'var(--space-9)',maxWidth:'100%'}}>
        <h2 style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-h2)'}}>Como escrevemos</h2>
        <p>Frases curtas, na ordem em que as coisas acontecem. Números sempre com unidade. Nenhum artigo de emergência começa por explicação teórica: começa pelo que fazer. Quando um termo clínico é necessário, ele aparece uma vez com a explicação ao lado — como <Tooltip content="Hemoglobina glicada: média da glicemia dos últimos três meses"><span style={{fontFamily:'var(--font-ui)',fontWeight:600,borderBottom:'1px dotted var(--line-strong)',cursor:'help'}}>HbA1c</span></Tooltip>.</p>
        <h2 style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-h2)'}}>Revisão e fontes</h2>
        <p>Cada texto é revisado por profissional de saúde e datado. Quando uma recomendação muda, o artigo é atualizado e a data de revisão troca — não apagamos a versão anterior sem registro.</p>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'var(--space-7)',marginTop:'var(--space-10)'}}>
        {[['shield-check','Revisão profissional','Endocrinologia e enfermagem pediátrica'],['calendar-check','Datas visíveis','Publicação e última revisão em todo artigo'],['printer','Feito para imprimir','Guias de emergência em uma página'],['users','Escrito para quem age','Famílias, escolas e as próprias crianças']].map(([ic,t,s])=>
          <Card key={t} padding="var(--space-8)" style={{display:'flex',gap:'var(--space-6)'}}>
            <Icon name={ic} size={22} color="var(--teal-600)"/>
            <div style={{display:'flex',flexDirection:'column',gap:4}}>
              <strong style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-h4)',color:'var(--text-strong)'}}>{t}</strong>
              <span style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body-sm)',color:'var(--text-muted)'}}>{s}</span>
            </div></Card>)}
      </div>
      <div style={{marginTop:'var(--space-11)',display:'flex',flexDirection:'column',gap:'var(--space-7)'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)'}}>
          <h2 style={{fontSize:'var(--fs-h2)'}}>Onde mais nos encontrar</h2>
          <span style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body-sm)',color:'var(--text-muted)'}}>Conteúdo do dia a dia no Instagram e o projeto Laços Vida Leve.</span>
        </div>
        <div style={{display:'grid',gridTemplateColumns:mobile?'1fr':'1fr 1fr',gap:'var(--space-7)'}}>
          <Card interactive padding="var(--space-8)" onClick={()=>window.open('https://www.instagram.com/alemdoacucar15','_blank','noopener,noreferrer')} style={{display:'flex',gap:'var(--space-6)',alignItems:'flex-start'}}>
            <Icon name="instagram" size={22} color="var(--teal-600)"/>
            <div style={{display:'flex',flexDirection:'column',gap:4,minWidth:0}}>
              <strong style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-h4)',color:'var(--text-strong)'}}>@alemdoacucar15</strong>
              <span style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body-sm)',color:'var(--text-muted)'}}>Instagram — posts curtos, rotina e avisos</span>
              <a href="https://www.instagram.com/alemdoacucar15" target="_blank" rel="noopener noreferrer" onClick={e=>e.stopPropagation()} style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',fontWeight:'var(--fw-medium)',marginTop:'var(--space-3)'}}>instagram.com/alemdoacucar15</a>
            </div></Card>
          <Card interactive padding="var(--space-8)" onClick={()=>window.open('https://lacos-vida-leve.base44.app','_blank','noopener,noreferrer')} style={{display:'flex',gap:'var(--space-6)',alignItems:'flex-start'}}>
            <Icon name="external-link" size={22} color="var(--teal-600)"/>
            <div style={{display:'flex',flexDirection:'column',gap:4,minWidth:0}}>
              <strong style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-h4)',color:'var(--text-strong)'}}>Laços Vida Leve</strong>
              <span style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body-sm)',color:'var(--text-muted)'}}>Projeto parceiro, com ferramentas de acompanhamento</span>
              <a href="https://lacos-vida-leve.base44.app" target="_blank" rel="noopener noreferrer" onClick={e=>e.stopPropagation()} style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',fontWeight:'var(--fw-medium)',marginTop:'var(--space-3)'}}>lacos-vida-leve.base44.app</a>
            </div></Card>
        </div>
      </div>
      <Card padding="var(--space-9)" style={{marginTop:'var(--space-11)',display:'flex',flexDirection:'column',gap:'var(--space-7)'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)'}}>
          <h2 style={{fontSize:'var(--fs-h3)'}}>Fale com a redação</h2>
          <span style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body-sm)',color:'var(--text-muted)'}}>Correções, sugestões de tema e pedidos de fonte.</span>
        </div>
        <div style={{display:'grid',gridTemplateColumns:mobile?'1fr':'1fr 1fr',gap:'var(--space-7)'}}>
          <Input label="Seu nome" placeholder="Como podemos te chamar"/>
          <Input label="Seu e-mail" icon="mail" placeholder="nome@email.com"/>
          <Select label="Assunto" options={['Correção em um artigo','Sugestão de tema','Pedido de fonte','Parceria']}/>
          <Input label="Cidade" placeholder="Opcional"/>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-5)'}}>
          <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-label)',fontWeight:'var(--fw-medium)',color:'var(--text-strong)'}}>Quer receber o resumo?</span>
          <Radio name="pref" label="Uma vez por semana" checked={pref==='semanal'} onChange={()=>setPref('semanal')}/>
          <Radio name="pref" label="Só quando houver atualização de emergência" checked={pref==='urgente'} onChange={()=>setPref('urgente')}/>
        </div>
        <Switch label="Texto grande" description="Aumenta o corpo dos artigos neste dispositivo" checked={big} onChange={()=>setBig(!big)}/>
        <div style={{display:'flex',flexWrap:'wrap',justifyContent:'space-between',alignItems:'center',gap:'var(--space-7)'}}>
          <Share variant="compact" label="Compartilhar" url={window.shareUrl('sobre')} title="Sobre o Além do Açúcar"/>
          <Button icon="send" onClick={()=>setSent(true)}>Enviar mensagem</Button>
        </div>
      </Card>
    </Container>
    {sent&&<div style={{position:'fixed',left:0,right:0,bottom:'var(--space-9)',display:'flex',justifyContent:'center',zIndex:50}}><Toast onClose={()=>setSent(false)}>Mensagem enviada. Respondemos em até dois dias úteis.</Toast></div>}
  </Page>;
}
window.Sobre=Sobre;