const Sobre = () => {
  const timeline = [
    { yr:"O problema", t:"Pacientes perdidos no WhatsApp", d:"Clínicas recebem dezenas de contatos por dia e perdem pacientes por demora, mensagens sem resposta ou atendentes sobrecarregadas fora do horário." },
    { yr:"A virada", t:"Uma IA treinada para a clínica", d:"Configuramos a inteligência artificial com os procedimentos, valores de referência e tom de voz da sua clínica — não um robô genérico, a sua recepção digital." },
    { yr:"Hoje", t:"Atendimento que organiza a operação", d:"A Aura conversa, tira dúvidas, agenda e registra tudo no painel. Sua equipe entra só quando o toque humano realmente importa." },
  ];
  const valores = [
    { ic:"heart", t:"Humano por padrão", d:"Conversas naturais e acolhedoras, com a identidade da sua clínica. Transfere para a equipe sem fricção quando precisa." },
    { ic:"shield", t:"Privacidade primeiro", d:"Dados de pacientes criptografados e em conformidade com a LGPD. A clínica é dona das suas conversas — sempre." },
    { ic:"target", t:"Resultado, não hype", d:"Métricas claras de agendamento e ocupação da agenda. Acompanhamos junto com a equipe da clínica." },
  ];
  return (
    <section id="sobre" className="section-pad" style={{borderTop:"1px solid var(--line)"}}>
      <div className="wrap">
        <div style={{display:"grid", gridTemplateColumns:"0.85fr 1.15fr", gap:72, alignItems:"start"}} className="sobre-grid">
          <div style={{position:"sticky", top:110}}>
            <span className="eyebrow" data-reveal>Sobre a Pixarte Aura</span>
            <h2 data-reveal data-reveal-delay="1" style={{fontSize:"clamp(34px,3.6vw,52px)", margin:"20px 0 0"}}>
              Nascida para resolver<br/>uma dor real das<br/><span className="grad-text">clínicas de estética.</span>
            </h2>
            <p data-reveal data-reveal-delay="2" style={{color:"var(--ink-dim)", fontSize:17, margin:"22px 0 0", maxWidth:380}}>
              Não somos mais um chatbot de respostas prontas. Construímos uma inteligência que entende contexto, conversa de verdade e organiza a operação da clínica.
            </p>
            <div data-reveal data-reveal-delay="3" style={{display:"flex", gap:30, marginTop:34}}>
              {[["Seleção","de clínicas parceiras"],["100%","personalização por clínica"],["LGPD",<span>dados dos<br/>pacientes protegidos</span>]].map(([n,l],i)=>(
                <div key={i}>
                  <div className="grad-text" style={{fontSize:26, fontWeight:800}}>{n}</div>
                  <div style={{fontSize:12.5, color:"var(--ink-mute)", marginTop:2}}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{position:"relative", paddingLeft:34}}>
            <div aria-hidden style={{position:"absolute", left:7, top:8, bottom:8, width:2,
              background:"linear-gradient(180deg, var(--primary), var(--accent))", opacity:.5, borderRadius:2}}/>
            {timeline.map((it,i)=>(
              <div key={i} data-reveal data-reveal-delay={i+1} style={{position:"relative", paddingBottom: i<timeline.length-1?44:0}}>
                <span style={{position:"absolute", left:-34, top:4, width:16, height:16, borderRadius:"50%",
                  background:"var(--bg)", border:"2px solid var(--primary)", boxShadow:"0 0 0 5px rgba(255,107,53,.12)"}}/>
                <div style={{fontSize:12, fontWeight:700, letterSpacing:".14em", textTransform:"uppercase", color:"var(--accent)"}}>{it.yr}</div>
                <h3 style={{fontSize:24, margin:"8px 0 8px"}}>{it.t}</h3>
                <p style={{color:"var(--ink-dim)", fontSize:16, maxWidth:520}}>{it.d}</p>
              </div>
            ))}

            <div style={{marginTop:54, display:"grid", gap:14}}>
              {valores.map((v,i)=>(
                <div key={i} data-reveal data-reveal-delay={i+1} className="card" style={{padding:"22px 24px", display:"flex", gap:18, alignItems:"flex-start"}}>
                  <span style={{flexShrink:0, width:46, height:46, borderRadius:13, display:"flex", alignItems:"center", justifyContent:"center",
                    background:"linear-gradient(135deg, rgba(255,107,53,.18), rgba(0,206,201,.18))", color:"var(--primary-2)"}}>
                    <Icon name={v.ic} size={22}/>
                  </span>
                  <div>
                    <h4 style={{fontSize:18, fontWeight:700}}>{v.t}</h4>
                    <p style={{color:"var(--ink-dim)", fontSize:15, marginTop:6}}>{v.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 900px){ .sobre-grid{ grid-template-columns:1fr !important; gap:40px !important;} .sobre-grid > div:first-child{ position:static !important;} }`}</style>
    </section>
  );
};
window.Sobre = Sobre;