const { Card, Callout, Button, Badge, Icon } = window.GuiaDiabeteDesignSystem_9d1af3;
const INICIATIVAS=[
 {icon:'smartphone',title:'Aplicativo que acompanha a rotina da criança',sub:'Android · arquivo APK, instalação manual',download:'./rotina.apk'},
 {icon:'globe',title:'Site para acompanhar atualizações sobre as diabetes',sub:'Laços Vida Leve',href:'https://lacos-vida-leve.base44.app',linkText:'Acessar o site'},
 {icon:'book-open',title:'Revistinhas da "Turminha do Açúcar & Alegria"',sub:'Onde as crianças aprendem mais sobre seu tipo de diabete',href:null,hideBadge:true},
 {icon:'instagram',title:'Instagram',sub:'@alemdoacucar15',href:'https://www.instagram.com/alemdoacucar15'}];
function Projeto({go}){
  const mobile=useMobile();
  return <Page route="projeto" go={go}>
    <Container width="var(--width-content)" style={{paddingTop:'var(--space-11)'}}>
      <Breadcrumb items={[['home','Início'],[null,'O projeto']]} go={go}/>
      <span className="eyebrow">O projeto</span>
      <h1 style={{fontSize:'var(--fs-h1)',lineHeight:'var(--lh-h1)',margin:'var(--space-5) 0 var(--space-6)'}}>Além do Açúcar</h1>
      <p style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-lead)',lineHeight:'var(--lh-lead)',color:'var(--text-body)'}}>Nosso objetivo é melhorar o entendimento dos responsáveis sobre a diabete da criança, mostrar o que fazer em diversos casos e como ajudar a criança a ter uma vida linda e saudável, mesmo com essa doença.</p>
      <h2 style={{fontSize:'var(--fs-h2)',marginTop:'var(--space-11)'}}>Idealizadores</h2>
      <div style={{display:'grid',gridTemplateColumns:mobile?'1fr':'1fr 1fr',gap:'var(--space-5)',marginTop:'var(--space-7)'}}>
        {['Benício Silva Pimenta','Isabella Guerra Ribeiro','Lais Alcantara Reis','Lucas Leonel de Melo','Matheus Faria Garcia','Mirella Oliveira Crisóstomo','Murilo de Faria Castro','Sofia Júlia dos Santos'].map(n=>
          <div key={n} style={{display:'flex',alignItems:'center',gap:'var(--space-5)',padding:'var(--space-5) 0',borderBottom:'1px solid var(--line-hairline)'}}>
            <span style={{width:7,height:7,borderRadius:'var(--radius-pill)',background:'var(--teal-400)',flex:'0 0 auto'}}/>
            <span style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-body)',fontWeight:'var(--fw-medium)',color:'var(--text-strong)'}}>{n}</span>
          </div>)}
      </div>
      <p style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body)',lineHeight:'var(--lh-body)',color:'var(--text-body)',marginTop:'var(--space-9)'}}>Além desse blog, temos outras iniciativas para que a rotina da criança seja leve e divertida, porém mantendo sempre o cuidado com a diabete.</p>
      <h2 style={{fontSize:'var(--fs-h2)',marginTop:'var(--space-11)'}}>As iniciativas</h2>
      <div style={{display:'flex',flexDirection:'column',gap:'var(--space-6)',marginTop:'var(--space-7)'}}>
        {INICIATIVAS.map(it=>{
          const clickable=!!(it.href||it.download);
          const open=()=>{if(it.href)window.open(it.href,'_blank','noopener,noreferrer');else if(it.download){const a=document.createElement('a');a.href=it.download;a.download=it.download.replace('./','');a.click()}};
          return <Card key={it.title} interactive={clickable} onClick={clickable?open:undefined} padding="var(--space-8)" style={{display:'flex',gap:'var(--space-6)',alignItems:'flex-start'}}>
            <Icon name={it.icon} size={22} color={clickable?'var(--teal-600)':'var(--ink-300)'}/>
            <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)',flex:1,minWidth:0}}>
              <strong style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-h4)',lineHeight:'var(--lh-h4)',color:'var(--text-strong)'}}>{it.title}</strong>
              {it.sub&&<span style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body-sm)',color:'var(--text-muted)'}}>{it.sub}</span>}
              {it.download
                ? <a href={it.download} download={it.download.replace('./','')} onClick={e=>e.stopPropagation()} style={{display:'inline-flex',alignItems:'center',gap:5,fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',fontWeight:'var(--fw-medium)'}}><Icon name="download" size={13}/>Baixar o aplicativo</a>
                : it.href
                  ? <a href={it.href} target="_blank" rel="noopener noreferrer" onClick={e=>e.stopPropagation()} style={{fontFamily:'var(--font-ui)',fontSize:'var(--fs-caption)',fontWeight:'var(--fw-medium)',overflowWrap:'anywhere'}}>{it.linkText||it.href.replace(/^https?:\/\//,'')}</a>
                  : it.hideBadge?null:<Badge tone="neutral">Link em breve</Badge>}
            </div>
            {clickable&&<Icon name={it.download?'download':'external-link'} size={16} color="var(--text-faint)" style={{marginTop:4}}/>}
          </Card>})}
      </div>
      <Card tone="brand" padding="var(--space-9)" style={{marginTop:'var(--space-11)',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)'}}>Quer falar com a gente?</strong>
          <span style={{fontFamily:'var(--font-editorial)',fontSize:'var(--fs-body-sm)',color:'var(--text-body)'}}>Sugestões de tema, correções e parcerias.</span>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:'var(--space-5)'}}>
          <Share variant="compact" label="" url={window.shareUrl('projeto')} title="O projeto Além do Açúcar"/>
          <Button size="lg" icon="mail" onClick={()=>go('sobre')}>Ir para o contato</Button>
        </div>
      </Card>
    </Container>
  </Page>;
}
window.Projeto=Projeto;
