/* global React */
// ============================================================
// DECK EXTRAS — Linhas G (Apple Keynote) e H (Editorial Magazine)
// 1920×1080 · 12 layouts cada
// ============================================================

const C2 = {
  aurora: '#7418DA', neuralPurple: '#371A82', synapse: '#792BB8', quantum: '#AA4BEF',
  coreSlate: '#434A54', systemGray: '#626A75', neuralNight: '#1E242C',
  lightCanvas: '#EFF1F5',
};
const SANS2 = "'Inter', sans-serif";
const SERIF2 = "'Inter', sans-serif"; // brand: Inter italic 300 substitui Instrument Serif
const MONO2 = "'JetBrains Mono', monospace";

// ============================================================
// LINHA G · APPLE KEYNOTE STYLE
// Preto puro / branco puro, 1 ideia gigante, alto impacto
// ============================================================
const GFrame = ({ children, dark = true, page, total = 12 }) => (
  <div style={{
    width: 1920, height: 1080, background: dark ? '#000' : '#fff',
    color: dark ? '#fff' : '#000', fontFamily: SANS2, position: 'relative', overflow: 'hidden',
  }}>
    {children}
    <div style={{
      position: 'absolute', bottom: 40, left: 56, right: 56,
      display: 'flex', justifyContent: 'space-between',
      fontSize: 14, color: dark ? 'rgba(255,255,255,.3)' : 'rgba(0,0,0,.3)',
      letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 500,
    }}>
      <span>New Way · 2026</span>
      <span>{String(page).padStart(2, '0')} / {String(total).padStart(2, '0')}</span>
    </div>
  </div>
);

const G01 = () => (
  <GFrame dark page={1}>
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', textAlign: 'center', padding: '0 120px' }}>
      <div style={{ fontSize: 18, letterSpacing: '0.4em', color: C2.quantum, marginBottom: 64, fontWeight: 600, textTransform: 'uppercase' }}>New Way · 2026</div>
      <h1 style={{ fontSize: 220, fontWeight: 700, lineHeight: 0.95, letterSpacing: '-0.05em', margin: 0, textWrap: 'balance' }}>
        Crescimento<br /><span style={{ color: C2.quantum }}>inteligente.</span>
      </h1>
    </div>
  </GFrame>
);

const G02 = () => (
  <GFrame dark={false} page={2}>
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', textAlign: 'center' }}>
      <div style={{ fontSize: 16, letterSpacing: '0.4em', color: C2.aurora, marginBottom: 56, fontWeight: 700, textTransform: 'uppercase' }}>Capítulo 02</div>
      <h2 style={{ fontSize: 200, fontWeight: 700, lineHeight: 1, letterSpacing: '-0.045em', margin: 0, color: '#000' }}>O diagnóstico.</h2>
    </div>
  </GFrame>
);

const G03 = () => (
  <GFrame dark page={3}>
    <div style={{ position: 'absolute', top: 220, left: 120, right: 120 }}>
      <div style={{ fontSize: 16, letterSpacing: '0.4em', color: C2.quantum, marginBottom: 48, fontWeight: 700, textTransform: 'uppercase' }}>Agenda</div>
      {['O diagnóstico', 'O método', 'O resultado', 'O investimento'].map((t, i) => (
        <div key={i} style={{
          fontSize: 88, fontWeight: 600, lineHeight: 1.3, letterSpacing: '-0.02em',
          color: i === 0 ? '#fff' : 'rgba(255,255,255,.35)',
          display: 'flex', alignItems: 'baseline', gap: 32,
        }}>
          <span style={{ fontSize: 28, color: C2.quantum, fontWeight: 700, letterSpacing: '0.1em', minWidth: 60 }}>0{i + 1}</span>
          <span>{t}</span>
        </div>
      ))}
    </div>
  </GFrame>
);

const G04 = () => (
  <GFrame dark={false} page={4}>
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '0 160px' }}>
      <h2 style={{ fontSize: 132, fontWeight: 600, lineHeight: 1.05, letterSpacing: '-0.035em', margin: 0, color: '#000', textWrap: 'balance' }}>
        IA virou ruído.<br /><span style={{ color: C2.aurora }}>Método virou raridade.</span>
      </h2>
    </div>
  </GFrame>
);

const G05 = () => (
  <GFrame dark page={5}>
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', textAlign: 'center' }}>
      <div style={{ fontSize: 480, fontWeight: 700, letterSpacing: '-0.06em', lineHeight: 0.85, color: C2.quantum, fontFeatureSettings: '"tnum" 1' }}>+67%</div>
      <div style={{ fontSize: 36, fontWeight: 400, color: 'rgba(255,255,255,.7)', marginTop: 40, letterSpacing: '-0.01em' }}>de crescimento médio.</div>
    </div>
  </GFrame>
);

