const Metodologia = ({ navigate }) => {
  const C = { coral: '#fc6466', bg: '#111111', bg2: '#1A1A1A', bg3: '#242424', white: '#FFFFFF', sec: '#D9D9D9', muted: '#A6A6A6', border: 'rgba(255,255,255,0.10)' };
  const sectionPad = { padding: '96px 32px' };
  const maxW = { maxWidth: 1280, margin: '0 auto' };
  const SectionLabel = ({ children }) => (
    <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 12 }}>{children}</div>
  );
  const H2 = ({ children, style={} }) => (
    <h2 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(26px,3.5vw,40px)', color: C.white, margin: '0 0 16px', lineHeight: 1.2, ...style }}>{children}</h2>
  );
  const Body = ({ children, style={} }) => (
    <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 17, color: C.sec, lineHeight: 1.75, margin: '0 0 16px', ...style }}>{children}</p>
  );
  const CTABtn = ({ primary, children, onClick }) => (
    <button onClick={onClick} style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 14, background: primary ? C.coral : 'transparent', color: primary ? '#000' : C.white, border: primary ? 'none' : '1px solid rgba(255,255,255,0.25)', padding: '14px 28px', borderRadius: 7, cursor: 'pointer', transition: 'all 0.2s' }}
      onMouseEnter={e => e.target.style.background = primary ? '#ff4f51' : 'rgba(255,255,255,0.08)'}
      onMouseLeave={e => e.target.style.background = primary ? C.coral : 'transparent'}
    >{children}</button>
  );

  const etapas = [
    {
      letter: 'P', title: 'Planejamento Comercial',
      pergunta: 'Para quem vender, com qual proposta de valor, por quais canais e com quais metas?',
      entregas: ['Diagnóstico da operação comercial atual','Análise da maturidade de marketing e vendas','Definição ou refinamento do ICP','Segmentação de mercado','Proposta de valor','Objetivos comerciais','Canais prioritários','Indicadores comerciais','Plano de ação comercial e de marketing'],
      resultado: 'Clareza estratégica.',
    },
    {
      letter: 'A', title: 'Atração e Prospecção',
      pergunta: 'Como encontrar, atrair, despertar interesse e iniciar relacionamento com o cliente certo?',
      entregas: ['Estratégia de conteúdo','Landing pages','Campanhas de atração','Fluxos de nutrição','Segmentação outbound','Cadências comerciais','Scripts de abordagem','Critérios de qualificação','Regras de passagem para vendas'],
      resultado: 'Geração de oportunidades qualificadas.',
    },
    {
      letter: 'C', title: 'Conversão e Processo Comercial',
      pergunta: 'Como transformar uma oportunidade qualificada em uma venda acompanhável, rastreável e previsível?',
      entregas: ['Desenho do funil comercial','Etapas do pipeline','Critérios de avanço','Regras de follow-up','Política de uso do CRM','Campos obrigatórios','Gestão de propostas','Motivos de perda','Governança do funil'],
      resultado: 'Pipeline controlável.',
    },
    {
      letter: 'T', title: 'Tecnologia e Automação',
      pergunta: 'Quais tecnologias precisam sustentar a máquina comercial para que ela funcione com controle, automação e dados?',
      entregas: ['Definição de ferramentas','Papel de cada tecnologia na jornada comercial','Organização dos dados','Integrações prioritárias','Automações essenciais','Indicadores acompanháveis'],
      resultado: 'Automação, rastreabilidade e dados.',
    },
    {
      letter: 'O', title: 'Otimização e Gestão Contínua',
      pergunta: 'O que os dados mostram e quais ajustes precisam ser feitos para melhorar o resultado?',
      entregas: ['Reuniões comerciais','Análise recorrente de indicadores','Performance por canal','Performance por vendedor','Conversão por etapa','Motivos de perda','Revisão de campanhas','Revisão de cadências','Planos de ação','Relatórios executivos'],
      resultado: 'Previsibilidade e melhoria contínua.',
    },
  ];

  const [activeEtapa, setActiveEtapa] = React.useState(0);

  return (
    <div style={{ background: C.bg }}>
      {/* Hero */}
      <section style={{ ...sectionPad, paddingTop: 160, background: 'radial-gradient(ellipse 70% 50% at 50% 0%, rgba(252,100,102,0.07) 0%, transparent 70%), #111111', textAlign: 'center' }}>
        <div style={{ ...maxW, maxWidth: 860, margin: '0 auto' }}>
          <SectionLabel>Metodologia proprietária BARPES DIGITAL</SectionLabel>
          <h1 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(32px,5vw,56px)', color: C.white, margin: '0 0 24px', lineHeight: 1.12 }}>
            PACTO Comercial: a metodologia para estruturar{' '}
            <span style={{ color: C.coral }}>crescimento previsível</span>
          </h1>
          <Body style={{ maxWidth: 640, margin: '0 auto 36px' }}>Planejamento, Atração, Conversão, Tecnologia e Otimização conectados em uma única arquitetura comercial.</Body>
          <CTABtn primary onClick={() => navigate('diagnostico')}>Agendar Diagnóstico Comercial</CTABtn>
        </div>
      </section>

      {/* O que é */}
      <section style={{ ...sectionPad, background: C.bg2, borderTop: '1px solid rgba(255,255,255,0.07)' }}>
        <div style={{ ...maxW, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="hero-grid">
          <div>
            <SectionLabel>O que é</SectionLabel>
            <H2>Uma metodologia para estruturar uma máquina comercial mais previsível</H2>
            <Body>A Metodologia PACTO Comercial é o modelo da BARPES DIGITAL para conectar estratégia, prospecção, processo, tecnologia e análise de desempenho em uma única arquitetura.</Body>
            <Body style={{ margin: 0 }}>Crescimento previsível não acontece por ação isolada. Exige compromisso entre liderança, marketing, prospecção, vendas, tecnologia e gestão.</Body>
          </div>
          {/* PACTO Visual */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
            {etapas.map((e, i) => (
              <div key={i} onClick={() => setActiveEtapa(i)} style={{ display: 'flex', alignItems: 'center', gap: 16, background: activeEtapa === i ? 'rgba(252,100,102,0.08)' : C.bg3, border: `1px solid ${activeEtapa === i ? 'rgba(252,100,102,0.35)' : C.border}`, borderRadius: 10, padding: '14px 20px', cursor: 'pointer', transition: 'all 0.2s' }}>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: activeEtapa === i ? C.coral : 'rgba(252,100,102,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'background 0.2s' }}>
                  <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 16, color: activeEtapa === i ? '#000' : C.coral }}>{e.letter}</span>
                </div>
                <div>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 14, color: C.white }}>{e.title}</div>
                  <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted, marginTop: 2 }}>Resultado: {e.resultado}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Etapas detalhadas */}
      <section style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <SectionLabel>As cinco etapas</SectionLabel>
            <H2>Cada etapa com propósito, entregas e resultado esperado</H2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 56 }}>
            {etapas.map((e, i) => {
              const open = activeEtapa === i;
              return (
                <div key={i} style={{ border: `1px solid ${open ? 'rgba(252,100,102,0.3)' : C.border}`, borderRadius: 12, overflow: 'hidden', transition: 'border-color 0.2s' }}>
                  <button onClick={() => setActiveEtapa(open ? -1 : i)} style={{ width: '100%', background: open ? '#1A1A1A' : 'transparent', border: 'none', cursor: 'pointer', padding: '22px 28px', display: 'flex', alignItems: 'center', gap: 18 }}>
                    <div style={{ width: 44, height: 44, borderRadius: 10, background: open ? C.coral : 'rgba(252,100,102,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'background 0.2s' }}>
                      <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 20, color: open ? '#000' : C.coral }}>{e.letter}</span>
                    </div>
                    <div style={{ textAlign: 'left', flex: 1 }}>
                      <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 17, color: C.white }}>{e.title}</div>
                      <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: C.muted, marginTop: 3 }}>{e.pergunta}</div>
                    </div>
                    <span style={{ color: C.coral, fontSize: 20, transition: 'transform 0.2s', transform: open ? 'rotate(45deg)' : 'none' }}>+</span>
                  </button>
                  {open && (
                    <div style={{ padding: '0 28px 28px', background: '#1A1A1A', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }} className="hero-grid">
                      <div>
                        <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 13, color: C.coral, letterSpacing: '1px', textTransform: 'uppercase', marginBottom: 16 }}>Entregas</div>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                          {e.entregas.map(ent => (
                            <div key={ent} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                              <div style={{ width: 5, height: 5, borderRadius: '50%', background: C.coral, flexShrink: 0, marginTop: 7 }} />
                              <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec }}>{ent}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                      <div>
                        <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 13, color: C.coral, letterSpacing: '1px', textTransform: 'uppercase', marginBottom: 16 }}>Pergunta central</div>
                        <p style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 16, color: C.white, lineHeight: 1.6, marginBottom: 24 }}>{e.pergunta}</p>
                        <div style={{ background: 'rgba(252,100,102,0.08)', border: '1px solid rgba(252,100,102,0.2)', borderRadius: 10, padding: '16px 20px' }}>
                          <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted, marginBottom: 4 }}>Resultado esperado</div>
                          <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.coral }}>{e.resultado}</div>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
          <div style={{ textAlign: 'center', background: C.bg3, border: '1px solid rgba(252,100,102,0.15)', borderRadius: 16, padding: '48px 32px' }}>
            <SectionLabel>Próximo passo</SectionLabel>
            <H2 style={{ marginBottom: 12 }}>Quero aplicar o PACTO Comercial na minha empresa.</H2>
            <Body style={{ maxWidth: 540, margin: '0 auto 32px' }}>Inicie com um diagnóstico consultivo e entenda como o PACTO pode ser aplicado na sua operação.</Body>
            <CTABtn primary onClick={() => navigate('diagnostico')}>Agendar Diagnóstico Comercial</CTABtn>
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { Metodologia });