/* global React */
const { useState } = React;

// ============================================================
// CARROSSEL LINKEDIN · NEW WAY · v2
// 3 direções, 8 telas cada · 1080×1350
// Storytelling + provocador · Marca sem rosto
// ============================================================

const C = {
  aurora: '#7418DA',
  neuralPurple: '#371A82',
  synapse: '#792BB8',
  quantum: '#AA4BEF',
  coreSlate: '#434A54',
  systemGray: '#626A75',
  neuralNight: '#1E242C',
  neuralMist: '#A7AFBA',
  softIface: '#C8CED7',
  lightCanvas: '#EFF1F5',
  // === aliases mapeados para a paleta New Way ===
  // 'ink'        → Neural Night (substitui o preto puro)
  // 'cream'      → Light Canvas (substitui o off-white cream)
  // 'highlight'  → Quantum (substitui o amarelo de destaque)
  // 'highlightInk' → cor de texto sobre o destaque
  ink: '#1E242C',
  cream: '#EFF1F5',
  highlight: '#AA4BEF',
  highlightInk: '#FFFFFF',
};

const GRAD = `linear-gradient(135deg,${C.neuralPurple} 0%,${C.aurora} 50%,${C.quantum} 100%)`;

// Marca de rodapé — discreta, padrão viral
const Footer = ({ dark = false, page, total = 8, hideLogo = false }) => (
  <div style={{
    position: 'absolute', bottom: 32, left: 56, right: 56,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontFamily: 'Inter, sans-serif',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      {!hideLogo && (
        <img src={`assets/marca/logo-horizontal${dark ? '-branco' : ''}.svg`}
             alt="newway" style={{ width: 80, height: 'auto', display: 'block', opacity: 0.85 }} />
      )}
      <span style={{
        fontSize: 16, fontWeight: 500, letterSpacing: '0.02em',
        color: dark ? 'rgba(255,255,255,.6)' : C.systemGray,
      }}>@newway</span>
    </div>
    <div style={{
      fontSize: 16, fontWeight: 500, letterSpacing: '0.05em',
      color: dark ? 'rgba(255,255,255,.6)' : C.systemGray,
      fontFeatureSettings: '"tnum" 1',
    }}>
      {String(page).padStart(2, '0')} <span style={{ opacity: 0.4, margin: '0 4px' }}>/</span> {String(total).padStart(2, '0')}
    </div>
  </div>
);

const SwipeArrow = ({ dark = false }) => (
  <div style={{
    position: 'absolute', bottom: 92, left: 56,
    fontSize: 20, fontWeight: 600, letterSpacing: '0.02em',
    color: dark ? '#fff' : C.coreSlate,
    fontFamily: 'Inter, sans-serif',
    display: 'flex', alignItems: 'center', gap: 12,
  }}>
    arraste pra ler
    <svg width="32" height="20" viewBox="0 0 32 20" fill="none">
      <path d="M2 10 L28 10 M22 4 L28 10 L22 16" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  </div>
);

const Slide = ({ children, bg, color = C.coreSlate, style = {} }) => (
  <div style={{
    width: 1080, height: 1350, background: bg, color,
    fontFamily: 'Inter, sans-serif', position: 'relative', overflow: 'hidden',
    ...style,
  }}>{children}</div>
);

// ============================================================
// DIREÇÃO A · "VERDADES DURAS" — provocador, alto contraste
// Inspiração: Sahil Bloom, Alex Smith
// Paleta: preto profundo + amarelo highlight + roxo accent
// ============================================================

// A1 · Capa hook
const A1 = () => (
  <Slide bg={C.ink} color="#fff">
    {/* numeração serial estilo "verdade #" */}
    <div style={{ padding: '64px 56px 0' }}>
      <div style={{
        display: 'inline-block', padding: '8px 18px',
        background: C.highlight, color: '#fff',
        fontSize: 18, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>5 verdades duras</div>
    </div>
    <div style={{ padding: '0 56px', position: 'absolute', top: 280, left: 0, right: 0 }}>
      <h1 style={{
        fontSize: 132, fontWeight: 800, lineHeight: 0.92, letterSpacing: '-0.04em',
        color: '#fff', margin: 0, textWrap: 'balance',
        fontFamily: 'Inter, sans-serif',
      }}>
        Sua estratégia de IA<br />
        <span style={{
          background: C.highlight, color: '#fff', padding: '0 12px',
          display: 'inline-block', transform: 'rotate(-1deg)', boxDecorationBreak: 'clone',
        }}>vai falhar.</span>
      </h1>
      <p style={{
        fontSize: 32, lineHeight: 1.35, color: 'rgba(255,255,255,.85)',
        marginTop: 56, maxWidth: 840, fontWeight: 400,
      }}>
        E não é problema técnico. É problema de método.
      </p>
    </div>
    <SwipeArrow dark />
    <Footer dark page={1} />
  </Slide>
);

// A2 · Verdade 1
const A2 = () => (
  <Slide bg={C.cream}>
    <div style={{ padding: '72px 64px 0' }}>
      <div style={{
        display: 'inline-block', padding: '6px 14px', marginBottom: 24,
        background: C.ink, color: '#fff',
        fontSize: 18, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>Verdade #1</div>
      <h2 style={{
        fontSize: 96, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
        color: C.ink, margin: 0, textWrap: 'balance',
      }}>
        Piloto de IA<br />não é estratégia.
      </h2>
    </div>
    <div style={{ padding: '64px 64px 0' }}>
      <p style={{
        fontSize: 32, lineHeight: 1.45, color: C.coreSlate, fontWeight: 400,
        margin: 0, maxWidth: 880, textWrap: 'pretty',
      }}>
        É experimento. E experimento sem hipótese clara{' '}
        <span style={{ background: C.highlight, padding: '0 6px', fontWeight: 600, color: '#fff' }}>
          é só custo.
        </span>
      </p>
      {/* Visual mark — selo */}
      <div style={{
        marginTop: 80, display: 'flex', alignItems: 'center', gap: 24,
        padding: 32, border: `2px solid ${C.ink}`, background: '#fff',
      }}>
        <div style={{
          width: 56, height: 56, background: C.ink, color: C.highlight,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 28, fontWeight: 800,
        }}>!</div>
        <div style={{ fontSize: 22, fontWeight: 500, color: C.ink, lineHeight: 1.4 }}>
          73% dos pilotos morrem em 6 meses.<br />
          <span style={{ color: C.systemGray, fontWeight: 400 }}>Não por bug — por falta de KPI.</span>
        </div>
      </div>
    </div>
    <Footer page={2} />
  </Slide>
);

// A3 · Verdade 2
const A3 = () => (
  <Slide bg="#fff">
    <div style={{ padding: '72px 64px 0' }}>
      <div style={{
        display: 'inline-block', padding: '6px 14px', marginBottom: 24,
        background: C.ink, color: '#fff',
        fontSize: 18, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>Verdade #2</div>
      <h2 style={{
        fontSize: 96, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
        color: C.ink, margin: 0, textWrap: 'balance',
      }}>
        Quem decide<br />não pode<br />ser TI.
      </h2>
    </div>
    <div style={{ padding: '56px 64px 0' }}>
      <p style={{
        fontSize: 30, lineHeight: 1.45, color: C.coreSlate, fontWeight: 400,
        margin: 0, maxWidth: 880,
      }}>
        TI implementa. Negócio decide o que vale implementar.
      </p>
      {/* Diagrama simples */}
      <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1fr 80px 1fr', gap: 0, alignItems: 'stretch' }}>
        <div style={{
          background: '#FFF1F1', border: `2px solid ${C.ink}`, padding: 28,
        }}>
          <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: C.ink, marginBottom: 12 }}>
            ✗ ERRADO
          </div>
          <div style={{ fontSize: 24, fontWeight: 600, color: C.ink, lineHeight: 1.3, marginBottom: 8 }}>
            TI lidera, negócio "valida"
          </div>
          <div style={{ fontSize: 18, color: C.systemGray, lineHeight: 1.4 }}>
            Vira projeto de tecnologia que ninguém usa.
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="40" height="20" viewBox="0 0 40 20" fill="none">
            <path d="M2 10 L36 10 M30 4 L36 10 L30 16" stroke={C.ink} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div style={{
          background: 'rgba(116,24,218,.08)', border: `2px solid ${C.aurora}`, padding: 28,
        }}>
          <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: C.aurora, marginBottom: 12 }}>
            ✓ CERTO
          </div>
          <div style={{ fontSize: 24, fontWeight: 600, color: C.ink, lineHeight: 1.3, marginBottom: 8 }}>
            Negócio lidera, TI executa
          </div>
          <div style={{ fontSize: 18, color: C.systemGray, lineHeight: 1.4 }}>
            Vira alavanca operacional com dono claro.
          </div>
        </div>
      </div>
    </div>
    <Footer page={3} />
  </Slide>
);

// A4 · Verdade 3
const A4 = () => (
  <Slide bg={C.ink} color="#fff">
    <div style={{ padding: '72px 64px 0' }}>
      <div style={{
        display: 'inline-block', padding: '6px 14px', marginBottom: 24,
        background: C.highlight, color: '#fff',
        fontSize: 18, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>Verdade #3</div>
      <h2 style={{
        fontSize: 96, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
        color: '#fff', margin: 0, textWrap: 'balance',
      }}>
        Métrica<br />vem antes<br />do modelo.
      </h2>
    </div>
    <div style={{ padding: '56px 64px 0' }}>
      <p style={{
        fontSize: 30, lineHeight: 1.45, color: 'rgba(255,255,255,.85)', fontWeight: 400,
        margin: 0, maxWidth: 880,
      }}>
        Se você não sabe medir, não vai saber se funcionou.
      </p>
      <div style={{
        marginTop: 64, padding: 36, background: 'rgba(255,255,255,.06)',
        border: '1px solid rgba(255,255,255,.18)',
      }}>
        <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', color: C.quantum, marginBottom: 24 }}>
          Pergunte antes de começar
        </div>
        {[
          'Que decisão essa IA vai melhorar?',
          'Qual o número que indica sucesso?',
          'Em quanto tempo a gente para se não funcionar?',
        ].map((q, i) => (
          <div key={i} style={{
            padding: '20px 0', borderTop: i ? '1px solid rgba(255,255,255,.12)' : 'none',
            fontSize: 26, fontWeight: 500, color: '#fff', lineHeight: 1.4,
            display: 'flex', gap: 20,
          }}>
            <span style={{ color: C.quantum, fontWeight: 700, fontFeatureSettings: '"tnum" 1' }}>0{i + 1}</span>
            <span>{q}</span>
          </div>
        ))}
      </div>
    </div>
    <Footer dark page={4} />
  </Slide>
);

// A5 · Verdade 4
const A5 = () => (
  <Slide bg={C.cream}>
    <div style={{ padding: '72px 64px 0' }}>
      <div style={{
        display: 'inline-block', padding: '6px 14px', marginBottom: 24,
        background: C.ink, color: '#fff',
        fontSize: 18, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>Verdade #4</div>
      <h2 style={{
        fontSize: 96, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
        color: C.ink, margin: 0, textWrap: 'balance',
      }}>
        IA boa<br />se descomissiona.
      </h2>
    </div>
    <div style={{ padding: '56px 64px 0' }}>
      <p style={{
        fontSize: 30, lineHeight: 1.45, color: C.coreSlate, fontWeight: 400,
        margin: 0, maxWidth: 880,
      }}>
        Se você não consegue desligar, é porque virou{' '}
        <span style={{ background: C.highlight, padding: '0 6px', fontWeight: 600, color: '#fff' }}>
          dependência, não ferramenta.
        </span>
      </p>
      <div style={{
        marginTop: 64, padding: 36, background: '#fff', border: `2px solid ${C.ink}`,
      }}>
        <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', color: C.systemGray, marginBottom: 16 }}>
          Teste do desligamento
        </div>
        <div style={{ fontSize: 26, fontWeight: 500, color: C.ink, lineHeight: 1.45 }}>
          Se a sua IA sair do ar amanhã, o que acontece com a operação?
        </div>
        <div style={{
          marginTop: 24, paddingTop: 20, borderTop: `1px solid ${C.softIface}`,
          fontSize: 20, color: C.systemGray, lineHeight: 1.4,
        }}>
          <strong style={{ color: C.aurora, fontWeight: 600 }}>Resposta saudável:</strong> performance cai, mas o time opera.<br />
          <strong style={{ color: '#C84B4B', fontWeight: 600 }}>Resposta de risco:</strong> ninguém sabe o que fazer.
        </div>
      </div>
    </div>
    <Footer page={5} />
  </Slide>
);

// A6 · Verdade 5 (a mais provocadora — fica antes do CTA)
const A6 = () => (
  <Slide bg={C.aurora} color="#fff">
    <div style={{ padding: '72px 64px 0' }}>
      <div style={{
        display: 'inline-block', padding: '6px 14px', marginBottom: 24,
        background: '#fff', color: C.aurora,
        fontSize: 18, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>Verdade #5</div>
      <h2 style={{
        fontSize: 116, fontWeight: 800, lineHeight: 0.92, letterSpacing: '-0.04em',
        color: '#fff', margin: 0, textWrap: 'balance',
      }}>
        A maioria<br />não precisa de IA.
      </h2>
    </div>
    <div style={{ padding: '56px 64px 0' }}>
      <p style={{
        fontSize: 32, lineHeight: 1.4, color: '#fff', fontWeight: 500,
        margin: 0, maxWidth: 880, textWrap: 'pretty',
      }}>
        Precisa de processo claro. De dado limpo. De decisão consistente.
      </p>
      <p style={{
        fontSize: 28, lineHeight: 1.45, color: 'rgba(255,255,255,.85)', fontWeight: 400,
        margin: '32px 0 0', maxWidth: 880,
      }}>
        IA acelera o que já funciona. <strong style={{ fontWeight: 700, color: '#fff' }}>Não conserta o que não funciona.</strong>
      </p>
    </div>
    <Footer dark page={6} />
  </Slide>
);

// A7 · Síntese
const A7 = () => (
  <Slide bg="#fff">
    <div style={{ padding: '72px 64px 0' }}>
      <div style={{
        display: 'inline-block', padding: '6px 14px', marginBottom: 24,
        background: C.aurora, color: '#fff',
        fontSize: 18, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>Em uma linha</div>
      <h2 style={{
        fontSize: 88, fontWeight: 800, lineHeight: 0.98, letterSpacing: '-0.035em',
        color: C.ink, margin: 0, textWrap: 'balance',
      }}>
        IA não substitui<br />decisão. <span style={{ color: C.aurora }}>Pressupõe.</span>
      </h2>
    </div>
    <div style={{ padding: '64px 64px 0' }}>
      <div style={{
        padding: 36, background: C.lightCanvas, borderLeft: `6px solid ${C.aurora}`,
      }}>
        <p style={{
          fontSize: 26, lineHeight: 1.5, color: C.coreSlate, margin: 0, fontWeight: 500,
        }}>
          Antes de contratar mais ferramenta, pergunte:<br />
          <span style={{ color: C.aurora, fontWeight: 600 }}>
            "A gente sabe o que está tentando decidir melhor?"
          </span>
        </p>
      </div>
      <p style={{
        marginTop: 48, fontSize: 22, color: C.systemGray, lineHeight: 1.5,
        fontStyle: 'italic', maxWidth: 820,
      }}>
        É a pergunta que separa quem escala de quem fica em piloto.
      </p>
    </div>
    <Footer page={7} />
  </Slide>
);

// A8 · CTA
const A8 = () => (
  <Slide bg={C.ink} color="#fff">
    <div style={{ padding: '96px 64px 0' }}>
      <h2 style={{
        fontSize: 92, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
        color: '#fff', margin: 0, textWrap: 'balance',
      }}>
        Curtiu?<br />
        <span style={{ color: C.highlight }}>Compartilha.</span>
      </h2>
      <p style={{
        fontSize: 26, lineHeight: 1.5, color: 'rgba(255,255,255,.8)',
        marginTop: 48, maxWidth: 820,
      }}>
        Tem alguém no seu network preso em piloto agora.
      </p>
    </div>
    {/* CTA cards */}
    <div style={{
      position: 'absolute', bottom: 200, left: 64, right: 64,
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
    }}>
      <div style={{
        padding: 28, border: '2px solid rgba(255,255,255,.2)', background: 'rgba(255,255,255,.04)',
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: 24, background: C.highlight, color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: C.highlight }}>1.</div>
          <div style={{ fontSize: 22, fontWeight: 600, color: '#fff', marginTop: 4 }}>Repost</div>
        </div>
      </div>
      <div style={{
        padding: 28, border: '2px solid rgba(255,255,255,.2)', background: 'rgba(255,255,255,.04)',
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: 24, background: C.aurora, color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M19 8v6M22 11h-6M12 7a4 4 0 11-8 0 4 4 0 018 0z" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: C.aurora }}>2.</div>
          <div style={{ fontSize: 22, fontWeight: 600, color: '#fff', marginTop: 4 }}>Siga @newway</div>
        </div>
      </div>
    </div>
    <Footer dark page={8} />
  </Slide>
);

// ============================================================
// DIREÇÃO B · "STORY EM CAPÍTULOS" — narrativa, editorial premium
// Inspiração: Colby Kultgen, Lara Acosta, Alex Smith
// Paleta: cream + slate + roxo accent · serif vibe (mas Inter heavy)
// ============================================================

const B1 = () => (
  <Slide bg={C.cream}>
    <div style={{ padding: '64px 64px 0' }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 24,
      }}>História real · 2025</div>
    </div>
    <div style={{ padding: '0 64px', position: 'absolute', top: 240, left: 0, right: 0 }}>
      <h1 style={{
        fontSize: 124, fontWeight: 700, lineHeight: 0.95, letterSpacing: '-0.035em',
        color: C.ink, margin: 0, textWrap: 'balance',
      }}>
        Como uma operação<br />de R$80M<br />parou de queimar<br />
        <em style={{
          fontStyle: 'italic', fontWeight: 600, color: C.aurora,
        }}>R$2M/mês</em>
      </h1>
      <p style={{
        fontSize: 28, lineHeight: 1.4, color: C.systemGray,
        marginTop: 56, maxWidth: 700, fontWeight: 400,
      }}>
        Em 90 dias. Sem trocar de stack. Sem demitir time.
      </p>
    </div>
    <SwipeArrow />
    <Footer page={1} />
  </Slide>
);

const B2 = () => (
  <Slide bg="#fff">
    <div style={{ padding: '72px 64px 0' }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 16,
      }}>Capítulo 1</div>
      <h2 style={{
        fontSize: 88, fontWeight: 700, lineHeight: 0.98, letterSpacing: '-0.03em',
        color: C.ink, margin: 0,
      }}>
        O sintoma.
      </h2>
    </div>
    <div style={{ padding: '56px 64px 0' }}>
      <p style={{
        fontSize: 32, lineHeight: 1.45, color: C.coreSlate, fontWeight: 400,
        margin: 0, maxWidth: 900, textWrap: 'pretty',
      }}>
        SaaS B2B, 80M ARR, time comercial de 18 pessoas.
      </p>
      <p style={{
        fontSize: 28, lineHeight: 1.5, color: C.coreSlate, fontWeight: 400,
        margin: '32px 0 0', maxWidth: 900,
      }}>
        CAC subindo 14% ao trimestre. Conversão lead→cliente caindo de 6,2% para 3,8% em um ano.
      </p>
      <div style={{
        marginTop: 56, padding: 32, background: C.cream,
        borderLeft: `5px solid ${C.aurora}`,
      }}>
        <div style={{
          fontSize: 18, fontWeight: 600, letterSpacing: '0.15em', textTransform: 'uppercase',
          color: C.aurora, marginBottom: 12,
        }}>Hipótese inicial do CEO</div>
        <p style={{
          fontSize: 28, lineHeight: 1.4, color: C.ink, fontWeight: 500,
          margin: 0, fontStyle: 'italic',
        }}>"A gente precisa de IA pra qualificar lead."</p>
      </div>
    </div>
    <Footer page={2} />
  </Slide>
);

const B3 = () => (
  <Slide bg={C.lightCanvas}>
    <div style={{ padding: '72px 64px 0' }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 16,
      }}>Capítulo 2</div>
      <h2 style={{
        fontSize: 88, fontWeight: 700, lineHeight: 0.98, letterSpacing: '-0.03em',
        color: C.ink, margin: 0,
      }}>
        O diagnóstico.
      </h2>
    </div>
    <div style={{ padding: '56px 64px 0' }}>
      <p style={{
        fontSize: 30, lineHeight: 1.45, color: C.coreSlate, fontWeight: 400,
        margin: 0, maxWidth: 900,
      }}>
        Em 2 semanas, mapeamos onde o tempo do SDR ia.
      </p>
      {/* Mini gráfico de barras horizontal */}
      <div style={{ marginTop: 48, background: '#fff', padding: 36 }}>
        <div style={{
          fontSize: 16, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase',
          color: C.systemGray, marginBottom: 24,
        }}>Onde o SDR gasta o dia</div>
        {[
          { l: 'Pesquisa manual de lead', v: 42, hot: true },
          { l: 'Mensagens sem resposta', v: 28, hot: true },
          { l: 'Reunião de qualificação', v: 18, hot: false },
          { l: 'Atualizar CRM', v: 12, hot: false },
        ].map((row, i) => (
          <div key={i} style={{ marginBottom: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
              <span style={{ fontSize: 20, fontWeight: 500, color: C.ink }}>{row.l}</span>
              <span style={{
                fontSize: 24, fontWeight: 700, color: row.hot ? C.aurora : C.systemGray,
                fontFeatureSettings: '"tnum" 1',
              }}>{row.v}%</span>
            </div>
            <div style={{ height: 14, background: C.softIface, borderRadius: 0 }}>
              <div style={{
                width: `${row.v * 2}%`, height: '100%',
                background: row.hot ? C.aurora : C.neuralMist,
              }} />
            </div>
          </div>
        ))}
      </div>
      <p style={{
        marginTop: 36, fontSize: 24, lineHeight: 1.5, color: C.coreSlate,
        fontWeight: 500, maxWidth: 880,
      }}>
        70% do tempo: tarefas que <strong style={{ color: C.aurora, fontWeight: 700 }}>não exigem julgamento humano.</strong>
      </p>
    </div>
    <Footer page={3} />
  </Slide>
);

const B4 = () => (
  <Slide bg="#fff">
    <div style={{ padding: '72px 64px 0' }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 16,
      }}>Capítulo 3</div>
      <h2 style={{
        fontSize: 88, fontWeight: 700, lineHeight: 0.98, letterSpacing: '-0.03em',
        color: C.ink, margin: 0,
      }}>
        A virada.
      </h2>
    </div>
    <div style={{ padding: '56px 64px 0' }}>
      <p style={{
        fontSize: 30, lineHeight: 1.45, color: C.coreSlate, fontWeight: 400,
        margin: 0, maxWidth: 900,
      }}>
        Não era falta de IA.
      </p>
      <p style={{
        fontSize: 30, lineHeight: 1.45, color: C.coreSlate, fontWeight: 400,
        margin: '20px 0 0', maxWidth: 900,
      }}>
        Era falta de <strong style={{ color: C.ink, fontWeight: 700 }}>decisão sobre o que automatizar primeiro.</strong>
      </p>
      <div style={{
        marginTop: 64, padding: 40, background: C.ink, color: '#fff',
      }}>
        <div style={{
          fontSize: 16, fontWeight: 600, letterSpacing: '0.15em', textTransform: 'uppercase',
          color: C.quantum, marginBottom: 20,
        }}>O método aplicado</div>
        <p style={{
          fontSize: 30, lineHeight: 1.4, color: '#fff', fontWeight: 500,
          margin: 0,
        }}>
          Automatizar o que <em style={{ fontStyle: 'italic', color: C.quantum }}>já era repetitivo</em>{' '}
          — não o que parecia inovador.
        </p>
        <p style={{
          fontSize: 22, lineHeight: 1.5, color: 'rgba(255,255,255,.7)',
          marginTop: 24, fontWeight: 400,
        }}>
          Pesquisa de lead. Roteamento por ICP. Acompanhamento sem resposta. Nada glamour. Tudo medível.
        </p>
      </div>
    </div>
    <Footer page={4} />
  </Slide>
);

const B5 = () => (
  <Slide bg={C.cream}>
    <div style={{ padding: '72px 64px 0' }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 16,
      }}>Capítulo 4</div>
      <h2 style={{
        fontSize: 88, fontWeight: 700, lineHeight: 0.98, letterSpacing: '-0.03em',
        color: C.ink, margin: 0,
      }}>
        90 dias depois.
      </h2>
    </div>
    <div style={{ padding: '64px 64px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
      {[
        { n: '−R$2M', l: 'queima mensal evitada', big: true },
        { n: '+62%', l: 'leads qualificados/SDR' },
        { n: '−54%', l: 'CAC blended' },
        { n: '0', l: 'pessoas demitidas' },
      ].map((kpi, i) => (
        <div key={i} style={{
          padding: 32, background: '#fff',
          border: kpi.big ? `3px solid ${C.aurora}` : `1px solid ${C.softIface}`,
        }}>
          <div style={{
            fontSize: kpi.big ? 76 : 64, fontWeight: 800, letterSpacing: '-0.03em',
            color: kpi.big ? C.aurora : C.ink, lineHeight: 0.95,
            fontFeatureSettings: '"tnum" 1',
          }}>{kpi.n}</div>
          <div style={{
            fontSize: 18, color: C.systemGray, marginTop: 12, lineHeight: 1.35,
            letterSpacing: '0.02em',
          }}>{kpi.l}</div>
        </div>
      ))}
    </div>
    <Footer page={5} />
  </Slide>
);

const B6 = () => (
  <Slide bg="#fff">
    <div style={{ padding: '72px 64px 0' }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 16,
      }}>O que aprendemos</div>
      <h2 style={{
        fontSize: 80, fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.03em',
        color: C.ink, margin: 0, textWrap: 'balance',
      }}>
        IA não foi a resposta.
      </h2>
      <h2 style={{
        fontSize: 80, fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.03em',
        color: C.aurora, margin: '8px 0 0',
      }}>
        Foi a consequência.
      </h2>
    </div>
    <div style={{ padding: '56px 64px 0' }}>
      <p style={{
        fontSize: 28, lineHeight: 1.5, color: C.coreSlate, fontWeight: 400,
        margin: 0, maxWidth: 900,
      }}>
        Primeiro a gente mapeou onde estava queimando dinheiro.
      </p>
      <p style={{
        fontSize: 28, lineHeight: 1.5, color: C.coreSlate, fontWeight: 400,
        margin: '20px 0 0', maxWidth: 900,
      }}>
        Depois decidiu o que valia automatizar.
      </p>
      <p style={{
        fontSize: 28, lineHeight: 1.5, color: C.ink, fontWeight: 600,
        margin: '20px 0 0', maxWidth: 900,
      }}>
        Só então a IA virou ferramenta — não estratégia.
      </p>
    </div>
    <Footer page={6} />
  </Slide>
);

const B7 = () => (
  <Slide bg={C.lightCanvas}>
    <div style={{ padding: '72px 64px 0' }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 16,
      }}>Recapitulando</div>
      <h2 style={{
        fontSize: 72, fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.025em',
        color: C.ink, margin: 0,
      }}>4 passos. Sem mistério.</h2>
    </div>
    <div style={{ padding: '56px 64px 0', display: 'flex', flexDirection: 'column', gap: 20 }}>
      {[
        ['Mapeie onde o time queima tempo', 'Não onde "tem dado". Onde tem repetição.'],
        ['Decida a métrica antes da ferramenta', 'O que vai melhorar? De quanto pra quanto?'],
        ['Automatize o repetitivo, não o glamour', 'Comece pelo tedioso. É lá que tá o dinheiro.'],
        ['Meça em 90 dias. Pare se não funcionar', 'Sem prazo de descomissionamento, vira dependência.'],
      ].map(([t, d], i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '70px 1fr', gap: 24,
          padding: 24, background: '#fff', alignItems: 'baseline',
        }}>
          <div style={{
            fontSize: 48, fontWeight: 800, color: C.aurora, letterSpacing: '-0.03em',
            fontFeatureSettings: '"tnum" 1', lineHeight: 1,
          }}>0{i + 1}</div>
          <div>
            <div style={{ fontSize: 26, fontWeight: 600, color: C.ink, lineHeight: 1.25, marginBottom: 8 }}>{t}</div>
            <div style={{ fontSize: 18, color: C.systemGray, lineHeight: 1.45 }}>{d}</div>
          </div>
        </div>
      ))}
    </div>
    <Footer page={7} />
  </Slide>
);

const B8 = () => (
  <Slide bg={C.cream}>
    <div style={{ padding: '96px 64px 0' }}>
      <h2 style={{
        fontSize: 88, fontWeight: 700, lineHeight: 0.98, letterSpacing: '-0.03em',
        color: C.ink, margin: 0, textWrap: 'balance',
      }}>
        Vale o repost?
      </h2>
      <p style={{
        fontSize: 26, lineHeight: 1.5, color: C.coreSlate,
        marginTop: 36, maxWidth: 820,
      }}>
        Tem operação queimando R$2M/mês esperando alguém abrir essa conversa.
      </p>
    </div>
    <div style={{
      position: 'absolute', bottom: 220, left: 64, right: 64,
    }}>
      <div style={{
        background: C.aurora, color: '#fff', padding: '28px 36px',
        display: 'inline-flex', alignItems: 'center', gap: 14,
        fontSize: 24, fontWeight: 600, letterSpacing: '-0.01em',
      }}>
        Repost
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
      <div style={{
        marginTop: 24, fontSize: 18, color: C.systemGray, lineHeight: 1.5,
      }}>
        Mais histórias como essa: <strong style={{ color: C.aurora }}>siga @newway</strong>
      </div>
    </div>
    <Footer page={8} />
  </Slide>
);

// ============================================================
// DIREÇÃO C · "MANIFESTO TIPOGRÁFICO" — 1 ideia gigante por tela
// Inspiração: Sahil Bloom (anti-todo list), Sophie Miller
// Paleta: branco + slate + amarelo+roxo de impacto
// Cada tela é UMA frase autônoma — funciona até sem swipe
// ============================================================

const M1 = () => (
  <Slide bg="#fff">
    <div style={{ padding: '64px 56px 0' }}>
      <div style={{
        display: 'inline-block', padding: '6px 14px', marginBottom: 24,
        background: C.aurora, color: '#fff',
        fontSize: 16, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
      }}>Manifesto · #IA</div>
    </div>
    <div style={{ padding: '0 56px', position: 'absolute', top: 220, left: 0, right: 0 }}>
      <h1 style={{
        fontSize: 168, fontWeight: 800, lineHeight: 0.88, letterSpacing: '-0.045em',
        color: C.ink, margin: 0,
      }}>
        Pare de<br />
        <span style={{ color: C.aurora }}>terceirizar</span><br />
        seu pensamento.
      </h1>
      <p style={{
        fontSize: 28, lineHeight: 1.4, color: C.systemGray,
        marginTop: 56, maxWidth: 820, fontWeight: 400,
      }}>
        7 coisas que IA não deve fazer no seu negócio.
      </p>
    </div>
    <SwipeArrow />
    <Footer page={1} />
  </Slide>
);

const M2 = () => (
  <Slide bg={C.ink} color="#fff">
    <div style={{ padding: '64px 56px 0' }}>
      <div style={{
        fontSize: 18, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: C.quantum,
      }}>01</div>
    </div>
    <div style={{ padding: '0 56px', position: 'absolute', top: 200, bottom: 200, left: 0, right: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <h2 style={{
        fontSize: 152, fontWeight: 800, lineHeight: 0.9, letterSpacing: '-0.045em',
        color: '#fff', margin: 0,
      }}>
        Não delegue<br />
        <span style={{ color: C.highlight }}>discordância.</span>
      </h2>
      <p style={{
        fontSize: 28, lineHeight: 1.4, color: 'rgba(255,255,255,.75)',
        marginTop: 48, maxWidth: 820,
      }}>
        Se IA concorda com você sempre, não é parceira — é eco.
      </p>
    </div>
    <Footer dark page={2} />
  </Slide>
);

const M3 = () => (
  <Slide bg={C.aurora} color="#fff">
    <div style={{ padding: '64px 56px 0' }}>
      <div style={{
        fontSize: 18, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,.7)',
      }}>02</div>
    </div>
    <div style={{ padding: '0 56px', position: 'absolute', top: 200, bottom: 200, left: 0, right: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <h2 style={{
        fontSize: 152, fontWeight: 800, lineHeight: 0.9, letterSpacing: '-0.045em',
        color: '#fff', margin: 0,
      }}>
        Não delegue<br />a primeira reunião.
      </h2>
      <p style={{
        fontSize: 28, lineHeight: 1.4, color: 'rgba(255,255,255,.85)',
        marginTop: 48, maxWidth: 820,
      }}>
        Cliente pode falar com bot. Não <em style={{ fontStyle: 'italic' }}>quer</em> falar com bot.
      </p>
    </div>
    <Footer dark page={3} />
  </Slide>
);

const M4 = () => (
  <Slide bg="#fff">
    <div style={{ padding: '64px 56px 0' }}>
      <div style={{
        fontSize: 18, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: C.aurora,
      }}>03</div>
    </div>
    <div style={{ padding: '0 56px', position: 'absolute', top: 200, bottom: 200, left: 0, right: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <h2 style={{
        fontSize: 152, fontWeight: 800, lineHeight: 0.9, letterSpacing: '-0.045em',
        color: C.ink, margin: 0,
      }}>
        Não delegue<br />
        <span style={{ background: C.aurora, color: '#fff', padding: '0 14px' }}>
          tom de voz.
        </span>
      </h2>
      <p style={{
        fontSize: 28, lineHeight: 1.4, color: C.systemGray,
        marginTop: 48, maxWidth: 820,
      }}>
        Conteúdo gerado some. Voz consistente acumula autoridade.
      </p>
    </div>
    <Footer page={4} />
  </Slide>
);

const M5 = () => (
  <Slide bg={C.ink} color="#fff">
    <div style={{ padding: '64px 56px 0' }}>
      <div style={{
        fontSize: 18, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: C.quantum,
      }}>04</div>
    </div>
    <div style={{ padding: '0 56px', position: 'absolute', top: 200, bottom: 200, left: 0, right: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <h2 style={{
        fontSize: 152, fontWeight: 800, lineHeight: 0.9, letterSpacing: '-0.045em',
        color: '#fff', margin: 0,
      }}>
        Não delegue<br />
        <span style={{ color: C.highlight }}>análise crítica.</span>
      </h2>
      <p style={{
        fontSize: 28, lineHeight: 1.4, color: 'rgba(255,255,255,.75)',
        marginTop: 48, maxWidth: 820,
      }}>
        Resumo é fácil. Decidir o que importa no resumo, não.
      </p>
    </div>
    <Footer dark page={5} />
  </Slide>
);

const M6 = () => (
  <Slide bg="#fff">
    <div style={{ padding: '64px 56px 0' }}>
      <div style={{
        fontSize: 18, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: C.aurora,
      }}>05</div>
    </div>
    <div style={{ padding: '0 56px', position: 'absolute', top: 200, bottom: 200, left: 0, right: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <h2 style={{
        fontSize: 152, fontWeight: 800, lineHeight: 0.9, letterSpacing: '-0.045em',
        color: C.ink, margin: 0,
      }}>
        Não delegue<br />
        <em style={{ fontStyle: 'italic', color: C.aurora }}>contexto.</em>
      </h2>
      <p style={{
        fontSize: 28, lineHeight: 1.4, color: C.systemGray,
        marginTop: 48, maxWidth: 820,
      }}>
        Modelo só sabe o que você conta. Quem mora no problema, é você.
      </p>
    </div>
    <Footer page={6} />
  </Slide>
);

const M7 = () => (
  <Slide bg={C.aurora} color="#fff">
    <div style={{ padding: '64px 56px 0' }}>
      <div style={{
        fontSize: 18, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,.7)',
      }}>06 · 07 · resumo</div>
    </div>
    <div style={{ padding: '0 56px', position: 'absolute', top: 200, bottom: 200, left: 0, right: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <h2 style={{
        fontSize: 124, fontWeight: 800, lineHeight: 0.92, letterSpacing: '-0.04em',
        color: '#fff', margin: 0, textWrap: 'balance',
      }}>
        IA é alavanca.<br />Não é cérebro.
      </h2>
      <p style={{
        fontSize: 30, lineHeight: 1.4, color: 'rgba(255,255,255,.9)',
        marginTop: 48, maxWidth: 820, fontWeight: 400,
      }}>
        Use pra mover mais peso com o mesmo esforço.<br />
        Não pra terceirizar a decisão sobre o que mover.
      </p>
    </div>
    <Footer dark page={7} />
  </Slide>
);

const M8 = () => (
  <Slide bg="#fff">
    <div style={{ padding: '96px 56px 0' }}>
      <div style={{
        display: 'inline-block', padding: '6px 14px', marginBottom: 24,
        background: C.ink, color: '#fff',
        fontSize: 16, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
      }}>Concorda?</div>
      <h2 style={{
        fontSize: 96, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
        color: C.ink, margin: 0, textWrap: 'balance',
      }}>
        Marque alguém<br />que precisa<br />ouvir isso.
      </h2>
    </div>
    <div style={{
      position: 'absolute', bottom: 200, left: 56, right: 56,
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
    }}>
      <div style={{
        padding: 24, background: C.cream, border: `2px solid ${C.ink}`,
      }}>
        <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.aurora, marginBottom: 8 }}>1.</div>
        <div style={{ fontSize: 22, fontWeight: 600, color: C.ink, lineHeight: 1.25 }}>Repost se chegou junto</div>
      </div>
      <div style={{
        padding: 24, background: C.aurora, color: '#fff',
      }}>
        <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,.7)', marginBottom: 8 }}>2.</div>
        <div style={{ fontSize: 22, fontWeight: 600, color: '#fff', lineHeight: 1.25 }}>Siga @newway</div>
      </div>
    </div>
    <Footer page={8} />
  </Slide>
);

// ============================================================
// DIREÇÃO D · "TECH / LINHAS DE ONDA"
// Inspiração: anexo do usuário · símbolo NW como elemento gráfico macro
// Paleta: Neural Night profundo + outline Aurora/Quantum + branco
// Linhas de onda como assinatura visual em cada tela
// ============================================================

// Componente reutilizável: ondas decorativas em SVG.
// Variantes mudam a posição/escala. Tudo em outline finíssimo, paleta New Way.
const Waves = ({ variant = 'topright', opacity = 1, color = C.aurora, color2 = C.quantum }) => {
  const presets = {
    topright: {
      transform: 'translate(720px, -180px) rotate(15deg) scale(1.1)',
    },
    bottomleft: {
      transform: 'translate(-280px, 720px) rotate(-15deg) scale(1.2)',
    },
    full: {
      transform: 'translate(-100px, 200px) scale(1.4)',
    },
    side: {
      transform: 'translate(640px, 120px) scale(0.95)',
    },
  };
  return (
    <svg
      width="900" height="1200" viewBox="0 0 900 1200"
      style={{
        position: 'absolute', top: 0, left: 0,
        ...presets[variant],
        pointerEvents: 'none', opacity,
      }}
      fill="none"
    >
      <defs>
        <linearGradient id={`waveGrad-${variant}`} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor={color} stopOpacity="0" />
          <stop offset="40%" stopColor={color} stopOpacity="0.65" />
          <stop offset="100%" stopColor={color2} stopOpacity="0.9" />
        </linearGradient>
      </defs>
      {/* Densidade de linhas variando — grid de curvas senoidais */}
      {Array.from({ length: 26 }).map((_, i) => {
        const r = 80 + i * 22;
        return (
          <path
            key={i}
            d={`M ${100 - i * 4},${300 + i * 6} Q ${300 + i * 8},${100 - i * 3} ${800 + i * 4},${500 + i * 14} T ${1100},${900 + i * 8}`}
            stroke={`url(#waveGrad-${variant})`}
            strokeWidth={i % 6 === 0 ? 1.3 : 0.8}
            fill="none"
            strokeOpacity={0.15 + (i % 5) * 0.12}
          />
        );
      })}
      {/* Pontilhado de partículas */}
      {Array.from({ length: 60 }).map((_, i) => {
        const x = 100 + (i * 73) % 800;
        const y = 200 + (i * 137) % 900;
        const sz = (i % 4 === 0) ? 2.5 : 1.5;
        return (
          <circle key={`d-${i}`} cx={x} cy={y} r={sz} fill={i % 3 === 0 ? color2 : color} opacity={0.3 + (i % 5) * 0.08} />
        );
      })}
    </svg>
  );
};

// Footer escuro padrão dessa direção
const FooterDark = ({ page }) => <Footer dark page={page} />;

// D1 · Capa
const T1 = () => (
  <Slide bg={C.neuralNight} color="#fff">
    <Waves variant="topright" />
    <div style={{ padding: '64px 56px 0', position: 'relative', zIndex: 2 }}>
      <img src="assets/marca/logo-horizontal-branco.svg" alt="newway" style={{ width: 200, height: 'auto', opacity: 0.95 }} />
    </div>
    <div style={{ padding: '0 56px', position: 'absolute', top: 280, left: 0, right: 0, zIndex: 2 }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.quantum, marginBottom: 32,
      }}>01</div>
      <h1 style={{
        fontSize: 124, fontWeight: 800, lineHeight: 0.93, letterSpacing: '-0.04em',
        color: '#fff', margin: 0, textWrap: 'balance', textTransform: 'uppercase',
      }}>
        IA que gera<br />
        <span style={{ color: C.quantum }}>resultados</span><br />
        reais.
      </h1>
      <p style={{
        fontSize: 26, lineHeight: 1.45, color: 'rgba(255,255,255,.8)',
        marginTop: 56, maxWidth: 720, fontWeight: 400,
      }}>
        Dados, método e pessoas para o crescimento inteligente da sua empresa.
      </p>
    </div>
    <SwipeArrow dark />
    <FooterDark page={1} />
  </Slide>
);

// D2 · Hook secundário
const T2 = () => (
  <Slide bg={C.neuralNight} color="#fff">
    <Waves variant="side" />
    <div style={{ padding: '64px 56px 0', position: 'relative', zIndex: 2 }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.quantum,
      }}>02</div>
    </div>
    <div style={{ padding: '0 56px', position: 'absolute', top: 200, left: 0, right: 0, zIndex: 2 }}>
      <h2 style={{
        fontSize: 92, fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.03em',
        color: '#fff', margin: 0, maxWidth: 780, textWrap: 'balance',
      }}>
        Crescer não é<br />
        só vender mais.<br />
        É crescer do <em style={{ fontStyle: 'italic', color: C.quantum }}>jeito certo.</em>
      </h2>
      <div style={{
        marginTop: 56, paddingLeft: 16, borderLeft: `3px solid ${C.aurora}`,
      }}>
        <p style={{
          fontSize: 24, lineHeight: 1.5, color: 'rgba(255,255,255,.85)',
          margin: 0, maxWidth: 680,
        }}>
          A New Way combina IA, dados e estratégia para transformar oportunidades em crescimento previsível.
        </p>
      </div>
    </div>
    <FooterDark page={2} />
  </Slide>
);

// D3 · Diferenciais (lista com ícones simples)
const T3 = () => (
  <Slide bg={C.neuralNight} color="#fff">
    <Waves variant="bottomleft" opacity={0.7} />
    <div style={{ padding: '64px 56px 0', position: 'relative', zIndex: 2 }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.quantum, marginBottom: 24,
      }}>03</div>
      <h2 style={{
        fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
        color: '#fff', margin: 0,
      }}>
        O que nos torna diferentes
      </h2>
    </div>
    <div style={{ padding: '64px 56px 0', position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', gap: 24 }}>
      {[
        { icon: 'brain', label: 'IA aplicada ao que realmente importa' },
        { icon: 'chart', label: 'Decisões guiadas por dados' },
        { icon: 'method', label: 'Método comprovado e replicável' },
        { icon: 'people', label: 'Pessoas preparadas para executar' },
      ].map((item, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', gap: 24,
        }}>
          <div style={{
            width: 64, height: 64, borderRadius: 32,
            background: 'rgba(170,75,239,.15)',
            border: `1.5px solid ${C.quantum}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
          }}>
            <TechIcon name={item.icon} />
          </div>
          <div style={{ fontSize: 26, fontWeight: 500, color: '#fff', lineHeight: 1.3 }}>
            {item.label}
          </div>
        </div>
      ))}
    </div>
    <FooterDark page={3} />
  </Slide>
);

// Ícones simples em outline (Lucide-ish)
const TechIcon = ({ name }) => {
  const stroke = '#fff';
  switch (name) {
    case 'brain':
      return (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/>
          <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/>
        </svg>
      );
    case 'chart':
      return (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 3v18h18" />
          <rect x="7" y="13" width="3" height="5" />
          <rect x="12" y="9" width="3" height="9" />
          <rect x="17" y="5" width="3" height="13" />
        </svg>
      );
    case 'method':
      return (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="9" cy="9" r="6" />
          <circle cx="9" cy="9" r="2" />
          <path d="M14 14l6 6" />
        </svg>
      );
    case 'people':
      return (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
          <circle cx="9" cy="7" r="4" />
          <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
        </svg>
      );
    default: return null;
  }
};

// D4 · Resultado / chart
const T4 = () => (
  <Slide bg="#fff">
    <div style={{ padding: '64px 56px 0', position: 'relative' }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 24,
      }}>04</div>
      <h2 style={{
        fontSize: 72, fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.03em',
        color: C.coreSlate, margin: 0,
      }}>
        Resultados que<br />falam por si.
      </h2>
    </div>
    {/* Chart de barras */}
    <div style={{ padding: '64px 56px 0' }}>
      <div style={{
        fontSize: 14, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: C.systemGray, marginBottom: 32,
      }}>Desempenho médio dos clientes</div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 64, height: 480 }}>
        {/* Barra A */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{
            width: '100%', height: 200,
            background: `linear-gradient(180deg, ${C.softIface}, ${C.neuralMist})`,
            borderRadius: '8px 8px 0 0',
          }} />
          <div style={{ fontSize: 22, fontWeight: 600, color: C.systemGray, marginTop: 20 }}>Grupo A</div>
          <div style={{ fontSize: 14, color: C.neuralMist, marginTop: 4 }}>Antes da New Way</div>
        </div>
        {/* Barra B */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
          {/* seta dashed indicando crescimento */}
          <svg width="100" height="80" viewBox="0 0 100 80" style={{
            position: 'absolute', top: -40, left: -100,
          }} fill="none">
            <path d="M5 70 Q 50 40 90 15" stroke={C.aurora} strokeWidth="2" strokeDasharray="4 5" />
            <path d="M82 8 L 92 14 L 86 24" stroke={C.aurora} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          <div style={{
            width: '100%', height: 420,
            background: `linear-gradient(180deg, ${C.quantum}, ${C.aurora})`,
            borderRadius: '8px 8px 0 0',
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: -20, right: -120,
              fontSize: 64, fontWeight: 800, color: C.aurora, letterSpacing: '-0.03em',
              fontFeatureSettings: '"tnum" 1', whiteSpace: 'nowrap',
            }}>+67%</div>
            <div style={{
              position: 'absolute', top: 64, right: -120,
              fontSize: 16, color: C.systemGray, lineHeight: 1.3, whiteSpace: 'nowrap',
            }}>de crescimento<br />médio</div>
          </div>
          <div style={{ fontSize: 22, fontWeight: 600, color: C.coreSlate, marginTop: 20 }}>Grupo B</div>
          <div style={{ fontSize: 14, color: C.aurora, marginTop: 4, fontWeight: 500 }}>Com New Way</div>
        </div>
        <div style={{ flex: 0.5 }} />
      </div>
      <div style={{ fontSize: 13, color: C.neuralMist, marginTop: 32, fontStyle: 'italic' }}>
        Período analisado: últimos 12 meses
      </div>
    </div>
    <Footer page={4} />
  </Slide>
);

// D5 · Processo numerado
const T5 = () => (
  <Slide bg="#fff">
    <div style={{ padding: '64px 56px 0' }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 24,
      }}>05</div>
      <h2 style={{
        fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
        color: C.coreSlate, margin: 0,
      }}>
        Como geramos<br />crescimento<br />inteligente
      </h2>
    </div>
    <div style={{ padding: '56px 56px 0', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {[
        ['01', 'Entendemos o seu negócio a fundo'],
        ['02', 'Analisamos dados e encontramos alavancas'],
        ['03', 'Criamos estratégias com IA e método'],
        ['04', 'Executamos com pessoas e acompanhamos resultados'],
      ].map(([n, t], i) => (
        <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 28,
            background: C.aurora, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em',
            flexShrink: 0,
            fontFeatureSettings: '"tnum" 1',
          }}>{n}</div>
          <div style={{ fontSize: 24, fontWeight: 500, color: C.coreSlate, lineHeight: 1.35 }}>
            {t}
          </div>
        </div>
      ))}
    </div>
    <Footer page={5} />
  </Slide>
);

// D6 · KPI / exemplo de impacto
const T6 = () => (
  <Slide bg={C.neuralNight} color="#fff">
    <Waves variant="bottomleft" opacity={0.6} />
    <div style={{ padding: '64px 56px 0', position: 'relative', zIndex: 2 }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.quantum, marginBottom: 24,
      }}>06</div>
      <h2 style={{
        fontSize: 56, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
        color: '#fff', margin: 0,
      }}>
        Dados viram <span style={{ color: C.quantum }}>decisão.</span><br />
        Decisão vira <span style={{ color: C.quantum }}>resultado.</span>
      </h2>
    </div>
    <div style={{ padding: '72px 56px 0', position: 'relative', zIndex: 2 }}>
      <div style={{
        fontSize: 13, fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,.5)', marginBottom: 16,
      }}>Exemplo de impacto</div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 64, height: 380 }}>
        <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
          <div style={{
            fontSize: 88, fontWeight: 800, color: C.quantum, letterSpacing: '-0.04em',
            lineHeight: 0.95, fontFeatureSettings: '"tnum" 1', marginBottom: 8,
          }}>2,8x</div>
          <div style={{ fontSize: 22, fontWeight: 500, color: '#fff', lineHeight: 1.35, maxWidth: 320 }}>
            mais conversão em campanhas
          </div>
        </div>
        <div style={{ flex: 1, display: 'flex', alignItems: 'flex-end', gap: 32 }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div style={{ width: '100%', height: 110, background: 'rgba(255,255,255,.18)' }} />
            <div style={{ fontSize: 16, color: 'rgba(255,255,255,.7)', marginTop: 12 }}>Grupo A</div>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,.4)', marginTop: 4 }}>Sem IA</div>
          </div>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div style={{
              width: '100%', height: 310,
              background: `linear-gradient(180deg, ${C.quantum}, ${C.aurora})`,
            }} />
            <div style={{ fontSize: 16, color: '#fff', marginTop: 12, fontWeight: 500 }}>Grupo B</div>
            <div style={{ fontSize: 12, color: C.quantum, marginTop: 4 }}>Com IA</div>
          </div>
        </div>
      </div>
    </div>
    <FooterDark page={6} />
  </Slide>
);

// D7 · Provocação / posicionamento
const T7 = () => (
  <Slide bg={C.neuralNight} color="#fff">
    <Waves variant="full" opacity={0.5} />
    <div style={{ padding: '64px 56px 0', position: 'relative', zIndex: 2 }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.quantum, marginBottom: 24,
      }}>07</div>
      <h2 style={{
        fontSize: 84, fontWeight: 800, lineHeight: 0.98, letterSpacing: '-0.03em',
        color: '#fff', margin: 0, maxWidth: 820, textWrap: 'balance',
      }}>
        Não entregamos<br />ferramentas.<br />
        Entregamos<br />
        <span style={{ color: C.quantum }}>crescimento.</span>
      </h2>
    </div>
    <div style={{
      position: 'absolute', bottom: 200, left: 56, right: 56, zIndex: 2,
    }}>
      <p style={{
        fontSize: 22, lineHeight: 1.55, color: 'rgba(255,255,255,.8)',
        margin: 0, maxWidth: 720,
      }}>
        Somos o parceiro estratégico que une tecnologia, inteligência e execução para levar sua empresa ao próximo nível.
      </p>
    </div>
    <FooterDark page={7} />
  </Slide>
);

// D6 · Áreas que transformamos (grade de chips)
const T6_areas = () => (
  <Slide bg={C.neuralNight} color="#fff">
    <Waves variant="topright" opacity={0.6} />
    <div style={{ padding: '64px 56px 0', position: 'relative', zIndex: 2 }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.quantum, marginBottom: 24,
      }}>06</div>
      <h2 style={{
        fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
        color: '#fff', margin: 0,
      }}>
        Áreas que<br />transformamos
      </h2>
    </div>
    <div style={{
      padding: '72px 56px 0', position: 'relative', zIndex: 2,
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
    }}>
      {[
        { ic: 'mkt', l: 'Marketing & Growth' },
        { ic: 'data', l: 'Dados & BI' },
        { ic: 'sales', l: 'Vendas' },
        { ic: 'ops', l: 'Operações' },
        { ic: 'cs', l: 'Customer Success' },
        { ic: 'prod', l: 'Produto' },
      ].map((a, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', gap: 16,
          padding: '20px 24px', borderRadius: 50,
          border: `1.5px solid ${C.quantum}`,
          background: 'rgba(170,75,239,.08)',
        }}>
          <AreaIcon name={a.ic} />
          <span style={{ fontSize: 22, fontWeight: 500, color: '#fff' }}>{a.l}</span>
        </div>
      ))}
    </div>
    <FooterDark page={6} />
  </Slide>
);

const AreaIcon = ({ name }) => {
  const stroke = '#fff';
  const props = { width: 28, height: 28, viewBox: '0 0 24 24', fill: 'none', stroke, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'mkt': return <svg {...props}><path d="M3 11l18-8v18l-18-8z" /><path d="M11 11v6" /></svg>;
    case 'data': return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18M9 3v18" /></svg>;
    case 'sales': return <svg {...props}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 3" /></svg>;
    case 'ops': return <svg {...props}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" /></svg>;
    case 'cs': return <svg {...props}><circle cx="9" cy="8" r="4" /><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>;
    case 'prod': return <svg {...props}><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /><path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" /></svg>;
    default: return null;
  }
};

// (T9 e T10 removidos — sistema de 8 telas; CTA assume slide 8)
const _T9_unused = () => (
  <Slide bg="#fff">
    <div style={{ padding: '80px 56px 0', position: 'relative' }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 32,
      }}>Posicionamento</div>
      <div style={{
        fontSize: 96, color: C.aurora, lineHeight: 0.7, fontWeight: 700, marginBottom: 24,
      }}>"</div>
      <h2 style={{
        fontSize: 56, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.025em',
        color: C.coreSlate, margin: 0, maxWidth: 880, textWrap: 'balance',
      }}>
        A tecnologia sozinha não transforma negócios.<br />
        Pessoas e método <span style={{ color: C.aurora }}>transformam.</span>
      </h2>
    </div>
    <div style={{
      position: 'absolute', bottom: 180, left: 56, right: 56,
      paddingTop: 32, borderTop: `1px solid ${C.softIface}`,
    }}>
      <div style={{
        fontSize: 14, fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: C.aurora,
      }}>New Way</div>
      <div style={{
        fontSize: 13, fontWeight: 500, letterSpacing: '0.15em', textTransform: 'uppercase',
        color: C.systemGray, marginTop: 4,
      }}>Crescimento Inteligente</div>
    </div>
    <Footer page={9} />
  </Slide>
);

// D8 · CTA final (substitui T8 das áreas — promovido como fechamento)
const T8_CTA = () => (
  <Slide bg="#fff">
    <div style={{ padding: '80px 56px 0' }}>
      <div style={{
        fontSize: 16, fontWeight: 600, letterSpacing: '0.25em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 24,
      }}>08</div>
      <h2 style={{
        fontSize: 76, fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.03em',
        color: C.coreSlate, margin: 0, maxWidth: 880, textWrap: 'balance',
      }}>
        Pronto para crescer<br />de forma <span style={{ color: C.aurora }}>inteligente?</span>
      </h2>
      <div style={{
        marginTop: 40, paddingLeft: 16, borderLeft: `3px solid ${C.aurora}`,
      }}>
        <p style={{
          fontSize: 24, lineHeight: 1.5, color: C.systemGray, margin: 0, maxWidth: 720,
        }}>
          Vamos juntos construir o próximo capítulo da sua empresa.
        </p>
      </div>
    </div>
    <div style={{
      position: 'absolute', bottom: 220, left: 56, right: 56,
    }}>
      <button style={{
        background: C.aurora, color: '#fff', padding: '24px 36px',
        border: 'none', borderRadius: 50,
        fontSize: 22, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase',
        display: 'inline-flex', alignItems: 'center', gap: 16, cursor: 'pointer',
        fontFamily: 'Inter, sans-serif',
      }}>
        Falar com um especialista
        <span style={{
          width: 36, height: 36, borderRadius: 18, background: '#fff', color: C.aurora,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
      </button>
    </div>
    <Footer page={8} />
  </Slide>
);

// ============================================================
// CANVAS
// ============================================================
const SCALE = 0.42;
const ART_W = Math.round(1080 * SCALE);
const ART_H = Math.round(1350 * SCALE);

const ScaledSlide = ({ children }) => (
  <div style={{
    width: 1080 * SCALE, height: 1350 * SCALE, overflow: 'hidden', position: 'relative',
  }}>
    <div style={{
      transform: `scale(${SCALE})`, transformOrigin: 'top left',
      width: 1080, height: 1350,
    }}>{children}</div>
  </div>
);

// ============================================================
// LINHA E · HYPER-TECH / CYBER (carrossel · 8 telas)
// Terminal aesthetic, monospace, grids densos, scanlines
// Fundo Neural Night profundo (#0A0D12), accents Aurora/Quantum
// ============================================================

const MONO = "'JetBrains Mono', 'Courier New', monospace";

// Helper visual: tema cyber
const cyberTheme = {
  bg: '#0A0D12',
  text: '#fff',
  textMuted: 'rgba(255,255,255,.55)',
  textFaint: 'rgba(255,255,255,.4)',
  textSoft: 'rgba(255,255,255,.85)',
  textMid: 'rgba(255,255,255,.7)',
  accent: C.aurora,
  highlight: C.quantum,
  cardBg: 'rgba(116,24,218,.08)',
  cardBg2: 'rgba(170,75,239,.12)',
  cardBorder: 'rgba(116,24,218,.27)',
  cardBorder2: 'rgba(116,24,218,.4)',
  scanline: 'rgba(255,255,255,0.025)',
  radial: 'rgba(116,24,218,.2)',
};

// Light-tech theme
const lightTechTheme = {
  bg: '#F4F1FA',
  text: C.coreSlate,
  textMuted: C.systemGray,
  textFaint: 'rgba(67,74,84,.5)',
  textSoft: C.coreSlate,
  textMid: C.systemGray,
  accent: C.aurora,
  highlight: C.aurora,
  cardBg: 'rgba(170,75,239,.06)',
  cardBg2: 'rgba(170,75,239,.1)',
  cardBorder: 'rgba(116,24,218,.22)',
  cardBorder2: 'rgba(116,24,218,.4)',
  scanline: 'rgba(0,0,0,0.025)',
  radial: 'rgba(170,75,239,.18)',
};

// Background tech (grid + scanlines + glow) — funciona para os dois temas
const TechBg = ({ theme }) => (
  <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
    {/* grade 60px */}
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `linear-gradient(${theme.accent}26 1px, transparent 1px), linear-gradient(90deg, ${theme.accent}26 1px, transparent 1px)`,
      backgroundSize: '60px 60px',
    }} />
    {/* grade 15px */}
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `linear-gradient(${theme.accent}14 1px, transparent 1px), linear-gradient(90deg, ${theme.accent}14 1px, transparent 1px)`,
      backgroundSize: '15px 15px',
    }} />
    {/* glow radial */}
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(circle at 30% 60%, ${theme.radial}, transparent 55%)`,
    }} />
    {/* scanlines */}
    <div style={{
      position: 'absolute', inset: 0,
      background: `repeating-linear-gradient(0deg, transparent, transparent 3px, ${theme.scanline} 3px, ${theme.scanline} 4px)`,
    }} />
  </div>
);

// Header de "sistema" para carrossel — combina logo + status
const SysHeader = ({ theme, id, status }) => (
  <div style={{
    position: 'absolute', top: 56, left: 56, right: 56, zIndex: 5,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontFamily: MONO, fontSize: 13, color: theme.textMuted, letterSpacing: '0.08em',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <span style={{
        display: 'inline-block', width: 8, height: 8, borderRadius: 4,
        background: theme.highlight, boxShadow: `0 0 12px ${theme.highlight}`,
      }} />
      <span style={{ color: theme.text, fontWeight: 700 }}>{id}</span>
      <span style={{ opacity: 0.4 }}>·</span>
      <span>{new Date().toISOString().slice(0, 10)}</span>
    </div>
    <span style={{
      padding: '4px 10px', border: `1px solid ${theme.highlight}`, color: theme.highlight,
      fontSize: 11, letterSpacing: '0.18em', fontWeight: 700,
    }}>{status}</span>
  </div>
);

// Footer cyber (substitui o Footer padrão na linha E/F)
const CyberFooter = ({ theme, page, total = 8 }) => (
  <div style={{
    position: 'absolute', bottom: 56, left: 56, right: 56, zIndex: 5,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontFamily: MONO, fontSize: 12, color: theme.textFaint, letterSpacing: '0.15em',
  }}>
    <span>// new_way · crescimento_inteligente</span>
    <span style={{ color: theme.accent, fontWeight: 600 }}>
      {String(page).padStart(2, '0')} / {String(total).padStart(2, '0')}
    </span>
  </div>
);

// Slide cyber base
const CyberSlide = ({ theme, children, headerId, headerStatus, page }) => (
  <Slide bg={theme.bg} color={theme.text}>
    <TechBg theme={theme} />
    <SysHeader theme={theme} id={headerId} status={headerStatus} />
    {children}
    <CyberFooter theme={theme} page={page} />
  </Slide>
);

// ============================================================
// Função fábrica: gera 8 telas para um tema (E e F compartilham estrutura)
// ============================================================
const makeCyberDirection = (theme) => {
  // 1 · Capa
  const S1 = () => (
    <CyberSlide theme={theme} headerId="NW//MANIFEST" headerStatus="LIVE" page={1}>
      <div style={{ position: 'absolute', top: 280, left: 56, right: 56, zIndex: 4 }}>
        <div style={{ fontFamily: MONO, fontSize: 14, color: theme.highlight, letterSpacing: '0.18em', marginBottom: 32 }}>
          {'> system.broadcast()'}
        </div>
        <h1 style={{
          fontSize: 144, fontWeight: 800, lineHeight: 0.92, letterSpacing: '-0.04em',
          color: theme.text, margin: 0, textTransform: 'uppercase', textWrap: 'balance',
        }}>
          IA que gera<br /><span style={{ color: theme.highlight }}>resultados</span><br />reais.
          <span style={{ display: 'inline-block', width: 16, height: 96, background: theme.highlight, marginLeft: 8, verticalAlign: '-12px', animation: 'blink 1s infinite' }} />
        </h1>
        <p style={{
          fontSize: 24, lineHeight: 1.5, color: theme.textMid,
          marginTop: 56, maxWidth: 720, fontFamily: MONO,
        }}>
          // dados, método e pessoas para o<br />// crescimento inteligente da sua empresa
        </p>
      </div>
      <div style={{
        position: 'absolute', bottom: 130, left: 56, zIndex: 5,
        fontFamily: MONO, fontSize: 14, color: theme.text, letterSpacing: '0.05em',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <span style={{ color: theme.highlight }}>{'>'}</span>
        arraste pra ler
        <svg width="32" height="20" viewBox="0 0 32 20" fill="none">
          <path d="M2 10 L28 10 M22 4 L28 10 L22 16" stroke={theme.highlight} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
    </CyberSlide>
  );

  // 2 · Hook
  const S2 = () => (
    <CyberSlide theme={theme} headerId="NW//HOOK.02" headerStatus="STMT" page={2}>
      <div style={{ position: 'absolute', top: 320, left: 56, right: 56, zIndex: 4 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: theme.highlight, letterSpacing: '0.18em', marginBottom: 32 }}>
          {'/* posicionamento */'}
        </div>
        <h2 style={{
          fontSize: 100, fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.03em',
          color: theme.text, margin: 0, maxWidth: 880, textWrap: 'balance',
        }}>
          Crescer não é<br />só vender mais.<br />
          <span style={{ color: theme.highlight }}>É vender certo.</span>
        </h2>
        <div style={{
          marginTop: 56, paddingLeft: 20, borderLeft: `2px solid ${theme.highlight}`,
        }}>
          <p style={{
            fontSize: 22, lineHeight: 1.6, color: theme.textMid, fontFamily: MONO,
            margin: 0, maxWidth: 720,
          }}>
            New Way combina IA, dados e estratégia para transformar oportunidades em crescimento previsível.
          </p>
        </div>
      </div>
    </CyberSlide>
  );

  // 3 · Diferenciais (lista mono)
  const S3 = () => (
    <CyberSlide theme={theme} headerId="NW//DIFF.04" headerStatus="04 ITEMS" page={3}>
      <div style={{ position: 'absolute', top: 200, left: 56, right: 56, zIndex: 4 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: theme.highlight, letterSpacing: '0.18em', marginBottom: 24 }}>
          {'$ list --differentiators'}
        </div>
        <h2 style={{
          fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
          color: theme.text, margin: 0,
        }}>
          O que nos torna<br /><span style={{ color: theme.highlight }}>diferentes</span>
        </h2>
      </div>
      <div style={{
        position: 'absolute', top: 540, left: 56, right: 56, zIndex: 4,
        display: 'flex', flexDirection: 'column', gap: 16,
      }}>
        {[
          ['IA_APPLIED', 'IA aplicada ao que realmente importa'],
          ['DATA_DRIVEN', 'Decisões guiadas por dados'],
          ['METHOD', 'Método comprovado e replicável'],
          ['PEOPLE', 'Pessoas preparadas para executar'],
        ].map(([k, t], i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 24,
            padding: '20px 28px',
            border: `1px solid ${theme.cardBorder}`,
            background: theme.cardBg,
          }}>
            <div style={{
              fontFamily: MONO, fontSize: 11, color: theme.highlight, letterSpacing: '0.2em',
              padding: '6px 12px', border: `1px solid ${theme.highlight}`,
              minWidth: 140, textAlign: 'center', flexShrink: 0,
            }}>{k}</div>
            <div style={{ fontSize: 22, fontWeight: 500, color: theme.text }}>{t}</div>
          </div>
        ))}
      </div>
    </CyberSlide>
  );

  // 4 · Resultado / KPI dashboard
  const S4 = () => (
    <CyberSlide theme={theme} headerId="NW//METRIC.001" headerStatus="↑ +67%" page={4}>
      <div style={{ position: 'absolute', top: 200, left: 56, right: 56, zIndex: 4 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: theme.textMuted, letterSpacing: '0.15em', marginBottom: 8 }}>
          {'// growth.delta(client_avg)'}
        </div>
        <div style={{
          fontSize: 320, fontWeight: 800, color: theme.text, letterSpacing: '-0.06em',
          lineHeight: 0.85, fontFeatureSettings: '"tnum" 1',
        }}>
          +67<span style={{ color: theme.highlight }}>%</span>
        </div>
        <div style={{
          marginTop: 16, fontSize: 28, fontWeight: 500, color: theme.textSoft,
          maxWidth: 760, lineHeight: 1.3, fontFamily: MONO,
        }}>
          crescimento médio das empresas que adotam IA + método.
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 140, left: 56, right: 56, zIndex: 4,
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0,
        border: `1px solid ${theme.cardBorder}`, fontFamily: MONO,
      }}>
        {[
          ['ROI', '3.2x', 'avg/year'],
          ['CYCLE', '-43%', 'time-to-decision'],
          ['CSAT', '94%', 'post-launch'],
        ].map(([k, v, sub], i) => (
          <div key={i} style={{
            padding: '24px 28px',
            borderRight: i < 2 ? `1px solid ${theme.cardBorder}` : 'none',
            background: theme.cardBg,
          }}>
            <div style={{ fontSize: 11, color: theme.highlight, letterSpacing: '0.2em', marginBottom: 8 }}>{k}</div>
            <div style={{ fontSize: 40, fontWeight: 700, color: theme.text, letterSpacing: '-0.03em' }}>{v}</div>
            <div style={{ fontSize: 11, color: theme.textMuted, marginTop: 4 }}>{sub}</div>
          </div>
        ))}
      </div>
    </CyberSlide>
  );

  // 5 · Método (4 passos)
  const S5 = () => (
    <CyberSlide theme={theme} headerId="NW//METHOD" headerStatus="04 STEPS" page={5}>
      <div style={{ position: 'absolute', top: 200, left: 56, right: 56, zIndex: 4 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: theme.highlight, letterSpacing: '0.18em', marginBottom: 24 }}>
          {'$ ./crescimento.exe'}
        </div>
        <h2 style={{
          fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
          color: theme.text, margin: 0, textWrap: 'balance',
        }}>
          O protocolo de<br /><span style={{ color: theme.highlight }}>crescimento.exe</span>
        </h2>
      </div>
      <div style={{
        position: 'absolute', top: 540, left: 56, right: 56, zIndex: 4,
        display: 'flex', flexDirection: 'column', gap: 12,
      }}>
        {[
          { n: '01', k: 'DIAGNOSE', t: 'Analisamos dados, decisões e gargalos' },
          { n: '02', k: 'STRATEGIZE', t: 'Mapa de alavancas com IA + método' },
          { n: '03', k: 'EXECUTE', t: 'Times pequenos, sprints curtos' },
          { n: '04', k: 'SCALE', t: 'Medimos, replicamos, escalamos' },
        ].map((s, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 24,
            padding: '20px 28px',
            border: `1px solid ${theme.cardBorder}`,
            background: theme.cardBg,
          }}>
            <div style={{
              fontFamily: MONO, fontSize: 12, color: theme.highlight, letterSpacing: '0.18em',
              padding: '6px 12px', border: `1px solid ${theme.highlight}`, flexShrink: 0,
            }}>{s.n}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: MONO, fontSize: 13, color: theme.highlight, letterSpacing: '0.2em', marginBottom: 4 }}>
                {s.k}
              </div>
              <div style={{ fontSize: 22, fontWeight: 500, color: theme.text }}>{s.t}</div>
            </div>
            <span style={{ color: theme.highlight, fontFamily: MONO, fontSize: 18 }}>→</span>
          </div>
        ))}
      </div>
    </CyberSlide>
  );

  // 6 · Áreas que transformamos (chips)
  const S6 = () => (
    <CyberSlide theme={theme} headerId="NW//DOMAINS" headerStatus="06 AREAS" page={6}>
      <div style={{ position: 'absolute', top: 200, left: 56, right: 56, zIndex: 4 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: theme.highlight, letterSpacing: '0.18em', marginBottom: 24 }}>
          {'$ ls /domains'}
        </div>
        <h2 style={{
          fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
          color: theme.text, margin: 0,
        }}>
          Áreas que<br /><span style={{ color: theme.highlight }}>transformamos</span>
        </h2>
      </div>
      <div style={{
        position: 'absolute', top: 560, left: 56, right: 56, zIndex: 4,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
      }}>
        {['marketing & growth', 'dados & bi', 'vendas', 'operações', 'customer success', 'produto'].map((a, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 16,
            padding: '24px 28px',
            border: `1px solid ${theme.cardBorder2}`,
            background: theme.cardBg,
            fontFamily: MONO, fontSize: 18, color: theme.text,
          }}>
            <span style={{ color: theme.highlight }}>{`/${String(i + 1).padStart(2, '0')}`}</span>
            <span>{a}</span>
          </div>
        ))}
      </div>
    </CyberSlide>
  );

  // 7 · Provocação (code block grande)
  const S7 = () => (
    <CyberSlide theme={theme} headerId="NW//STMT" headerStatus="DECLARE" page={7}>
      <div style={{ position: 'absolute', top: 280, left: 56, right: 56, zIndex: 4 }}>
        <div style={{
          padding: '48px 56px', border: `1px solid ${theme.cardBorder2}`,
          background: theme === cyberTheme ? 'rgba(10,13,18,.6)' : 'rgba(255,255,255,.5)',
          backdropFilter: 'blur(2px)', position: 'relative',
        }}>
          {[
            { top: -1, left: -1, borderTopWidth: 2, borderLeftWidth: 2 },
            { top: -1, right: -1, borderTopWidth: 2, borderRightWidth: 2 },
            { bottom: -1, left: -1, borderBottomWidth: 2, borderLeftWidth: 2 },
            { bottom: -1, right: -1, borderBottomWidth: 2, borderRightWidth: 2 },
          ].map((p, i) => (
            <span key={i} style={{
              position: 'absolute', width: 24, height: 24,
              borderColor: theme.highlight, borderStyle: 'solid', borderWidth: 0, ...p,
            }} />
          ))}
          <div style={{ fontFamily: MONO, fontSize: 13, color: theme.highlight, letterSpacing: '0.18em', marginBottom: 32 }}>
            {'/* manifesto */'}
          </div>
          <h2 style={{
            fontSize: 76, fontWeight: 800, lineHeight: 1.0, letterSpacing: '-0.03em',
            color: theme.text, margin: 0, textWrap: 'balance', textTransform: 'uppercase',
          }}>
            Não entregamos<br />ferramentas.<br />
            <span style={{ color: theme.highlight }}>Entregamos crescimento.</span>
          </h2>
        </div>
      </div>
    </CyberSlide>
  );

  // 8 · CTA · prompt
  const S8 = () => (
    <CyberSlide theme={theme} headerId="NW//ENGAGE" headerStatus="READY" page={8}>
      <div style={{ position: 'absolute', top: 320, left: 56, right: 56, zIndex: 4 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: theme.highlight, letterSpacing: '0.18em', marginBottom: 24 }}>
          {'> awaiting input...'}
        </div>
        <h1 style={{
          fontSize: 112, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
          color: theme.text, margin: 0, textWrap: 'balance', textTransform: 'uppercase',
        }}>
          Pronto pra<br /><span style={{ color: theme.highlight }}>crescer</span><br />de verdade?
        </h1>
        <div style={{
          marginTop: 64, padding: '24px 32px',
          fontFamily: MONO, fontSize: 22, color: theme.text,
          background: theme.cardBg2, border: `1.5px solid ${theme.highlight}`,
          display: 'inline-flex', alignItems: 'center', gap: 16,
        }}>
          <span style={{ color: theme.highlight }}>$</span>
          <span>./fale-com-a-newway</span>
          <span style={{ display: 'inline-block', width: 12, height: 22, background: theme.highlight, animation: 'blink 1s infinite' }} />
        </div>
      </div>
    </CyberSlide>
  );

  return [S1, S2, S3, S4, S5, S6, S7, S8];
};

// Linha E · cyber dark · 8 telas
const [E1, E2, E3, E4, E5, E6, E7, E8] = makeCyberDirection(cyberTheme);
// Linha F · light tech · 8 telas
const [F1, F2, F3, F4, F5, F6, F7, F8] = makeCyberDirection(lightTechTheme);

const App = () => {
  const dirA = [A1, A2, A3, A4, A5, A6, A7, A8];
  const dirB = [B1, B2, B3, B4, B5, B6, B7, B8];
  const dirC = [M1, M2, M3, M4, M5, M6, M7, M8];
  // Linha D · Tech / linhas de onda · 8 telas (compactado de 10 da referência)
  // Ordem: Capa, Hook, Diferenciais, Resultado +67%, Como geramos, Áreas, Provocação, CTA
  // T_D6 e T_D7 mantidos para clareza
  const dirD = [T1, T2, T3, T4, T5, T6_areas, T7, T8_CTA];
  const dirE = [E1, E2, E3, E4, E5, E6, E7, E8];
  const dirF = [F1, F2, F3, F4, F5, F6, F7, F8];

  const renderRow = (slides, prefix) =>
    slides.map((Comp, i) => (
      <window.DCArtboard key={`${prefix}-${i}`} id={`${prefix}-${i + 1}`} label={`${i + 1}/8`} width={ART_W} height={ART_H}>
        <ScaledSlide><Comp /></ScaledSlide>
      </window.DCArtboard>
    ));

  return (
    <window.DesignCanvas>
      <window.DCSection
        id="verdades"
        title="A · Verdades duras"
        subtitle="Provocador, alto contraste · Inspiração: Sahil Bloom, Alex Smith · Lista numerada de afirmações duras + amarelo de destaque + preto profundo. Funciona em conteúdo de opinião com gancho forte."
      >
        {renderRow(dirA, 'a')}
      </window.DCSection>
      <window.DCSection
        id="story"
        title="B · Story em capítulos"
        subtitle="Storytelling premium · Inspiração: Colby Kultgen, Lara Acosta · Caso real estruturado em capítulos (sintoma → diagnóstico → virada → resultado). Para construção de autoridade via case e ensino."
      >
        {renderRow(dirB, 'b')}
      </window.DCSection>
      <window.DCSection
        id="manifesto"
        title="C · Manifesto tipográfico"
        subtitle="1 ideia gigante por tela · Inspiração: Sahil Bloom anti-list · Cada tela é uma frase autônoma com tipografia 150pt+. Funciona como pôster — alta legibilidade mobile, alto poder de screenshot."
      >
        {renderRow(dirC, 'c')}
      </window.DCSection>
      <window.DCSection
        id="tech"
        title="D · Tech / Linhas de onda"
        subtitle="Visual signature · Inspiração: símbolo NW em macro · Linhas de onda em outline Aurora/Quantum sobre Neural Night, headlines tech-uppercase, charts limpos. Alto contraste e identidade forte — a linha visual mais reconhecível como New Way."
      >
        {renderRow(dirD, 'd')}
      </window.DCSection>
      <window.DCSection
        id="hyper-tech"
        title="E · Hyper-tech / Cyber"
        subtitle="Mais ousada — terminal aesthetic, monospace, grids densos, scanlines, headers de 'sistema' e dashboards cyberpunk. Sobre Neural Night profundo com accents Aurora/Quantum. Para posts que precisam GRITAR tech."
      >
        {renderRow(dirE, 'e')}
      </window.DCSection>
      <window.DCSection
        id="light-tech"
        title="F · Light-tech"
        subtitle="Mesma linguagem cyber/terminal da Linha E, mas em modo claro: fundo lilás suave, grid sutil em Aurora, accents Quantum, texto Core Slate. Sensação 'dashboard SaaS / B2B premium' — tech, mas mais conserto pra contextos institucionais."
      >
        {renderRow(dirF, 'f')}
      </window.DCSection>
    </window.DesignCanvas>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);