/* global React */

// ============================================================
// INSTAGRAM · NEW WAY · PADRÃO DE FEED
// 3 direções · 9 templates cada · 1080×1350
// ============================================================

const C = {
  aurora: '#7418DA',
  neuralPurple: '#371A82',
  synapse: '#792BB8',
  quantum: '#AA4BEF',
  coreSlate: '#434A54',
  systemGray: '#626A75',
  neuralNight: '#1E242C',
  neuralMist: '#A7AFBA',
  softIface: '#C8CED7',
  lightCanvas: '#EFF1F5',
};

const FONT = "'Inter', sans-serif";
const SERIF = "'Inter', sans-serif"; // brand: Inter italic 300 substitui Instrument Serif

// ============================================================
// COMPOSIÇÃO BASE
// ============================================================
const Post = ({ children, bg = '#fff', color = C.coreSlate }) => (
  <div style={{
    width: 1080, height: 1350, background: bg, color,
    fontFamily: FONT, position: 'relative', overflow: 'hidden',
  }}>
    {children}
  </div>
);

// Logo no canto — branco ou colorido
// size = WIDTH em px (logo é horizontal 7.2:1)
const Logo = ({ dark = false, size = 180, top = 56, left = 56 }) => (
  <img
    src={`assets/marca/logo-horizontal${dark ? '-branco' : ''}.svg`}
    alt="newway"
    style={{
      position: 'absolute', top, left,
      width: size, height: 'auto', display: 'block',
    }}
  />
);

// Footer minimalista
const Footer = ({ dark = false, label = 'crescimento inteligente', right = null }) => (
  <div style={{
    position: 'absolute', bottom: 56, left: 56, right: 56,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
  }}>
    <div style={{
      fontSize: 22, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase',
      color: dark ? 'rgba(255,255,255,.7)' : C.systemGray,
    }}>{label}</div>
    {right}
  </div>
);

// Categoria tag
const Tag = ({ children, color = C.aurora, dark = false }) => (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '8px 16px', borderRadius: 50,
    border: `1.5px solid ${dark ? color : color}`,
    background: dark ? `${color}22` : `${color}11`,
    color: dark ? color : color,
    fontSize: 13, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase',
  }}>{children}</div>
);

