const ProjectVisuals = ({ project }) => {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const title = project?.t || '';

  // Container helper
  const VBox = ({ title, children }) => (
    <div className="card" style={{ padding: 24, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ fontWeight: 600, marginBottom: 16 }}>{title}</div>
      <div style={{ flex: 1, position: 'relative', background: '#FAF3EA', borderRadius: 12, overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {children}
      </div>
    </div>
  );

  let content;

  if (title === 'Automação de Processos Operacionais') {
    content = (
      <VBox title="Fluxo Operacional Contínuo">
        <svg width="100%" height="100%" viewBox="0 0 300 200">
          <path d="M 40 100 L 100 100 L 150 50 L 220 50" fill="none" stroke="rgba(255,107,26,0.2)" strokeWidth="3"/>
          <path d="M 100 100 L 150 150 L 220 150" fill="none" stroke="rgba(255,107,26,0.2)" strokeWidth="3"/>
          <path d="M 220 50 L 260 100 L 220 150" fill="none" stroke="rgba(255,107,26,0.2)" strokeWidth="3"/>
          
          <rect x="25" y="85" width="30" height="30" rx="6" fill="#1A1C22" stroke="#FF6B1A" strokeWidth="2"/>
          <rect x="135" y="35" width="30" height="30" rx="15" fill="#FF6B1A"/>
          <rect x="135" y="135" width="30" height="30" rx="15" fill="#FF6B1A"/>
          <rect x="205" y="35" width="30" height="30" rx="6" fill="#1A1C22" stroke="#FF6B1A" strokeWidth="2"/>
          <rect x="205" y="135" width="30" height="30" rx="6" fill="#1A1C22" stroke="#FF6B1A" strokeWidth="2"/>
          <circle cx="260" cy="100" r="15" fill="#FF6B1A"/>

          <circle cx={40 + (t*40)%60} cy="100" r="4" fill="white"/>
          <circle cx={100 + ((t*40)%50)} cy={100 - ((t*40)%50)} r="4" fill="white"/>
          <circle cx={100 + ((t*40)%50)} cy={100 + ((t*40)%50)} r="4" fill="white"/>
        </svg>
      </VBox>
    );
  } else if (title === 'CRM Comercial Personalizado') {
    content = (
      <VBox title="Pipeline Inteligente">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '70%' }}>
          {[100, 80, 60, 40].map((w, i) => (
            <div key={i} style={{ width: `${w}%`, height: 24, margin: '0 auto', background: '#FF6B1A', opacity: 1 - i*0.2, borderRadius: 12, transform: `scale(${1 + Math.sin(t*3 + i)*0.02})` }}/>
          ))}
          <div className="flex items-center justify-center mt-2 gap-2" style={{ background: '#1A1C22', color: 'white', padding: '8px 16px', borderRadius: 20, fontSize: 12, fontWeight: 700, animation: 'pulseWin 2s infinite' }}>
            <Icon name="check-circle" size={14} color="#FF6B1A"/> NEGÓCIO FECHADO
          </div>
        </div>
      </VBox>
    );
  } else if (title === 'Dashboard Executivo em Tempo Real') {
    content = (
      <VBox title="Visão Executiva">
        <svg width="100%" height="100%" viewBox="0 0 300 200" style={{ transform: 'translateY(10px)' }}>
          {[0,1,2,3,4,5].map(i => {
            const h = 40 + Math.abs(Math.sin(t + i))*60;
            return <rect key={i} x={40 + i*40} y={150 - h} width="20" height={h} rx="4" fill="#FF6B1A" opacity={0.3 + (i/10)}/>
          })}
          <path d={`M 50 ${120 - Math.sin(t)*20} Q 110 ${70 - Math.cos(t)*30} 170 ${90 - Math.sin(t*1.5)*20} T 250 ${40 - Math.cos(t)*10}`} fill="none" stroke="#1A1C22" strokeWidth="4" strokeLinecap="round"/>
        </svg>
      </VBox>
    );
  } else if (title === 'Atendente Virtual com IA Generativa') {
    content = (
      <VBox title="NLP & Geração de Resposta">
        <div style={{ width: '80%', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ alignSelf: 'flex-end', background: '#1A1C22', color: 'white', padding: '10px 14px', borderRadius: '14px 14px 0 14px', fontSize: 11 }}>Problema no acesso.</div>
          <div style={{ alignSelf: 'center', margin: '8px 0', animation: 'spin 4s linear infinite' }}>
            <Icon name="loader" size={20} color="#FF6B1A"/>
          </div>
          <div style={{ alignSelf: 'flex-start', background: 'white', border: '1px solid #FF6B1A', color: '#1A1C22', padding: '10px 14px', borderRadius: '14px 14px 14px 0', fontSize: 11, position: 'relative' }}>
            <span style={{ color: '#FF6B1A', fontWeight: 700 }}>IA:</span> Já identifiquei o erro. Resetando sua senha agora...
          </div>
        </div>
      </VBox>
    );
  } else if (title === 'Integração de Sistemas e Ferramentas') {
    content = (
      <VBox title="Hub Central de Integração">
        <svg width="100%" height="100%" viewBox="0 0 300 200">
          <circle cx="150" cy="100" r="60" fill="none" stroke="rgba(255,107,26,0.2)" strokeWidth="1" strokeDasharray="4 4" style={{ transformOrigin: '150px 100px', animation: 'spin 10s linear infinite' }}/>
          <circle cx="150" cy="100" r="24" fill="#FF6B1A"/>
          {[0, 120, 240].map((deg, i) => {
            const rad = (deg * Math.PI) / 180 + t;
            const x = 150 + Math.cos(rad) * 60;
            const y = 100 + Math.sin(rad) * 60;
            return (
              <g key={i}>
                <line x1="150" y1="100" x2={x} y2={y} stroke="rgba(255,107,26,0.5)" strokeWidth="2"/>
                <circle cx={x} cy={y} r="14" fill="#1A1C22" stroke="#FF6B1A" strokeWidth="2"/>
              </g>
            );
          })}
        </svg>
      </VBox>
    );
  } else if (title === 'Design de Inteligência') {
    content = (
      <VBox title="Topologia de Rede Neural">
        <svg width="100%" height="100%" viewBox="0 0 300 200">
          <defs>
            <radialGradient id="glow" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#FF6B1A" stopOpacity="0.5"/>
              <stop offset="100%" stopColor="#FF6B1A" stopOpacity="0"/>
            </radialGradient>
          </defs>
          {[ [60,60],[60,140],[150,40],[150,100],[150,160],[240,80],[240,120] ].map((pt, i) => (
            <circle key={i} cx={pt[0]} cy={pt[1]} r={15 + Math.sin(t*2+i)*5} fill="url(#glow)"/>
          ))}
          <path d="M60 60 L150 40 L240 80 M60 60 L150 100 L240 120 M60 140 L150 100 L240 80 M60 140 L150 160 L240 120 M150 40 L240 120" stroke="rgba(255,107,26,0.3)" strokeWidth="1.5" fill="none"/>
          {[ [60,60],[60,140],[150,40],[150,100],[150,160],[240,80],[240,120] ].map((pt, i) => (
            <circle key={i} cx={pt[0]} cy={pt[1]} r="4" fill="#FF6B1A"/>
          ))}
        </svg>
      </VBox>
    );
  } else if (title === 'Inteligência Médica de Captura') {
    content = (
      <VBox title="Pulsão e Agendamento">
        <svg width="100%" height="100%" viewBox="0 0 300 200">
          <path d="M 20 100 L 80 100 L 100 50 L 120 150 L 140 100 L 280 100" fill="none" stroke="rgba(255,107,26,0.2)" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M 20 100 L 80 100 L 100 50 L 120 150 L 140 100 L 280 100" fill="none" stroke="#FF6B1A" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="400" strokeDashoffset={400 - (t*150)%800}/>
          <rect x="130" y="80" width="40" height="40" rx="8" fill="#1A1C22" style={{ transformOrigin: '150px 100px', transform: `scale(${Math.abs(Math.sin(t*2)) > 0.9 ? 1.2 : 1})` }}/>
          <path d="M 142 100 L 148 106 L 158 94" fill="none" stroke="#FF6B1A" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </VBox>
    );
  } else if (title === 'Agente de Análise de Contrato') {
    content = (
      <VBox title="OCR & Análise Semântica">
        <div style={{ position: 'relative', width: 140, height: 180, background: 'white', borderRadius: 8, boxShadow: '0 4px 20px rgba(0,0,0,0.08)', padding: 16 }}>
          <div style={{ width: '100%', height: 4, background: '#D9D4CE', marginBottom: 8 }}/>
          <div style={{ width: '80%', height: 4, background: '#D9D4CE', marginBottom: 8 }}/>
          <div style={{ width: '90%', height: 4, background: '#D9D4CE', marginBottom: 8 }}/>
          <div style={{ width: '100%', height: 16, background: 'rgba(255,107,26,0.1)', borderLeft: '3px solid #FF6B1A', marginBottom: 8, display: 'flex', alignItems: 'center', paddingLeft: 4 }}>
            <span style={{ fontSize: 8, color: '#FF6B1A', fontWeight: 700 }}>Risco Detectado</span>
          </div>
          <div style={{ width: '60%', height: 4, background: '#D9D4CE' }}/>
          <div style={{ position: 'absolute', left: -10, right: -10, height: 2, background: '#FF6B1A', boxShadow: '0 0 10px #FF6B1A', top: `${10 + Math.abs(Math.sin(t))*80}%` }}/>
        </div>
      </VBox>
    );
  } else if (title === 'Inbound Marketing Automatizado') {
    content = (
      <VBox title="Nutrição por Scoring">
        <svg width="100%" height="100%" viewBox="0 0 300 200">
          <circle cx="150" cy="100" r="70" fill="none" stroke="rgba(255,107,26,0.1)" strokeWidth="30"/>
          <circle cx="150" cy="100" r="40" fill="none" stroke="rgba(255,107,26,0.3)" strokeWidth="30"/>
          <circle cx="150" cy="100" r="15" fill="#FF6B1A"/>
          {[0,1,2,3,4].map(i => {
            const rad = (t*2 + i) % (Math.PI*2);
            const dist = 120 - ((t*40 + i*30)%120);
            return <circle key={i} cx={150 + Math.cos(rad)*dist} cy={100 + Math.sin(rad)*dist} r="4" fill="#1A1C22"/>
          })}
        </svg>
      </VBox>
    );
  } else if (title === 'Produção de Conteúdo em Massa') {
    content = (
      <VBox title="Geração em Escala (Multi-Agent)">
        <div className="grid grid-3 gap-2" style={{ width: '80%' }}>
          {[0,1,2,3,4,5].map(i => (
            <div key={i} style={{ background: 'white', height: 60, borderRadius: 6, padding: 8, display: 'flex', flexDirection: 'column', gap: 4, border: '1px solid rgba(255,107,26,0.2)' }}>
              <div style={{ width: `${30 + Math.abs(Math.sin(t*2+i))*70}%`, height: 4, background: '#FF6B1A', borderRadius: 2 }}/>
              <div style={{ width: '100%', height: 4, background: '#E8DFD2', borderRadius: 2 }}/>
              <div style={{ width: '80%', height: 4, background: '#E8DFD2', borderRadius: 2 }}/>
            </div>
          ))}
        </div>
      </VBox>
    );
  } else if (title === 'Agente de Análise de Dados') {
    content = (
      <VBox title="Consulta em Linguagem Natural">
        <div style={{ width: '85%', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ background: 'white', border: '1px solid #FF6B1A', borderRadius: 20, padding: '10px 16px', fontSize: 12, display: 'flex', alignItems: 'center', gap: 8, boxShadow: '0 4px 15px rgba(255,107,26,0.1)' }}>
            <Icon name="search" size={14} color="#FF6B1A"/>
            <span style={{ borderRight: '2px solid #FF6B1A', paddingRight: 2, animation: 'blink 1s infinite' }}>Mostre vendas por região</span>
          </div>
          <div className="flex gap-2 items-end justify-center" style={{ height: 100 }}>
            {[0,1,2,3].map(i => (
              <div key={i} style={{ width: 30, background: '#FF6B1A', borderRadius: '4px 4px 0 0', height: `${20 + Math.abs(Math.sin(t+i))*80}%`, opacity: 0.5 + (i*0.1) }}/>
            ))}
          </div>
        </div>
      </VBox>
    );
  } else if (title === 'Agente de Mídia e Conteúdo para Moda') {
    content = (
      <VBox title="Visão Computacional & Social Ads">
        <div style={{ position: 'relative', width: 140, height: 180, background: 'white', borderRadius: 12, boxShadow: '0 10px 30px rgba(0,0,0,0.08)', padding: 10, display: 'flex', flexDirection: 'column', gap: 8, overflow: 'hidden' }}>
          {/* Imagem do Produto */}
          <div style={{ width: '100%', height: 90, background: '#FAF3EA', borderRadius: 8, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 24, height: 24, border: '2px solid rgba(255,107,26,0.3)', borderRadius: 4 }}/>
            <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, width: '20%', background: 'linear-gradient(90deg, transparent, rgba(255,107,26,0.5), transparent)', transform: `translateX(${-100 + (t*150)%300}%)` }}/>
          </div>
          {/* Copy Gerada */}
          <div style={{ width: `${60 + Math.abs(Math.sin(t*3))*40}%`, height: 6, background: '#FF6B1A', borderRadius: 3, transition: 'width 0.2s' }}/>
          <div style={{ width: '100%', height: 4, background: '#E8DFD2', borderRadius: 2 }}/>
          <div style={{ width: '80%', height: 4, background: '#E8DFD2', borderRadius: 2 }}/>
          <div style={{ width: '100%', padding: '6px 0', background: 'rgba(255,107,26,0.1)', borderRadius: 4, color: '#FF6B1A', fontSize: 8, fontWeight: 700, textAlign: 'center', marginTop: 'auto' }}>
            IMPULSIONANDO
          </div>
          
          {/* Partículas */}
          {[0,1,2,3].map(i => {
            const y = 100 - ((t*60 + i*25)%100);
            return (
              <div key={i} style={{ position: 'absolute', right: 10 + (i*12)%30, bottom: y + '%', opacity: y/100, fontSize: 11, color: '#FF6B1A', fontWeight: 800 }}>
                {i % 2 === 0 ? '$' : '♥'}
              </div>
            );
          })}
        </div>
      </VBox>
    );
  } else if (title === 'Portal Institucional para Mandatos e Instituições') {
    content = (
      <VBox title="Plataforma Cloud Segura">
        <div style={{ position: 'relative', width: 180, height: 140, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {/* Wireframe do Site */}
          <div style={{ position: 'absolute', width: 140, height: 110, background: 'white', borderRadius: 8, boxShadow: '0 10px 20px rgba(0,0,0,0.05)', padding: 8, display: 'flex', flexDirection: 'column', gap: 6, zIndex: 2 }}>
            <div style={{ width: '100%', height: 16, background: '#FAF3EA', borderRadius: 4, display: 'flex', alignItems: 'center', gap: 4, padding: '0 6px' }}>
              <div style={{ width: 14, height: 4, background: '#FF6B1A', borderRadius: 2 }}/>
              <div style={{ width: 6, height: 4, background: '#D9D4CE', borderRadius: 2, marginLeft: 'auto' }}/>
              <div style={{ width: 6, height: 4, background: '#D9D4CE', borderRadius: 2 }}/>
            </div>
            <div style={{ width: '100%', height: 30, background: '#FAF3EA', borderRadius: 4 }}/>
            <div style={{ display: 'flex', gap: 6, flex: 1 }}>
              <div style={{ flex: 1, height: '100%', background: '#FAF3EA', borderRadius: 4 }}/>
              <div style={{ flex: 1, height: '100%', background: '#FAF3EA', borderRadius: 4 }}/>
            </div>
          </div>

          {/* Escudo de proteção animado */}
          <div style={{ position: 'absolute', width: 160, height: 130, borderRadius: 12, border: '2px solid rgba(255,107,26,0.3)', zIndex: 1, animation: 'pulseWin 3s infinite' }}/>
          <div style={{ position: 'absolute', top: -15, background: '#FF6B1A', borderRadius: '50%', width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 3, boxShadow: '0 0 15px rgba(255,107,26,0.5)', transform: `translateY(${Math.sin(t*2)*5}px)` }}>
            <Icon name="shield" size={16} color="white"/>
          </div>
          
          {/* Cidadãos se conectando */}
          {[0,1,2].map(i => {
            const rad = (t*1.5 + i*2.1) % (Math.PI*2);
            return (
              <div key={i} style={{ position: 'absolute', width: 20, height: 20, background: 'white', border: '1px solid #FF6B1A', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', left: 80 + Math.cos(rad)*90, top: 60 + Math.sin(rad)*60, zIndex: 4, opacity: 0.8 }}>
                <Icon name="user" size={10} color="#FF6B1A"/>
              </div>
            );
          })}
        </div>
      </VBox>
    );
  } else {
    // Fallback
    content = (
      <VBox title="Métricas de Impacto">
        <svg width="100%" height="100%" viewBox="0 0 300 200">
           <path d="M0 150 Q75 130 150 80 T300 40 L300 200 L0 200Z" fill="rgba(255,107,26,0.1)"/>
           <path d="M0 150 Q75 130 150 80 T300 40" stroke="#FF6B1A" strokeWidth="4" fill="none"/>
        </svg>
      </VBox>
    );
  }

  return (
    <>
      <style>{`
        @keyframes pulseWin { 0%, 100% { box-shadow: 0 0 0 rgba(255,107,26,0); } 50% { box-shadow: 0 0 15px rgba(255,107,26,0.4); } }
        @keyframes spin { 100% { transform: rotate(360deg); } }
        @keyframes blink { 0%, 100% { border-color: transparent; } 50% { border-color: #FF6B1A; } }
      `}</style>
      {content}
    </>
  );
};

/* PAGE: Project Detail */
const ProjetoDetalhePage = ({ onNav, project }) => {
  const title = project?.t || 'Central de vendas inteligente';
  const subtitle = project?.tags?.join(' · ') || 'AUTOMAÇÃO · IA · INTEGRAÇÕES';
  const description = project?.d || 'Automatização do funil comercial com integração entre CRM, propostas e follow-ups inteligentes. Menos esforço manual, mais conversões e previsibilidade.';
  const chips = project?.chips || ['Make','HubSpot','Google Sheets','OpenAI','Looker Studio'];
  
  const defaultStats = [['+42%','aumento na taxa de conversão','chart-up'],['-35%','redução do tempo do ciclo de vendas','zap'],['+28%','mais propostas enviadas/mês','target']];
  const stats = project?.stats 
    ? project.stats.map((s, i) => [s[0], s[1], ['chart-up','zap','target'][i%3]])
    : defaultStats;

  const defaultSteps = [
    ['01 · DESAFIO','O processo era manual e fragmentado. As informações estavam espalhadas, com perda de visibilidade, baixa confiabilidade e follow-ups inconsistentes que impactavam o resultado final.'],
    ['02 · SOLUÇÃO','Desenvolvemos um ecossistema inteligente que conecta todas as etapas do processo. A solução automatiza tarefas repetitivas, padroniza a operação e consolida os dados em tempo real.'],
    ['03 · ESTRUTURA','• Mapeamento de entradas e gatilhos\n• Motor de automação central\n• Agentes de IA para tomada de decisão\n• Dashboards em tempo real para monitoramento'],
    ['04 · FLUXO','Captura do dado → Triagem e enriquecimento automático → Processamento inteligente → Atualização do banco de dados e notificação da equipe responsável.'],
    ['05 · RESULTADOS','• Operação centralizada e 100% conectada\n• Visibilidade total do fluxo em tempo real\n• Mais produtividade para o time\n• Decisões orientadas por dados e previsibilidade'],
  ];

  const defaultAntes = ['Dados fragmentados e desestruturados','Processos manuais e repetitivos','Baixa visibilidade do gargalo operacional'];
  const defaultDepois = ['Fluxo centralizado e automatizado','Ações inteligentes em tempo certo','Mais eficiência e previsibilidade na operação'];

  const defaultArquitetura = [['doc','Ponto de Captura'],['workflow','Motor de Automação'],['users','Plataforma Central'],['database','Banco de Dados'],['chart','Painéis Executivos']];

  const defaultTestimonial = {
    quote: '"O projeto mudou completamente nossa operação. Ganhamos escala, organizamos nosso fluxo e aumentamos a eficiência da equipe de forma consistente e rápida."',
    author: 'Gestor(a) de Operações', role: 'Cliente', avatar: 'https://i.pravatar.cc/100?u=gestor'
  };

  const defaultMeta = [['Setor','Tecnologia e Serviços'],['Time envolvido','Operações e Liderança'],['Duração do projeto','4 a 8 semanas'],['Status','Implementado']];

  const steps = project?.steps || defaultSteps;
  const antes = project?.antes || defaultAntes;
  const depois = project?.depois || defaultDepois;
  const arquitetura = project?.arquitetura || defaultArquitetura;
  const testimonial = project?.testimonial || defaultTestimonial;
  const meta = project?.meta || defaultMeta;

  return (
    <div className="page-enter">
      <section style={{ padding: '40px 0 30px' }}>
        <div className="container">
          <div className="flex items-center gap-2 mb-6" style={{ fontSize: 13, color: '#6B6770' }}>
            <a onClick={() => onNav('projetos')} style={{ cursor: 'pointer' }}>Projetos</a>
            <Icon name="chevron-right" size={12}/>
            <span style={{ color: '#18191D' }}>{title}</span>
          </div>
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 56 }}>
            <Reveal>
              <div style={{ fontSize: 11, color: '#FF6B1A', fontWeight: 600, letterSpacing: '0.1em', marginBottom: 12 }}>{subtitle}</div>
              <h1 className="h-display mb-5">{title}</h1>
              <p className="muted mb-5" style={{ fontSize: 16 }}>{description}</p>
              <div className="flex gap-2 mb-5" style={{ flexWrap: 'wrap' }}>
                {chips.map(t => <span key={t} className="chip">{t}</span>)}
              </div>
              <div className="grid grid-3 gap-4">
                {stats.map(([n, l, ic]) => (
                  <div key={n} className="card" style={{ padding: 16 }}>
                    <Icon name={ic} size={16} color="#FF6B1A" className="mb-2"/>
                    <div style={{ fontSize: 22, fontWeight: 700, color: '#FF6B1A' }}>{n}</div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
            <ProjectVisuals project={project} />
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="grid grid-5 gap-4">
            {steps.map(([t, d]) => (
              <div key={t} className="card" style={{ padding: 18 }}>
                <div style={{ fontSize: 11, color: '#FF6B1A', fontWeight: 600, letterSpacing: '0.1em', marginBottom: 12 }}>{t}</div>
                <p className="muted text-sm" style={{ whiteSpace: 'pre-line', fontSize: 12.5, lineHeight: 1.6 }}>{d}</p>
                <SparkStar size={14} className="mt-4"/>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '40px 32px' }}>
        <div className="container" style={{ background: 'var(--c-grafite)', borderRadius: 24, padding: 40 }}>
          <div className="grid" style={{ gridTemplateColumns: '1fr 2fr', gap: 40 }}>
            <div>
              <div className="eyebrow mb-3">Antes e depois</div>
              <h2 className="h-2" style={{ color: 'white' }}>Menos retrabalho,<br/>mais <span className="italic-accent">resultado.</span></h2>
            </div>
            <div className="grid grid-2 gap-4">
              <div style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 14, padding: 20 }}>
                <div style={{ color: '#FF6B1A', fontWeight: 600, marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon name="x-circle" size={16}/> ANTES
                </div>
                {antes.map(b => (
                  <div key={b} style={{ color: '#9A9591', fontSize: 13, marginBottom: 8 }}>• {b}</div>
                ))}
              </div>
              <div style={{ background: 'rgba(255,107,26,0.08)', border: '1px solid rgba(255,107,26,0.2)', borderRadius: 14, padding: 20 }}>
                <div style={{ color: '#FF6B1A', fontWeight: 600, marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon name="check-circle" size={16}/> DEPOIS
                </div>
                {depois.map(b => (
                  <div key={b} style={{ color: '#D9D4CE', fontSize: 13, marginBottom: 8 }}>• {b}</div>
                ))}
              </div>
            </div>
          </div>
          <div className="mt-8" style={{ paddingTop: 30, borderTop: '1px solid rgba(255,255,255,0.06)' }}>
            <div className="eyebrow mb-4">Arquitetura da solução</div>
            <div className="flex items-center gap-4" style={{ flexWrap: 'wrap', justifyContent: 'space-between' }}>
              {arquitetura.map(([ic, l], i) => (
                <React.Fragment key={l}>
                  <div className="text-center">
                    <div style={{ width: 56, height: 56, borderRadius: 14, background: 'rgba(255,107,26,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px' }}>
                      <Icon name={ic} size={22} color="#FF6B1A"/>
                    </div>
                    <div style={{ fontSize: 11.5, color: '#D9D4CE' }}>{l}</div>
                  </div>
                  {i < arquitetura.length - 1 && <Icon name="arrow-right" size={20} color="rgba(255,107,26,0.4)"/>}
                </React.Fragment>
              ))}
            </div>
            <div className="text-center mt-6" style={{ fontSize: 12, color: '#9A9591' }}>
              Sincronização automática, dados confiáveis e decisões mais rápidas.
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1.3fr 1fr', gap: 32 }}>
            <div className="card" style={{ padding: 32 }}>
              <Icon name="quote" size={28} color="#FF6B1A" className="mb-4"/>
              <p className="font-serif" style={{ fontSize: 19, lineHeight: 1.5, marginBottom: 20, fontStyle: 'italic' }}>
                {testimonial.quote}
              </p>
              <div className="flex items-center gap-3">
                <div style={{ width: 48, height: 48, borderRadius: 999, backgroundImage: `url(${testimonial.avatar})`, backgroundSize: 'cover' }}/>
                <div>
                  <div style={{ fontWeight: 600 }}>{testimonial.author}</div>
                  <div style={{ color: '#6B6770', fontSize: 12 }}>{testimonial.role}</div>
                </div>
              </div>
            </div>
            <div className="card" style={{ padding: 32 }}>
              {meta.map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderBottom: '1px solid #F1E0DA' }}>
                  <span className="muted text-sm">{k}</span>
                  <span style={{ fontWeight: 600, fontSize: 13, textAlign: 'right' }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

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

window.ProjetoDetalhePage = ProjetoDetalhePage;
