/* Sobre.jsx — seção institucional sobre a AR */
const Sobre = () => {
  const diferenciais = [
    {
      icon: 'search',
      t: 'Diagnóstico antes da tecnologia',
      d: 'Entendemos o negócio antes de propor qualquer solução. IA sem contexto não gera resultado — e não é o que entregamos.',
    },
    {
      icon: 'plug',
      t: 'Integração com o que já existe',
      d: 'Não pedimos que sua equipe abandone as ferramentas atuais. Conectamos a IA ao que já funciona no seu dia a dia.',
    },
    {
      icon: 'bar-chart-3',
      t: 'Resultado mensurável',
      d: 'Definimos métricas antes de começar e acompanhamos os indicadores ao longo do tempo. Sem achismo.',
    },
    {
      icon: 'shield-check',
      t: 'Suporte contínuo incluído',
      d: 'Não entregamos e sumimos. Acompanhamos os agentes e evoluímos a solução conforme o negócio cresce.',
    },
  ];

  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });

  return (
    <section id="sobre" style={{ background: 'var(--ar-bg-section)', padding: '116px 0' }}>
      <Container>
        <div className="grid-split sobre-grid" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'start' }}>

          <div className="sobre-sticky" style={{ position: 'sticky', top: 100 }}>
            <SectionHead
              eyebrow="SOBRE A AR"
              title={<>IA aplicada com <GradText>propósito e clareza</GradText></>}
              sub="Somos uma agência especializada em transformar inteligência artificial em resultado prático para empresas. Não vendemos tecnologia — entregamos processos que funcionam."
              subMobile="IA aplicada com processos que funcionam — do diagnóstico ao suporte."
              maxWidth={480}
            />
            <Reveal delay={140}>
              <div className="sobre-stats" style={{ display: 'flex', gap: 28, marginTop: 36, flexWrap: 'nowrap' }}>
                {[
                  { n: '100%', l: 'soluções sob medida' },
                  { n: '24/7', l: 'agentes sempre em operação' },
                  { n: '1:1', l: 'acompanhamento dedicado' },
                ].map(s => (
                  <div key={s.l}>
                    <div style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 800, fontSize: 24, letterSpacing: '-0.02em' }}>
                      <GradText>{s.n}</GradText>
                    </div>
                    <div className="sobre-stat-l" style={{ fontFamily: 'var(--ar-font-body)', fontSize: 12, color: 'var(--ar-text-muted)', marginTop: 4, whiteSpace: 'nowrap' }}>{s.l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {diferenciais.map((d, i) => (
              <Reveal key={d.t} delay={i * 60}>
                <div className="sobre-diff-card ar-block" style={{
                  display: 'flex', gap: 18, padding: '22px 24px',
                  background: 'var(--ar-bg-card)', border: '1px solid rgba(255,255,255,0.07)',
                  borderRadius: 16,
                }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 12, flexShrink: 0,
                    background: 'rgba(0,94,255,0.12)', border: '1px solid rgba(0,94,255,0.35)',
                    color: '#7CB0FF', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <i data-lucide={d.icon} style={{ width: 20, height: 20 }}></i>
                  </div>
                  <div>
                    <div style={{
                      fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 16,
                      color: 'var(--ar-text-main)', marginBottom: 5,
                    }}>{d.t}</div>
                    <div style={{
                      fontFamily: 'var(--ar-font-body)', fontSize: 14, lineHeight: 1.6,
                      color: 'var(--ar-text-muted)',
                    }}>{d.d}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Container>
      <style>{`
        @media (max-width: 980px) {
          .sobre-sticky { position: static !important; }
          .sobre-grid { gap: 40px !important; }
        }
        /* Estatísticas: distribuídas em 3 colunas no celular (sem overflow) */
        @media (max-width: 560px) {
          .sobre-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
          .sobre-stat-l { white-space: normal !important; }
        }
      `}</style>
    </section>
  );
};

window.Sobre = Sobre;