// ============================================================
// COMPONENTE WAVES (assinatura Direção B)
// ============================================================
const Waves = ({ variant = 'topright', opacity = 1, color = C.aurora, color2 = C.quantum, w = 1080, h = 1350 }) => {
  const presets = {
    topright: { transform: 'translate(720px, -120px) 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)' },
    center: { transform: 'translate(80px, 280px) scale(1.0)' },
  };
  const id = `iggrad-${variant}-${color.slice(1)}`;
  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={id} 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>
      {Array.from({ length: 26 }).map((_, i) => (
        <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(#${id})`}
          strokeWidth={i % 6 === 0 ? 1.3 : 0.8}
          fill="none"
          strokeOpacity={0.15 + (i % 5) * 0.12}
        />
      ))}
      {Array.from({ length: 50 }).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>
  );
};

// Imagem placeholder (foto stub) — gradiente roxo + textura, sem AI slop
const PhotoStub = ({ children, style = {}, w = '100%', h = '100%' }) => (
  <div style={{
    width: w, height: h, position: 'relative', overflow: 'hidden',
    background: `linear-gradient(135deg, ${C.neuralPurple}, ${C.aurora} 60%, ${C.quantum})`,
    ...style,
  }}>
    {/* mesh */}
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(circle at 30% 30%, ${C.quantum}55, transparent 50%), radial-gradient(circle at 70% 70%, ${C.neuralPurple}88, transparent 60%)`,
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      background: 'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px)',
    }} />
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,.5)', fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
      {children || 'imagem'}
    </div>
  </div>
);

// ============================================================
// DIREÇÃO A · TIPOGRÁFICA / MANIFESTO
// Sem fotos. Frases gigantes, fundo sólido, alto contraste.
// Feed reconhecível à distância: blocos de cor + tipografia bold.
// ============================================================

// A1 · Frase de impacto
const A1 = () => (
  <Post bg={C.neuralNight} color="#fff">
    <Logo dark size={180} />
    <div style={{ position: 'absolute', top: 280, left: 56, right: 56 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: C.quantum, marginBottom: 32,
      }}>Provocação</div>
      <h1 style={{
        fontSize: 132, fontWeight: 800, lineHeight: 0.92, letterSpacing: '-0.04em',
        color: '#fff', margin: 0, textWrap: 'balance', textTransform: 'uppercase',
      }}>
        Não basta<br />vender mais.<br />
        <span style={{ color: C.quantum }}>É vender certo.</span>
      </h1>
    </div>
    <Footer dark />
  </Post>
);

// A2 · Dado / KPI
const A2 = () => (
  <Post bg="#fff">
    <Logo dark={false} size={180} />
    <div style={{ position: 'absolute', top: 280, left: 56, right: 56 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 32,
      }}>Insight de mercado</div>
      <div style={{
        fontSize: 280, fontWeight: 800, color: C.aurora, lineHeight: 0.85,
        letterSpacing: '-0.05em', fontFeatureSettings: '"tnum" 1', marginBottom: 24,
      }}>+67%</div>
      <div style={{
        fontSize: 38, fontWeight: 600, color: C.coreSlate, lineHeight: 1.2,
        maxWidth: 760, letterSpacing: '-0.02em',
      }}>
        é o crescimento médio das empresas que adotam IA + método.
      </div>
    </div>
    <Footer dark={false} />
  </Post>
);

// A3 · Citação (frase de fundador)
const A3 = () => (
  <Post bg={C.lightCanvas}>
    <Logo size={180} />
    <div style={{ position: 'absolute', top: 240, left: 56, right: 56 }}>
      <div style={{
        fontSize: 240, color: C.aurora, lineHeight: 0.7, fontWeight: 700,
        marginBottom: -40, fontFamily: SERIF,
      }}>"</div>
      <h2 style={{
        fontSize: 64, fontWeight: 500, lineHeight: 1.15, letterSpacing: '-0.02em',
        color: C.coreSlate, margin: 0, fontFamily: SERIF, fontStyle: 'italic',
        textWrap: 'balance', maxWidth: 920,
      }}>
        A tecnologia abre a porta. <br />Mas é o método quem faz o contrato valer.
      </h2>
    </div>
    <div style={{ position: 'absolute', bottom: 130, left: 56 }}>
      <div style={{ fontSize: 24, fontWeight: 700, color: C.aurora, letterSpacing: '0.2em', textTransform: 'uppercase' }}>Sócio · New Way</div>
    </div>
    <Footer />
  </Post>
);

// A4 · Lista numerada (mini-aula)
const A4 = () => (
  <Post bg="#fff">
    <Logo size={180} />
    <div style={{ position: 'absolute', top: 200, left: 56, right: 56 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 24,
      }}>Mini-aula</div>
      <h2 style={{
        fontSize: 76, fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.03em',
        color: C.coreSlate, margin: '0 0 56px 0', textWrap: 'balance',
      }}>
        4 sinais que sua operação está <span style={{ color: C.aurora }}>obsoleta</span>
      </h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        {[
          'Decisões dependem de uma pessoa só',
          'Dados existem, mas não viram ação',
          'Vendas não são previsíveis',
          'Equipe acumula tarefas que IA já faria',
        ].map((t, i) => (
          <div key={i} 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, flexShrink: 0,
            }}>{String(i + 1).padStart(2, '0')}</div>
            <div style={{ fontSize: 26, fontWeight: 500, color: C.coreSlate }}>{t}</div>
          </div>
        ))}
      </div>
    </div>
    <Footer />
  </Post>
);

// A5 · Saiu na mídia
const A5 = () => (
  <Post bg={C.aurora} color="#fff">
    <Logo dark size={180} />
    <div style={{
      position: 'absolute', top: 56, right: 56,
    }}>
      <Tag color="#fff" dark>Saiu na mídia</Tag>
    </div>
    <div style={{ position: 'absolute', top: 360, left: 56, right: 56 }}>
      <div style={{
        fontSize: 240, color: 'rgba(255,255,255,.25)', lineHeight: 0.7, fontWeight: 700,
        marginBottom: -40, fontFamily: SERIF,
      }}>"</div>
      <h2 style={{
        fontSize: 64, fontWeight: 600, lineHeight: 1.15, letterSpacing: '-0.025em',
        color: '#fff', margin: 0, fontFamily: SERIF, fontStyle: 'italic',
        textWrap: 'balance', maxWidth: 920,
      }}>
        A New Way está mostrando como IA aplicada com método pode redefinir o crescimento das empresas brasileiras.
      </h2>
    </div>
    <div style={{ position: 'absolute', bottom: 130, left: 56 }}>
      <div style={{ fontSize: 14, fontWeight: 700, color: '#fff', letterSpacing: '0.25em', textTransform: 'uppercase' }}>Veículo XYZ · 2026</div>
    </div>
    <Footer dark />
  </Post>
);

// A6 · Vagas
const A6 = () => (
  <Post bg={C.neuralNight} color="#fff">
    <Logo dark size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56 }}>
      <Tag color={C.quantum} dark>Vaga aberta</Tag>
    </div>
    <div style={{ position: 'absolute', top: 320, left: 56, right: 56 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,.5)', marginBottom: 24,
      }}>Estamos contratando</div>
      <h1 style={{
        fontSize: 120, fontWeight: 800, lineHeight: 0.93, letterSpacing: '-0.04em',
        color: '#fff', margin: 0, textWrap: 'balance', textTransform: 'uppercase',
      }}>
        Cientista<br />de <span style={{ color: C.quantum }}>dados</span>
      </h1>
      <div style={{
        display: 'flex', gap: 12, marginTop: 56, flexWrap: 'wrap',
      }}>
        <Tag color={C.quantum} dark>Remoto</Tag>
        <Tag color={C.quantum} dark>Pleno · Sênior</Tag>
        <Tag color={C.quantum} dark>CLT</Tag>
      </div>
    </div>
    <Footer dark label="candidatura no link da bio" />
  </Post>
);

// A7 · Convite para evento
const A7 = () => (
  <Post bg="#fff">
    <Logo size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56 }}>
      <Tag>Webinar gratuito</Tag>
    </div>
    <div style={{ position: 'absolute', top: 320, left: 56, right: 56 }}>
      <h1 style={{
        fontSize: 84, fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.03em',
        color: C.coreSlate, margin: 0, textWrap: 'balance',
      }}>
        Como aplicar <span style={{ color: C.aurora }}>IA</span> em vendas B2B sem virar planilha.
      </h1>
      <div style={{
        marginTop: 64, padding: 32, borderRadius: 16,
        background: C.lightCanvas, display: 'flex', alignItems: 'center', gap: 32,
      }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.systemGray, marginBottom: 4 }}>Quando</div>
          <div style={{ fontSize: 28, fontWeight: 700, color: C.aurora, letterSpacing: '-0.02em' }}>15 . 06 . 2026</div>
        </div>
        <div style={{ width: 1, height: 48, background: C.softIface }} />
        <div>
          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.systemGray, marginBottom: 4 }}>Horário</div>
          <div style={{ fontSize: 28, fontWeight: 700, color: C.aurora, letterSpacing: '-0.02em' }}>19h · BRT</div>
        </div>
      </div>
    </div>
    <Footer label="inscrição no link da bio" />
  </Post>
);

// A8 · Bastidores / cultura (sem foto, com elemento gráfico de aspas grandes)
const A8 = () => (
  <Post bg={C.lightCanvas}>
    <Logo size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56 }}>
      <Tag>Cultura</Tag>
    </div>
    <div style={{ position: 'absolute', top: 280, left: 56, right: 56 }}>
      <h2 style={{
        fontSize: 76, fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.03em',
        color: C.coreSlate, margin: 0, textWrap: 'balance',
      }}>
        Aqui<br />não vende<br /><span style={{ color: C.aurora, fontFamily: SERIF, fontStyle: 'italic', fontWeight: 500 }}>fórmula mágica.</span>
      </h2>
      <div style={{
        marginTop: 48, paddingLeft: 16, borderLeft: `3px solid ${C.aurora}`,
        maxWidth: 720,
      }}>
        <p style={{
          fontSize: 22, lineHeight: 1.5, color: C.systemGray, margin: 0,
        }}>
          Trabalhamos com dados, método e pessoas que sabem o que estão fazendo. Sem hype, sem promessa fácil — só resultado mensurável.
        </p>
      </div>
    </div>
    <Footer />
  </Post>
);

// A9 · CTA / chamada
const A9 = () => (
  <Post bg={C.aurora} color="#fff">
    <Logo dark size={180} />
    <div style={{ position: 'absolute', top: 320, left: 56, right: 56 }}>
      <h1 style={{
        fontSize: 96, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
        color: '#fff', margin: 0, textWrap: 'balance',
      }}>
        Pronto para crescer<br />de forma <span style={{
          fontFamily: SERIF, fontStyle: 'italic', fontWeight: 500,
        }}>inteligente?</span>
      </h1>
      <div style={{
        marginTop: 80, display: 'inline-flex', alignItems: 'center', gap: 20,
        background: '#fff', color: C.aurora, padding: '24px 36px', borderRadius: 50,
        fontSize: 22, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase',
      }}>
        Falar com a gente
        <span style={{
          width: 36, height: 36, borderRadius: 18, background: C.aurora, color: '#fff',
          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>
      </div>
    </div>
    <Footer dark label="link na bio" />
  </Post>
);

// ============================================================
// DIREÇÃO B · TECH / LINHAS DE ONDA
// Assinatura visual NW como gráfico macro · Neural Night dominante
// Posts com "linha visual" reconhecível: ondas + outline + tipografia tech
// ============================================================

// B1 · Frase de impacto + ondas
const B1 = () => (
  <Post bg={C.neuralNight} color="#fff">
    <Waves variant="topright" />
    <Logo dark size={180} />
    <div style={{ position: 'absolute', top: 320, left: 56, right: 56, zIndex: 2 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: C.quantum, marginBottom: 32,
      }}>Posicionamento</div>
      <h1 style={{
        fontSize: 116, fontWeight: 800, lineHeight: 0.93, letterSpacing: '-0.04em',
        color: '#fff', margin: 0, textTransform: 'uppercase', textWrap: 'balance',
      }}>
        IA que gera<br /><span style={{ color: C.quantum }}>resultados</span><br />reais.
      </h1>
    </div>
    <Footer dark />
  </Post>
);

// B2 · Dado/insight (chart de barras simples)
const B2 = () => (
  <Post bg="#fff">
    <Logo size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56 }}>
      <Tag>Insight</Tag>
    </div>
    <div style={{ position: 'absolute', top: 200, left: 56, right: 56 }}>
      <h2 style={{
        fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
        color: C.coreSlate, margin: 0, textWrap: 'balance', maxWidth: 880,
      }}>
        Empresas que decidem com dados crescem <span style={{ color: C.aurora }}>2,8x mais.</span>
      </h2>
    </div>
    <div style={{ position: 'absolute', bottom: 220, left: 56, right: 56 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 48, height: 320 }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{ width: '100%', height: 100, background: C.softIface, borderRadius: '8px 8px 0 0' }} />
          <div style={{ marginTop: 16, fontSize: 18, fontWeight: 600, color: C.systemGray }}>Sem método</div>
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
          <div style={{
            position: 'absolute', top: -40, fontSize: 64, fontWeight: 800,
            color: C.aurora, letterSpacing: '-0.04em', fontFeatureSettings: '"tnum" 1',
          }}>2,8x</div>
          <div style={{ width: '100%', height: 280, background: `linear-gradient(180deg, ${C.quantum}, ${C.aurora})`, borderRadius: '8px 8px 0 0' }} />
          <div style={{ marginTop: 16, fontSize: 18, fontWeight: 600, color: C.aurora }}>Com New Way</div>
        </div>
      </div>
    </div>
    <Footer />
  </Post>
);

// B3 · Mini-aula (lista de método)
const B3 = () => (
  <Post bg={C.neuralNight} color="#fff">
    <Waves variant="bottomleft" opacity={0.6} />
    <Logo dark size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56, zIndex: 2 }}>
      <Tag color={C.quantum} dark>Método NW</Tag>
    </div>
    <div style={{ position: 'absolute', top: 200, left: 56, right: 56, zIndex: 2 }}>
      <h2 style={{
        fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
        color: '#fff', margin: 0, textWrap: 'balance',
      }}>
        4 passos do <span style={{ color: C.quantum }}>crescimento inteligente</span>
      </h2>
    </div>
    <div style={{ position: 'absolute', top: 540, left: 56, right: 56, zIndex: 2, display: 'flex', flexDirection: 'column', gap: 18 }}>
      {[
        'Entendemos seu negócio a fundo',
        'Analisamos dados e encontramos alavancas',
        'Criamos estratégias com IA + método',
        'Executamos com pessoas e medimos',
      ].map((t, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 28,
            border: `1.5px solid ${C.quantum}`, background: 'rgba(170,75,239,.12)',
            color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 20, fontWeight: 700, flexShrink: 0,
          }}>{String(i + 1).padStart(2, '0')}</div>
          <div style={{ fontSize: 24, fontWeight: 500, color: '#fff' }}>{t}</div>
        </div>
      ))}
    </div>
    <Footer dark />
  </Post>
);

// B4 · Case de cliente (resultado +%)
const B4 = () => (
  <Post bg="#fff">
    <Logo size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56 }}>
      <Tag>Case</Tag>
    </div>
    <div style={{ position: 'absolute', top: 240, left: 56, right: 56 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 24,
      }}>Indústria · Operação</div>
      <h2 style={{
        fontSize: 56, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.025em',
        color: C.coreSlate, margin: 0, maxWidth: 880, textWrap: 'balance',
      }}>
        De decisões manuais a uma operação que decide com IA em tempo real.
      </h2>
    </div>
    <div style={{ position: 'absolute', bottom: 200, left: 56, right: 56, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32 }}>
      {[
        ['+67%', 'eficiência operacional'],
        ['-43%', 'tempo de decisão'],
        ['3,2x', 'ROI no 1º ano'],
      ].map(([n, l], i) => (
        <div key={i} style={{ paddingTop: 24, borderTop: `2px solid ${C.aurora}` }}>
          <div style={{
            fontSize: 56, fontWeight: 800, color: C.aurora, letterSpacing: '-0.04em',
            lineHeight: 1, fontFeatureSettings: '"tnum" 1', marginBottom: 12,
          }}>{n}</div>
          <div style={{ fontSize: 16, fontWeight: 500, color: C.systemGray, lineHeight: 1.4 }}>{l}</div>
        </div>
      ))}
    </div>
    <Footer />
  </Post>
);

// B5 · Convite evento
const B5 = () => (
  <Post bg={C.neuralNight} color="#fff">
    <Waves variant="full" opacity={0.4} />
    <Logo dark size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56, zIndex: 2 }}>
      <Tag color={C.quantum} dark>Webinar</Tag>
    </div>
    <div style={{ position: 'absolute', top: 360, left: 56, right: 56, zIndex: 2 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: C.quantum, marginBottom: 32,
      }}>15 · 06 · 2026 · 19h</div>
      <h1 style={{
        fontSize: 88, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
        color: '#fff', margin: 0, textWrap: 'balance',
      }}>
        IA aplicada<br />em vendas B2B
      </h1>
      <p style={{
        fontSize: 22, lineHeight: 1.5, color: 'rgba(255,255,255,.75)',
        marginTop: 32, maxWidth: 720,
      }}>
        Como times comerciais estão usando IA para encurtar o ciclo de venda sem virar planilha.
      </p>
    </div>
    <Footer dark label="inscrição no link da bio" />
  </Post>
);

// B6 · Citação
const B6 = () => (
  <Post bg={C.neuralNight} color="#fff">
    <Waves variant="side" opacity={0.5} />
    <Logo dark size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56, zIndex: 2 }}>
      <Tag color={C.quantum} dark>Manifesto</Tag>
    </div>
    <div style={{ position: 'absolute', top: 280, left: 56, right: 56, zIndex: 2 }}>
      <div style={{
        fontSize: 240, color: C.quantum, lineHeight: 0.7, fontWeight: 700,
        marginBottom: -40, fontFamily: SERIF, opacity: 0.9,
      }}>"</div>
      <h2 style={{
        fontSize: 64, fontWeight: 500, lineHeight: 1.2, letterSpacing: '-0.025em',
        color: '#fff', margin: 0, fontFamily: SERIF, fontStyle: 'italic',
        textWrap: 'balance', maxWidth: 920,
      }}>
        Não entregamos ferramentas.<br />Entregamos crescimento.
      </h2>
    </div>
    <Footer dark />
  </Post>
);

// B7 · Vaga
const B7 = () => (
  <Post bg="#fff">
    <Logo size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56 }}>
      <Tag>Vaga</Tag>
    </div>
    <div style={{ position: 'absolute', top: 280, left: 56, right: 56 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 24,
      }}>Estamos contratando</div>
      <h1 style={{
        fontSize: 116, fontWeight: 800, lineHeight: 0.93, letterSpacing: '-0.04em',
        color: C.coreSlate, margin: 0, textTransform: 'uppercase', textWrap: 'balance',
      }}>
        Engenheiro<br />de <span style={{ color: C.aurora }}>IA</span>
      </h1>
      <div style={{ display: 'flex', gap: 12, marginTop: 56, flexWrap: 'wrap' }}>
        <Tag>Remoto</Tag>
        <Tag>Sênior</Tag>
        <Tag>CLT</Tag>
      </div>
    </div>
    <Footer label="candidatura no link da bio" />
  </Post>
);

// B8 · Áreas que transformamos (chips)
const B8 = () => (
  <Post bg={C.neuralNight} color="#fff">
    <Waves variant="topright" opacity={0.6} />
    <Logo dark size={180} />
    <div style={{ position: 'absolute', top: 200, left: 56, right: 56, zIndex: 2 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: C.quantum, marginBottom: 24,
      }}>O que fazemos</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={{
      position: 'absolute', top: 560, left: 56, right: 56, zIndex: 2,
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
    }}>
      {['Marketing & Growth', 'Dados & BI', 'Vendas', 'Operações', 'Customer Success', 'Produto'].map((a, i) => (
        <div key={i} style={{
          padding: '20px 24px', borderRadius: 50,
          border: `1.5px solid ${C.quantum}`, background: 'rgba(170,75,239,.08)',
          fontSize: 22, fontWeight: 500, color: '#fff',
        }}>{a}</div>
      ))}
    </div>
    <Footer dark />
  </Post>
);

// B9 · CTA
const B9 = () => (
  <Post bg={C.neuralNight} color="#fff">
    <Waves variant="center" opacity={0.5} />
    <Logo dark size={180} />
    <div style={{ position: 'absolute', top: 360, left: 56, right: 56, zIndex: 2 }}>
      <h1 style={{
        fontSize: 96, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
        color: '#fff', margin: 0, textWrap: 'balance',
      }}>
        Bora construir<br />o próximo<br /><span style={{ color: C.quantum }}>capítulo?</span>
      </h1>
      <div style={{
        marginTop: 64, display: 'inline-flex', alignItems: 'center', gap: 20,
        background: C.quantum, color: '#fff', padding: '24px 36px', borderRadius: 50,
        fontSize: 22, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase',
      }}>
        Falar com a gente
        <span style={{
          width: 36, height: 36, borderRadius: 18, background: '#fff', color: C.quantum,
          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>
      </div>
    </div>
    <Footer dark label="link na bio" />
  </Post>
);

// ============================================================
// DIREÇÃO C · EDITORIAL · foto duotone roxo
// Foto como protagonista, mas SEMPRE tratada com duotone Aurora.
// Tipografia em faixa branca/preta + serif itálica para nuance editorial.
// ============================================================

// Foto duotone via filter (placeholder)
const DuotoneStub = ({ children, h = '100%', tone = C.aurora }) => (
  <div style={{
    width: '100%', height: h, position: 'relative', overflow: 'hidden',
    background: `linear-gradient(160deg, ${C.neuralNight} 0%, ${tone} 60%, ${C.quantum} 100%)`,
  }}>
    {/* mesh / pattern */}
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 50%), radial-gradient(circle at 75% 80%, rgba(0,0,0,0.4), transparent 60%)`,
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      background: 'repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px)',
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'rgba(255,255,255,.4)', fontSize: 13, letterSpacing: '0.25em', textTransform: 'uppercase',
    }}>
      {children || 'foto · duotone'}
    </div>
  </div>
);