const G06 = () => (
  <GFrame dark={false} page={6}>
    <div style={{ position: 'absolute', top: 200, left: 160, right: 160 }}>
      <div style={{ fontSize: 320, color: C2.aurora, lineHeight: 0.7, fontWeight: 700, marginBottom: -40, fontFamily: SERIF2 }}>"</div>
      <h2 style={{ fontSize: 76, fontWeight: 300, lineHeight: 1.3, letterSpacing: '-0.02em', color: '#000', margin: 0, fontFamily: SERIF2, fontStyle: 'italic', textWrap: 'balance' }}>
        A New Way não vendeu IA. Vendeu uma forma diferente de tomar decisão.
      </h2>
      <div style={{ marginTop: 56, fontSize: 22, color: '#666', letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600 }}>Maria Silva · CEO Empresa XYZ</div>
    </div>
  </GFrame>
);

const G07 = () => (
  <GFrame dark page={7}>
    <div style={{ position: 'absolute', top: 200, left: 120, right: 120 }}>
      <div style={{ fontSize: 16, letterSpacing: '0.4em', color: C2.quantum, marginBottom: 32, fontWeight: 700, textTransform: 'uppercase' }}>Quem toca</div>
      <h2 style={{ fontSize: 96, fontWeight: 600, color: '#fff', margin: 0, letterSpacing: '-0.03em' }}>4 sêniors. Dedicação alta.</h2>
    </div>
    <div style={{ position: 'absolute', bottom: 160, left: 120, right: 120, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
      {[['Netto B.', 'CEO · Estratégia'], ['Ana M.', 'IA Aplicada'], ['Carla L.', 'Crescimento'], ['Diego R.', 'Engineering']].map(([n, r], i) => (
        <div key={i}>
          <div style={{ width: '100%', aspectRatio: '1', background: `linear-gradient(135deg, ${C2.synapse}, ${C2.quantum})`, marginBottom: 20 }} />
          <div style={{ fontSize: 28, fontWeight: 600, color: '#fff', marginBottom: 4 }}>{n}</div>
          <div style={{ fontSize: 14, color: 'rgba(255,255,255,.5)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>{r}</div>
        </div>
      ))}
    </div>
  </GFrame>
);

const G08 = () => (
  <GFrame dark={false} page={8}>
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', textAlign: 'center' }}>
      <div style={{ fontSize: 16, letterSpacing: '0.4em', color: C2.aurora, marginBottom: 56, fontWeight: 700, textTransform: 'uppercase' }}>Resultado · Indústria B2B</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 56 }}>
        <div>
          <div style={{ fontSize: 200, fontWeight: 700, lineHeight: 0.9, color: '#999', textDecoration: 'line-through', textDecorationThickness: 6 }}>90d</div>
          <div style={{ fontSize: 22, color: '#666', letterSpacing: '0.2em', textTransform: 'uppercase', marginTop: 16, fontWeight: 600 }}>Antes</div>
        </div>
        <div style={{ fontSize: 80, color: C2.aurora, fontWeight: 700 }}>→</div>
        <div>
          <div style={{ fontSize: 280, fontWeight: 700, lineHeight: 0.9, color: C2.aurora, letterSpacing: '-0.04em' }}>34d</div>
          <div style={{ fontSize: 22, color: '#000', letterSpacing: '0.2em', textTransform: 'uppercase', marginTop: 16, fontWeight: 600 }}>Depois</div>
        </div>
      </div>
    </div>
  </GFrame>
);

const G09 = () => (
  <GFrame dark page={9}>
    <div style={{ position: 'absolute', top: 240, left: 120, right: 120 }}>
      <div style={{ fontSize: 16, letterSpacing: '0.4em', color: C2.quantum, marginBottom: 56, fontWeight: 700, textTransform: 'uppercase' }}>Método</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        {['Diagnose', 'Strategize', 'Execute', 'Scale'].map((s, i) => (
          <React.Fragment key={i}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 18, color: C2.quantum, letterSpacing: '0.2em', fontWeight: 700, marginBottom: 24 }}>0{i + 1}</div>
              <div style={{ fontSize: 56, fontWeight: 600, color: '#fff', letterSpacing: '-0.02em' }}>{s}</div>
            </div>
            {i < 3 && <div style={{ fontSize: 56, color: 'rgba(255,255,255,.25)' }}>·</div>}
          </React.Fragment>
        ))}
      </div>
    </div>
  </GFrame>
);

const G10 = () => (
  <GFrame dark={false} page={10}>
    <div style={{ position: 'absolute', top: 200, left: 120, right: 120 }}>
      <div style={{ fontSize: 16, letterSpacing: '0.4em', color: C2.aurora, marginBottom: 32, fontWeight: 700, textTransform: 'uppercase' }}>Roadmap</div>
      <h2 style={{ fontSize: 96, fontWeight: 600, margin: 0, letterSpacing: '-0.03em', color: '#000' }}>180 dias.</h2>
    </div>
    <div style={{ position: 'absolute', bottom: 200, left: 120, right: 120 }}>
      <div style={{ height: 2, background: '#000', marginBottom: 40 }} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
        {[['0–30d', 'Diagnóstico'], ['31–60d', 'Quick wins'], ['61–90d', 'Resultado'], ['91–180d', 'Escala']].map(([d, t], i) => (
          <div key={i}>
            <div style={{ fontSize: 18, color: C2.aurora, fontWeight: 700, letterSpacing: '0.2em', marginBottom: 16 }}>{d}</div>
            <div style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em', color: '#000' }}>{t}</div>
          </div>
        ))}
      </div>
    </div>
  </GFrame>
);

