/* HowWeWork.jsx — 7-step implantation timeline */
const HowWeWork = () => {
  const steps = [
    { n: '01', icon: 'search', t: 'Diagnóstico do negócio', d: 'Entendemos o seu contexto, canais e objetivos antes de propor qualquer tecnologia.' },
    { n: '02', icon: 'git-merge', t: 'Mapeamento dos processos', d: 'Desenhamos o fluxo atual e identificamos onde a IA gera mais retorno.' },
    { n: '03', icon: 'pen-tool', t: 'Desenho da solução', d: 'Definimos escopo, integrações, prazos e métricas de sucesso para o projeto.' },
    { n: '04', icon: 'cpu', t: 'Desenvolvimento com IA e automações', d: 'Construímos agentes, sistemas e fluxos sob medida — com o contexto da sua operação.' },
    { n: '05', icon: 'plug', t: 'Integrações com sistemas', d: 'Conectamos CRM, WhatsApp, APIs, planilhas e ferramentas internas.' },
    { n: '06', icon: 'rocket', t: 'Testes, ajustes e implantação', d: 'Validamos cenários reais, ajustamos e colocamos no ar com a equipe treinada.' },
    { n: '07', icon: 'trending-up', t: 'Acompanhamento e melhoria contínua', d: 'Suporte mensal, indicadores e evolução dos agentes conforme o negócio cresce.' },
  ];

  return (
    <section id="como" style={{ background: 'var(--ar-bg-main)', padding: '116px 0' }}>
      <Container>
        <div className="grid-split" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.3fr', gap: 56, alignItems: 'start' }}>
          <div className="how-intro" style={{ position: 'sticky', top: 100 }}>
            <SectionHead
              eyebrow="COMO TRABALHAMOS"
              title={<>Processo claro,<br />resultado <GradText>previsível</GradText></>}
              sub="Cada etapa entrega algo concreto. Você acompanha do diagnóstico ao suporte contínuo, com prazos e responsáveis definidos."
              maxWidth={440}
            />
            <Reveal delay={160}>
              <div style={{ marginTop: 26 }}>
                <Button variant="secondary" onClick={() => { const el = document.getElementById('contato'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 76, behavior: 'smooth' }); }}>
                  Falar com a AR <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
                </Button>
              </div>
            </Reveal>
          </div>

          <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', left: 27, top: 27, bottom: 40, width: 2, background: 'linear-gradient(180deg, rgba(0,94,255,0.5), rgba(0,212,255,0.12) 70%, transparent)' }} />
            {steps.map((s, i) => (
              <Reveal key={s.n} delay={i * 50}>
                <div style={{ display: 'flex', gap: 22, paddingBottom: 26, alignItems: 'flex-start' }}>
                  <div style={{
                    width: 56, height: 56, borderRadius: 16, background: 'var(--ar-bg-card)',
                    border: '1px solid rgba(0,212,255,0.30)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--ar-cyan)', flexShrink: 0, position: 'relative', zIndex: 1,
                    boxShadow: '0 0 24px rgba(0,212,255,0.15)',
                  }}>
                    <i data-lucide={s.icon} style={{ width: 22, height: 22 }}></i>
                  </div>
                  <div style={{ paddingTop: 4 }}>
                    <div style={{ fontFamily: 'var(--ar-font-mono)', fontSize: 11, color: 'var(--ar-cyan)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>Etapa {s.n}</div>
                    <h3 style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 20, color: 'var(--ar-text-main)', margin: '4px 0 6px', letterSpacing: '-0.01em', lineHeight: 1.25 }}>{s.t}</h3>
                    <p style={{ fontFamily: 'var(--ar-font-body)', fontSize: 15, lineHeight: 1.55, color: 'var(--ar-text-muted)', margin: 0, maxWidth: 480 }}>{s.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Container>
      <style>{`@media (max-width: 980px){ .how-intro{ position: static !important; } }`}</style>
    </section>
  );
};

window.HowWeWork = HowWeWork;