// C1 · Frase + foto duotone fullbleed
const C1 = () => (
  <Post>
    <DuotoneStub h="100%">retrato · executivo</DuotoneStub>
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(30,36,44,0.1) 0%, rgba(30,36,44,0.85) 100%)' }} />
    <Logo dark size={180} />
    <div style={{ position: 'absolute', bottom: 200, left: 56, right: 56 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: '#fff', marginBottom: 24, opacity: 0.7,
      }}>Editorial</div>
      <h1 style={{
        fontSize: 84, fontWeight: 700, lineHeight: 0.98, letterSpacing: '-0.03em',
        color: '#fff', margin: 0, textWrap: 'balance',
      }}>
        O CEO que <span style={{ fontFamily: SERIF, fontStyle: 'italic', fontWeight: 500 }}>delegou</span> à IA<br />a parte que ninguém queria fazer.
      </h1>
    </div>
    <Footer dark />
  </Post>
);

// C2 · Citação sobre foto duotone
const C2 = () => (
  <Post>
    <DuotoneStub h="60%" tone={C.synapse}>foto de equipe</DuotoneStub>
    <div style={{
      position: 'absolute', top: '60%', left: 0, right: 0, bottom: 0,
      background: '#fff', padding: '64px 56px',
    }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 24,
      }}>Manifesto</div>
      <h2 style={{
        fontSize: 48, fontWeight: 500, lineHeight: 1.2, letterSpacing: '-0.02em',
        color: C.coreSlate, margin: 0, fontFamily: SERIF, fontStyle: 'italic',
        textWrap: 'balance', maxWidth: 880,
      }}>
        Crescimento inteligente não é sobre tecnologia. É sobre decidir melhor — e mais rápido.
      </h2>
    </div>
    <Logo dark size={180} />
    <Footer />
  </Post>
);

// C3 · Saiu na mídia (faixa de logo de veículo)
const C3 = () => (
  <Post bg="#fff">
    <Logo size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56 }}>
      <Tag>Saiu na mídia</Tag>
    </div>
    <div style={{ position: 'absolute', top: 200, left: 56, right: 56, height: 480 }}>
      <DuotoneStub h="100%" tone={C.aurora}>capa do veículo</DuotoneStub>
    </div>
    <div style={{ position: 'absolute', bottom: 200, left: 56, right: 56 }}>
      <h2 style={{
        fontSize: 48, fontWeight: 600, lineHeight: 1.15, letterSpacing: '-0.02em',
        color: C.coreSlate, margin: 0, fontFamily: SERIF, fontStyle: 'italic',
        textWrap: 'balance',
      }}>
        "Como a New Way está usando IA para redesenhar o crescimento das empresas brasileiras."
      </h2>
      <div style={{ marginTop: 24, fontSize: 14, fontWeight: 700, color: C.aurora, letterSpacing: '0.25em', textTransform: 'uppercase' }}>
        Veículo XYZ · Abril 2026
      </div>
    </div>
    <Footer />
  </Post>
);