const G11 = () => (
  <GFrame dark page={11}>
    <div style={{ position: 'absolute', top: 200, left: 120, right: 120 }}>
      <div style={{ fontSize: 16, letterSpacing: '0.4em', color: C2.quantum, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Investimento</div>
      <h2 style={{ fontSize: 88, fontWeight: 600, color: '#fff', margin: 0, letterSpacing: '-0.03em' }}>Três caminhos.</h2>
    </div>
    <div style={{ position: 'absolute', bottom: 160, left: 120, right: 120, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }}>
      {[['Diagnóstico', 'R$ 80k', '4 semanas'], ['Sprint 90d', 'R$ 240k', 'time dedicado', true], ['Programa 12m', 'sob medida', 'parceria longa']].map(([n, p, sub, h], i) => (
        <div key={i} style={{ padding: '40px 32px', borderLeft: i > 0 ? '1px solid rgba(255,255,255,.15)' : 'none', background: h ? `${C2.quantum}20` : 'transparent' }}>
          <div style={{ fontSize: 14, color: C2.quantum, letterSpacing: '0.22em', fontWeight: 700, marginBottom: 24, textTransform: 'uppercase' }}>{n}</div>
          <div style={{ fontSize: 64, fontWeight: 700, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 12 }}>{p}</div>
          <div style={{ fontSize: 16, color: 'rgba(255,255,255,.55)', letterSpacing: '0.05em' }}>{sub}</div>
        </div>
      ))}
    </div>
  </GFrame>
);

const G12 = () => (
  <GFrame dark={false} page={12}>
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', textAlign: 'center' }}>
      <div style={{ fontSize: 16, letterSpacing: '0.4em', color: C2.aurora, marginBottom: 64, fontWeight: 700, textTransform: 'uppercase' }}>Próximos passos</div>
      <h1 style={{ fontSize: 240, fontWeight: 700, lineHeight: 0.95, letterSpacing: '-0.05em', margin: 0, color: '#000' }}>
        Vamos <span style={{ color: C2.aurora }}>começar?</span>
      </h1>
      <div style={{ marginTop: 80, fontSize: 24, color: '#666', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600 }}>contato@gruponewway.com.br</div>
    </div>
  </GFrame>
);

// ============================================================
// G13 · ANTES / DEPOIS — split preto/branco
// ============================================================
const G13 = () => (
  <div style={{ width: 1920, height: 1080, display: 'flex', fontFamily: SANS2, position: 'relative' }}>
    <div style={{ flex: 1, background: '#fff', color: '#000', padding: '120px 80px' }}>
      <div style={{ fontSize: 16, letterSpacing: '0.4em', color: '#999', fontWeight: 700, textTransform: 'uppercase', marginBottom: 56 }}>Antes</div>
      <div style={{ fontSize: 96, fontWeight: 700, lineHeight: 1, letterSpacing: '-0.035em', marginBottom: 56, textWrap: 'balance' }}>
        Decisão <span style={{ color: '#999' }}>por intuição.</span>
      </div>
      <div style={{ fontSize: 22, color: '#666', lineHeight: 1.6, fontFamily: MONO2 }}>
        // ciclo trimestral<br />// time grande<br />// IA isolada<br />// métrica de vaidade
      </div>
    </div>
    <div style={{ flex: 1, background: '#000', color: '#fff', padding: '120px 80px' }}>
      <div style={{ fontSize: 16, letterSpacing: '0.4em', color: C2.quantum, fontWeight: 700, textTransform: 'uppercase', marginBottom: 56 }}>Depois</div>
      <div style={{ fontSize: 96, fontWeight: 700, lineHeight: 1, letterSpacing: '-0.035em', marginBottom: 56, textWrap: 'balance' }}>
        Decisão por <span style={{ color: C2.quantum }}>dado.</span>
      </div>
      <div style={{ fontSize: 22, color: 'rgba(255,255,255,.7)', lineHeight: 1.6, fontFamily: MONO2 }}>
        // ciclo semanal<br />// núcleo sênior<br />// IA aplicada<br />// receita & margem
      </div>
    </div>
    <div style={{
      position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
      width: 96, height: 96, borderRadius: 48, background: C2.aurora, color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 48, fontWeight: 700,
    }}>→</div>
    <div style={{ position: 'absolute', bottom: 40, left: 56, fontSize: 14, color: 'rgba(0,0,0,.4)', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 500 }}>New Way · 2026</div>
    <div style={{ position: 'absolute', bottom: 40, right: 56, fontSize: 14, color: 'rgba(255,255,255,.4)', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 500 }}>13 / 15</div>
  </div>
);

// ============================================================
// G14 · LOGOS DE CLIENTES — preto puro, grid mono
// ============================================================
const G14 = () => {
  const logos = ['AURORA', 'KEPLER', 'NORTHWAVE', 'OBSIDIAN', 'QUANTA', 'RIBBON', 'SOLARIS', 'TANGRAM', 'VERTEX', 'WALDEN', 'XENON', 'ZENITH'];
  return (
    <GFrame dark page={14} total={15}>
      <div style={{ position: 'absolute', top: 180, left: 120, right: 120 }}>
        <div style={{ fontSize: 16, letterSpacing: '0.4em', color: C2.quantum, marginBottom: 32, fontWeight: 700, textTransform: 'uppercase' }}>Quem confia</div>
        <h2 style={{ fontSize: 120, fontWeight: 700, color: '#fff', margin: 0, letterSpacing: '-0.035em', lineHeight: 1 }}>+47 empresas.</h2>
      </div>
      <div style={{
        position: 'absolute', top: 480, left: 120, right: 120,
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridTemplateRows: 'repeat(3, 1fr)',
        height: 360, border: '1px solid rgba(255,255,255,.15)',
      }}>
        {logos.map((l, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            borderRight: (i + 1) % 4 !== 0 ? '1px solid rgba(255,255,255,.1)' : 'none',
            borderBottom: i < 8 ? '1px solid rgba(255,255,255,.1)' : 'none',
          }}>
            <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: '0.18em', color: 'rgba(255,255,255,.55)' }}>{l}</div>
          </div>
        ))}
      </div>
      <div style={{
        position: 'absolute', bottom: 110, left: 120, right: 120, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        paddingTop: 24, borderTop: '1px solid rgba(255,255,255,.15)',
      }}>
        {[['+R$ 2.3bi', 'receita destravada'], ['+47', 'empresas atendidas'], ['NPS 76', 'satisfação cliente']].map(([v, l], i) => (
          <div key={i}>
            <div style={{ fontSize: 56, fontWeight: 700, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1 }}>{v}</div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,.5)', letterSpacing: '0.2em', textTransform: 'uppercase', marginTop: 8 }}>{l}</div>
          </div>
        ))}
      </div>
    </GFrame>
  );
};

