const Planejamento = ({ navigate }) => {
  const C = {
    coral: '#fc6466', bg: '#111111', bg2: '#1A1A1A', bg3: '#242424', bg4: '#2F2F2F',
    white: '#FFFFFF', sec: '#D9D9D9', muted: '#A6A6A6',
    border: 'rgba(252,100,102,0.25)',
    borderSoft: 'rgba(255,255,255,0.10)'
  };
  const sectionPad = { padding: '96px 32px' };
  const maxW = { maxWidth: 1280, margin: '0 auto' };

  // ── Reusable UI ────────────────────────────────────────────────────────────
  const Tag = ({ children }) =>
  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 16, border: `1px solid ${C.border}`, display: 'inline-block', padding: '5px 12px', borderRadius: 4 }}>{children}</div>;

  const Eyebrow = ({ children }) =>
  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 14 }}>{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, letterSpacing: '-0.01em', ...style }}>{children}</h2>;

  const Body = ({ children, style = {} }) =>
  <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 16, color: C.sec, lineHeight: 1.8, margin: '0 0 16px', ...style }}>{children}</p>;

  const Btn = ({ 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 ${C.coral}`, padding: '14px 28px', borderRadius: 6, cursor: 'pointer', transition: 'transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease', display: 'inline-block' }}
  onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';if (primary) e.currentTarget.style.boxShadow = '0 8px 24px rgba(252,100,102,0.4)';else e.currentTarget.style.background = 'rgba(252,100,102,0.1)';}}
  onMouseLeave={(e) => {e.currentTarget.style.transform = '';e.currentTarget.style.boxShadow = '';if (!primary) e.currentTarget.style.background = 'transparent';}}>
      {children}</button>;

  // ── Reveal + Progress bar ─────────────────────────────────────────────────
  React.useEffect(() => {


    const els = document.querySelectorAll('[data-plano-reveal]');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const delay = parseInt(entry.target.dataset.planoReveal) || 0;
          setTimeout(() => {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0) translateX(0)';
          }, delay);
          obs.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach((el) => obs.observe(el));

    return () => {};
  }, []);

  const reveal = (delay = 0, axis = 'y') => ({
    opacity: 0,
    transform: axis === 'x' ? 'translateX(-16px)' : 'translateY(24px)',
    transition: 'opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1)',
    'data-plano-reveal': String(delay)
  });

  // ── Data ───────────────────────────────────────────────────────────────────
  const swotLeituras = [
  { title: 'Alavancagem', subtitle: 'Forças × Oportunidades', desc: 'Identificar como as forças internas podem ser utilizadas para capturar oportunidades de mercado.' },
  { title: 'Vulnerabilidade', subtitle: 'Forças × Ameaças', desc: 'Avaliar como ameaças externas podem impactar pontos fortes da empresa.' },
  { title: 'Restrição', subtitle: 'Fraquezas × Oportunidades', desc: 'Entender como fraquezas internas podem limitar o aproveitamento das oportunidades.' },
  { title: 'Crise', subtitle: 'Fraquezas × Ameaças', desc: 'Mapear situações em que fraquezas internas combinadas com ameaças externas geram riscos relevantes ao negócio.' }];


  const bscPerspectivas = [
  { title: 'Aprendizagem Organizacional', desc: 'Desenvolvimento da equipe, domínio de ferramentas, capacitação comercial, melhoria da cultura de dados e evolução da maturidade de gestão.' },
  { title: 'Clientes', desc: 'Definição de ICP, segmentação, posicionamento, proposta de valor, jornada de compra, experiência comercial e retenção.' },
  { title: 'Processos', desc: 'Estruturação do funil, canais de aquisição, rotinas de prospecção, cadências, CRM, automações, qualificação, propostas e follow-up.' },
  { title: 'Financeiro', desc: 'Crescimento de receita, previsibilidade comercial, CAC, ROI das campanhas, taxa de conversão, ticket médio, margem e geração de oportunidades qualificadas.' }];


  const kpisPorArea = [
  { area: 'Prospecção', items: ['Leads identificados', 'Leads abordados', 'Taxa de resposta', 'Reuniões agendadas', 'Oportunidades qualificadas', 'Conversão por canal'] },
  { area: 'Marketing', items: ['Visitantes', 'Leads gerados', 'CPL', 'Taxa de conversão', 'Origem dos leads', 'Engajamento', 'Performance de campanhas', 'MQLs'] },
  { area: 'Vendas', items: ['SQLs', 'Propostas emitidas', 'Taxa de fechamento', 'Ciclo de vendas', 'Ticket médio', 'Receita gerada', 'Forecast comercial'] },
  { area: 'Gestão', items: ['Cumprimento de ações', 'Produtividade da equipe', 'Uso do CRM', 'Qualidade dos registros', 'Aderência aos processos', 'Análise crítica de resultados'] }];


  const pdca = [
  { letra: 'P', label: 'Plan', titulo: 'Planejar', desc: 'Diagnóstico, SWOT, BSC, objetivos estratégicos, KPIs, iniciativas e desenho do modelo comercial.' },
  { letra: 'D', label: 'Do', titulo: 'Executar', desc: 'Implantação dos processos, ferramentas, campanhas, rotinas, cadências e automações.' },
  { letra: 'C', label: 'Check', titulo: 'Verificar', desc: 'Monitoramento de indicadores, análise de conversões, avaliação de gargalos e acompanhamento da performance.' },
  { letra: 'A', label: 'Act', titulo: 'Agir', desc: 'Correção de desvios, melhoria dos processos, replanejamento de ações e evolução contínua do modelo.' }];


  const processos = [
  { title: 'Definição de ICP', desc: 'Determinar o perfil de cliente ideal e os segmentos prioritários.' },
  { title: 'Geração de leads', desc: 'Estruturar canais inbound, outbound, indicações, eventos, parcerias e campanhas.' },
  { title: 'Qualificação', desc: 'Definir critérios para diferenciar leads frios, leads qualificados e oportunidades reais.' },
  { title: 'Gestão do funil', desc: 'Organizar etapas comerciais, responsáveis, prazos e probabilidades de avanço.' },
  { title: 'Follow-up', desc: 'Padronizar cadências de relacionamento e recuperação de oportunidades.' },
  { title: 'Propostas', desc: 'Estruturar processo de elaboração, envio, acompanhamento e fechamento.' },
  { title: 'CRM', desc: 'Garantir registro, rastreabilidade, histórico, indicadores e gestão das oportunidades.' },
  { title: 'Indicadores', desc: 'Monitorar desempenho por canal, etapa, vendedor, campanha e resultado financeiro.' }];


  const relatorioBlocos = [
  { title: 'Resumo executivo', desc: 'Visão geral dos principais resultados, avanços, desvios e prioridades.' },
  { title: 'Indicadores estratégicos', desc: 'Avaliação dos KPIs definidos no planejamento.' },
  { title: 'Indicadores comerciais', desc: 'Evolução de leads, oportunidades, propostas, vendas e conversões.' },
  { title: 'Análise de gargalos', desc: 'Pontos de perda no funil, falhas de processo e limitações operacionais.' },
  { title: 'Status das iniciativas', desc: 'Acompanhamento de ações planejadas, responsáveis e prazos.' },
  { title: 'Recomendações', desc: 'Decisões sugeridas, ajustes necessários e novas prioridades.' },
  { title: 'Plano de ação', desc: 'Próximos passos para correção, melhoria ou aceleração dos resultados.' }];


  // ── Render ────────────────────────────────────────────────────────────────
  return (
    <div style={{ background: C.bg }}>

      {/* Reading Progress Bar */}
      <div id="plano-progress" data-progress-bar="" style={{ position: 'fixed', top: 80, left: 0, height: 2, background: C.coral, zIndex: 999, width: '0%', transition: 'width 80ms linear', pointerEvents: 'none' }} />

      {/* ── Hero ─────────────────────────────────────────────────────────── */}
      <section className="page-hero" style={{ ...sectionPad, paddingTop: 140, paddingBottom: 80, background: `linear-gradient(135deg, ${C.bg} 0%, ${C.bg2} 100%)`, overflow: 'hidden', position: 'relative' }}>
        {/* Subtle radial coral glow */}
        <div style={{ position: 'absolute', top: -120, right: -120, width: 480, height: 480, background: 'radial-gradient(circle, rgba(252,100,102,0.10), transparent 70%)', pointerEvents: 'none' }} />
        <div style={{ ...maxW, position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center' }} className="hero-grid">
            <div>
              <div data-plano-reveal="0" style={reveal(0)}>
                <Tag>Planejamento Estratégico</Tag>
              </div>
              <h1 data-plano-reveal="100" style={{ ...reveal(100), fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(30px,4.5vw,52px)', color: C.white, margin: '0 0 24px', lineHeight: 1.12, letterSpacing: '-0.015em' }}>
                Planejamento Estratégico da<br /><span style={{ color: C.coral }}>Prospecção.</span>
              </h1>
              <p data-plano-reveal="220" style={{ ...reveal(220), fontFamily: 'Arial,sans-serif', fontSize: 17, color: C.sec, lineHeight: 1.75, maxWidth: 580, marginBottom: 20 }}>
                A base para transformar a captação de oportunidades em um processo previsível, mensurável e orientado a resultado. Antes de implantar ferramentas, campanhas, automações ou rotinas comerciais, é necessário compreender o contexto do negócio, seus diferenciais, riscos, gargalos e reais oportunidades de crescimento.
              </p>
              <div data-plano-reveal="350" style={{ ...reveal(350), background: 'rgba(252,100,102,0.07)', border: `1px solid ${C.border}`, borderRadius: 12, padding: '20px 24px', marginBottom: 32 }}>
                <p style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 16, color: C.white, lineHeight: 1.55, margin: 0 }}>
                  O planejamento organiza a estratégia <span style={{ color: C.coral }}>antes da execução</span>, conectando análise de mercado, posicionamento, geração de demanda, qualificação, gestão comercial e indicadores em um único modelo.
                </p>
              </div>
              <div data-plano-reveal="480" style={{ ...reveal(480), display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Btn primary onClick={() => navigate('diagnostico')}>Solicitar Diagnóstico</Btn>
                <Btn primary={false} onClick={() => {const el = document.getElementById('swot-bsc');if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });}}>Conhecer o método</Btn>
              </div>
            </div>

            {/* Right: Stacked summary cards */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }} className="hero-visual">
              {[
              { n: '01', t: 'Diagnóstico e contexto', d: 'SWOT integrada com avaliação de riscos.' },
              { n: '02', t: 'Direção estratégica', d: 'Missão, visão, valores e objetivos BSC.' },
              { n: '03', t: 'KPIs e iniciativas', d: 'Indicadores por área e ações priorizadas.' },
              { n: '04', t: 'Implantação e PDCA', d: 'Execução cíclica com melhoria contínua.' },
              { n: '05', t: 'Análise crítica', d: 'Rotina mensal de relatórios à alta gestão.' }].
              map((card, i) =>
              <div key={i}
              data-plano-reveal={String(500 + i * 70)}
              style={{
                ...reveal(500 + i * 70, 'x'),
                display: 'flex', alignItems: 'center', gap: 18,
                background: '#0d0d0d',
                border: '1px solid rgba(252,100,102,0.18)',
                borderRadius: 14, padding: '16px 22px',
                transition: 'all 0.3s ease',
                boxShadow: '0 2px 12px rgba(0,0,0,0.4)'
              }}
              onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'rgba(252,100,102,0.5)';e.currentTarget.style.transform = 'translateX(4px)';}}
              onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'rgba(252,100,102,0.18)';e.currentTarget.style.transform = '';}}>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 22, color: C.coral, letterSpacing: '-0.02em', minWidth: 40 }}>{card.n}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 14, color: C.white, marginBottom: 3 }}>{card.t}</div>
                    <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted, lineHeight: 1.5 }}>{card.d}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ── Por que o planejamento existe ────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg, borderTop: `1px solid ${C.borderSoft}` }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-plano-reveal="0" style={reveal(0)}><Eyebrow>O Problema</Eyebrow></div>
            <div data-plano-reveal="80" style={reveal(80)}>
              <H2>Vender mais sem clareza estratégica é tentar acertar no escuro</H2>
            </div>
            <div data-plano-reveal="180" style={reveal(180)}>
              <Body>Muitas empresas operam sem definir quais mercados priorizar, quais perfis buscar, quais canais utilizar e quais indicadores acompanhar. Como consequência, a prospecção se torna dispersa, o marketing atua sem conexão com vendas e a área comercial passa a depender de indicações, esforços individuais e ações pontuais.</Body>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="grid-3">
            {[
            { t: 'Prospecção dispersa', d: 'Esforços sem direção, canais desconectados, alvos pouco claros.' },
            { t: 'Marketing sem vendas', d: 'Geração de leads sem critério, oportunidades perdidas no meio do funil.' },
            { t: 'Comercial dependente de indicação', d: 'Receita pouco previsível, picos seguidos de quedas, sem rastreabilidade.' }].
            map((card, i) =>
            <div key={i} data-plano-reveal={String(i * 100)} style={{ ...reveal(i * 100), background: C.bg2, border: `1px solid ${C.borderSoft}`, borderRadius: 12, padding: 28 }} className="service-card-hover">
                <div style={{ width: 8, height: 8, background: C.coral, borderRadius: 2, marginBottom: 16 }} />
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white, marginBottom: 10 }}>{card.t}</div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.7, margin: 0 }}>{card.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── SWOT + BSC + Riscos ──────────────────────────────────────────── */}
      <section id="swot-bsc" style={{ ...sectionPad, background: C.bg2 }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-plano-reveal="0" style={reveal(0)}><Eyebrow>Diagnóstico Integrado</Eyebrow></div>
            <div data-plano-reveal="80" style={reveal(80)}>
              <H2>SWOT, BSC e Avaliação de Riscos em um só modelo</H2>
            </div>
            <div data-plano-reveal="180" style={reveal(180)}>
              <Body>O planejamento integra a Matriz SWOT e o Balanced Scorecard, aprofundados por uma camada de avaliação de risco. Cada fator crítico é classificado por criticidade, probabilidade e impacto — e convertido em direcionamento prático.</Body>
            </div>
          </div>

          <div data-plano-reveal="280" style={{ ...reveal(280), marginBottom: 24, fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            Quatro leituras estratégicas
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 16 }} className="grid-4">
            {swotLeituras.map((item, i) =>
            <div key={i} data-plano-reveal={String(i * 90)}
            style={{
              ...reveal(i * 90),
              background: '#0d0d0d',
              border: '1px solid rgba(252,100,102,0.18)',
              borderRadius: 14,
              padding: '28px 28px 26px',
              position: 'relative',
              transition: 'all 0.3s ease'
            }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'rgba(252,100,102,0.5)';e.currentTarget.style.transform = 'translateY(-4px)';e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,0,0,0.4)';}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'rgba(252,100,102,0.18)';e.currentTarget.style.transform = '';e.currentTarget.style.boxShadow = '';}}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 12 }}>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 900, fontSize: 22, color: C.white, letterSpacing: '-0.01em' }}>{item.title}</div>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 11, color: C.coral, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{item.subtitle}</div>
                </div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.7, margin: 0 }}>{item.desc}</p>
              </div>
            )}
          </div>

          <div data-plano-reveal="500" style={{ ...reveal(500), marginTop: 32, background: 'rgba(252,100,102,0.06)', border: `1px solid ${C.border}`, borderRadius: 10, padding: '18px 22px' }}>
            <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.7, margin: 0 }}>
              Com isso, o planejamento passa a indicar não apenas <strong style={{ color: C.white }}>onde a empresa está</strong>, mas também <strong style={{ color: C.white }}>onde concentrar esforço</strong>, <strong style={{ color: C.white }}>quais riscos controlar</strong> e <strong style={{ color: C.white }}>quais alavancas podem acelerar o crescimento</strong>.
            </p>
          </div>
        </div>
      </section>

      {/* ── Missão / Visão / Valores + BSC perspectivas ──────────────────── */}
      <section style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-plano-reveal="0" style={reveal(0)}><Eyebrow>Direção Estratégica</Eyebrow></div>
            <div data-plano-reveal="80" style={reveal(80)}>
              <H2>Missão, visão e objetivos que orientam decisões, não enfeitam paredes</H2>
            </div>
            <div data-plano-reveal="180" style={reveal(180)}>
              <Body>No contexto de prospecção, marketing e vendas, esses elementos saem do campo institucional e orientam decisões práticas. Os objetivos estratégicos são estruturados considerando os fatores críticos e as quatro perspectivas do Balanced Scorecard.</Body>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 20 }} className="grid-4">
            {bscPerspectivas.map((p, i) =>
            <div key={i} data-plano-reveal={String(i * 100)}
            style={{ ...reveal(i * 100), display: 'flex', gap: 20, background: C.bg2, border: `1px solid ${C.borderSoft}`, borderRadius: 12, padding: '28px 28px 26px', transition: 'all 0.3s ease' }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'rgba(252,100,102,0.4)';e.currentTarget.style.transform = 'translateY(-3px)';}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = C.borderSoft;e.currentTarget.style.transform = '';}}>
                <div style={{ minWidth: 48, height: 48, borderRadius: 10, background: 'rgba(252,100,102,0.12)', border: '1px solid rgba(252,100,102,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 16, color: C.coral, flexShrink: 0 }}>
                  {String(i + 1).padStart(2, '0')}
                </div>
                <div>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white, marginBottom: 8 }}>{p.title}</div>
                  <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.7, margin: 0 }}>{p.desc}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── KPIs e Iniciativas ───────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: `linear-gradient(180deg, ${C.bg2} 0%, ${C.bg} 100%)` }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-plano-reveal="0" style={reveal(0)}><Eyebrow>KPIs e Iniciativas</Eyebrow></div>
            <div data-plano-reveal="80" style={reveal(80)}>
              <H2>O que não é medido não evolui</H2>
            </div>
            <div data-plano-reveal="180" style={reveal(180)}>
              <Body>Cada objetivo estratégico é acompanhado por indicadores-chave de desempenho e por iniciativas com responsáveis, prazos e critérios de sucesso. Indicadores típicos por área:</Body>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }} className="grid-4">
            {kpisPorArea.map((k, i) =>
            <div key={i} data-plano-reveal={String(i * 100)}
            style={{ ...reveal(i * 100), background: '#0d0d0d', border: `1px solid ${C.borderSoft}`, borderRadius: 14, padding: '28px 24px', transition: 'all 0.3s ease' }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'rgba(252,100,102,0.4)';e.currentTarget.style.transform = 'translateY(-4px)';}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = C.borderSoft;e.currentTarget.style.transform = '';}}>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, letterSpacing: '0.22em', textTransform: 'uppercase', marginBottom: 8 }}>
                  Área {String(i + 1).padStart(2, '0')}
                </div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 20, color: C.white, marginBottom: 18, paddingBottom: 14, borderBottom: '1px solid rgba(252,100,102,0.18)' }}>{k.area}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {k.items.map((item, ii) =>
                <div key={ii} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                      <div style={{ width: 4, height: 4, background: C.coral, borderRadius: '50%', marginTop: 8, flexShrink: 0 }} />
                      <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: C.sec, lineHeight: 1.55 }}>{item}</span>
                    </div>
                )}
                </div>
              </div>
            )}
          </div>

          <div data-plano-reveal="500" style={{ ...reveal(500), marginTop: 36, textAlign: 'center' }}>
            <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 15, color: C.muted, lineHeight: 1.7, maxWidth: 720, margin: '0 auto' }}>
              As iniciativas estratégicas envolvem revisão de posicionamento, criação de campanhas, estruturação de cadências, implantação de CRM, automação de marketing, dashboards, capacitação e rotinas gerenciais. <span style={{ color: C.white }}>O planejamento se converte em plano de ação executável e revisado periodicamente.</span>
            </p>
          </div>
        </div>
      </section>

      {/* ── Ciclo PDCA ───────────────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-plano-reveal="0" style={reveal(0)}><Eyebrow>Ciclo de Gestão</Eyebrow></div>
            <div data-plano-reveal="80" style={reveal(80)}>
              <H2>O planejamento é o ponto de partida do PDCA</H2>
            </div>
            <div data-plano-reveal="180" style={reveal(180)}>
              <Body>A lógica do PDCA aplicada à Prospecção Estratégica reduz a dependência de decisões intuitivas e aumenta a capacidade de gerir geração de demanda e operação comercial com método, dados e previsibilidade.</Body>
            </div>
          </div>

          {/* PDCA Wheel */}
          <div style={{ position: 'relative' }}>
            {/* Linha conectora */}
            <div style={{ position: 'absolute', top: 60, left: 'calc(12% + 8px)', right: 'calc(12% + 8px)', height: 2, background: `linear-gradient(90deg, transparent, ${C.coral} 20%, ${C.coral} 80%, transparent)`, zIndex: 0, opacity: 0.4, pointerEvents: 'none' }} />

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, position: 'relative', zIndex: 1 }} className="grid-4">
              {pdca.map((step, i) =>
              <div key={i} data-plano-reveal={String(i * 110)}
              style={{ ...reveal(i * 110), background: '#0d0d0d', border: '1px solid rgba(252,100,102,0.2)', borderRadius: 16, padding: '32px 24px 28px', textAlign: 'center', boxShadow: '0 2px 16px rgba(0,0,0,0.4)', transition: 'all 0.35s ease' }}
              onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'rgba(252,100,102,0.6)';e.currentTarget.style.transform = 'translateY(-6px)';e.currentTarget.style.boxShadow = '0 20px 40px rgba(252,100,102,0.15)';}}
              onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'rgba(252,100,102,0.2)';e.currentTarget.style.transform = '';e.currentTarget.style.boxShadow = '0 2px 16px rgba(0,0,0,0.4)';}}>
                  <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}>
                    <div style={{ position: 'relative' }}>
                      <div style={{ position: 'absolute', inset: -6, borderRadius: 20, border: '1px dashed rgba(252,100,102,0.4)' }} />
                      <div style={{ width: 64, height: 64, background: '#111', borderRadius: 14, border: '1.5px solid rgba(252,100,102,0.65)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Montserrat,sans-serif', fontWeight: 900, fontSize: 32, color: C.coral }}>
                        {step.letra}
                      </div>
                    </div>
                  </div>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, letterSpacing: '0.22em', textTransform: 'uppercase', marginBottom: 6 }}>{step.label}</div>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 18, color: C.white, marginBottom: 14, paddingBottom: 14, borderBottom: '1px solid rgba(252,100,102,0.15)' }}>{step.titulo}</div>
                  <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: C.sec, lineHeight: 1.65, margin: 0 }}>{step.desc}</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ── Implantação: Inbound + Outbound ─────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg2 }}>
        <div style={maxW}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }} className="hero-grid">
            <div>
              <div data-plano-reveal="0" style={reveal(0)}><Eyebrow>Implantação do Modelo</Eyebrow></div>
              <div data-plano-reveal="80" style={reveal(80)}>
                <H2>Inbound, outbound ou modelo híbrido: como consequência do plano</H2>
              </div>
              <div data-plano-reveal="180" style={reveal(180)}>
                <Body>A escolha entre inbound, outbound ou modelo combinado deve ser consequência do planejamento, não uma decisão isolada. Empresas com ciclos complexos e ticket elevado tendem a se beneficiar de prospecção ativa; empresas com forte busca e potencial de conteúdo capturam valor com inbound. Em muitos casos, a combinação coordenada dos dois canais é o modelo mais eficiente.</Body>
              </div>
              <div data-plano-reveal="280" style={{ ...reveal(280), background: 'rgba(252,100,102,0.07)', border: `1px solid ${C.border}`, borderRadius: 12, padding: '18px 22px', marginTop: 8 }}>
                <p style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 15, color: C.white, lineHeight: 1.6, margin: 0 }}>
                  Marketing e vendas deixam de atuar como áreas separadas e passam a operar em torno do mesmo funil de geração de oportunidades.
                </p>
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
              { titulo: 'Inbound', desc: 'Atrair, educar e converter potenciais clientes por meio de conteúdo, posicionamento, campanhas, páginas, automações e relacionamento digital.', items: ['Conteúdo estratégico', 'SEO e canais digitais', 'Nutrição e automação', 'Conversão em landing pages'] },
              { titulo: 'Outbound', desc: 'Identificar ativamente contas e contatos com potencial de compra, estruturar abordagens personalizadas e cadências comerciais qualificadas.', items: ['Mapeamento de contas e contatos', 'Cadências multicanal', 'Scripts e abordagens', 'Critérios de qualificação'] }].
              map((m, i) =>
              <div key={i} data-plano-reveal={String(i * 120)} style={{ ...reveal(i * 120), background: '#0d0d0d', border: '1px solid rgba(252,100,102,0.2)', borderRadius: 14, padding: '24px 26px' }}>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 22, color: C.coral, marginBottom: 8, letterSpacing: '-0.01em' }}>{m.titulo}</div>
                  <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.7, margin: '0 0 14px' }}>{m.desc}</p>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {m.items.map((it, ii) =>
                  <span key={ii} style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.white, background: 'rgba(252,100,102,0.10)', border: '1px solid rgba(252,100,102,0.25)', padding: '5px 11px', borderRadius: 999 }}>{it}</span>
                  )}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ── Mapeamento dos Processos ─────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-plano-reveal="0" style={reveal(0)}><Eyebrow>Mapeamento de Processos</Eyebrow></div>
            <div data-plano-reveal="80" style={reveal(80)}>
              <H2>Transformando estratégia em rotina operacional</H2>
            </div>
            <div data-plano-reveal="180" style={reveal(180)}>
              <Body>O mapeamento define como as oportunidades são geradas, qualificadas, distribuídas, acompanhadas, convertidas e analisadas. Estabelece papéis, responsabilidades, critérios de passagem, padrões de registro, SLAs comerciais e pontos de controle.</Body>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14 }} className="grid-4">
            {processos.map((p, i) =>
            <div key={i} data-plano-reveal={String(i * 70)}
            style={{ ...reveal(i * 70), background: C.bg2, border: `1px solid ${C.borderSoft}`, borderRadius: 12, padding: '22px 22px 22px', transition: 'all 0.3s ease' }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'rgba(252,100,102,0.5)';e.currentTarget.style.background = '#1f1f1f';}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = C.borderSoft;e.currentTarget.style.background = C.bg2;}}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 14, color: C.coral, letterSpacing: '0.05em' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div style={{ flex: 1, height: 1, background: 'rgba(252,100,102,0.2)' }} />
                </div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 15, color: C.white, marginBottom: 8 }}>{p.title}</div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: C.sec, lineHeight: 1.65, margin: 0 }}>{p.desc}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── Plataforma Qockpit ───────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg3 }}>
        <div style={maxW}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="hero-grid">
            <div>
              <div data-plano-reveal="0" style={reveal(0)}><Eyebrow>Plataforma de Gestão</Eyebrow></div>
              <div data-plano-reveal="80" style={reveal(80)}>
                <H2>Gestão pela plataforma Qockpit</H2>
              </div>
              <div data-plano-reveal="180" style={reveal(180)}>
                <Body>A plataforma Qockpit facilita a gestão prática do planejamento, dos indicadores, dos planos de ação e das rotinas de acompanhamento. Organiza objetivos, KPIs, responsáveis, prazos, iniciativas, evidências, análises críticas e planos de melhoria — sem planilhas soltas ou controles fragmentados.</Body>
              </div>
              <div data-plano-reveal="280" style={reveal(280)}>
                <Body style={{ marginBottom: 0 }}>No contexto da Prospecção Estratégica, o Qockpit funciona como camada de governança. Não substitui ferramentas operacionais de marketing, CRM ou vendas — organiza o cumprimento da estratégia em alto nível, com disciplina de gestão e decisão baseada em dados.</Body>
              </div>
            </div>

            {/* Visual mock dashboard */}
            <div data-plano-reveal="200" style={{ ...reveal(200), background: '#0d0d0d', border: '1px solid rgba(252,100,102,0.25)', borderRadius: 16, padding: 28, boxShadow: '0 20px 60px rgba(0,0,0,0.5)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20, paddingBottom: 14, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
                <div style={{ width: 10, height: 10, background: C.coral, borderRadius: '50%' }} />
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 13, color: C.white, letterSpacing: '0.04em' }}>Qockpit · Painel Estratégico</div>
                <div style={{ marginLeft: 'auto', fontFamily: 'Arial,sans-serif', fontSize: 11, color: C.muted }}>Atualizado agora</div>
              </div>

              <div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 12, marginBottom: 16 }}>
                {[
                { label: 'Objetivos', value: '12', sub: 'no ciclo' },
                { label: 'KPIs ativos', value: '38', sub: '↑ 6 vs mês anterior' },
                { label: 'Iniciativas', value: '24', sub: '18 no prazo' },
                { label: 'Responsáveis', value: '9', sub: 'envolvidos' }].
                map((kpi, i) =>
                <div key={i} style={{ background: C.bg2, border: `1px solid ${C.borderSoft}`, borderRadius: 10, padding: '14px 16px' }}>
                    <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 12, color: C.muted, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>{kpi.label}</div>
                    <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 26, color: C.white, lineHeight: 1, marginBottom: 4, fontVariantNumeric: 'tabular-nums' }}>{kpi.value}</div>
                    <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: C.coral }}>{kpi.sub}</div>
                  </div>
                )}
              </div>

              <div style={{ background: C.bg2, border: `1px solid ${C.borderSoft}`, borderRadius: 10, padding: '14px 16px' }}>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 12, color: C.muted, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10 }}>Iniciativas em andamento</div>
                {[
                { name: 'Implantar cadência outbound: ICP A', pct: 80 },
                { name: 'Revisar funil de vendas no CRM', pct: 55 },
                { name: 'Dashboard de conversão por canal', pct: 30 }].
                map((row, i) =>
                <div key={i} style={{ marginBottom: i < 2 ? 10 : 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                      <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.sec }}>{row.name}</span>
                      <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.white, fontVariantNumeric: 'tabular-nums' }}>{row.pct}%</span>
                    </div>
                    <div style={{ height: 4, background: 'rgba(255,255,255,0.06)', borderRadius: 2, overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: row.pct + '%', background: C.coral, borderRadius: 2 }} />
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Análise Crítica + Relatório Mensal ──────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-plano-reveal="0" style={reveal(0)}><Eyebrow>Análise Crítica</Eyebrow></div>
            <div data-plano-reveal="80" style={reveal(80)}>
              <H2>Comunicação, cobrança e relatório mensal para alta gestão</H2>
            </div>
            <div data-plano-reveal="180" style={reveal(180)}>
              <Body>A implantação não garante, por si só, o resultado. A análise crítica sistemática avalia desempenho dos processos, indicadores e iniciativas, identificando desvios, gargalos e decisões necessárias. A alta gestão acompanha com base em dados objetivos, não em percepções.</Body>
            </div>
          </div>

          <div data-plano-reveal="240" style={{ ...reveal(240), fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 24, textAlign: 'center' }}>
            Estrutura do relatório mensal
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14 }} className="grid-4">
            {relatorioBlocos.map((b, i) =>
            <div key={i} data-plano-reveal={String(i * 70)}
            style={{ ...reveal(i * 70), background: C.bg2, border: `1px solid ${C.borderSoft}`, borderRadius: 12, padding: '22px 22px', position: 'relative', transition: 'all 0.3s ease' }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'rgba(252,100,102,0.45)';e.currentTarget.style.transform = 'translateY(-3px)';}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = C.borderSoft;e.currentTarget.style.transform = '';}}>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 13, color: C.coral, marginBottom: 8, letterSpacing: '0.05em', fontVariantNumeric: 'tabular-nums' }}>{String(i + 1).padStart(2, '0')}</div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 14, color: C.white, marginBottom: 6 }}>{b.title}</div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 12.5, color: C.sec, lineHeight: 1.6, margin: 0 }}>{b.desc}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── Resultado Esperado ──────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: `linear-gradient(180deg, ${C.bg} 0%, ${C.bg2} 100%)` }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', marginBottom: 48, maxWidth: 820, margin: '0 auto 48px' }}>
            <div data-plano-reveal="0" style={reveal(0)}><Eyebrow>Resultado Esperado</Eyebrow></div>
            <div data-plano-reveal="80" style={reveal(80)}>
              <H2>Um modelo comercial mais previsível e orientado por dados</H2>
            </div>
            <div data-plano-reveal="180" style={reveal(180)}>
              <Body>Ao integrar diagnóstico estratégico, análise de riscos, BSC, KPIs, processos, tecnologia e rotina de gestão, a empresa passa a operar com clareza sobre onde está, onde quer chegar, quais indicadores acompanhar e quais ações executar.</Body>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginBottom: 40 }} className="grid-3">
            {[
            { t: 'Mais previsibilidade', d: 'Geração de oportunidades com frequência, qualidade e contexto.' },
            { t: 'Marketing e vendas integrados', d: 'Áreas operando em torno do mesmo funil, com responsabilidades claras.' },
            { t: 'Gestão por dados', d: 'Decisões orientadas por indicadores, prioridades e melhoria contínua.' }].
            map((card, i) =>
            <div key={i} data-plano-reveal={String(i * 100)} style={{ ...reveal(i * 100), background: '#0d0d0d', border: '1px solid rgba(252,100,102,0.25)', borderRadius: 14, padding: '28px 28px 26px' }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(252,100,102,0.12)', border: '1px solid rgba(252,100,102,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                  <svg width="14" height="12" viewBox="0 0 14 12" fill="none"><path d="M1 6L5 10L13 1" stroke="#fc6466" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white, marginBottom: 8 }}>{card.t}</div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.7, margin: 0 }}>{card.d}</p>
              </div>
            )}
          </div>

          <div data-plano-reveal="400" style={{ ...reveal(400), maxWidth: 820, margin: '0 auto', background: 'rgba(252,100,102,0.06)', border: `1px solid ${C.border}`, borderRadius: 12, padding: '24px 28px', textAlign: 'center' }}>
            <p style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 17, color: C.white, lineHeight: 1.6, margin: 0 }}>
              O planejamento estratégico deixa de ser um documento estático e passa a ser o ponto de partida para um <span style={{ color: C.coral }}>sistema de crescimento: planejado, implantado, monitorado e continuamente aperfeiçoado.</span>
            </p>
          </div>
        </div>
      </section>

      {/* ── CTA Final ────────────────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.coral, textAlign: 'center' }}>
        <div style={{ ...maxW, maxWidth: 800 }}>
          <div data-plano-reveal="0" style={reveal(0)}>
            <h2 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(30px,5vw,48px)', color: 'white', margin: '0 0 20px', lineHeight: 1.2, letterSpacing: '-0.01em' }}>
              Pronto para planejar com método?
            </h2>
          </div>
          <div data-plano-reveal="150" style={reveal(150)}>
            <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 17, lineHeight: 1.7, maxWidth: 640, margin: '0 auto 36px', color: 'rgb(255,255,255)' }}>
              Agende um Diagnóstico Estratégico e descubra como aplicar SWOT, BSC, PDCA e Qockpit ao seu cenário comercial.
            </p>
          </div>
          <div data-plano-reveal="300" style={reveal(300)}>
            <button onClick={() => navigate('diagnostico')}
            style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 16, background: 'white', color: C.coral, border: 'none', padding: '18px 40px', borderRadius: 6, cursor: 'pointer', transition: 'transform 0.25s ease, box-shadow 0.25s ease', display: 'inline-block' }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = '0 10px 30px rgba(0,0,0,0.2)';}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = '';e.currentTarget.style.boxShadow = '';}}>
              Solicitar diagnóstico estratégico →
            </button>
            <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, marginTop: 16, color: 'rgb(255,255,255)' }}>Conversa objetiva. Foco em diagnóstico prático.</p>
          </div>
        </div>
      </section>

    </div>);

};

Object.assign(window, { Planejamento });