// C4 · Cultura / bastidores
const C4 = () => (
  <Post bg={C.lightCanvas}>
    <Logo size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56 }}>
      <Tag>Cultura</Tag>
    </div>
    <div style={{ position: 'absolute', top: 180, left: 56, right: 56 }}>
      <h2 style={{
        fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
        color: C.coreSlate, margin: 0, textWrap: 'balance', maxWidth: 880,
      }}>
        Como a gente <span style={{ fontFamily: SERIF, fontStyle: 'italic', fontWeight: 500, color: C.aurora }}>trabalha</span> aqui dentro.
      </h2>
    </div>
    <div style={{ position: 'absolute', top: 460, left: 56, right: 56, height: 380 }}>
      <DuotoneStub h="100%" tone={C.aurora}>bastidores · escritório</DuotoneStub>
    </div>
    <div style={{ position: 'absolute', bottom: 130, left: 56, right: 56, paddingTop: 24, borderTop: `1px solid ${C.softIface}` }}>
      <p style={{ fontSize: 20, lineHeight: 1.5, color: C.systemGray, margin: 0, maxWidth: 760 }}>
        Sem reuniões inúteis. Sem feudos de área. Times pequenos, decisões rápidas, dados na mesa.
      </p>
    </div>
    <Footer />
  </Post>
);

// C5 · Vagas com foto duotone
const C5 = () => (
  <Post>
    <DuotoneStub h="100%" tone={C.aurora}>retrato profissional</DuotoneStub>
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(116,24,218,0.5) 0%, rgba(30,36,44,0.85) 100%)' }} />
    <Logo dark size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56 }}>
      <Tag color="#fff" dark>Vaga aberta</Tag>
    </div>
    <div style={{ position: 'absolute', bottom: 200, left: 56, right: 56 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: '#fff', marginBottom: 24, opacity: 0.7,
      }}>Estamos contratando</div>
      <h1 style={{
        fontSize: 96, fontWeight: 700, lineHeight: 0.98, letterSpacing: '-0.035em',
        color: '#fff', margin: 0, textTransform: 'uppercase',
      }}>
        Líder de <span style={{ fontFamily: SERIF, fontStyle: 'italic', fontWeight: 500, textTransform: 'none' }}>growth</span>
      </h1>
      <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
        <Tag color="#fff" dark>Remoto</Tag>
        <Tag color="#fff" dark>Sênior</Tag>
      </div>
    </div>
    <Footer dark label="candidatura no link da bio" />
  </Post>
);

// C6 · Convite para evento
const C6 = () => (
  <Post bg="#fff">
    <Logo size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56 }}>
      <Tag>Webinar</Tag>
    </div>
    <div style={{ position: 'absolute', top: 180, left: 56, right: 56, height: 420 }}>
      <DuotoneStub h="100%" tone={C.synapse}>auditório / palestra</DuotoneStub>
    </div>
    <div style={{ position: 'absolute', bottom: 220, left: 56, right: 56 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: C.aurora, marginBottom: 16,
      }}>15 · 06 · 2026 · 19h</div>
      <h2 style={{
        fontSize: 56, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
        color: C.coreSlate, margin: 0, fontFamily: SERIF, fontStyle: 'italic', fontWeight: 500,
        textWrap: 'balance', maxWidth: 880,
      }}>
        IA aplicada em vendas B2B sem virar planilha.
      </h2>
    </div>
    <Footer label="inscrição no link da bio" />
  </Post>
);