// ============================================================
// G15 · FAQ — branco puro, perguntas serif
// ============================================================
const G15 = () => {
  const faqs = [
    ['"IA é só hype?"', 'IA sem método é. A gente entrega IA aplicada a 1 alavanca por vez, com métrica primária em 90 dias.'],
    ['"Vai demorar pra ver resultado?"', 'Não. Quick wins na semana 4–6. Métrica primária movendo no fim do trimestre — ou não cobramos a renovação.'],
    ['"Meu time vai ser substituído?"', 'Pelo contrário. A gente opera com seu time. Sai com playbook documentado para vocês manterem.'],
    ['"Por que não contratar interno?"', 'Porque você precisa de sêniors em 90 dias, não de 4 contratações que demoram 6 meses para ramp-up.'],
  ];
  return (
    <GFrame dark={false} page={15} total={15}>
      <div style={{ position: 'absolute', top: 130, left: 120, right: 120 }}>
        <div style={{ fontSize: 16, letterSpacing: '0.4em', color: C2.aurora, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>O que perguntam</div>
        <h2 style={{ fontSize: 96, fontWeight: 700, color: '#000', margin: 0, letterSpacing: '-0.035em', lineHeight: 1 }}>4 objeções.</h2>
      </div>
      <div style={{ position: 'absolute', top: 360, left: 120, right: 120 }}>
        {faqs.map(([q, a], i) => (
          <div key={i} style={{
            padding: '24px 0',
            borderBottom: i < faqs.length - 1 ? '1px solid rgba(0,0,0,.15)' : 'none',
            display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56,
          }}>
            <div style={{ fontFamily: SERIF2, fontStyle: 'italic', fontSize: 32, fontWeight: 300, color: '#000', lineHeight: 1.3 }}>{q}</div>
            <div style={{ fontSize: 20, color: '#444', lineHeight: 1.55 }}>
              <span style={{ color: C2.aurora, fontWeight: 700, marginRight: 10, letterSpacing: '0.1em' }}>NW →</span>
              {a}
            </div>
          </div>
        ))}
      </div>
    </GFrame>
  );
};

// ============================================================
// LINHA H · EDITORIAL MAGAZINE
// Multi-coluna estilo NYT/Stripe Press, serif display, drop caps
// ============================================================
const HFrame = ({ children, page, total = 12, section = 'NEW WAY · QUARTERLY' }) => (
  <div style={{
    width: 1920, height: 1080, background: '#FAF8F4', color: '#1A1A1A',
    fontFamily: SANS2, position: 'relative', overflow: 'hidden',
  }}>
    <div style={{
      position: 'absolute', top: 32, left: 56, right: 56,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      paddingBottom: 16, borderBottom: '1px solid #1A1A1A',
      fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600,
    }}>
      <span style={{ fontFamily: SERIF2, fontStyle: 'italic', fontSize: 22, letterSpacing: '0.02em', textTransform: 'none', fontWeight: 300 }}>The New Way Quarterly</span>
      <span>{section}</span>
      <span>№ {String(page).padStart(2, '0')}</span>
    </div>
    {children}
    <div style={{
      position: 'absolute', bottom: 32, left: 56, right: 56,
      display: 'flex', justifyContent: 'space-between',
      paddingTop: 16, borderTop: '1px solid #1A1A1A',
      fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600,
    }}>
      <span>gruponewway.com.br</span>
      <span>página {page} de {total}</span>
    </div>
  </div>
);

const H01 = () => (
  <HFrame page={1} section="ISSUE 01 · MAIO 2026">
    <div style={{ position: 'absolute', top: 130, left: 56, right: 56, height: 850 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, height: '100%' }}>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 14, letterSpacing: '0.3em', color: C2.aurora, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Edição especial · Empresa Cliente S.A.</div>
            <h1 style={{ fontFamily: SERIF2, fontSize: 200, fontWeight: 400, lineHeight: 0.92, letterSpacing: '-0.03em', margin: 0, color: '#000' }}>
              Crescimento <span style={{ fontStyle: 'italic' }}>inteligente</span> pra quem decide.
            </h1>
          </div>
          <div style={{ fontSize: 19, lineHeight: 1.55, color: '#333', columnCount: 2, columnGap: 32, fontFamily: SERIF2 }}>
            Uma proposta para tirar o crescimento da intuição e devolver ao rigor. Um mergulho em dados, decisões e gargalos — feito por um time pequeno, sênior, dedicado.
          </div>
        </div>
        <div style={{ background: `linear-gradient(160deg, ${C2.neuralNight}, ${C2.aurora})`, position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,.4)', fontSize: 14, letterSpacing: '0.3em', textTransform: 'uppercase' }}>retrato editorial</div>
          <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, color: '#fff', fontFamily: SERIF2, fontStyle: 'italic', fontSize: 22 }}>"Para os que tomam decisão sem espaço pra erro."</div>
        </div>
      </div>
    </div>
  </HFrame>
);

const H02 = () => (
  <HFrame page={2} section="CAPÍTULO 02">
    <div style={{ position: 'absolute', top: 200, left: 56, right: 56 }}>
      <div style={{ fontSize: 280, fontFamily: SERIF2, color: '#E5DFD2', lineHeight: 0.85, letterSpacing: '-0.05em', fontWeight: 400 }}>02</div>
      <div style={{ marginTop: -100, paddingLeft: 200 }}>
        <div style={{ fontSize: 14, letterSpacing: '0.3em', color: C2.aurora, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Parte II · Diagnóstico</div>
        <h2 style={{ fontFamily: SERIF2, fontSize: 156, fontWeight: 400, lineHeight: 0.95, letterSpacing: '-0.025em', margin: 0, color: '#000', textWrap: 'balance' }}>
          O <span style={{ fontStyle: 'italic' }}>diagnóstico</span> que ninguém queria fazer.
        </h2>
      </div>
    </div>
  </HFrame>
);

const H03 = () => (
  <HFrame page={3} section="ÍNDICE">
    <div style={{ position: 'absolute', top: 130, left: 56, right: 56 }}>
      <h2 style={{ fontFamily: SERIF2, fontSize: 120, fontWeight: 400, margin: '20px 0 56px', letterSpacing: '-0.025em', color: '#000' }}>Sumário</h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 80px' }}>
        {[['I', 'O diagnóstico', '04'], ['II', 'O que mudou no mercado', '07'], ['III', 'Método NW', '11'], ['IV', 'Plano de 90 dias', '15'], ['V', 'Investimento', '19'], ['VI', 'Próximos passos', '23']].map(([n, t, p], i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 24, padding: '28px 0', borderBottom: '1px solid rgba(0,0,0,.15)' }}>
            <span style={{ fontSize: 22, fontFamily: SERIF2, fontStyle: 'italic', color: C2.aurora, minWidth: 40 }}>{n}.</span>
            <span style={{ fontSize: 32, fontWeight: 500, flex: 1, letterSpacing: '-0.01em' }}>{t}</span>
            <span style={{ fontSize: 22, fontFamily: MONO2, color: '#666' }}>p. {p}</span>
          </div>
        ))}
      </div>
    </div>
  </HFrame>
);

const H04 = () => (
  <HFrame page={4} section="DIAGNÓSTICO">
    <div style={{ position: 'absolute', top: 130, left: 56, right: 56, bottom: 80, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 56 }}>
      <div style={{ gridColumn: 'span 2' }}>
        <div style={{ fontSize: 14, letterSpacing: '0.3em', color: C2.aurora, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Reportagem · Trinta empresas</div>
        <h2 style={{ fontFamily: SERIF2, fontSize: 84, fontWeight: 400, lineHeight: 1, letterSpacing: '-0.025em', margin: '0 0 40px 0', textWrap: 'balance' }}>
          O que <span style={{ fontStyle: 'italic' }}>travou</span> o crescimento.
        </h2>
        <div style={{ fontSize: 19, lineHeight: 1.7, color: '#222', columnCount: 2, columnGap: 32, fontFamily: SERIF2 }}>
          <span style={{ fontFamily: SERIF2, float: 'left', fontSize: 96, lineHeight: 0.85, paddingRight: 12, paddingTop: 6, color: C2.aurora, fontWeight: 400 }}>O</span>
          lhamos centenas de operações no último ano. As travas se repetem com uma honestidade desconfortável: decisões viraram aposta, IA virou ruído de fundo e o método — esse pequeno detalhe que separa empresa de planilha — ficou pra trás. Crescer voltou a ser tentativa-erro.
        </div>
      </div>
      <div style={{ borderLeft: '1px solid #1A1A1A', paddingLeft: 32 }}>
        <div style={{ fontSize: 13, letterSpacing: '0.25em', color: '#666', marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Padrões observados</div>
        {[['01', 'Decisão por aposta'], ['02', 'IA como ruído'], ['03', 'Método ausente']].map(([k, t], i) => (
          <div key={i} style={{ marginBottom: 28 }}>
            <div style={{ fontSize: 14, color: C2.aurora, fontWeight: 700, letterSpacing: '0.18em' }}>{k}</div>
            <div style={{ fontSize: 26, fontFamily: SERIF2, fontStyle: 'italic', color: '#000', marginTop: 4 }}>{t}</div>
          </div>
        ))}
      </div>
    </div>
  </HFrame>
);

const H05 = () => (
  <HFrame page={5} section="DADOS">
    <div style={{ position: 'absolute', top: 130, left: 56, right: 56, bottom: 80, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
      <div>
        <div style={{ fontSize: 14, letterSpacing: '0.3em', color: C2.aurora, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Insight de mercado</div>
        <div style={{ fontSize: 480, fontFamily: SERIF2, color: '#000', lineHeight: 0.85, letterSpacing: '-0.05em', fontWeight: 400 }}>
          +<span style={{ color: C2.aurora }}>67</span><span style={{ fontSize: 280 }}>%</span>
        </div>
      </div>
      <div style={{ borderLeft: '1px solid #1A1A1A', paddingLeft: 40 }}>
        <p style={{ fontSize: 28, fontFamily: SERIF2, lineHeight: 1.4, color: '#000', margin: '0 0 32px 0' }}>
          é o crescimento médio das empresas que combinaram <span style={{ fontStyle: 'italic' }}>IA aplicada</span> com método na última década, contra um mercado quase estável.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {[['3.2x', 'ROI/ano'], ['-43%', 'time-to-decision'], ['94%', 'CSAT pós-imp.'], ['n=312', 'amostra']].map(([v, l], i) => (
            <div key={i} style={{ borderTop: '1px solid #1A1A1A', paddingTop: 16 }}>
              <div style={{ fontSize: 36, fontWeight: 700, fontFamily: SERIF2, color: '#000' }}>{v}</div>
              <div style={{ fontSize: 13, color: '#666', letterSpacing: '0.15em', textTransform: 'uppercase', fontWeight: 600 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </HFrame>
);

const H06 = () => (
  <HFrame page={6} section="ENTREVISTA">
    <div style={{ position: 'absolute', top: 130, left: 56, right: 56, bottom: 80, display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 56 }}>
      <div style={{ background: `linear-gradient(160deg, ${C2.synapse}, ${C2.neuralNight})`, position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,.35)', fontSize: 13, letterSpacing: '0.3em', textTransform: 'uppercase' }}>retrato</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ fontSize: 14, letterSpacing: '0.3em', color: C2.aurora, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Entrevista · Maria Silva, CEO</div>
        <div style={{ fontSize: 200, fontFamily: SERIF2, color: C2.aurora, lineHeight: 0.6, marginBottom: -20, fontWeight: 400 }}>"</div>
        <p style={{ fontSize: 56, fontFamily: SERIF2, fontStyle: 'italic', lineHeight: 1.2, color: '#000', margin: 0, fontWeight: 300, textWrap: 'balance' }}>
          A New Way não vendeu IA. Vendeu uma forma diferente de tomar decisão. Em 90 dias, paramos de discutir achismo.
        </p>
        <div style={{ marginTop: 40, fontSize: 16, color: '#444', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600 }}>Maria Silva · CEO Empresa XYZ · Indústria B2B</div>
      </div>
    </div>
  </HFrame>
);

const H07 = () => (
  <HFrame page={7} section="O TIME">
    <div style={{ position: 'absolute', top: 130, left: 56, right: 56 }}>
      <div style={{ fontSize: 14, letterSpacing: '0.3em', color: C2.aurora, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Equipe alocada</div>
      <h2 style={{ fontFamily: SERIF2, fontSize: 96, fontWeight: 300, margin: '0 0 56px 0', letterSpacing: '-0.025em' }}>Quem vai <span style={{ fontStyle: 'italic', color: C2.aurora }}>tocar</span> isso.</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
        {[['Netto B.', 'CEO', 'Estratégia & narrativa'], ['Ana M.', 'Líder', 'IA aplicada · ML'], ['Carla L.', 'Head', 'Crescimento B2B'], ['Diego R.', 'Lead', 'Engineering']].map(([n, t, d], i) => (
          <div key={i} style={{ borderTop: '2px solid #000', paddingTop: 24 }}>
            <div style={{ width: '100%', height: 280, background: `linear-gradient(135deg, ${i % 2 ? C2.aurora : C2.synapse}, ${C2.neuralNight})`, marginBottom: 24 }} />
            <div style={{ fontSize: 13, color: C2.aurora, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 8 }}>{t}</div>
            <div style={{ fontSize: 32, fontFamily: SERIF2, color: '#000', marginBottom: 4 }}>{n}</div>
            <div style={{ fontSize: 16, color: '#555', fontFamily: SERIF2, fontStyle: 'italic' }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </HFrame>
);

const H08 = () => (
  <HFrame page={8} section="CASE">
    <div style={{ position: 'absolute', top: 130, left: 56, right: 56 }}>
      <div style={{ fontSize: 14, letterSpacing: '0.3em', color: C2.aurora, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Case · Indústria B2B</div>
      <h2 style={{ fontFamily: SERIF2, fontSize: 108, fontWeight: 300, margin: '0 0 56px 0', letterSpacing: '-0.025em', textWrap: 'balance' }}>De ciclo <span style={{ fontStyle: 'italic' }}>longo</span> a previsível.</h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0, borderTop: '2px solid #000' }}>
        {[['Antes', '90 dias', 'sem priorização'], ['Depois', '34 dias', 'IA + scoring novo'], ['Resultado', '+128%', 'receita semestral', true]].map(([k, v, d, h], i) => (
          <div key={i} style={{ padding: '36px 32px', borderRight: i < 2 ? '1px solid rgba(0,0,0,.2)' : 'none', background: h ? '#000' : 'transparent', color: h ? '#fff' : '#000' }}>
            <div style={{ fontSize: 14, color: h ? C2.quantum : C2.aurora, letterSpacing: '0.22em', fontWeight: 700, textTransform: 'uppercase', marginBottom: 24 }}>{k}</div>
            <div style={{ fontSize: 92, fontFamily: SERIF2, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 12 }}>{v}</div>
            <div style={{ fontSize: 20, fontStyle: 'italic', fontFamily: SERIF2, opacity: 0.7 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </HFrame>
);

const H09 = () => (
  <HFrame page={9} section="MÉTODO NW">
    <div style={{ position: 'absolute', top: 130, left: 56, right: 56 }}>
      <div style={{ fontSize: 14, letterSpacing: '0.3em', color: C2.aurora, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Protocolo</div>
      <h2 style={{ fontFamily: SERIF2, fontSize: 108, fontWeight: 300, margin: '0 0 56px 0', letterSpacing: '-0.025em' }}>O <span style={{ fontStyle: 'italic' }}>protocolo</span> de crescimento.</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '2px solid #000' }}>
        {[['I', 'Diagnose', 'Onde estão os gargalos reais.'], ['II', 'Strategize', 'Mapa de alavancas com IA + método.'], ['III', 'Execute', 'Times pequenos, sprints curtos.'], ['IV', 'Scale', 'Medimos, replicamos, escalamos.']].map(([n, t, d], i) => (
          <div key={i} style={{ padding: '36px 28px', borderRight: i < 3 ? '1px solid rgba(0,0,0,.2)' : 'none' }}>
            <div style={{ fontSize: 56, fontFamily: SERIF2, color: C2.aurora, lineHeight: 1, marginBottom: 24 }}>{n}.</div>
            <div style={{ fontSize: 36, fontFamily: SERIF2, fontWeight: 400, color: '#000', marginBottom: 16, letterSpacing: '-0.02em' }}>{t}</div>
            <div style={{ fontSize: 18, color: '#555', lineHeight: 1.5 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </HFrame>
);

const H10 = () => (
  <HFrame page={10} section="ROADMAP">
    <div style={{ position: 'absolute', top: 130, left: 56, right: 56 }}>
      <div style={{ fontSize: 14, letterSpacing: '0.3em', color: C2.aurora, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Roadmap · 180 dias</div>
      <h2 style={{ fontFamily: SERIF2, fontSize: 108, fontWeight: 300, margin: '0 0 80px 0', letterSpacing: '-0.025em' }}>Os primeiros <span style={{ fontStyle: 'italic' }}>180 dias.</span></h2>
      <div style={{ position: 'relative', height: 240 }}>
        <div style={{ position: 'absolute', top: 28, left: 28, right: 28, height: 2, background: '#000' }} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
          {[['0–30d', 'Imersão', 'Mergulho em dados'], ['31–60d', 'Quick wins', 'Primeiras alavancas'], ['61–90d', 'Resultado', 'Métrica primária'], ['91–180d', 'Escala', 'Replicar e ampliar']].map(([d, t, dd], i) => (
            <div key={i} style={{ paddingTop: 80, paddingRight: 16, position: 'relative' }}>
              <div style={{ position: 'absolute', top: 18, left: 24, width: 24, height: 24, borderRadius: 12, background: '#FAF8F4', border: '3px solid #000' }} />
              <div style={{ fontSize: 14, color: C2.aurora, fontFamily: MONO2, fontWeight: 700, marginBottom: 12 }}>{d}</div>
              <div style={{ fontSize: 32, fontFamily: SERIF2, color: '#000', marginBottom: 8 }}>{t}</div>
              <div style={{ fontSize: 16, color: '#555', fontFamily: SERIF2, fontStyle: 'italic' }}>{dd}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </HFrame>
);

const H11 = () => (
  <HFrame page={11} section="INVESTIMENTO">
    <div style={{ position: 'absolute', top: 130, left: 56, right: 56 }}>
      <div style={{ fontSize: 14, letterSpacing: '0.3em', color: C2.aurora, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Proposta comercial</div>
      <h2 style={{ fontFamily: SERIF2, fontSize: 108, fontWeight: 300, margin: '0 0 56px 0', letterSpacing: '-0.025em' }}>Três formas de <span style={{ fontStyle: 'italic' }}>começar.</span></h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '2px solid #000' }}>
        {[
          { n: 'I. Diagnóstico', p: 'R$ 80k', sub: '4 semanas · executive readout', items: ['Imersão de dados', 'Mapa de alavancas', 'Plano 90d sugerido'] },
          { n: 'II. Sprint 90d', p: 'R$ 240k', sub: 'time dedicado · 1 alavanca', items: ['Tudo do anterior', 'Implementação ponta a ponta', 'Métrica primária'], highlight: true },
          { n: 'III. Programa 12m', p: 'sob medida', sub: 'parceria de crescimento', items: ['Múltiplas alavancas', 'Time co-localizado', 'Governança trimestral'] },
        ].map((tier, i) => (
          <div key={i} style={{
            padding: '32px 28px', borderRight: i < 2 ? '1px solid rgba(0,0,0,.2)' : 'none',
            background: tier.highlight ? '#000' : 'transparent', color: tier.highlight ? '#fff' : '#000',
          }}>
            <div style={{ fontSize: 14, color: tier.highlight ? C2.quantum : C2.aurora, letterSpacing: '0.22em', fontWeight: 700, textTransform: 'uppercase', marginBottom: 24 }}>{tier.n}</div>
            <div style={{ fontSize: 64, fontFamily: SERIF2, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 8 }}>{tier.p}</div>
            <div style={{ fontSize: 16, fontStyle: 'italic', fontFamily: SERIF2, opacity: 0.7, marginBottom: 24 }}>{tier.sub}</div>
            <div style={{ borderTop: `1px solid ${tier.highlight ? 'rgba(255,255,255,.25)' : 'rgba(0,0,0,.15)'}`, paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {tier.items.map((it, j) => (
                <div key={j} style={{ display: 'flex', gap: 10, fontSize: 17 }}>
                  <span style={{ color: tier.highlight ? '#fff' : C2.aurora, fontWeight: 700 }}>+</span>
                  <span>{it}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  </HFrame>
);

const H12 = () => (
  <HFrame page={12} section="EPÍLOGO">
    <div style={{ position: 'absolute', top: 130, left: 56, right: 56, bottom: 80, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <div style={{ fontSize: 14, letterSpacing: '0.3em', color: C2.aurora, marginBottom: 24, fontWeight: 700, textTransform: 'uppercase' }}>Próximos passos</div>
      <h1 style={{ fontFamily: SERIF2, fontSize: 220, fontWeight: 400, lineHeight: 0.95, letterSpacing: '-0.035em', margin: '0 0 64px 0', textWrap: 'balance' }}>
        Vamos <span style={{ fontStyle: 'italic', color: C2.aurora }}>começar?</span>
      </h1>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '2px solid #000' }}>
        {[['I', 'Aprovar escopo', '09/05'], ['II', 'Kick-off', 'Semana 13/05'], ['III', 'Imersão', '16/05']].map(([n, t, d], i) => (
          <div key={i} style={{ padding: '24px 28px', borderRight: i < 2 ? '1px solid rgba(0,0,0,.2)' : 'none' }}>
            <div style={{ fontSize: 36, fontFamily: SERIF2, color: C2.aurora, marginBottom: 12 }}>{n}.</div>
            <div style={{ fontSize: 28, fontFamily: SERIF2, color: '#000', marginBottom: 8 }}>{t}</div>
            <div style={{ fontSize: 16, color: '#555', fontFamily: MONO2 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </HFrame>
);

window.G_LAYOUTS = [
  ['L01 · Capa', G01], ['L02 · Divisor', G02], ['L03 · Agenda', G03], ['L04 · Conteúdo', G04],
  ['L05 · Dado / KPI', G05], ['L06 · Quote', G06], ['L07 · Time', G07], ['L08 · Case', G08],
  ['L09 · Método', G09], ['L10 · Timeline', G10], ['L11 · Pricing', G11],
  ['L13 · Antes/Depois', G13], ['L14 · Logos clientes', G14], ['L15 · FAQ', G15],
  ['L12 · CTA', G12],
];
window.H_LAYOUTS = [
  ['L01 · Capa', H01], ['L02 · Divisor', H02], ['L03 · Sumário', H03], ['L04 · Reportagem', H04],
  ['L05 · Dado / KPI', H05], ['L06 · Entrevista', H06], ['L07 · Time', H07], ['L08 · Case', H08],
  ['L09 · Método', H09], ['L10 · Roadmap', H10], ['L11 · Investimento', H11], ['L12 · Epílogo', H12],
];