/* PAGE: MÉTODO */
const MetodoPage = ({ onNav }) => (
  <div className="page-enter">
    <section style={{ position: 'relative', overflow: 'hidden', padding: '60px 0 60px' }}>
      <SunBurst size={400} className="abs" opacity={0.4} style={{ left: -100, top: 60 }}/>
      <div className="container" style={{ position: 'relative' }}>
        <div className="grid" style={{ gridTemplateColumns: '1fr 1.05fr', gap: 56, alignItems: 'center' }}>
          <Reveal>
            <div className="eyebrow mb-5">Método</div>
            <h1 className="h-display mb-5">Um método claro para gerar <span className="italic-accent">execução</span> que se sustenta</h1>
            <p className="muted mb-6" style={{ fontSize: 17, maxWidth: 540 }}>
              Mais do que implementar, meu método conecta estratégia, tecnologia e operação para transformar planos em resultados reais, mensuráveis e duradouros.
            </p>
            <div className="flex gap-5 mb-6" style={{ flexWrap: 'wrap' }}>
              <span className="check-bullet">Foco em resultado</span>
              <span className="check-bullet">Processo testado</span>
              <span className="check-bullet">Melhoria contínua</span>
            </div>
            <div className="flex items-center gap-4">
              <AvatarStack count={3} more="+"/>
              <span style={{ fontSize: 13.5, color: '#6B6770' }}>Projetos entregues com foco em clareza, método e resultado.</span>
            </div>
          </Reveal>
          <div className="card" style={{ padding: 32 }}>
            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 24 }}>Visão geral do método</div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 4, marginBottom: 24 }}>
              {['search', 'doc', 'zap', 'chart-up'].map((ic, i) => (
                <React.Fragment key={i}>
                  <div style={{ width: 60, height: 60, borderRadius: '50%',
                    background: i === 2 ? '#FF6B1A' : '#FAF3EA',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    border: i === 2 ? 'none' : '1px solid #E5D7C7' }}>
                    <Icon name={ic} size={22} color={i === 2 ? 'white' : '#FF6B1A'}/>
                  </div>
                  {i < 3 && <div style={{ flex: 1, height: 1, borderTop: '1px dashed #FF6B1A' }}/>}
                </React.Fragment>
              ))}
            </div>
            <div className="grid grid-4 gap-3" style={{ fontSize: 12 }}>
              {[
                {n: '01', t: 'Diagnóstico', d: 'Entendemos o cenário e os objetivos.'},
                {n: '02', t: 'Arquitetura', d: 'Desenhamos a solução ideal para gerar impacto.'},
                {n: '03', t: 'Implementação', d: 'Construímos, integramos e automatizamos com foco.'},
                {n: '04', t: 'Evolução', d: 'Acompanhamos, medimos e evoluímos os resultados.'},
              ].map((s, i) => (
                <div key={i}>
                  <div style={{ color: '#FF6B1A', fontWeight: 600, marginBottom: 4 }}>{s.n}</div>
                  <div style={{ fontWeight: 600, marginBottom: 4 }}>{s.t}</div>
                  <div className="muted" style={{ fontSize: 11 }}>{s.d}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px dashed #E5D7C7', textAlign: 'center', fontSize: 12, color: '#6B6770' }}>
              Feedback contínuo e aprendizado
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* As 4 fases */}
    <section className="section-tight">
      <div className="container">
        <h2 className="h-2 mb-8">As 4 fases do método</h2>
        <div className="grid grid-4 gap-4">
          {[
            {n:'01', icon:'search', t:'Diagnóstico', d:'Mapeamos processos, dados e ferramentas para entender onde estão os gargalos e as maiores oportunidades.', items:['Entrevistas e imersão','Mapeamento de processos','Análise de dados']},
            {n:'02', icon:'doc', t:'Arquitetura', d:'Desenhamos a solução ideal, definindo fluxos, integrações e automações que geram valor real para o negócio.', items:['Desenho da solução','Priorização de impacto','Plano com direção clara']},
            {n:'03', icon:'zap', t:'Implementação', d:'Transformamos o plano em execução com qualidade, transparência e validações constantes.', items:['Configuração e desenvolvimento','Integrações e automações','Testes e validações']},
            {n:'04', icon:'chart-up', t:'Evolução', d:'Acompanhamos os resultados, medimos impacto e evoluímos continuamente para escalar performance.', items:['Monitoramento e métricas','Ajustes e otimizações','Novas oportunidades']},
          ].map((f, i) => (
            <Reveal key={i} className="card" style={{ padding: 24 }}>
              <div className="flex items-center justify-between mb-4">
                <Icon name={f.icon} size={22} color="#FF6B1A"/>
                <span style={{ color: '#FF6B1A', fontSize: 12, fontWeight: 600 }}>{f.n}</span>
              </div>
              <h3 className="h-3 mb-3">{f.t}</h3>
              <p className="muted text-sm mb-4">{f.d}</p>
              <div style={{ borderTop: '1px solid #F1E0DA', paddingTop: 14 }}>
                {f.items.map(it => <div key={it} className="flex items-center gap-2 mb-2" style={{ fontSize: 12.5 }}>
                  <span style={{ width: 4, height: 4, borderRadius: 999, background: '#FF6B1A' }}/>
                  {it}
                </div>)}
              </div>
              <div className="mt-4">
                <Icon name="arrow-right" size={18} color="#FF6B1A"/>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>

    {/* Princípios da execução */}
    <section className="section-tight">
      <div className="container">
        <div className="grid grid-2 gap-8" style={{ alignItems: 'center' }}>
          <Reveal>
            <div className="eyebrow mb-4">Princípios da execução</div>
            <h2 className="h-2 mb-4">Método não é receita. É <span className="italic-accent">disciplina aplicada.</span></h2>
            <p className="muted mb-6" style={{ fontSize: 16, maxWidth: 500 }}>
              Cada empresa é única. O método se adapta ao contexto, mas mantém os princípios que garantem resultado consistente em qualquer cenário.
            </p>
            <div className="flex flex-col gap-3 mb-6">
              {[
                ['eye','Diagnóstico antes de ferramenta','Resolver o problema certo é mais importante que escolher a tecnologia.'],
                ['workflow','Iteração curta e validação','Entregas pequenas e frequentes para corrigir rota com agilidade.'],
                ['shield','Documentação como ativo','Tudo registrado para o time operar com autonomia depois da entrega.'],
                ['sparkles','Simplicidade como princípio','A solução mais simples que resolve. Sem complexidade desnecessária.'],
              ].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>
          </Reveal>
          <Reveal>
            <div style={{ height: 520, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
              <img 
                src={YOHANN_GALLERY[5]} 
                alt="Yohann trabalhando" 
                style={{ maxHeight: '100%', width: 'auto', objectFit: 'contain' }}
              />
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    {/* Diferencial dark */}
    <section style={{ padding: '40px 32px' }}>
      <div className="container" style={{ background: 'var(--c-grafite)', borderRadius: 24, padding: 56, position: 'relative', overflow: 'hidden' }}>
        <div className="grid" style={{ gridTemplateColumns: '1fr 1fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div className="eyebrow mb-3">O que nos torna diferente</div>
            <h2 className="h-2 mb-4" style={{ color: 'white' }}>Conectamos estratégia, tecnologia e operação para gerar <span className="italic-accent">impacto real.</span></h2>
            <p className="muted-on-dark">Não é só sobre ferramentas. É sobre alinhamento: processos, tecnologia e pessoas trabalhando juntas com propósito e método.</p>
          </div>
          <div style={{ position: 'relative', height: 280, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="280" height="280" viewBox="0 0 280 280">
              <circle cx="140" cy="140" r="110" fill="none" stroke="rgba(255,107,26,0.14)" strokeDasharray="3 5"/>
              <circle cx="140" cy="60" r="34" fill="rgba(26,28,34,1)" stroke="rgba(255,107,26,0.4)"/>
              <circle cx="65" cy="200" r="34" fill="rgba(255,107,26,1)"/>
              <circle cx="215" cy="200" r="34" fill="rgba(26,28,34,1)" stroke="rgba(255,107,26,0.4)"/>
              <circle cx="140" cy="140" r="22" fill="rgba(255,107,26,0.2)" stroke="rgba(255,107,26,0.6)"/>
            </svg>
            <div style={{ position: 'absolute', top: 36, left: '50%', transform: 'translateX(-50%)', textAlign: 'center' }}>
              <div style={{ fontSize: 11, color: '#FF6B1A' }}>Estratégia</div>
            </div>
            <div style={{ position: 'absolute', bottom: 56, left: 30, textAlign: 'center', color: 'white' }}>
              <div style={{ fontSize: 11 }}>Tecnologia</div>
            </div>
            <div style={{ position: 'absolute', bottom: 56, right: 30, textAlign: 'center', color: 'white' }}>
              <div style={{ fontSize: 11 }}>Operação</div>
            </div>
            <SparkStar size={20} className="abs" style={{ top: 130, left: 130 }}/>
          </div>
          <div>
            <p style={{ color: '#D9D4CE', marginBottom: 20, fontSize: 14 }}>O resultado é previsibilidade, eficiência e crescimento consistente.</p>
            {['Menos retrabalho','Mais visibilidade','Decisões baseadas em dados','Resultados que se sustentam'].map(b => (
              <div key={b} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10, color: '#D9D4CE', fontSize: 14 }}>
                <Icon name="check" size={14} color="#FF6B1A"/> {b}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    {/* Pilares */}
    <section className="section-tight">
      <div className="container">
        <h2 className="h-2 mb-8">Nossos pilares</h2>
        <div className="grid grid-4 gap-4">
          {[
            {icon:'lightbulb', t:'Clareza', d:'Comunicação clara e simples para alinhar expectativas e remover ruídos.'},
            {icon:'workflow', t:'Integração', d:'Soluções conectadas para garantir fluidez entre dados, processos e pessoas.'},
            {icon:'zap', t:'Execução', d:'Disciplina e foco para transformar planos em entregas com qualidade e velocidade.'},
            {icon:'target', t:'Evolução', d:'Melhoria contínua para escalar resultados e se adaptar ao que importa.'},
          ].map(p => (
            <div key={p.t} className="card">
              <div className="icon-sq mb-4"><Icon name={p.icon} size={20}/></div>
              <h3 className="h-3 mb-3">{p.t}</h3>
              <p className="muted text-sm">{p.d}</p>
              <div className="mt-4"><Icon name="arrow-right" size={18} color="#FF6B1A"/></div>
            </div>
          ))}
        </div>
      </div>
    </section>

    <FAQSection items={[
      ['Quanto tempo leva para ver resultados?', 'Resultados iniciais aparecem entre 30 e 60 dias. Resultados estruturais e escaláveis em 90+ dias.'],
      ['Preciso ter os processos bem definidos para começar?', 'Não. Parte do meu trabalho é estruturar processos onde eles ainda não existem.'],
      ['O método serve para empresas de qualquer tamanho?', 'Sim. Adapto a profundidade da implementação ao porte e ao momento da empresa.'],
      ['Como é feito o acompanhamento após a implementação?', 'Tenho ciclos de evolução contínua com dashboards e reuniões periódicas.'],
      ['Vocês trabalham com quais ferramentas?', 'HubSpot, Pipedrive, RD Station, Make, Zapier, OpenAI, Google Cloud, AWS e muitos outros.'],
      ['Vocês oferecem treinamento para o time?', 'Sim. Cada implementação inclui treinamento e materiais para o time operar com autonomia.'],
    ]}/>

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

const FAQSection = ({ items }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section-tight">
      <div className="container">
        <h2 className="h-2 mb-8">Perguntas frequentes</h2>
        <div className="grid grid-2 gap-3">
          {items.map(([q, a], i) => (
            <div key={i} className="card" style={{ padding: '18px 22px', cursor: 'pointer' }}
                 onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="flex items-center justify-between gap-3">
                <span style={{ fontWeight: 500, fontSize: 14.5 }}>{q}</span>
                <Icon name={open === i ? 'minus' : 'plus'} size={18} color="#FF6B1A"/>
              </div>
              {open === i && <p className="muted text-sm mt-3">{a}</p>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCTA = ({ onNav, variant = 'light' }) => (
  <section style={{ padding: '0 32px 64px' }}>
    <div className="container" style={{
      background: variant === 'dark' ? 'var(--c-grafite)' : 'var(--c-bege-quente)',
      color: variant === 'dark' ? 'white' : 'inherit',
      borderRadius: 24, padding: 40,
      position: 'relative', overflow: 'hidden'
    }}>
      <div className="grid" style={{ gridTemplateColumns: '0.7fr 1fr 1fr', gap: 40, alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <div style={{ width: 110, height: 140, backgroundImage: `url(${YOHANN_PHOTO_2})`, backgroundSize: 'cover', borderRadius: 14, flexShrink: 0 }}/>
          <h2 className="h-3" style={{ color: variant === 'dark' ? 'white' : 'inherit' }}>
            Pronto para transformar sua operação em <span className="italic-accent">execução real?</span>
          </h2>
        </div>
        <div>
          <p style={{ color: variant === 'dark' ? '#D9D4CE' : '#6B6770', fontSize: 14, marginBottom: 16 }}>
            Vamos conversar sobre seus desafios e como meu método pode gerar resultados consistentes para o seu negócio.
          </p>
          <div className="flex gap-4" style={{ flexWrap: 'wrap' }}>
            <span className="check-bullet">Conversa estratégica</span>
            <span className="check-bullet">Sem compromisso</span>
          </div>
        </div>
        <div className="flex flex-col gap-3">
          <button className="btn btn-primary" onClick={() => onNav('contato')}>
            Agendar conversa <Icon name="arrow-right" size={16} className="arrow"/>
          </button>
          <button className={variant === 'dark' ? 'btn btn-on-dark-secondary' : 'btn btn-secondary'} style={{ justifyContent: 'center', gap: 10 }} onClick={() => window.open('https://wa.me/5562998550007', '_blank')}>
            <Icon name="whatsapp" size={16}/> Falar no WhatsApp
          </button>
        </div>
      </div>
    </div>
  </section>
);

window.MetodoPage = MetodoPage;
window.FAQSection = FAQSection;
window.FinalCTA = FinalCTA;