// C7 · Case com foto + dados
const C7 = () => (
  <Post bg="#fff">
    <Logo size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56 }}>
      <Tag>Case</Tag>
    </div>
    <div style={{ position: 'absolute', top: 180, left: 56, right: 56, height: 460 }}>
      <DuotoneStub h="100%" tone={C.aurora}>foto cliente / fábrica</DuotoneStub>
    </div>
    <div style={{ position: 'absolute', bottom: 200, left: 56, right: 56 }}>
      <h3 style={{
        fontSize: 36, fontWeight: 600, lineHeight: 1.2, letterSpacing: '-0.02em',
        color: C.coreSlate, margin: '0 0 32px 0', fontFamily: SERIF, fontStyle: 'italic', maxWidth: 720,
      }}>
        Indústria reduziu o ciclo de decisão em 43% com IA aplicada.
      </h3>
      <div style={{ display: 'flex', gap: 32 }}>
        {[['+67%', 'eficiência'], ['-43%', 'tempo'], ['3,2x', 'ROI']].map(([n, l], i) => (
          <div key={i}>
            <div style={{ fontSize: 32, fontWeight: 800, color: C.aurora, letterSpacing: '-0.03em', fontFeatureSettings: '"tnum" 1' }}>{n}</div>
            <div style={{ fontSize: 14, color: C.systemGray, marginTop: 4 }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
    <Footer />
  </Post>
);

// C8 · Insight de mercado
const C8 = () => (
  <Post bg={C.neuralNight} color="#fff">
    <Logo dark size={180} />
    <div style={{ position: 'absolute', top: 56, right: 56 }}>
      <Tag color={C.quantum} dark>Dado de mercado</Tag>
    </div>
    <div style={{ position: 'absolute', top: 280, left: 56, right: 56 }}>
      <div style={{
        fontSize: 220, fontWeight: 800, color: C.quantum, letterSpacing: '-0.05em',
        lineHeight: 0.85, fontFeatureSettings: '"tnum" 1', marginBottom: 16,
      }}>78%</div>
      <h2 style={{
        fontSize: 44, fontWeight: 500, lineHeight: 1.25, letterSpacing: '-0.02em',
        color: '#fff', margin: 0, fontFamily: SERIF, fontStyle: 'italic',
        textWrap: 'balance', maxWidth: 920,
      }}>
        das empresas brasileiras ainda decidem sem dados estruturados.
      </h2>
      <div style={{
        marginTop: 40, fontSize: 13, fontWeight: 600, letterSpacing: '0.2em',
        textTransform: 'uppercase', color: 'rgba(255,255,255,.5)',
      }}>Fonte · Pesquisa New Way 2026</div>
    </div>
    <Footer dark />
  </Post>
);

// C9 · CTA com foto
const C9 = () => (
  <Post>
    <DuotoneStub h="100%" tone={C.synapse}>handshake / reunião</DuotoneStub>
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, rgba(30,36,44,0.92) 30%, rgba(30,36,44,0.2) 100%)' }} />
    <Logo dark size={180} />
    <div style={{ position: 'absolute', bottom: 200, left: 56, right: 56 }}>
      <div style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: C.quantum, marginBottom: 24,
      }}>Próximo capítulo</div>
      <h1 style={{
        fontSize: 84, fontWeight: 700, lineHeight: 0.98, letterSpacing: '-0.03em',
        color: '#fff', margin: 0, textWrap: 'balance',
      }}>
        Vamos construir<br />o seu juntos?
      </h1>
      <div style={{
        marginTop: 48, display: 'inline-flex', alignItems: 'center', gap: 20,
        background: '#fff', color: C.aurora, padding: '20px 32px', borderRadius: 50,
        fontSize: 20, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase',
      }}>
        Falar com a gente
        <span style={{
          width: 32, height: 32, borderRadius: 16, background: C.aurora, color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="14" height="14" 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>
      </div>
    </div>
    <Footer dark label="link na bio" />
  </Post>
);

// ============================================================
// DIREÇÃO D · HYPER-TECH / CYBER
// Mais ousada: terminal aesthetic, monospace, grids densos,
// scanlines, glitch sutil, badges "system" — empurra os limites
// mantendo a paleta New Way (Aurora / Quantum / Neural Night)
// ============================================================

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

// Background tech compartilhado: grid + scanlines + noise
const TechBg = ({ children, gridIntensity = 0.06, scanlines = true, color = C.aurora }) => (
  <div style={{ position: 'absolute', inset: 0 }}>
    {/* grade base 60px */}
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `linear-gradient(${color}${Math.round(gridIntensity * 255).toString(16).padStart(2, '0')} 1px, transparent 1px), linear-gradient(90deg, ${color}${Math.round(gridIntensity * 255).toString(16).padStart(2, '0')} 1px, transparent 1px)`,
      backgroundSize: '60px 60px',
    }} />
    {/* grade fina secundária */}
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `linear-gradient(${color}10 1px, transparent 1px), linear-gradient(90deg, ${color}10 1px, transparent 1px)`,
      backgroundSize: '15px 15px',
    }} />
    {/* radial glow */}
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(circle at 30% 60%, ${color}33, transparent 55%)`,
    }} />
    {/* scanlines */}
    {scanlines && (
      <div style={{
        position: 'absolute', inset: 0,
        background: 'repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.025) 3px, rgba(255,255,255,0.025) 4px)',
        pointerEvents: 'none',
      }} />
    )}
    {children}
  </div>
);

// Header de "sistema" com timestamp + status
const SysHeader = ({ id = 'NW//001', status = 'LIVE', color = C.quantum }) => (
  <div style={{
    position: 'absolute', top: 56, left: 56, right: 56,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontFamily: MONO, fontSize: 13, color: 'rgba(255,255,255,.55)',
    letterSpacing: '0.08em',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 4, background: color, boxShadow: `0 0 12px ${color}` }} />
      <span style={{ color: '#fff', fontWeight: 600 }}>{id}</span>
      <span>·</span>
      <span>{new Date().toISOString().slice(0, 10)}</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{
        padding: '4px 10px', border: `1px solid ${color}`, color, fontSize: 11,
        letterSpacing: '0.18em', fontWeight: 700,
      }}>{status}</span>
    </div>
  </div>
);

// D1 · Frase de impacto · terminal
const D1 = () => (
  <Post bg="#0A0D12" color="#fff">
    <TechBg color={C.aurora}>
      <SysHeader id="NW//MANIFEST" status="LIVE" color={C.quantum} />
      <div style={{ position: 'absolute', top: 280, left: 56, right: 56 }}>
        <div style={{
          fontFamily: MONO, fontSize: 13, color: C.quantum, letterSpacing: '0.18em',
          marginBottom: 24,
        }}>{'> system.broadcast()'}</div>
        <h1 style={{
          fontSize: 132, fontWeight: 800, lineHeight: 0.92, letterSpacing: '-0.04em',
          color: '#fff', margin: 0, textTransform: 'uppercase', textWrap: 'balance',
        }}>
          IA não substitui<br />o método.<br />
          <span style={{ color: C.quantum }}>Ela amplifica.</span>
          <span style={{ display: 'inline-block', width: 16, height: 96, background: C.quantum, marginLeft: 8, verticalAlign: '-12px', animation: 'blink 1s infinite' }} />
        </h1>
      </div>
      <div style={{
        position: 'absolute', bottom: 56, left: 56, right: 56,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: MONO, fontSize: 12, color: 'rgba(255,255,255,.4)', letterSpacing: '0.15em',
      }}>
        <span>gruponewway.com.br</span>
        <span>// CRESCIMENTO_INTELIGENTE</span>
      </div>
    </TechBg>
  </Post>
);

// D2 · Dashboard / KPI ultra denso
const D2 = () => (
  <Post bg="#0A0D12" color="#fff">
    <TechBg color={C.aurora}>
      <SysHeader id="NW//METRIC.001" status="↑ +67%" color={C.quantum} />
      <div style={{ position: 'absolute', top: 200, left: 56, right: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: 'rgba(255,255,255,.5)', letterSpacing: '0.15em', marginBottom: 8 }}>
          {'// growth.delta(client_avg)'}
        </div>
        <div style={{
          fontSize: 320, fontWeight: 800, color: '#fff', letterSpacing: '-0.06em',
          lineHeight: 0.85, fontFeatureSettings: '"tnum" 1', position: 'relative',
        }}>
          +67<span style={{ color: C.quantum }}>%</span>
        </div>
        <div style={{ marginTop: 16, fontSize: 28, fontWeight: 500, color: 'rgba(255,255,255,.85)', maxWidth: 760, lineHeight: 1.3, fontFamily: MONO }}>
          crescimento médio das empresas que adotam IA + método.
        </div>
      </div>
      {/* Grid de KPIs secundários estilo dashboard */}
      <div style={{
        position: 'absolute', bottom: 130, left: 56, right: 56,
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0,
        border: `1px solid ${C.aurora}55`, 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: '20px 24px',
            borderRight: i < 2 ? `1px solid ${C.aurora}33` : 'none',
            background: 'rgba(116,24,218,.08)',
          }}>
            <div style={{ fontSize: 11, color: C.quantum, letterSpacing: '0.2em', marginBottom: 8 }}>{k}</div>
            <div style={{ fontSize: 36, fontWeight: 700, color: '#fff', letterSpacing: '-0.03em' }}>{v}</div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,.4)', marginTop: 4 }}>{sub}</div>
          </div>
        ))}
      </div>
    </TechBg>
  </Post>
);

// D3 · Citação / manifesto · code block
const D3 = () => (
  <Post bg="#0A0D12" color="#fff">
    <TechBg color={C.aurora}>
      <SysHeader id="NW//QUOTE.07" status="STMT" color={C.quantum} />
      <div style={{ position: 'absolute', top: 280, left: 56, right: 56 }}>
        <div style={{
          padding: '40px 48px', border: `1px solid ${C.aurora}66`,
          background: 'rgba(10,13,18,.8)', backdropFilter: 'blur(2px)',
          position: 'relative',
        }}>
          {/* corner brackets */}
          {[
            { top: -1, left: -1, borderTop: 2, borderLeft: 2 },
            { top: -1, right: -1, borderTop: 2, borderRight: 2 },
            { bottom: -1, left: -1, borderBottom: 2, borderLeft: 2 },
            { bottom: -1, right: -1, borderBottom: 2, borderRight: 2 },
          ].map((p, i) => (
            <span key={i} style={{
              position: 'absolute', width: 20, height: 20,
              borderColor: C.quantum, borderStyle: 'solid', borderWidth: 0,
              ...Object.fromEntries(Object.entries(p).map(([k, v]) => [k, typeof v === 'number' && k.startsWith('border') ? `${v}px` : v])),
            }} />
          ))}
          <div style={{ fontFamily: MONO, fontSize: 13, color: C.quantum, letterSpacing: '0.18em', marginBottom: 24 }}>
            {'/* posicionamento */'}
          </div>
          <h2 style={{
            fontSize: 64, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.025em',
            color: '#fff', margin: 0, textWrap: 'balance',
          }}>
            Não entregamos<br />ferramentas.<br />
            <span style={{ color: C.quantum }}>Entregamos crescimento.</span>
          </h2>
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 56, left: 56, right: 56,
        fontFamily: MONO, fontSize: 12, color: 'rgba(255,255,255,.4)', letterSpacing: '0.15em',
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>// new_way.manifesto</span>
        <span>v.2026</span>
      </div>
    </TechBg>
  </Post>
);

// D4 · Mini-aula · stack de cards
const D4 = () => (
  <Post bg="#0A0D12" color="#fff">
    <TechBg color={C.aurora}>
      <SysHeader id="NW//METHOD" status="04 STEPS" color={C.quantum} />
      <div style={{ position: 'absolute', top: 200, left: 56, right: 56 }}>
        <h2 style={{
          fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
          color: '#fff', margin: 0, textWrap: 'balance',
        }}>
          O protocolo de<br /><span style={{ color: C.quantum }}>crescimento.exe</span>
        </h2>
      </div>
      <div style={{
        position: 'absolute', top: 460, left: 56, right: 56,
        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 24px',
            border: `1px solid ${C.aurora}44`,
            background: 'rgba(116,24,218,.08)',
            position: 'relative',
          }}>
            <div style={{
              fontFamily: MONO, fontSize: 12, color: C.quantum, letterSpacing: '0.18em',
              padding: '6px 12px', border: `1px solid ${C.quantum}`,
              flexShrink: 0,
            }}>{s.n}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: MONO, fontSize: 13, color: C.quantum, letterSpacing: '0.2em', marginBottom: 4 }}>
                {s.k}
              </div>
              <div style={{ fontSize: 22, fontWeight: 500, color: '#fff' }}>{s.t}</div>
            </div>
            <span style={{ color: C.quantum, fontFamily: MONO, fontSize: 18 }}>→</span>
          </div>
        ))}
      </div>
    </TechBg>
  </Post>
);

// D5 · Saiu na mídia · printout estilo telex
const D5 = () => (
  <Post bg="#0A0D12" color="#fff">
    <TechBg color={C.aurora}>
      <SysHeader id="NW//PRESS.IN" status="INCOMING" color={C.quantum} />
      <div style={{ position: 'absolute', top: 240, left: 56, right: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: C.quantum, letterSpacing: '0.18em', marginBottom: 32 }}>
          {'> press.feed.fetch()'}
        </div>
        <div style={{
          padding: 40, background: 'rgba(255,255,255,.03)',
          border: `1px solid ${C.aurora}55`,
        }}>
          <div style={{
            fontSize: 240, color: C.quantum, lineHeight: 0.7, fontWeight: 700,
            marginBottom: -40, fontFamily: SERIF, opacity: 0.9,
          }}>"</div>
          <h2 style={{
            fontSize: 48, fontWeight: 500, lineHeight: 1.2, letterSpacing: '-0.02em',
            color: '#fff', margin: 0, fontFamily: SERIF, fontStyle: 'italic',
            textWrap: 'balance', maxWidth: 880,
          }}>
            A New Way está mostrando como IA aplicada com método pode redefinir o crescimento das empresas brasileiras.
          </h2>
          <div style={{
            marginTop: 32, paddingTop: 20, borderTop: `1px dashed ${C.aurora}55`,
            fontFamily: MONO, fontSize: 12, color: 'rgba(255,255,255,.5)', letterSpacing: '0.18em',
            display: 'flex', justifyContent: 'space-between',
          }}>
            <span>VEÍCULO_XYZ</span>
            <span>2026.04.30</span>
          </div>
        </div>
      </div>
    </TechBg>
  </Post>
);

// D6 · Vaga · estilo recruit terminal
const D6 = () => (
  <Post bg="#0A0D12" color="#fff">
    <TechBg color={C.aurora}>
      <SysHeader id="NW//RECRUIT" status="OPEN" color={C.quantum} />
      <div style={{ position: 'absolute', top: 240, left: 56, right: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: C.quantum, letterSpacing: '0.18em', marginBottom: 24 }}>
          {'$ hire --role=ai_engineer'}
        </div>
        <h1 style={{
          fontSize: 124, fontWeight: 800, lineHeight: 0.93, letterSpacing: '-0.04em',
          color: '#fff', margin: 0, textTransform: 'uppercase',
        }}>
          AI<br /><span style={{ color: C.quantum }}>engineer</span>
        </h1>
        <div style={{
          marginTop: 56, display: 'flex', flexDirection: 'column', gap: 8,
          fontFamily: MONO, fontSize: 16, color: 'rgba(255,255,255,.85)',
        }}>
          {[
            ['mode', 'remote'],
            ['seniority', 'senior'],
            ['stack', 'python · llm · ml-ops'],
            ['contract', 'CLT'],
          ].map(([k, v], i) => (
            <div key={i} style={{ display: 'flex', gap: 24 }}>
              <span style={{ color: C.quantum, minWidth: 140 }}>{k}</span>
              <span style={{ color: 'rgba(255,255,255,.5)' }}>=</span>
              <span style={{ color: '#fff' }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 56, left: 56, right: 56,
        fontFamily: MONO, fontSize: 12, color: 'rgba(255,255,255,.4)', letterSpacing: '0.15em',
      }}>
        {'> apply.now → link na bio'}
      </div>
    </TechBg>
  </Post>
);

// D7 · Convite evento · countdown
const D7 = () => (
  <Post bg="#0A0D12" color="#fff">
    <TechBg color={C.aurora}>
      <SysHeader id="NW//EVENT" status="T-30D" color={C.quantum} />
      <div style={{ position: 'absolute', top: 240, left: 56, right: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: C.quantum, letterSpacing: '0.18em', marginBottom: 24 }}>
          {'> event.broadcast()'}
        </div>
        <h1 style={{
          fontSize: 96, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
          color: '#fff', margin: 0, textWrap: 'balance', textTransform: 'uppercase',
        }}>
          IA aplicada<br />em <span style={{ color: C.quantum }}>vendas B2B</span>
        </h1>
        <p style={{
          fontSize: 22, lineHeight: 1.5, color: 'rgba(255,255,255,.7)',
          marginTop: 32, maxWidth: 720, fontFamily: MONO,
        }}>
          // como times comerciais usam IA pra encurtar o ciclo<br />
          // de venda sem virar planilha
        </p>
      </div>
      {/* countdown grid */}
      <div style={{
        position: 'absolute', bottom: 200, left: 56, right: 56,
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 0,
        border: `1px solid ${C.aurora}55`, fontFamily: MONO,
      }}>
        {[
          ['15', 'JUN'],
          ['19', 'BRT'],
          ['ON', 'LINE'],
          ['00', 'CUSTO'],
        ].map(([v, k], i) => (
          <div key={i} style={{
            padding: '24px 16px', textAlign: 'center',
            borderRight: i < 3 ? `1px solid ${C.aurora}33` : 'none',
            background: i % 2 === 0 ? 'rgba(116,24,218,.12)' : 'transparent',
          }}>
            <div style={{ fontSize: 48, fontWeight: 800, color: '#fff', letterSpacing: '-0.04em', lineHeight: 1 }}>{v}</div>
            <div style={{ fontSize: 11, color: C.quantum, letterSpacing: '0.2em', marginTop: 6 }}>{k}</div>
          </div>
        ))}
      </div>
    </TechBg>
  </Post>
);

// D8 · Cultura · ASCII NW
const D8 = () => (
  <Post bg="#0A0D12" color="#fff">
    <TechBg color={C.aurora}>
      <SysHeader id="NW//CULTURE" status="OPEN_SRC" color={C.quantum} />
      <div style={{ position: 'absolute', top: 240, left: 56, right: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: C.quantum, letterSpacing: '0.18em', marginBottom: 24 }}>
          {'cat manifesto.txt'}
        </div>
        <h2 style={{
          fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
          color: '#fff', margin: '0 0 32px 0', textWrap: 'balance',
        }}>
          Aqui não tem<br /><span style={{ color: C.quantum }}>fórmula mágica.</span>
        </h2>
        <div style={{
          fontFamily: MONO, fontSize: 18, lineHeight: 1.7, color: 'rgba(255,255,255,.85)',
          paddingLeft: 24, borderLeft: `2px solid ${C.quantum}`,
        }}>
          <div>$ no_meetings_que_poderiam_ser_email</div>
          <div>$ no_feudos_de_area</div>
          <div>$ data &gt; opinião</div>
          <div>$ ship &gt; perfeição</div>
          <div style={{ color: C.quantum, marginTop: 8 }}>$ humanos_+_IA = crescimento_real</div>
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 56, left: 56, right: 56,
        fontFamily: MONO, fontSize: 12, color: 'rgba(255,255,255,.4)', letterSpacing: '0.15em',
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>// new_way.culture</span>
        <span>v.2026</span>
      </div>
    </TechBg>
  </Post>
);

// D9 · CTA · prompt
const D9 = () => (
  <Post bg="#0A0D12" color="#fff">
    <TechBg color={C.aurora}>
      <SysHeader id="NW//ENGAGE" status="READY" color={C.quantum} />
      <div style={{ position: 'absolute', top: 320, left: 56, right: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: C.quantum, letterSpacing: '0.18em', marginBottom: 24 }}>
          {'> awaiting input...'}
        </div>
        <h1 style={{
          fontSize: 100, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
          color: '#fff', margin: 0, textWrap: 'balance', textTransform: 'uppercase',
        }}>
          Pronto pra<br /><span style={{ color: C.quantum }}>crescer</span><br />de verdade?
        </h1>
        <div style={{
          marginTop: 56, padding: '20px 24px',
          fontFamily: MONO, fontSize: 18, color: '#fff',
          background: 'rgba(170,75,239,.12)', border: `1px solid ${C.quantum}`,
          display: 'inline-flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{ color: C.quantum }}>$</span>
          <span>./fale-com-a-newway</span>
          <span style={{ display: 'inline-block', width: 10, height: 18, background: C.quantum, animation: 'blink 1s infinite' }} />
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 56, left: 56, right: 56,
        fontFamily: MONO, fontSize: 12, color: 'rgba(255,255,255,.4)', letterSpacing: '0.15em',
      }}>
        // link na bio · gruponewway.com.br
      </div>
    </TechBg>
  </Post>
);

// ============================================================
// CANVAS
// ============================================================
//
// DIREÇÃO E · LIGHT-TECH (variação clara da D)
// Mesmo sistema da Linha D, mas em modo claro:
// fundo Light Canvas, grid sutil, texto Core Slate, accents Aurora/Quantum.
// Sensação mais "premium / dashboard SaaS" e menos "cyber".
// ============================================================

// CSS custom properties que controlam D em todas as telas
const themeVarsDark = {
  '--tech-bg': '#0A0D12',
  '--tech-text': '#fff',
  '--tech-text-muted': 'rgba(255,255,255,.55)',
  '--tech-text-faint': 'rgba(255,255,255,.4)',
  '--tech-text-soft': 'rgba(255,255,255,.85)',
  '--tech-text-mid': 'rgba(255,255,255,.7)',
  '--tech-text-low': 'rgba(255,255,255,.5)',
  '--tech-grid-strong': '#7418DA',
  '--tech-grid-faint': '#7418DA',
  '--tech-accent': C.aurora,
  '--tech-highlight': C.quantum,
  '--tech-card-bg': 'rgba(116,24,218,.08)',
  '--tech-card-bg-2': 'rgba(170,75,239,.12)',
  '--tech-card-border': 'rgba(116,24,218,.27)',
  '--tech-card-border-2': 'rgba(116,24,218,.33)',
  '--tech-quote-bg': 'rgba(10,13,18,.8)',
  '--tech-press-bg': 'rgba(255,255,255,.03)',
  '--tech-radial': 'rgba(116,24,218,.2)',
  '--tech-scanline': 'rgba(255,255,255,0.025)',
};

const themeVarsLight = {
  '--tech-bg': '#F4F1FA', // levemente lilás
  '--tech-text': C.coreSlate,
  '--tech-text-muted': C.systemGray,
  '--tech-text-faint': C.neuralMist,
  '--tech-text-soft': C.coreSlate,
  '--tech-text-mid': C.systemGray,
  '--tech-text-low': C.neuralMist,
  '--tech-grid-strong': C.aurora,
  '--tech-grid-faint': C.aurora,
  '--tech-accent': C.aurora,
  '--tech-highlight': C.aurora, // no light, os "destaques quantum" ficam aurora p/ contraste
  '--tech-card-bg': 'rgba(116,24,218,.05)',
  '--tech-card-bg-2': 'rgba(170,75,239,.08)',
  '--tech-card-border': 'rgba(116,24,218,.22)',
  '--tech-card-border-2': 'rgba(116,24,218,.3)',
  '--tech-quote-bg': 'rgba(255,255,255,.6)',
  '--tech-press-bg': 'rgba(255,255,255,.7)',
  '--tech-radial': 'rgba(170,75,239,.18)',
  '--tech-scanline': 'rgba(0,0,0,0.025)',
};

// Wraps qualquer tela D dentro de variáveis light. Reescreve cores via vars.
// Usamos um efeito secundário: substituições inline para hex codes que aparecem em props
// dos componentes D (#fff, '#0A0D12', C.aurora, C.quantum, rgba whites...) via filtros css é frágil.
// Por isso, criamos versões E1..E9 explícitas, copiadas e adaptadas.

// Background tech CLARO (gêmeo do TechBg)
const TechBgLight = ({ children }) => (
  <div style={{ position: 'absolute', inset: 0 }}>
    {/* grade 60px */}
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `linear-gradient(${C.aurora}1A 1px, transparent 1px), linear-gradient(90deg, ${C.aurora}1A 1px, transparent 1px)`,
      backgroundSize: '60px 60px',
    }} />
    {/* grade 15px */}
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `linear-gradient(${C.aurora}10 1px, transparent 1px), linear-gradient(90deg, ${C.aurora}10 1px, transparent 1px)`,
      backgroundSize: '15px 15px',
    }} />
    {/* glow */}
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(circle at 30% 60%, ${C.quantum}25, transparent 55%)`,
    }} />
    {/* scanlines invertidas */}
    <div style={{
      position: 'absolute', inset: 0,
      background: 'repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.025) 3px, rgba(0,0,0,0.025) 4px)',
      pointerEvents: 'none',
    }} />
    {children}
  </div>
);

