/* PAGE: SOLUÇÕES (dark) */
const SolucoesPage = ({ onNav }) => (
  <div className="page-enter bg-dark" style={{ minHeight: '100vh' }}>
    <section style={{ padding: '60px 0 50px', position: 'relative', overflow: 'hidden' }}>
      <div className="container" style={{ position: 'relative' }}>
        <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <Reveal>
            <div className="eyebrow mb-5">Soluções</div>
            <h1 className="h-display mb-5" style={{ color: 'white' }}>Soluções para estruturar, automatizar e <span className="italic-accent">escalar</span> operações.</h1>
            <p className="muted-on-dark mb-6" style={{ fontSize: 17, maxWidth: 540 }}>
              Integramos IA, automação, software e estratégia para transformar processos em resultados reais. Soluções modulares e conectadas para empresas que querem crescer com eficiência.
            </p>
            <div className="flex gap-5 mb-6" style={{ flexWrap: 'wrap', color: '#D9D4CE', fontSize: 13.5 }}>
              <span className="flex items-center gap-2"><Icon name="brain" size={14} color="#FF6B1A"/>IA aplicada</span>
              <span className="flex items-center gap-2"><Icon name="workflow" size={14} color="#FF6B1A"/>Automação inteligente</span>
              <span className="flex items-center gap-2"><Icon name="cube" size={14} color="#FF6B1A"/>Sistemas e software</span>
              <span className="flex items-center gap-2"><Icon name="chart-up" size={14} color="#FF6B1A"/>Dados que decidem</span>
            </div>
          </Reveal>
          <div style={{ position: 'relative' }}>
            <div className="photo-tinted" style={{ height: 380 }}>
              <img src={YOHANN_PHOTO} alt="Yohann"/>
            </div>
            <div style={{
              position: 'absolute', bottom: -20, right: -20,
              background: 'rgba(26,28,34,0.92)', backdropFilter: 'blur(12px)',
              border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14, padding: 16, width: 240
            }}>
              <div className="flex items-center gap-2 mb-2">
                <SparkStar size={14}/>
                <span style={{ color: 'white', fontWeight: 600, fontSize: 13 }}>Soluções com propósito</span>
              </div>
              <p style={{ color: '#9A9591', fontSize: 11.5, lineHeight: 1.4, marginBottom: 8 }}>
                Tecnologia com estratégia para gerar impacto real.
              </p>
              <a className="tlink" style={{ fontSize: 12 }}>Falar com Yohann <Icon name="arrow-right" size={12}/></a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section style={{ padding: '40px 0' }}>
      <div className="container">
        <div className="card-dark" style={{ padding: 32 }}>
          <h2 className="h-3 mb-6" style={{ color: 'white' }}>Nossas áreas de solução</h2>
          <div className="grid grid-4 gap-4">
            {[
              {icon:'brain', t:'IA e Automação', d:'Implementamos IA e fluxos automatizados que reduzem tarefas manuais e aumentam a produtividade.'},
              {icon:'cube', t:'Sistemas e Software', d:'Desenvolvemos sistemas personalizados, integrações e plataformas que organizam e escalam.'},
              {icon:'megaphone', t:'Marketing Inteligente', d:'Estratégias orientadas por dados para atrair, converter e reter clientes com previsibilidade.'},
              {icon:'headphones', t:'Atendimento e Suporte', d:'Soluções que melhoram a experiência do cliente e reduzem tempo de resposta com IA.'},
              {icon:'chart-up', t:'Dashboards e BI', d:'Transformamos seus dados em dashboards claros para decisões rápidas e seguras.'},
              {icon:'user', t:'CRM e Vendas', d:'Processos comerciais estruturados e CRM integrado para aumentar conversões e ticket médio.'},
              {icon:'puzzle', t:'Integrações', d:'Conectamos ferramentas, sistemas e canais para uma operação unificada e sem atritos.'},
              {icon:'compass', t:'Consultoria Estratégica', d:'Diagnóstico, planejamento e acompanhamento para alinhar tecnologia, pessoas e objetivos.'},
            ].map(s => (
              <div key={s.t} style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 16, padding: 20, transition: 'all .25s' }}
                   onMouseEnter={(e) => e.currentTarget.style.borderColor = 'rgba(255,107,26,0.4)'}
                   onMouseLeave={(e) => e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)'}>
                <Icon name={s.icon} size={22} color="#FF6B1A" className="mb-4"/>
                <h3 style={{ fontSize: 15, fontWeight: 600, color: 'white', marginBottom: 8 }}>{s.t}</h3>
                <p style={{ color: '#9A9591', fontSize: 12.5, lineHeight: 1.5, marginBottom: 12 }}>{s.d}</p>
                <Icon name="arrow-right" size={16} color="#FF6B1A"/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    <section style={{ padding: '20px 0' }}>
      <div className="container">
        <div className="card-dark" style={{ padding: 32 }}>
          <h2 className="h-3 mb-6" style={{ color: 'white' }}>Soluções por resultado</h2>
          <div className="grid grid-4 gap-6">
            {[
              {icon:'chart-up', t:'Crescimento', items:['Geração de demanda','Marketing de performance','Escala previsível']},
              {icon:'cog', t:'Operação', items:['Automação de processos','Redução de custos','Produtividade do time']},
              {icon:'doc', t:'Conteúdo', items:['Criação estratégica','Produção de conteúdos','Distribuição inteligente']},
              {icon:'brain', t:'Inteligência', items:['Dados e dashboards','IA aplicada ao negócio','Decisões orientadas por dados']},
            ].map(c => (
              <div key={c.t}>
                <Icon name={c.icon} size={20} color="#FF6B1A" className="mb-3"/>
                <div style={{ color: 'white', fontWeight: 600, marginBottom: 12 }}>{c.t}</div>
                {c.items.map(i => <div key={i} style={{ color: '#9A9591', fontSize: 13, marginBottom: 6 }}>{i}</div>)}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    {/* Como pensamos soluções */}
    <section style={{ padding: '40px 0' }}>
      <div className="container">
        <div className="grid grid-2 gap-8" style={{ alignItems: 'center' }}>
          <Reveal>
            <div style={{
              height: 500, borderRadius: 20, overflow: 'hidden', position: 'relative',
              backgroundImage: `url(${YOHANN_GALLERY[6]})`,
              backgroundSize: 'cover', backgroundPosition: 'center'
            }}>
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 50%, rgba(15,16,20,0.7) 100%)' }}/>
              <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, color: 'white' }}>
                <SparkStar size={20}/>
                <div style={{ fontSize: 17, fontWeight: 600, marginTop: 10 }}>Solução não é entrega.<br/>É <span className="italic-accent">transformação.</span></div>
              </div>
            </div>
          </Reveal>
          <Reveal>
            <div className="eyebrow mb-4">Como pensamos soluções</div>
            <h2 className="h-2 mb-4" style={{ color: 'white' }}>Cada solução nasce do <span className="italic-accent">contexto</span> — não do catálogo.</h2>
            <p className="muted-on-dark mb-6" style={{ fontSize: 16, maxWidth: 500 }}>
              Não vendemos pacotes prontos. Cada projeto é desenhado a partir do diagnóstico real, com foco no que vai gerar maior alavancagem para o negócio.
            </p>
            <div className="flex flex-col gap-3 mb-6">
              {[
                ['search','Análise antes de ação','Imersão no contexto, dados e processos antes de propor qualquer solução.'],
                ['puzzle','Modular e conectado','Soluções que se integram entre si — não silos isolados.'],
                ['zap','Automação com inteligência','Tecnologia aplicada onde gera maior alavancagem, não onde é "moderno".'],
                ['chart','Decisão baseada em dados','Indicadores que mostram o impacto real desde o primeiro dia.'],
              ].map(([ic, t, d]) => (
                <div key={t} className="flex items-start gap-3">
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,107,26,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name={ic} size={18} color="#FF6B1A"/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, marginBottom: 2, color: 'white' }}>{t}</div>
                    <p style={{ color: '#9A9591', fontSize: 13, lineHeight: 1.5 }}>{d}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    <section style={{ padding: '40px 0' }}>
      <div className="container" style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 20, padding: 32 }}>
        <div className="grid" style={{ gridTemplateColumns: '1.2fr 1fr 1fr 1fr 1fr', gap: 24, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 12, color: '#FF6B1A', fontWeight: 600, marginBottom: 6 }}>★ IMPACTO QUE VOCÊ ALCANÇA</div>
            <h2 className="h-2" style={{ color: 'white' }}>Mais eficiência. Mais controle.<br/>Mais <span className="italic-accent">resultados.</span></h2>
          </div>
          {[
            {n:'+42%', l:'Aumento médio de produtividade', icon:'chart-up'},
            {n:'-35%', l:'Redução do tempo em processos', icon:'zap'},
            {n:'+28%', l:'Crescimento médio de receita', icon:'chart'},
            {n:'+37%', l:'Melhoria na satisfação dos clientes', icon:'users'},
          ].map(s => (
            <div key={s.n} className="text-center">
              <Icon name={s.icon} size={20} color="#FF6B1A" className="mb-2"/>
              <div className="stat-num orange" style={{ color: '#FF6B1A' }}>{s.n}</div>
              <div style={{ fontSize: 11, color: '#9A9591' }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>

    <FinalCTA onNav={onNav} variant="dark"/>
  </div>
);

const PROJECTS = [
  {
    vType: 'flow', category: 'Automação', tags: ['AUTOMAÇÃO','IA'], 
    t: 'Automação de Processos Operacionais', 
    d: 'Mapeamento e automação de rotinas manuais com IA para tomada de decisão e classificação inteligente.', 
    stats: [['-78%','Retrabalho'],['+65%','Produtividade'],['14 dias','Payback']], 
    chips: ['Automação','IA','Integrações'],
    steps: [
      ['01 · DESAFIO','A equipe gastava horas diariamente em triagem manual, classificação de e-mails e cópia de dados entre sistemas, gerando gargalos operacionais e erros humanos.'],
      ['02 · SOLUÇÃO','Desenhamos um fluxo automatizado que intercepta as demandas, utiliza modelos de linguagem para interpretar o contexto e roteia as tarefas automaticamente.'],
      ['03 · ESTRUTURA','• Webhooks para captura instantânea\n• IA para análise de sentimento e extração de dados\n• Automação centralizada\n• Sincronização bidirecional de status'],
      ['04 · FLUXO','Nova demanda recebida → IA classifica a urgência e o setor → Motor de automação cria a tarefa no sistema → Responsável é notificado com o resumo gerado.'],
      ['05 · RESULTADOS','• Eliminação do trabalho braçal de triagem\n• Redução drástica no tempo de resposta\n• Equipe focada em análise e não em operação']
    ],
    antes: ['Triagem de e-mails 100% manual','Cópia e cola entre plataformas','Atraso no SLA de atendimento interno'],
    depois: ['Processamento autônomo e instantâneo','Sistemas operando de forma sincronizada','Equipe focada em demandas complexas'],
    arquitetura: [['mail','Caixa de Entrada'],['workflow','Motor de Automação'],['brain','Modelo de Linguagem'],['database','Sistema de Gestão ERP']],
    testimonial: { quote: '"Nossa equipe de backoffice ganhou pelo menos 3 horas livres todos os dias. O que era um gargalo constante agora flui sem intervenção humana."', author: 'Carla F.', role: 'Gerente de Operações', avatar: 'https://i.pravatar.cc/100?u=carla' },
    meta: [['Setor','Logística'],['Time envolvido','Operações e TI'],['Duração','4 semanas'],['Status','Implementado']]
  },
  {
    vType: 'dashboard', category: 'CRM', tags: ['CRM','AUTOMAÇÃO'], 
    t: 'CRM Comercial Personalizado', 
    d: 'CRM sob medida com funil dinâmico, regras de negócio e automações inteligentes.', 
    stats: [['+120%','Conversão'],['-50%','Custo por lead'],['2,8x','ROI']], 
    chips: ['CRM','Automação','Vendas'],
    steps: [
      ['01 · DESAFIO','O processo comercial era manual. Informações em planilhas, perda de visibilidade do funil e follow-ups esquecidos impactavam a taxa de conversão.'],
      ['02 · SOLUÇÃO','Implementamos um CRM centralizado, integrando formulários de captação, qualificando leads via IA e criando trilhas de cadência automática de follow-up.'],
      ['03 · ESTRUTURA','• Formulários inteligentes de captação\n• CRM com pipelines dinâmicos\n• Qualificação automática de leads via IA\n• Disparos de e-mail/WhatsApp programados'],
      ['04 · FLUXO','Lead preenche formulário → Automação cruza dados de mercado → IA atribui pontuação (Scoring) → Vendedor recebe alerta → Follow-up automatizado inicia.'],
      ['05 · RESULTADOS','• Funil 100% automatizado\n• Visibilidade total do pipeline\n• Vendedores contatam apenas leads quentes']
    ],
    antes: ['Vendedores sem previsibilidade','Leads perdidos por falta de follow-up','Dados fragmentados em planilhas'],
    depois: ['Pipeline organizado e visual','Cadência de vendas automatizada','Aumento real na taxa de fechamento'],
    arquitetura: [['doc','Formulários'],['workflow','Automação Central'],['users','Plataforma CRM'],['message-circle','Mensageria']],
    testimonial: { quote: '"A central de vendas organizou a casa. Antes perdíamos negócios por esquecer de retornar. Hoje o sistema nos avisa e faz o contato inicial por nós."', author: 'Rafael B.', role: 'Diretor Comercial', avatar: 'https://i.pravatar.cc/100?u=rafael' },
    meta: [['Setor','SaaS / B2B'],['Time envolvido','Vendas e Marketing'],['Duração','6 semanas'],['Status','Em produção contínua']]
  },
  {
    vType: 'dashboard', category: 'Dashboards', tags: ['DASHBOARD','BI'], 
    t: 'Dashboard Executivo em Tempo Real', 
    d: 'Painel de inteligência com dados consolidados para decisões mais rápidas e estratégicas.', 
    stats: [['100%','Dados integrados'],['-60%','Tempo de análise'],['+90%','Acurácia']], 
    chips: ['Dashboards','BI','KPIs'],
    steps: [
      ['01 · DESAFIO','A diretoria dependia de relatórios estáticos exportados mensalmente. Decisões eram tomadas com base em dados desatualizados e de difícil interpretação.'],
      ['02 · SOLUÇÃO','Construímos uma infraestrutura de dados moderna (Data Lake) conectada a todas as ferramentas da empresa, alimentando painéis visuais interativos em tempo real.'],
      ['03 · ESTRUTURA','• Extração automatizada de APIs\n• Banco de dados em nuvem centralizado\n• Transformação e limpeza de dados (ETL)\n• Plataforma de BI interativa'],
      ['04 · FLUXO','Dados gerados nas plataformas → Extração horária → Processamento no Data Warehouse → Atualização instantânea dos gráficos no dashboard executivo.'],
      ['05 · RESULTADOS','• Fim da manipulação de planilhas\n• Decisões baseadas em números diários\n• Transparência de metas e KPIs para o time']
    ],
    antes: ['Relatórios mensais atrasados','Horas gastas cruzando planilhas','Decisões baseadas em intuição'],
    depois: ['Indicadores atualizados ao vivo','Cruzamento de fontes instantâneo','Gestão proativa e baseada em dados'],
    arquitetura: [['database','APIs de Origem'],['workflow','Processador ETL'],['server','Data Warehouse'],['chart','Plataforma de BI']],
    testimonial: { quote: '"Ter os números da empresa na palma da mão mudou nossa rotina. Cortamos o achismo e as reuniões de diretoria ficaram 3x mais rápidas."', author: 'Marta V.', role: 'CEO', avatar: 'https://i.pravatar.cc/100?u=marta' },
    meta: [['Setor','Varejo e E-commerce'],['Time envolvido','Diretoria e Operações'],['Duração','5 semanas'],['Status','Implementado']]
  },
  {
    vType: 'chat', category: 'Atendimento', tags: ['IA','ATENDIMENTO'], 
    t: 'Atendente Virtual com IA Generativa', 
    d: 'Atendimento 24/7 com IA que entende, responde e resolve, integrado ao seu negócio.', 
    stats: [['-70%','Chamados humanos'],['+95%','Satisfação'],['24/7','Disponível']], 
    chips: ['IA','Atendimento','NLP'],
    steps: [
      ['01 · DESAFIO','Alto volume de dúvidas repetitivas congestionava o time de suporte, aumentando o tempo de espera dos clientes e elevando os custos de operação.'],
      ['02 · SOLUÇÃO','Implementação de um agente conversacional munido da base de conhecimento da empresa, capaz de dialogar naturalmente, resolver problemas e realizar agendamentos.'],
      ['03 · ESTRUTURA','• Base de conhecimento (RAG)\n• IA Generativa afinada para o tom de voz\n• Integração com WhatsApp e Site\n• Transbordo inteligente para humanos'],
      ['04 · FLUXO','Cliente envia mensagem → IA busca na documentação interna → Gera resposta empática → Se complexo, transfere o histórico para o atendente humano.'],
      ['05 · RESULTADOS','• Suporte disponível madrugadas e fins de semana\n• Redução drástica da fila de espera\n• Time humano focado apenas em casos críticos']
    ],
    antes: ['Fila de espera de horas no suporte','Atendentes sobrecarregados','Respostas engessadas de chatbots antigos'],
    depois: ['Resolução em segundos (24h por dia)','Agente conversacional super natural','Retenção de clientes melhorada'],
    arquitetura: [['message-circle','Canal de Mensagens'],['workflow','Orquestrador'],['brain','IA Generativa'],['database','Base de Conhecimento']],
    testimonial: { quote: '"Nossos clientes nem percebem que estão falando com uma IA no primeiro contato. A fluidez e a precisão das respostas salvaram a nossa operação de suporte."', author: 'João P.', role: 'Head de CS', avatar: 'https://i.pravatar.cc/100?u=joao' },
    meta: [['Setor','Serviços'],['Time envolvido','Suporte ao Cliente'],['Duração','3 semanas'],['Status','Em evolução contínua']]
  },
  {
    vType: 'flow', category: 'Integrações', tags: ['INTEGRAÇÕES'], 
    t: 'Integração de Sistemas e Ferramentas', 
    d: 'Conectamos suas ferramentas favoritas para eliminar retrabalho e criar fluxo de dados.', 
    stats: [['-80%','Retrabalho'],['100%','Dados confiáveis'],['7 dias','Implementação']], 
    chips: ['Integrações','APIs','Sistemas'],
    steps: [
      ['01 · DESAFIO','A empresa utilizava 5 softwares diferentes que não se conversavam. O resultado era perda de informações, dados duplicados e retrabalho contínuo da equipe.'],
      ['02 · SOLUÇÃO','Criação de um barramento de integração que conecta APIs nativas e não-nativas, criando um hub central de distribuição de dados entre todos os softwares.'],
      ['03 · ESTRUTURA','• Webhooks para escuta em tempo real\n• Módulos de transformação de dados\n• Tratamento de erros e retentativas automáticas\n• Logs centralizados'],
      ['04 · FLUXO','Ação ocorre no Sistema A → Webhook dispara para a automação → Dados são formatados → Automação injeta as informações no Sistema B e C simultaneamente.'],
      ['05 · RESULTADOS','• Eliminação do erro humano no transbordo de dados\n• Fluxos de trabalho contínuos e invisíveis\n• Dados íntegros em toda a companhia']
    ],
    antes: ['Sistemas isolados (Silos de dados)','Trabalho administrativo de "copiar e colar"','Inconsistência de informações entre setores'],
    depois: ['Ecossistema tecnológico sincronizado','Processos invisíveis e fluidos','Integridade da base de dados garantida'],
    arquitetura: [['server','Sistema A'],['workflow','Middleware / Automação'],['database','Transformação'],['users','Sistemas Destino']],
    testimonial: { quote: '"Fizemos a integração que a empresa do software dizia ser impossível. Agora nosso comercial, financeiro e logística falam a mesma língua."', author: 'Fernanda M.', role: 'Diretora de TI', avatar: 'https://i.pravatar.cc/100?u=fernanda' },
    meta: [['Setor','Indústria'],['Time envolvido','TI e Operações'],['Duração','2 semanas'],['Status','Implementado']]
  },
  {
    vType: 'flow', category: 'IA', tags: ['IA','ESTRATÉGIA'], 
    t: 'Design de Inteligência', 
    d: 'Arquitetura de soluções baseadas em IA para transformar o núcleo do seu negócio e produto.', 
    stats: [['10x','Escalabilidade'],['+40%','Inovação'],['30 dias','Go-to-market']], 
    chips: ['IA','Arquitetura','Estratégia'],
    steps: [
      ['01 · DESAFIO','O cliente possuía um produto tradicional e queria infundir Inteligência Artificial para não perder market share, mas não sabia por onde começar a arquitetura tecnológica.'],
      ['02 · SOLUÇÃO','Realizamos o Design de Inteligência: mapeamento de viabilidade, prototipação rápida, seleção de LLMs corretos e arquitetura do fluxo de engenharia de prompt seguro.'],
      ['03 · ESTRUTURA','• Auditoria dos dados atuais da empresa\n• Desenho de arquitetura RAG (Retrieval-Augmented Generation)\n• Estratégia de segurança e custos (FinOps de IA)\n• Validação com usuários piloto'],
      ['04 · FLUXO','Análise do negócio → Mapeamento técnico e provas de conceito → Definição da stack de IA → Entrega do blueprint arquitetural para os desenvolvedores.'],
      ['05 · RESULTADOS','• Clareza total do caminho de desenvolvimento\n• Redução de meses de pesquisa e tentativa/erro\n• Lançamento da nova feature com IA acelerado']
    ],
    antes: ['Vontade de usar IA sem estratégia técnica','Medo de estourar custos com APIs','Produto engessado perdendo relevância'],
    depois: ['Roadmap técnico claro e aprovado','Arquitetura de custos otimizada','Inovação implantada no core do produto'],
    arquitetura: [['search','Análise e Descoberta'],['pen-tool','Prototipação'],['cpu','Arquitetura Cloud/IA'],['zap','Blueprint Entregue']],
    testimonial: { quote: '"O Yohann não nos entregou apenas um código, ele nos entregou a clareza estratégica e arquitetural para transformarmos nosso SaaS em uma plataforma inteligente."', author: 'Tiago R.', role: 'CPO', avatar: 'https://i.pravatar.cc/100?u=tiago' },
    meta: [['Setor','Startups / B2B'],['Time envolvido','Produto e Engenharia'],['Duração','4 semanas'],['Status','Consultoria finalizada']]
  },
  {
    vType: 'chat', category: 'IA', tags: ['IA','SAÚDE'], 
    t: 'Inteligência Médica de Captura', 
    d: 'Sistema para clínicas que qualifica e converte leads de saúde de forma inteligente e humanizada.', 
    stats: [['+85%','Agendamentos'],['-40%','No-show'],['24/7','Triagem']], 
    chips: ['IA Médica','Conversão','Saúde'],
    steps: [
      ['01 · DESAFIO','A clínica perdia dezenas de contatos de pacientes no WhatsApp fora do horário comercial, e o processo de triagem inicial demorava demais.'],
      ['02 · SOLUÇÃO','Desenvolvemos uma Inteligência Médica de Captura: um agente treinado com o protocolo da clínica para tirar dúvidas e realizar pré-triagem de forma empática.'],
      ['03 · ESTRUTURA','• Treinamento de IA com tom de voz acolhedor\n• Formulário de anamnese inteligente inserido na conversa\n• Integração com agenda médica\n• Lembretes automáticos para evitar faltas'],
      ['04 · FLUXO','Paciente aciona a clínica → IA acolhe e faz a triagem básica → Verifica disponibilidade na agenda do especialista adequado → Confirma o agendamento e envia lembretes.'],
      ['05 · RESULTADOS','• Aumento expressivo em conversão de madrugadas\n• Triagem prévia economiza tempo do especialista\n• Redução drástica das abstenções (no-shows)']
    ],
    antes: ['Pacientes sem resposta à noite e feriados','Secretárias sobrecarregadas com triagem básica','Alta taxa de pacientes que não compareciam'],
    depois: ['Atendimento acolhedor 24h por dia','Agendas otimizadas automaticamente','Aumento no faturamento da clínica'],
    arquitetura: [['message-circle','Canal do Paciente'],['brain','IA Treinada'],['calendar','Sistema de Agenda'],['users','CRM da Clínica']],
    testimonial: { quote: '"Nossos pacientes elogiam a agilidade do agendamento noturno. O sistema não só aumentou o volume de consultas, como reduziu as faltas pela metade."', author: 'Dra. Beatriz S.', role: 'Diretora Médica', avatar: 'https://i.pravatar.cc/100?u=beatriz' },
    meta: [['Setor','Saúde / Clínicas'],['Time envolvido','Recepção e Diretoria Médica'],['Duração','3 semanas'],['Status','Operante']]
  },
  {
    vType: 'document', category: 'Automação', tags: ['IA','JURÍDICO'], 
    t: 'Agente de Análise de Contrato', 
    d: 'Agente de IA treinado para ler, extrair cláusulas críticas e apontar riscos em contratos em segundos.', 
    stats: [['-90%','Tempo de leitura'],['99%','Precisão'],['0','Risco ignorado']], 
    chips: ['IA Jurídica','Agentes','Análise'],
    steps: [
      ['01 · DESAFIO','O departamento jurídico demorava dias para revisar contratos extensos de fornecedores, parando a esteira de contratação da empresa e engarrafando os negócios.'],
      ['02 · SOLUÇÃO','Implantação de um Agente de Análise que faz a leitura OCR e análise semântica do documento, destacando desvios de padrão jurídico e cláusulas de risco.'],
      ['03 · ESTRUTURA','• Extração de texto (OCR e PDF Parsing)\n• Prompt engineering jurídico focado em compliance\n• Geração de relatório de red-flags\n• Integração com ERP de compras'],
      ['04 · FLUXO','Comprador sobe o contrato → IA escaneia as páginas instantaneamente → Compara as cláusulas com a política interna → Advogado recebe apenas o resumo das discrepâncias.'],
      ['05 · RESULTADOS','• Aprovação de fornecedores em horas, não semanas\n• Eliminação da leitura humana exaustiva de cláusulas padrão\n• Mais segurança jurídica contra multas escondidas']
    ],
    antes: ['Gargalo jurídico travando compras','Análise manual linha a linha','Risco de fadiga humana aprovar erros'],
    depois: ['Revisão instantânea (machine speed)','Foco humano apenas nas exceções','Aceleração no ciclo de negócios'],
    arquitetura: [['file-text','Contrato em PDF'],['cpu','Extrator de Texto'],['shield','Agente de Risco (IA)'],['doc','Relatório Executivo']],
    testimonial: { quote: '"Reduzimos o tempo de análise de contrato de 4 dias para 10 minutos. O advogado agora atua apenas como um tomador de decisão final, sem desgaste operacional."', author: 'Carlos A.', role: 'Gerente Jurídico', avatar: 'https://i.pravatar.cc/100?u=carlos' },
    meta: [['Setor','Jurídico Corporativo'],['Time envolvido','Jurídico e Suprimentos'],['Duração','4 semanas'],['Status','Implementado']]
  },
  {
    vType: 'marketing', category: 'CRM', tags: ['MARKETING','AUTOMAÇÃO'], 
    t: 'Inbound Marketing Automatizado', 
    d: 'Nutrição de leads com fluxos hiper-personalizados baseados em comportamento e scoring.', 
    stats: [['+150%','Leads nutridos'],['3x','Engajamento'],['-30%','CAC']], 
    chips: ['Inbound','Automação','Marketing'],
    steps: [
      ['01 · DESAFIO','A empresa captava milhares de leads, mas a maioria esfriava por falta de relacionamento. E-mails em massa genéricos possuíam taxas de abertura e conversão ínfimas.'],
      ['02 · SOLUÇÃO','Desenvolvemos fluxos de Inbound Marketing reativos: a jornada do lead muda dinamicamente de acordo com as páginas que ele visita e os links que ele clica.'],
      ['03 · ESTRUTURA','• Setup de ferramenta de Automação de Marketing\n• Criação de algoritmo de Lead Scoring\n• Disparos condicionais e hiper-segmentados\n• Alertas diretos para o time comercial'],
      ['04 · FLUXO','Lead baixa um material → Sistema monitora engajamento → Se pontuação atinge nível "quente", muda a esteira de conteúdo e notifica o vendedor no WhatsApp.'],
      ['05 · RESULTADOS','• Aumento substancial do LTV (Life Time Value)\n• Comunicação direcionada e relevante\n• Custo de Aquisição de Clientes (CAC) em queda']
    ],
    antes: ['Comunicação "panfleto" para toda a base','Leads ignorados após a primeira semana','Vendas sem inteligência sobre o lead'],
    depois: ['Régua de nutrição inteligente e viva','Priorização automática de quem está engajado','Vendas chega no momento perfeito'],
    arquitetura: [['users','Visitantes e Leads'],['workflow','Plataforma de Marketing'],['target','Motor de Scoring'],['pie-chart','Dashboards de CAC']],
    testimonial: { quote: '"Nossa conversão disparou quando paramos de mandar o mesmo e-mail para todos. A automação agora conversa com cada cliente de acordo com o momento dele."', author: 'Letícia G.', role: 'CMO', avatar: 'https://i.pravatar.cc/100?u=leticia' },
    meta: [['Setor','Educação / Infoproduto'],['Time envolvido','Marketing e Vendas'],['Duração','5 semanas'],['Status','Em produção contínua']]
  },
  {
    vType: 'chat', category: 'Automação', tags: ['IA','CONTEÚDO'], 
    t: 'Produção de Conteúdo em Massa', 
    d: 'Agente especializado em criar, revisar e distribuir volume de conteúdo mantendo o tom de voz da marca.', 
    stats: [['10x','Volume'],['-80%','Custo de produção'],['100%','Consistência']], 
    chips: ['IA Generativa','Conteúdo','Escala'],
    steps: [
      ['01 · DESAFIO','Uma agência de marketing não conseguia escalar a produção de artigos para SEO e postagens sem perder qualidade ou inchar demasiadamente a folha de pagamento.'],
      ['02 · SOLUÇÃO','Criação de uma linha de montagem com Agentes de IA Autônomos (Multi-Agent System). Um agente pesquisa, outro escreve, um terceiro faz a revisão de SEO e tom de voz.'],
      ['03 · ESTRUTURA','• Orquestrador de Agentes (Crew/Agents)\n• Integração com ferramentas de pesquisa em tempo real\n• Loop de feedback automatizado\n• Publicação direta via CMS (WordPress/Webflow)'],
      ['04 · FLUXO','Estrategista insere a palavra-chave → Agente 1 coleta dados da web → Agente 2 redige a estrutura → Agente 3 refina o tom → Automação publica no blog formatado.'],
      ['05 · RESULTADOS','• Escala de produção sem precedentes\n• Artigos densos, embasados e otimizados para o Google\n• Equipe criativa focada apenas em estratégia']
    ],
    antes: ['Gargalo na redação humana limitando o SEO','Conteúdos rasos e demora na pesquisa','Complexidade de gestão de redatores'],
    depois: ['Volume gigantesco de postagens por dia','Padrão de qualidade mantido em todos os textos','Redução maciça do custo de aquisição (Orgânico)'],
    arquitetura: [['pen-tool','Input Estratégico'],['cpu','Orquestrador de IA'],['brain','Multi-Agentes Revisores'],['layout','Publicador (CMS)']],
    testimonial: { quote: '"Criamos o equivalente ao trabalho de uma semana de cinco redatores em algumas horas. O sistema não substitui nossa visão, mas amplifica nossas mãos em uma escala absurda."', author: 'Bruno S.', role: 'Head de SEO', avatar: 'https://i.pravatar.cc/100?u=bruno' },
    meta: [['Setor','Agência / Mídia'],['Time envolvido','Conteúdo e Performance'],['Duração','3 semanas'],['Status','Operacional']]
  },
  {
    vType: 'chat', category: 'Dashboards', tags: ['IA','DADOS'], 
    t: 'Agente de Análise de Dados', 
    d: 'Agente inteligente que consulta seu banco de dados e responde perguntas complexas em linguagem natural.', 
    stats: [['100%','Autonomia'],['<2s','Respostas'],['Zero','SQL necessário']], 
    chips: ['Agentes','Dados','Insights'],
    steps: [
      ['01 · DESAFIO','O time de gestores precisava frequentemente de pequenos relatórios ou cruzamentos de dados rápidos, mas dependia sempre de um engenheiro de dados para fazer a query SQL, causando atrasos de dias.'],
      ['02 · SOLUÇÃO','Implementamos um Agente de Análise de Dados: uma interface de chat conectada ao Data Warehouse que traduz perguntas em linguagem natural para consultas complexas no banco.'],
      ['03 · ESTRUTURA','• Text-to-SQL Engine (IA treinada no esquema do banco)\n• Conexão segura e em modo leitura com o Data Warehouse\n• Validador de dados contra alucinação\n• Interface via chat no Slack/Teams'],
      ['04 · FLUXO','Gestor digita no Slack: "Quantas vendas fechamos ontem no RJ?" → IA entende, gera a query SQL, executa no banco seguro e responde em texto e com gráfico na mesma hora.'],
      ['05 · RESULTADOS','• Democratização dos dados para qualquer setor\n• Gargalo do time de dados resolvido instantaneamente\n• Respostas vitais de negócio dadas em tempo real']
    ],
    antes: ['Fila de tickets (pedidos) para a equipe de dados','Gestores sem autonomia para cruzar informações','Lentidão na tomada de decisão'],
    depois: ['Qualquer um da empresa consulta os dados da sua área','Autonomia total via perguntas naturais','Decisões tomadas na mesma hora da reunião'],
    arquitetura: [['message-circle','Chat (Slack/Teams)'],['brain','Agente Text-to-SQL'],['database','Data Warehouse (Leitura)'],['pie-chart','Entrega de Insights']],
    testimonial: { quote: '"Acabou aquela história de pedir um relatório e receber 3 dias depois. Eu abro meu celular, faço a pergunta para a IA e ela cruza todas as tabelas em 2 segundos."', author: 'Ricardo L.', role: 'COO', avatar: 'https://i.pravatar.cc/100?u=ricardo' },
    meta: [['Setor','Fintech / E-commerce'],['Time envolvido','Dados e Liderança'],['Duração','4 semanas'],['Status','Implementado internamente']]
  },
  {
    vType: 'marketing', category: 'Marketing', tags: ['MARKETING','E-COMMERCE','IA'], 
    t: 'Agente de Mídia e Conteúdo para Moda', 
    d: 'Agente autônomo que analisa tendências de moda, cria campanhas de tráfego pago e publica conteúdo nas redes automaticamente.', 
    stats: [['+210%','ROAS (Retorno)'],['-15h/sem','Tempo poupado'],['3x','Volume de Posts']], 
    chips: ['Tráfego Pago','Visão Computacional','Copywriting'],
    steps: [
      ['01 · DESAFIO','A marca de roupas perdia timing nas coleções. A equipe demorava para criar anúncios e postagens para o Instagram/TikTok, e a gestão manual do tráfego não conseguia escalar e otimizar os produtos fast-fashion.'],
      ['02 · SOLUÇÃO','Construímos um Agente Criativo de Performance: uma IA capaz de ler a foto do produto, extrair as características da peça, escrever copys persuasivas e gerir os anúncios sozinha.'],
      ['03 · ESTRUTURA','• Visão Computacional para entender a modelagem e tecido\n• Motor de Geração de Copy adaptado à persona\n• Integração nativa com Gerenciador de Anúncios\n• Publicador orgânico agendado'],
      ['04 · FLUXO','Nova peça entra no estoque → IA identifica os detalhes (cor, corte) → Gera criativos e copys de venda → Orquestrador lança as campanhas e agenda os posts do feed → Otimiza orçamento diário baseado no lucro.'],
      ['05 · RESULTADOS','• Produtos anunciados minutos após entrarem no site\n• Desperdício de verba zerado (IA pausa anúncios ruins)\n• Crescimento explosivo de vendas com a mesma equipe']
    ],
    antes: ['Processo criativo lento por produto','Campanhas pausadas tarde (prejuízo)','Falta de consistência e frequência no feed'],
    depois: ['Escala infinita de conteúdo em segundos','Otimização matemática e implacável do ROAS','Domínio absoluto da marca no digital'],
    arquitetura: [['camera','Catálogo Visual'],['pen-tool','Agente Criativo'],['target','Otimizador de Ads'],['trending-up','Motor de Vendas']],
    testimonial: { quote: '"O agente se tornou nosso diretor de arte e gestor de tráfego. Subimos uma camiseta nova e a IA cuida de anunciar em todas as plataformas com textos perfeitos sem intervenção humana."', author: 'Mariana T.', role: 'CEO & Fundadora', avatar: 'https://i.pravatar.cc/100?u=mariana' },
    meta: [['Setor','E-commerce / Moda'],['Time envolvido','Marketing e Produto'],['Duração','5 semanas'],['Status','Operando diariamente']]
  },
  {
    vType: 'web', category: 'Web', tags: ['WEB','INSTITUCIONAL','POLÍTICA'], 
    t: 'Portal Institucional para Mandatos e Instituições', 
    d: 'Plataforma digital de alta performance focada em transparência, comunicação oficial e captação de base.', 
    stats: [['+300%','Engajamento'],['100%','Segurança'],['< 1s','Carregamento']], 
    chips: ['Portais Web','Transparência','Segurança'],
    steps: [
      ['01 · DESAFIO','Mandatos políticos e grandes instituições sofriam com sites instáveis, vulneráveis a ataques e difíceis de atualizar, prejudicando a percepção pública e a prestação de contas.'],
      ['02 · SOLUÇÃO','Desenvolvemos uma plataforma blindada, hospedada em arquitetura Cloud escalável, com um CMS amigável para a assessoria de imprensa e módulo integrado de Portal da Transparência.'],
      ['03 · ESTRUTURA','• Arquitetura Cloud de alta disponibilidade\n• Painel CMS blindado e hierarquizado (Cargos/Edições)\n• Hub de imprensa, clipping e releases\n• Integração nativa de SEO político'],
      ['04 · FLUXO','Assessoria cria uma nota oficial → Sistema aprova e distribui no portal → SEO é atualizado automaticamente para jornalistas → Eleitores interagem em ambiente seguro.'],
      ['05 · RESULTADOS','• Aumento brutal de autoridade e confiança\n• Conformidade rigorosa com a Lei de Acesso à Informação\n• Casa digital própria, independente de algoritmos de redes']
    ],
    antes: ['Site frequentemente hackeado ou fora do ar','Assessoria dependente de TI para mudar uma vírgula','Comunicação refém exclusiva das redes sociais'],
    depois: ['Segurança nível enterprise','Atualização autônoma e instantânea pela equipe','Hub oficial permanente para imprensa e eleitores'],
    arquitetura: [['layout','Interface Pública'],['shield','Blindagem DDoS'],['users','CRM do Eleitorado'],['file-text','Módulo Transparência']],
    testimonial: { quote: '"Nossa comunicação institucional mudou da água para o vinho. Deixamos de ser reféns do Instagram e agora temos nossa própria casa digital forte, rápida e inquebrável."', author: 'Chefe de Gabinete', role: 'Mandato Federal', avatar: 'https://i.pravatar.cc/100?u=gabinete' },
    meta: [['Setor','Governamental / Política'],['Time envolvido','Imprensa e Tecnologia'],['Duração','6 semanas'],['Status','Operando com Alta Disponibilidade']]
  },
  {
    vType: 'flow', category: 'Consultoria', tags: ['CONSULTORIA','VENDAS','LOGÍSTICA'], 
    t: 'Consultoria e Estruturação Digital para Logística', 
    d: 'Estratégia e consultoria de vendas com foco em estruturação digital para empresas de logística, aumentando organização e previsibilidade.', 
    stats: [['+140%','Vendas'],['100%','Rastreabilidade'],['30 dias','Setup']], 
    chips: ['Estratégia','Vendas','Processos'],
    steps: [
      ['01 · DESAFIO','A transportadora operava com vendas desorganizadas, dependendo de indicações e planilhas soltas. A falta de visibilidade do pipeline comercial e da operação gerava gargalos e perda de contratos.'],
      ['02 · SOLUÇÃO','Realizamos uma consultoria estratégica ponta a ponta, implementando processos digitais, estruturando um CRM focado em logística e criando uma máquina de aquisição previsível.'],
      ['03 · ESTRUTURA','• Mapeamento de jornada do cliente B2B\n• Implementação e personalização de CRM Logístico\n• Treinamento de equipe comercial (Hunters e Closers)\n• Integração com sistema de frota'],
      ['04 · FLUXO','Lead B2B é captado → SDR qualifica volume e rota no CRM → Closer negocia a tabela de frete → Negócio ganho aciona automaticamente o time de despacho.'],
      ['05 · RESULTADOS','• Fim da dependência de planilhas\n• Visibilidade total de conversão e metas\n• Crescimento agressivo no faturamento mensal']
    ],
    antes: ['Vendas reativas e passivas','Informações perdidas em cadernos e WhatsApp','Falta de métricas e indicadores de performance'],
    depois: ['Máquina de vendas B2B ativa e previsível','Dados centralizados e cruzados com a operação','Metas claras e equipe engajada'],
    arquitetura: [['map-pin','Roteirização'],['users','CRM Comercial'],['workflow','Playbook de Vendas'],['pie-chart','Gestão de Metas']],
    testimonial: { quote: '"Nossa empresa de logística mudou de patamar. Não ganhamos apenas uma ferramenta, redesenhamos a forma como vendemos e estruturamos nosso digital de ponta a ponta."', author: 'Sérgio M.', role: 'Diretor Operacional', avatar: 'https://i.pravatar.cc/100?u=sergio' },
    meta: [['Setor','Logística e Transportes'],['Time envolvido','Comercial e Operações'],['Duração','8 semanas'],['Status','Em expansão']]
  },
  {
    vType: 'chat', category: 'IA', tags: ['IA','AUDIOVISUAL','EDUCAÇÃO'], 
    t: 'Clonagem de Voz e Avatar IA para Treinamentos', 
    d: 'Criação de avatares ultra-realistas e clonagem de voz para produção escalável de treinamentos corporativos e onboarding.', 
    stats: [['-95%','Custo Produção'],['100x','Velocidade'],['24h','Atualização']], 
    chips: ['Clonagem de Voz','Avatares IA','Treinamento'],
    steps: [
      ['01 · DESAFIO','A universidade corporativa gastava fortunas alugando estúdios e paralisando diretores para gravar e regravar materiais de treinamento sempre que um processo mudava.'],
      ['02 · SOLUÇÃO','Clonamos digitalmente a imagem e a voz dos especialistas da empresa, permitindo gerar vídeos de alta qualidade apenas digitando o roteiro em texto na plataforma.'],
      ['03 · ESTRUTURA','• Captura e modelagem de Gêmeo Digital (Vídeo)\n• Treinamento de modelo de Voz RVC\n• Sincronização labial inteligente (Lip Sync)\n• Plataforma de geração de aulas em massa'],
      ['04 · FLUXO','RH atualiza a cartilha → Escreve o texto no sistema → A IA gera um vídeo do diretor narrando o conteúdo → O material é distribuído.'],
      ['05 · RESULTADOS','• Custos de produção de vídeo reduzidos a quase zero\n• Capacidade de criar cursos inteiros em um dia\n• Atualização instantânea de materiais obsoletos']
    ],
    antes: ['Semanas para produzir um curso simples','Equipe engessada por agendas de gravação','Vídeos desatualizados rapidamente'],
    depois: ['Treinamentos prontos em minutos','Atores e diretores digitais disponíveis 24/7','Conteúdo sempre alinhado às novas diretrizes'],
    arquitetura: [['mic','Clone de Voz'],['user','Avatar Digital'],['file-text','Roteiro Textual'],['video','Renderização']],
    testimonial: { quote: '"Parece mágica. Nossos funcionários em todo o país são treinados pela minha versão digital, e eu nem preciso sair da mesa. Escalonou nossa universidade de forma absurda."', author: 'Camila P.', role: 'Diretora de RH', avatar: 'https://i.pravatar.cc/100?u=camila' },
    meta: [['Setor','Educação Corporativa'],['Time envolvido','RH e Treinamento'],['Duração','3 semanas'],['Status','Adoção Completa']]
  },
  {
    vType: 'dashboard', category: 'Automação', tags: ['FRANQUIAS','AUTOMAÇÃO','ESCALA'], 
    t: 'Ecossistema de Gestão de Franquias', 
    d: 'Portal unificado para gerenciar dezenas de franquias, centralizando auditoria, pedidos de suprimentos e suporte.', 
    stats: [['+50','Franquias'],['-80%','Tempo Auditoria'],['100%','Padronização']], 
    chips: ['Sistemas Web','Escala','Franquias'],
    steps: [
      ['01 · DESAFIO','A franqueadora perdeu o controle com o crescimento. Pedidos de insumos eram feitos por WhatsApp, o suporte era um caos e as auditorias eram lentas e despadronizadas.'],
      ['02 · SOLUÇÃO','Criamos uma plataforma centralizada: o Portal do Franqueado. Um ambiente digital único onde toda a gestão, comunicação e compras entre matriz e lojas acontece.'],
      ['03 · ESTRUTURA','• Módulo E-commerce B2B (Insumos)\n• Sistema de Tickets de Suporte e SLA\n• Formulários de Auditoria e Qualidade\n• Dashboards Globais de Faturamento'],
      ['04 · FLUXO','Lojista entra no portal → Faz reposição do estoque da semana → Preenche fotos para a auditoria de qualidade → Matriz recebe, fatura os insumos e aprova a conformidade.'],
      ['05 · RESULTADOS','• Comunicação oficial sem ruídos do WhatsApp\n• Padrão de qualidade mantido em toda a rede\n• Crescimento da marca sem aumentar equipe de suporte']
    ],
    antes: ['Atendimento misturado em grupos de WhatsApp','Falta de padronização na entrega das lojas','Auditorias lentas e difíceis de compilar'],
    depois: ['Tudo registrado e centralizado no Portal','Suprimentos comprados em ambiente B2B','Dashboards em tempo real do ecossistema'],
    arquitetura: [['layout','Portal do Franqueado'],['shopping-cart','Módulo B2B'],['check-circle','Auditoria Digital'],['pie-chart','Visão Matriz']],
    testimonial: { quote: '"O portal nos deu fôlego para dobrar de tamanho. Antes, adicionar uma franquia era uma dor de cabeça logística; hoje é só criar um login e a engrenagem roda sozinha."', author: 'Felipe A.', role: 'Head de Expansão', avatar: 'https://i.pravatar.cc/100?u=felipe' },
    meta: [['Setor','Franchising / Varejo'],['Time envolvido','Matriz e Franqueados'],['Duração','10 semanas'],['Status','Implementado na rede']]
  }
];

/* PAGE: PROJETOS */
const ProjetosPage = ({ onNav }) => {
  const [filter, setFilter] = React.useState('Todos');
  const filters = ['Todos os projetos','Automação','IA','Sistemas','CRM','Dashboards','Integrações','Atendimento'];
  
  const filteredProjects = filter === 'Todos' ? PROJECTS : PROJECTS.filter(p => p.category === filter);

  return (
    <div className="page-enter">
      <section style={{ padding: '60px 0 40px', position: 'relative', overflow: 'hidden' }}>
        <SunBurst size={400} className="abs" style={{ left: -120, top: 80 }} opacity={0.4}/>
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1.05fr', gap: 56, alignItems: 'flex-start' }}>
            <Reveal>
              <div className="eyebrow mb-5">03 · Projetos</div>
              <h1 className="h-display mb-5">Projetos que transformam sistemas em <span className="italic-accent">resultados.</span></h1>
              <p className="muted mb-6" style={{ fontSize: 17, maxWidth: 540 }}>
                Cada projeto é desenhado para resolver desafios reais com automação, IA e sistemas sob medida que geram eficiência, clareza e crescimento sustentável.
              </p>
              <div className="flex gap-3 mb-6" style={{ flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={() => onNav('contato')}>Agendar uma conversa <Icon name="arrow-right" size={16} className="arrow"/></button>
                <button className="btn btn-secondary" onClick={() => onNav('metodo')}>Ver meu método</button>
              </div>
              <div className="flex items-center gap-3">
                <AvatarStack count={3} more="+"/>
                <span style={{ fontSize: 13.5, color: '#6B6770' }}>Empresas que já transformaram suas operações.</span>
              </div>
            </Reveal>
            <div className="card" style={{ padding: 28 }}>
              <div className="flex items-center justify-between mb-3">
                <span className="tag">PROJETO EM DESTAQUE</span>
                <span style={{ fontSize: 11, color: '#6B6770' }}>Últimos 30 dias ▾</span>
              </div>
              <div style={{ fontSize: 11, color: '#FF6B1A', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 6 }}>CRM · AUTOMAÇÃO · DASHBOARD</div>
              <h3 className="h-2 mb-3">Central de Vendas Inteligente</h3>
              <p className="muted text-sm mb-4">Integração do funil comercial com automações e IA para priorização de leads e previsibilidade de resultados.</p>
              <div style={{ background: '#FAF3EA', borderRadius: 12, padding: 16 }}>
                <div style={{ fontSize: 11, color: '#6B6770', marginBottom: 8 }}>Painel de performance</div>
                <svg width="100%" height="60" viewBox="0 0 320 60">
                  <defs>
                    <linearGradient id="pjg" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#FF6B1A" stopOpacity="0.3"/>
                      <stop offset="100%" stopColor="#FF6B1A" stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  <path d="M0 50 Q40 45 80 40 T160 25 T240 12 T320 6 L320 60 L0 60 Z" fill="url(#pjg)"/>
                  <path d="M0 50 Q40 45 80 40 T160 25 T240 12 T320 6" stroke="#FF6B1A" strokeWidth="1.6" fill="none"/>
                </svg>
                <div className="grid grid-3 mt-3" style={{ gap: 12 }}>
                  {[['Novos leads','+156%','+90%'],['Conversão','+87%','+45%'],['Receita gerada','+142%','+76%']].map(([l,v,c]) => (
                    <div key={l}>
                      <div style={{ fontSize: 10, color: '#6B6770' }}>{l}</div>
                      <div style={{ fontSize: 16, fontWeight: 700, color: '#FF6B1A' }}>{v}</div>
                      <div style={{ fontSize: 10, color: '#67A765' }}>{c}</div>
                    </div>
                  ))}
                </div>
              </div>
              <a className="tlink mt-4" onClick={() => onNav('projeto-detalhe', { project: PROJECTS[1] })} style={{ cursor: 'pointer' }}>Ver estudo completo <Icon name="arrow-right" size={14}/></a>
            </div>
          </div>
        </div>
      </section>

      {/* Filters */}
      <section style={{ padding: '20px 0' }}>
        <div className="container">
          <div className="flex gap-2 items-center" style={{ flexWrap: 'wrap' }}>
            {filters.map(f => (
              <button key={f} className={`chip${filter === f.split(' ')[0] || (filter === 'Todos' && f.includes('Todos')) ? ' active' : ''}`}
                      onClick={() => setFilter(f.split(' ')[0])}>
                {f === 'Todos os projetos' && <Icon name="grid" size={12}/>}
                {f}
              </button>
            ))}
            <div style={{ marginLeft: 'auto', fontSize: 13, color: '#6B6770', display: 'flex', alignItems: 'center', gap: 6 }}>
              Mais relevantes <Icon name="chevron-down" size={14}/>
            </div>
          </div>
        </div>
      </section>

      {/* Projects grid */}
      <section className="section-tight">
        <div className="container">
          <div className="grid grid-3 gap-4">
            {filteredProjects.map((p, i) => (
              <Reveal key={p.t}>
                <div className="card" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer' }} onClick={() => onNav('projeto-detalhe', { project: p })}>
                  <div style={{ background: '#1A1C22', height: 160, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <ProjectThumb i={i}/>
                  </div>
                  <div style={{ padding: 22 }}>
                    <div className="flex gap-2 mb-3" style={{ flexWrap: 'wrap' }}>
                      {p.tags.map(t => <span key={t} style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.1em', color: '#6B6770' }}>{t}</span>)}
                    </div>
                    <h3 className="h-3 mb-3">{p.t}</h3>
                    <p className="muted text-sm mb-4">{p.d}</p>
                    <div className="flex gap-1 mb-4" style={{ flexWrap: 'wrap' }}>
                      {p.chips.map(c => <span key={c} className="chip" style={{ padding: '3px 10px', fontSize: 11 }}>{c}</span>)}
                    </div>
                    <div className="grid grid-3 gap-2" style={{ borderTop: '1px solid #F1E0DA', paddingTop: 14 }}>
                      {p.stats.map(([v, l]) => (
                        <div key={l}>
                          <div style={{ fontSize: 14, fontWeight: 700, color: '#FF6B1A' }}>{v}</div>
                          <div style={{ fontSize: 10, color: '#6B6770' }}>{l}</div>
                        </div>
                      ))}
                    </div>
                    <div className="tlink mt-4">Ver detalhes <Icon name="arrow-right" size={12} className="arrow"/></div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Impact dark section */}
      <section style={{ padding: '40px 32px' }}>
        <div className="container" style={{ background: 'var(--c-grafite)', borderRadius: 24, padding: 40 }}>
          <div className="grid" style={{ gridTemplateColumns: '1fr 1.4fr', gap: 40, alignItems: 'center' }}>
            <div>
              <h2 className="h-3 mb-5" style={{ color: 'white' }}>Impacto que gera crescimento</h2>
              <div className="grid grid-2 gap-4">
                {[
                  ['+37%','Aumento médio de eficiência operacional em 90 dias','chart-up'],
                  ['312h','Economia média de tempo por mês por cliente','zap'],
                  ['2,8x','ROI médio dos projetos em até 90 dias','chart'],
                  ['+120','Projetos entregues com foco no resultado','users'],
                ].map(([n, l, ic]) => (
                  <div key={n} className="flex gap-3">
                    <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(255,107,26,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <Icon name={ic} size={18} color="#FF6B1A"/>
                    </div>
                    <div>
                      <div style={{ color: '#FF6B1A', fontWeight: 700, fontSize: 18 }}>{n}</div>
                      <div style={{ color: '#9A9591', fontSize: 11.5, lineHeight: 1.4 }}>{l}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div style={{ fontSize: 12, color: '#FF6B1A', fontWeight: 600, letterSpacing: '0.1em', marginBottom: 16 }}>SETORES ATENDIDOS</div>
              <div className="grid grid-3 gap-4">
                {[
                  ['briefcase','Comércio e Varejo'],['users','Serviços Profissionais'],['shield','Saúde e Bem-estar'],
                  ['book','Educação'],['cube','Indústria e Logística'],['cog','Tecnologia e SaaS'],
                ].map(([ic, l]) => (
                  <div key={l} className="text-center">
                    <div style={{ width: 44, height: 44, borderRadius: 10, background: 'rgba(255,255,255,0.04)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}>
                      <Icon name={ic} size={20} color="#FF6B1A"/>
                    </div>
                    <div style={{ fontSize: 12, color: '#D9D4CE' }}>{l}</div>
                  </div>
                ))}
              </div>
              <p className="text-sm mt-6" style={{ color: '#D9D4CE' }}>
                Transformamos operações em <span className="italic-accent">vantagem competitiva</span> com tecnologia, método e foco no que importa.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="section-tight">
        <div className="container">
          <div className="flex items-center justify-between mb-6">
            <h2 className="h-3"><span style={{ color: '#FF6B1A' }}>★</span> QUE DIZEM NOSSOS CLIENTES</h2>
            <div className="flex gap-2">
              <button className="chip" style={{ width: 36, height: 36, padding: 0, justifyContent: 'center' }}><Icon name="chevron-left" size={14}/></button>
              <button className="chip" style={{ width: 36, height: 36, padding: 0, justifyContent: 'center' }}><Icon name="chevron-right" size={14}/></button>
            </div>
          </div>
          <div className="grid grid-3 gap-4">
            {[
              ['"O projeto trouxe clareza, estrutura e previsibilidade para nossas operações. Em 60 dias vimos resultados reais no funil e no time."','Mariana Costa','Diretora Comercial · Clínica Viva'],
              ['"A automação e os dashboards nos deram tempo e dados para tomar decisões que antes eram impossíveis."','Rafael Mendes','CEO · RM Contabilidade'],
              ['"A IA no atendimento reduziu em 70% o volume de chamados humanos e aumentou muito a satisfação dos clientes."','Juliana Prado','COO · Loja Integrada'],
            ].map(([q, n, r], i) => (
              <div key={i} className="card">
                <Icon name="quote" size={24} color="#FF6B1A" className="mb-3"/>
                <p className="text-sm mb-5" style={{ lineHeight: 1.5 }}>{q}</p>
                <div className="flex items-center gap-3" style={{ paddingTop: 14, borderTop: '1px solid #F1E0DA' }}>
                  <div style={{ width: 38, height: 38, borderRadius: 999, background: '#E5D7C7', backgroundImage: `url(https://i.pravatar.cc/80?u=${i})`, backgroundSize: 'cover' }}/>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{n}</div>
                    <div style={{ color: '#6B6770', fontSize: 11 }}>{r}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Como conduzo cada projeto */}
      <section className="section-tight">
        <div className="container">
          <div className="grid grid-2 gap-8" style={{ alignItems: 'center' }}>
            <Reveal>
              <div className="eyebrow mb-4">Como conduzo cada projeto</div>
              <h2 className="h-2 mb-4">Projetos não acabam na entrega. Eles começam <span className="italic-accent">a entregar valor.</span></h2>
              <p className="muted mb-6" style={{ fontSize: 16, maxWidth: 500 }}>
                Conduzo cada projeto com proximidade, transparência e foco no que importa. Você acompanha tudo em tempo real, com clareza sobre prazos, decisões e resultados.
              </p>
              <div className="flex flex-col gap-3 mb-6">
                {[
                  ['compass','Direção clara desde o início','Escopo, prazo e indicadores definidos antes da primeira linha de código.'],
                  ['message','Comunicação contínua','Reuniões objetivas e atualizações sem ruído. Você sabe sempre onde estamos.'],
                  ['rocket','Entrega iterativa','Releases pequenos e frequentes para validar antes de escalar.'],
                  ['chart-up','Acompanhamento pós-entrega','Suporte e evolução para garantir que o resultado se sustente.'],
                ].map(([ic, t, d]) => (
                  <div key={t} className="flex items-start gap-3">
                    <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--c-orange-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <Icon name={ic} size={18} color="#FF6B1A"/>
                    </div>
                    <div>
                      <div style={{ fontWeight: 600, marginBottom: 2 }}>{t}</div>
                      <p className="muted text-sm">{d}</p>
                    </div>
                  </div>
                ))}
              </div>
              <button className="btn btn-primary" onClick={() => onNav('metodo')}>
                Ver método completo <Icon name="arrow-right" size={16} className="arrow"/>
              </button>
            </Reveal>
            <Reveal>
              <div className="photo-tinted" style={{ height: 540, borderRadius: 20 }}>
                <img src={YOHANN_GALLERY[7]} alt="Yohann conduzindo projeto"/>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <FinalCTA onNav={onNav}/>
    </div>
  );
};

const ProjectThumb = ({ i }) => {
  const variants = [
    // Automação - orange spark
    <svg key="a" width="100" height="100" viewBox="0 0 100 100">
      <rect x="35" y="35" width="30" height="30" rx="6" fill="#FF6B1A"/>
      <circle cx="20" cy="20" r="4" fill="#FF6B1A" opacity="0.6"/>
      <circle cx="80" cy="20" r="4" fill="#FF6B1A" opacity="0.6"/>
      <circle cx="20" cy="80" r="4" fill="#FF6B1A" opacity="0.6"/>
      <circle cx="80" cy="80" r="4" fill="#FF6B1A" opacity="0.6"/>
      <line x1="20" y1="20" x2="35" y2="35" stroke="rgba(255,107,26,0.5)"/>
      <line x1="80" y1="20" x2="65" y2="35" stroke="rgba(255,107,26,0.5)"/>
      <line x1="20" y1="80" x2="35" y2="65" stroke="rgba(255,107,26,0.5)"/>
      <line x1="80" y1="80" x2="65" y2="65" stroke="rgba(255,107,26,0.5)"/>
    </svg>,
    // CRM dashboard
    <svg key="b" width="180" height="100" viewBox="0 0 180 100">
      <rect x="0" y="0" width="180" height="100" rx="8" fill="rgba(255,107,26,0.08)"/>
      {[20,40,60,80].map(y => <rect key={y} x="20" y={y} width="80" height="6" rx="3" fill="rgba(255,255,255,0.15)"/>)}
      <rect x="120" y="20" width="40" height="60" rx="6" fill="rgba(255,107,26,0.4)"/>
    </svg>,
    // Chart
    <svg key="c" width="180" height="100" viewBox="0 0 180 100">
      <path d="M0 80 Q40 70 80 50 T180 20 L180 100 L0 100Z" fill="rgba(255,107,26,0.3)"/>
      <path d="M0 80 Q40 70 80 50 T180 20" stroke="#FF6B1A" strokeWidth="2" fill="none"/>
      <circle cx="60" cy="60" r="20" fill="rgba(255,107,26,0.2)" stroke="#FF6B1A"/>
    </svg>,
    // IA chat
    <svg key="d" width="160" height="100" viewBox="0 0 160 100">
      <rect x="20" y="20" width="80" height="20" rx="10" fill="rgba(255,255,255,0.1)"/>
      <rect x="60" y="50" width="80" height="20" rx="10" fill="#FF6B1A"/>
      <circle cx="10" cy="30" r="6" fill="#FF6B1A"/>
      <circle cx="150" cy="60" r="6" fill="rgba(255,255,255,0.5)"/>
    </svg>,
    // Integrations
    <svg key="e" width="160" height="100" viewBox="0 0 160 100">
      <circle cx="40" cy="50" r="14" fill="#FF6B1A"/>
      <circle cx="120" cy="30" r="14" fill="rgba(255,107,26,0.5)"/>
      <circle cx="120" cy="70" r="14" fill="rgba(255,107,26,0.7)"/>
      <line x1="54" y1="50" x2="106" y2="30" stroke="#FF6B1A" strokeWidth="2"/>
      <line x1="54" y1="50" x2="106" y2="70" stroke="#FF6B1A" strokeWidth="2"/>
    </svg>,
  ];
  return variants[i % variants.length];
};

window.SolucoesPage = SolucoesPage;
window.ProjetosPage = ProjetosPage;
window.ProjectThumb = ProjectThumb;