// Header system claro
const SysHeaderLight = ({ id = 'NW//001', status = 'LIVE' }) => (
  <div style={{
    position: 'absolute', top: 56, left: 56, right: 56,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontFamily: MONO, fontSize: 13, color: C.systemGray, letterSpacing: '0.08em',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 4, background: C.aurora, boxShadow: `0 0 12px ${C.aurora}` }} />
      <span style={{ color: C.coreSlate, fontWeight: 700 }}>{id}</span>
      <span style={{ opacity: 0.4 }}>·</span>
      <span>{new Date().toISOString().slice(0, 10)}</span>
    </div>
    <div>
      <span style={{
        padding: '4px 10px', border: `1px solid ${C.aurora}`, color: C.aurora, fontSize: 11,
        letterSpacing: '0.18em', fontWeight: 700,
      }}>{status}</span>
    </div>
  </div>
);

const LIGHT_BG = '#F4F1FA';
const LIGHT_FAINT = 'rgba(67,74,84,.5)';
const LIGHT_MID = 'rgba(67,74,84,.7)';
const LIGHT_SOFT = 'rgba(67,74,84,.85)';

// E1 · Frase de impacto · terminal claro
const E1 = () => (
  <Post bg={LIGHT_BG} color={C.coreSlate}>
    <TechBgLight>
      <SysHeaderLight id="NW//MANIFEST" status="LIVE" />
      <div style={{ position: 'absolute', top: 280, left: 56, right: 56 }}>
        <div style={{
          fontFamily: MONO, fontSize: 13, color: C.aurora, letterSpacing: '0.18em',
          marginBottom: 24,
        }}>{'> system.broadcast()'}</div>
        <h1 style={{
          fontSize: 132, fontWeight: 800, lineHeight: 0.92, letterSpacing: '-0.04em',
          color: C.coreSlate, margin: 0, textTransform: 'uppercase', textWrap: 'balance',
        }}>
          IA não substitui<br />o método.<br />
          <span style={{ color: C.aurora }}>Ela amplifica.</span>
          <span style={{ display: 'inline-block', width: 16, height: 96, background: C.aurora, marginLeft: 8, verticalAlign: '-12px', animation: 'blink 1s infinite' }} />
        </h1>
      </div>
      <div style={{
        position: 'absolute', bottom: 56, left: 56, right: 56,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: MONO, fontSize: 12, color: LIGHT_FAINT, letterSpacing: '0.15em',
      }}>
        <span>gruponewway.com.br</span>
        <span>// CRESCIMENTO_INTELIGENTE</span>
      </div>
    </TechBgLight>
  </Post>
);

// E2 · Dashboard / KPI denso claro
const E2 = () => (
  <Post bg={LIGHT_BG} color={C.coreSlate}>
    <TechBgLight>
      <SysHeaderLight id="NW//METRIC.001" status="↑ +67%" />
      <div style={{ position: 'absolute', top: 200, left: 56, right: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: C.systemGray, letterSpacing: '0.15em', marginBottom: 8 }}>
          {'// growth.delta(client_avg)'}
        </div>
        <div style={{
          fontSize: 320, fontWeight: 800, color: C.coreSlate, letterSpacing: '-0.06em',
          lineHeight: 0.85, fontFeatureSettings: '"tnum" 1', position: 'relative',
        }}>
          +67<span style={{ color: C.aurora }}>%</span>
        </div>
        <div style={{ marginTop: 16, fontSize: 28, fontWeight: 500, color: C.coreSlate, maxWidth: 760, lineHeight: 1.3, fontFamily: MONO }}>
          crescimento médio das empresas que adotam IA + método.
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 130, left: 56, right: 56,
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0,
        border: `1px solid ${C.aurora}40`, 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: '20px 24px',
            borderRight: i < 2 ? `1px solid ${C.aurora}25` : 'none',
            background: 'rgba(170,75,239,.06)',
          }}>
            <div style={{ fontSize: 11, color: C.aurora, letterSpacing: '0.2em', marginBottom: 8 }}>{k}</div>
            <div style={{ fontSize: 36, fontWeight: 700, color: C.coreSlate, letterSpacing: '-0.03em' }}>{v}</div>
            <div style={{ fontSize: 11, color: C.systemGray, marginTop: 4 }}>{sub}</div>
          </div>
        ))}
      </div>
    </TechBgLight>
  </Post>
);

// E3 · Citação · code block claro
const E3 = () => (
  <Post bg={LIGHT_BG} color={C.coreSlate}>
    <TechBgLight>
      <SysHeaderLight id="NW//QUOTE.07" status="STMT" />
      <div style={{ position: 'absolute', top: 280, left: 56, right: 56 }}>
        <div style={{
          padding: '40px 48px', border: `1px solid ${C.aurora}55`,
          background: 'rgba(255,255,255,.6)', backdropFilter: 'blur(2px)',
          position: 'relative',
        }}>
          {/* corner brackets */}
          {[
            { 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: 20, height: 20,
              borderColor: C.aurora, borderStyle: 'solid', borderWidth: 0, ...p,
            }} />
          ))}
          <div style={{ fontFamily: MONO, fontSize: 13, color: C.aurora, letterSpacing: '0.18em', marginBottom: 24 }}>
            {'/* posicionamento */'}
          </div>
          <h2 style={{
            fontSize: 64, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.025em',
            color: C.coreSlate, margin: 0, textWrap: 'balance',
          }}>
            Não entregamos<br />ferramentas.<br />
            <span style={{ color: C.aurora }}>Entregamos crescimento.</span>
          </h2>
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 56, left: 56, right: 56,
        fontFamily: MONO, fontSize: 12, color: LIGHT_FAINT, letterSpacing: '0.15em',
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>// new_way.manifesto</span>
        <span>v.2026</span>
      </div>
    </TechBgLight>
  </Post>
);

// E4 · Mini-aula · stack de cards claro
const E4 = () => (
  <Post bg={LIGHT_BG} color={C.coreSlate}>
    <TechBgLight>
      <SysHeaderLight id="NW//METHOD" status="04 STEPS" />
      <div style={{ position: 'absolute', top: 200, left: 56, right: 56 }}>
        <h2 style={{
          fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
          color: C.coreSlate, margin: 0, textWrap: 'balance',
        }}>
          O protocolo de<br /><span style={{ color: C.aurora }}>crescimento.exe</span>
        </h2>
      </div>
      <div style={{
        position: 'absolute', top: 460, left: 56, right: 56,
        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 24px',
            border: `1px solid ${C.aurora}33`,
            background: 'rgba(170,75,239,.06)',
          }}>
            <div style={{
              fontFamily: MONO, fontSize: 12, color: C.aurora, letterSpacing: '0.18em',
              padding: '6px 12px', border: `1px solid ${C.aurora}`, flexShrink: 0,
            }}>{s.n}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: MONO, fontSize: 13, color: C.aurora, letterSpacing: '0.2em', marginBottom: 4 }}>
                {s.k}
              </div>
              <div style={{ fontSize: 22, fontWeight: 500, color: C.coreSlate }}>{s.t}</div>
            </div>
            <span style={{ color: C.aurora, fontFamily: MONO, fontSize: 18 }}>→</span>
          </div>
        ))}
      </div>
    </TechBgLight>
  </Post>
);

// E5 · Saiu na mídia · printout claro
const E5 = () => (
  <Post bg={LIGHT_BG} color={C.coreSlate}>
    <TechBgLight>
      <SysHeaderLight id="NW//PRESS.IN" status="INCOMING" />
      <div style={{ position: 'absolute', top: 240, left: 56, right: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: C.aurora, letterSpacing: '0.18em', marginBottom: 32 }}>
          {'> press.feed.fetch()'}
        </div>
        <div style={{
          padding: 40, background: 'rgba(255,255,255,.7)',
          border: `1px solid ${C.aurora}45`,
        }}>
          <div style={{
            fontSize: 240, color: C.aurora, lineHeight: 0.7, fontWeight: 700,
            marginBottom: -40, fontFamily: SERIF, opacity: 0.85,
          }}>"</div>
          <h2 style={{
            fontSize: 48, fontWeight: 500, lineHeight: 1.2, letterSpacing: '-0.02em',
            color: C.coreSlate, margin: 0, fontFamily: SERIF, fontStyle: 'italic',
            textWrap: 'balance', maxWidth: 880,
          }}>
            A New Way está mostrando como IA aplicada com método pode redefinir o crescimento das empresas brasileiras.
          </h2>
          <div style={{
            marginTop: 32, paddingTop: 20, borderTop: `1px dashed ${C.aurora}55`,
            fontFamily: MONO, fontSize: 12, color: C.systemGray, letterSpacing: '0.18em',
            display: 'flex', justifyContent: 'space-between',
          }}>
            <span>VEÍCULO_XYZ</span>
            <span>2026.04.30</span>
          </div>
        </div>
      </div>
    </TechBgLight>
  </Post>
);

// E6 · Vaga · recruit claro
const E6 = () => (
  <Post bg={LIGHT_BG} color={C.coreSlate}>
    <TechBgLight>
      <SysHeaderLight id="NW//RECRUIT" status="OPEN" />
      <div style={{ position: 'absolute', top: 240, left: 56, right: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: C.aurora, letterSpacing: '0.18em', marginBottom: 24 }}>
          {'$ hire --role=ai_engineer'}
        </div>
        <h1 style={{
          fontSize: 124, fontWeight: 800, lineHeight: 0.93, letterSpacing: '-0.04em',
          color: C.coreSlate, margin: 0, textTransform: 'uppercase',
        }}>
          AI<br /><span style={{ color: C.aurora }}>engineer</span>
        </h1>
        <div style={{
          marginTop: 56, display: 'flex', flexDirection: 'column', gap: 8,
          fontFamily: MONO, fontSize: 16, color: C.coreSlate,
        }}>
          {[
            ['mode', 'remote'],
            ['seniority', 'senior'],
            ['stack', 'python · llm · ml-ops'],
            ['contract', 'CLT'],
          ].map(([k, v], i) => (
            <div key={i} style={{ display: 'flex', gap: 24 }}>
              <span style={{ color: C.aurora, minWidth: 140 }}>{k}</span>
              <span style={{ color: LIGHT_FAINT }}>=</span>
              <span style={{ color: C.coreSlate }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 56, left: 56, right: 56,
        fontFamily: MONO, fontSize: 12, color: LIGHT_FAINT, letterSpacing: '0.15em',
      }}>
        {'> apply.now → link na bio'}
      </div>
    </TechBgLight>
  </Post>
);

// E7 · Convite evento · countdown claro
const E7 = () => (
  <Post bg={LIGHT_BG} color={C.coreSlate}>
    <TechBgLight>
      <SysHeaderLight id="NW//EVENT" status="T-30D" />
      <div style={{ position: 'absolute', top: 240, left: 56, right: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: C.aurora, letterSpacing: '0.18em', marginBottom: 24 }}>
          {'> event.broadcast()'}
        </div>
        <h1 style={{
          fontSize: 96, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
          color: C.coreSlate, margin: 0, textWrap: 'balance', textTransform: 'uppercase',
        }}>
          IA aplicada<br />em <span style={{ color: C.aurora }}>vendas B2B</span>
        </h1>
        <p style={{
          fontSize: 22, lineHeight: 1.5, color: C.systemGray,
          marginTop: 32, maxWidth: 720, fontFamily: MONO,
        }}>
          // como times comerciais usam IA pra encurtar o ciclo<br />
          // de venda sem virar planilha
        </p>
      </div>
      <div style={{
        position: 'absolute', bottom: 200, left: 56, right: 56,
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 0,
        border: `1px solid ${C.aurora}40`, fontFamily: MONO,
      }}>
        {[
          ['15', 'JUN'],
          ['19', 'BRT'],
          ['ON', 'LINE'],
          ['00', 'CUSTO'],
        ].map(([v, k], i) => (
          <div key={i} style={{
            padding: '24px 16px', textAlign: 'center',
            borderRight: i < 3 ? `1px solid ${C.aurora}25` : 'none',
            background: i % 2 === 0 ? 'rgba(170,75,239,.08)' : 'transparent',
          }}>
            <div style={{ fontSize: 48, fontWeight: 800, color: C.coreSlate, letterSpacing: '-0.04em', lineHeight: 1 }}>{v}</div>
            <div style={{ fontSize: 11, color: C.aurora, letterSpacing: '0.2em', marginTop: 6 }}>{k}</div>
          </div>
        ))}
      </div>
    </TechBgLight>
  </Post>
);

// E8 · Cultura · ASCII claro
const E8 = () => (
  <Post bg={LIGHT_BG} color={C.coreSlate}>
    <TechBgLight>
      <SysHeaderLight id="NW//CULTURE" status="OPEN_SRC" />
      <div style={{ position: 'absolute', top: 240, left: 56, right: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: C.aurora, letterSpacing: '0.18em', marginBottom: 24 }}>
          {'cat manifesto.txt'}
        </div>
        <h2 style={{
          fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em',
          color: C.coreSlate, margin: '0 0 32px 0', textWrap: 'balance',
        }}>
          Aqui não tem<br /><span style={{ color: C.aurora }}>fórmula mágica.</span>
        </h2>
        <div style={{
          fontFamily: MONO, fontSize: 18, lineHeight: 1.7, color: C.coreSlate,
          paddingLeft: 24, borderLeft: `2px solid ${C.aurora}`,
        }}>
          <div>$ no_meetings_que_poderiam_ser_email</div>
          <div>$ no_feudos_de_area</div>
          <div>$ data &gt; opinião</div>
          <div>$ ship &gt; perfeição</div>
          <div style={{ color: C.aurora, marginTop: 8 }}>$ humanos_+_IA = crescimento_real</div>
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 56, left: 56, right: 56,
        fontFamily: MONO, fontSize: 12, color: LIGHT_FAINT, letterSpacing: '0.15em',
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>// new_way.culture</span>
        <span>v.2026</span>
      </div>
    </TechBgLight>
  </Post>
);

// E9 · CTA · prompt claro
const E9 = () => (
  <Post bg={LIGHT_BG} color={C.coreSlate}>
    <TechBgLight>
      <SysHeaderLight id="NW//ENGAGE" status="READY" />
      <div style={{ position: 'absolute', top: 320, left: 56, right: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 13, color: C.aurora, letterSpacing: '0.18em', marginBottom: 24 }}>
          {'> awaiting input...'}
        </div>
        <h1 style={{
          fontSize: 100, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
          color: C.coreSlate, margin: 0, textWrap: 'balance', textTransform: 'uppercase',
        }}>
          Pronto pra<br /><span style={{ color: C.aurora }}>crescer</span><br />de verdade?
        </h1>
        <div style={{
          marginTop: 56, padding: '20px 24px',
          fontFamily: MONO, fontSize: 18, color: C.coreSlate,
          background: 'rgba(170,75,239,.1)', border: `1px solid ${C.aurora}`,
          display: 'inline-flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{ color: C.aurora }}>$</span>
          <span>./fale-com-a-newway</span>
          <span style={{ display: 'inline-block', width: 10, height: 18, background: C.aurora, animation: 'blink 1s infinite' }} />
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 56, left: 56, right: 56,
        fontFamily: MONO, fontSize: 12, color: LIGHT_FAINT, letterSpacing: '0.15em',
      }}>
        // link na bio · gruponewway.com.br
      </div>
    </TechBgLight>
  </Post>
);

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

const ScaledPost = ({ 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>
);

const LABELS = [
  'Frase / Provocação',
  'Dado · Insight',
  'Citação · Manifesto',
  'Mini-aula / Lista',
  'Saiu na mídia',
  'Vaga',
  'Convite · Evento',
  'Cultura · Bastidores',
  'CTA · Fechamento',
];

const App = () => {
  const dirA = [A1, A2, A3, A4, A5, A6, A7, A8, A9];
  const dirB = [B1, B2, B3, B4, B5, B6, B7, B8, B9];  // Em C ordenei diferente p/ casar com LABELS:
  // [Frase, Dado, Citação, Mini-aula, Saiu mídia, Vaga, Evento, Cultura, CTA]
  const dirC = [C1, C8, C2, C7, C3, C5, C6, C4, C9];
  const dirD = [D1, D2, D3, D4, D5, D6, D7, D8, D9];
  const dirE = [E1, E2, E3, E4, E5, E6, E7, E8, E9];

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

  return (
    <window.DesignCanvas>
      <window.DCSection
        id="manifesto"
        title="A · Manifesto tipográfico"
        subtitle="Sem fotos. Tipografia gigante, blocos de cor sólida, alto contraste. Feed reconhecível à distância — ideal para frases de impacto, dados, citações e CTAs. Funciona como pôster e tem alto poder de screenshot."
      >
        {renderRow(dirA, 'a')}
      </window.DCSection>
      <window.DCSection
        id="tech"
        title="B · Tech / Linhas de onda"
        subtitle="Assinatura visual da marca: ondas em outline Aurora/Quantum sobre Neural Night, charts limpos, tipografia tech. A linha mais reconhecível como New Way — usar quando o post precisa puxar identidade institucional."
      >
        {renderRow(dirB, 'b')}
      </window.DCSection>
      <window.DCSection
        id="editorial"
        title="C · Editorial / Foto duotone"
        subtitle="Foto como protagonista, sempre tratada com duotone Aurora. Tipografia mistura sans bold + serif itálica para nuance editorial. Mais humano e premium — ideal para cases, cultura, pessoas, mídia."
      >
        {renderRow(dirC, 'c')}
      </window.DCSection>
      <window.DCSection
        id="hyper"
        title="D · Hyper-tech / Cyber"
        subtitle="Mais ousada — terminal aesthetic, monospace, grids densos, scanlines, badges 'system' e dashboards cyberpunk. Empurra o limite mantendo a paleta New Way. Ideal pra posts que precisam projetar autoridade tech radical — IA, dados, recrutação, manifesto."
      >
        {renderRow(dirD, 'd')}
      </window.DCSection>
      <window.DCSection
        id="light-tech"
        title="E · Light-tech"
        subtitle="Mesma linguagem cyber/terminal da Linha D, mas em modo claro: fundo lilás suave, grid sutil em Aurora, accents Quantum, texto Core Slate. Sensação mais 'dashboard SaaS / B2B premium' — tech, mas mais conserto pra contextos institucionais."
      >
        {renderRow(dirE, 'e')}
      </window.DCSection>
    </window.DesignCanvas>
  );
};

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