// Página "IA e agora?"
//
// Gênero diferente do Manifesto: lá é declaração e a tipografia basta.
// Aqui é ensino para quem chegou com medo, então o recurso visual não é
// enfeite — é o que segura alguém ansioso lendo até o fim.
//
// A ordem é deliberada: reconhecer o medo, diagnosticar, virar a chave,
// mostrar o caminho, oferecer companhia. Nessa ordem. Diagnóstico antes
// do reconhecimento soa frio; caminho antes do diagnóstico soa vendedor.

/* ── peças de texto ───────────────────────────────────────────────── */

function Secao({ id, numero, titulo, children }) {
  return (
    <section id={id} style={{ marginBottom: 'var(--space-10)', scrollMarginTop: 90 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-4)', marginBottom: 'var(--space-6)' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent-strong)', flexShrink: 0 }}>{numero}</span>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', lineHeight: 'var(--leading-snug)', color: 'var(--text-primary)', margin: 0, textWrap: 'pretty' }}>{titulo}</h2>
      </div>
      {children}
    </section>
  );
}

function P({ children, lead }) {
  return <p style={{ fontFamily: 'var(--font-body)', fontSize: lead ? 'var(--text-lg)' : 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: lead ? 'var(--text-primary)' : 'var(--text-secondary)', margin: '0 0 var(--space-5)', textWrap: 'pretty' }}>{children}</p>;
}

function Destaque({ children }) {
  return (
    <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'var(--text-xl)', lineHeight: 'var(--leading-snug)', color: 'var(--text-primary)', margin: 'var(--space-7) 0', paddingLeft: 'var(--space-6)', borderLeft: '2px solid var(--accent)', textWrap: 'pretty' }}>{children}</p>
  );
}

function Legenda({ children }) {
  return <figcaption style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 'var(--leading-normal)', color: 'var(--text-muted)', marginTop: 'var(--space-4)', textWrap: 'pretty' }}>{children}</figcaption>;
}

/* Legenda que carrega a tese, nao a descricao.
 *
 * A maioria das legendas so diz o que a figura mostra e pode ficar
 * discreta. Algumas SAO o argumento — em corpo 13 cinza elas passavam
 * batido logo depois de uma figura grande. Reservada para o ponto de
 * virada de cada bloco: se todas virarem forte, nenhuma e. */
function LegendaForte({ children }) {
  return (
    <figcaption style={{ marginTop: 'var(--space-5)', paddingLeft: 'var(--space-5)', borderLeft: '2px solid var(--accent)', fontFamily: 'var(--font-display)', fontSize: 'var(--text-lg)', fontWeight: 600, lineHeight: 'var(--leading-snug)', color: 'var(--text-primary)', textWrap: 'pretty' }}>{children}</figcaption>
  );
}

function Rotulo({ children, cor = 'var(--text-muted)' }) {
  return <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: cor, marginBottom: 10 }}>{children}</div>;
}

/* Ilustração com texto dentro.
 *
 * Encolher uma arte de 1672px até caber numa tela de 343 deixa o texto
 * dela com uns 4px — ilegível. Aqui ela mantém tamanho legível e rola na
 * horizontal dentro do próprio quadro, com um aviso de que dá para
 * arrastar. No desktop nada disso aparece: cabe inteira.
 */
function FiguraLarga({ src, alt }) {
  return (
    <figure style={{ margin: 'var(--space-7) 0' }}>
      {/* Sem estilo inline aqui: "overflow: hidden" inline vencia a regra
          de rolagem do celular, e a imagem ficava cortada sem poder ser
          arrastada. Recorte e rolagem moram os dois no responsive.css. */}
      <div className="figura-rolavel">
        <img src={src} alt={alt} />
      </div>
      <div className="dica-arraste" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 12h16M14 6l6 6-6 6" />
        </svg>
        arraste para ver a ilustração inteira
      </div>
    </figure>
  );
}

/* A premissa é preparação, não é o ponto. Fica em corpo de texto e discreta:
   em serifa grande ela pesava mais que a própria resposta logo abaixo. */
function Premissa({ children }) {
  return (
    <div style={{ padding: 'var(--space-5)', borderLeft: '2px solid var(--border-default)', marginBottom: 'var(--space-5)' }}>
      <Rotulo>A pergunta</Rotulo>
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-primary)', textWrap: 'pretty' }}>{children}</div>
    </div>
  );
}

/* ── 1. os medos, nomeados ────────────────────────────────────────── */
function GradeDeMedos() {
  const medos = [
    'Comecei agora. Vale a pena continuar?',
    'A IA já escreve melhor que eu. O que eu ofereço?',
    'Estudei um framework por dois anos. Perdi esse tempo?',
    'Vagas de júnior sumiram. Como eu entro?',
    'Meu chefe usa IA e entrega sem mim.',
    'Se eu uso IA, aprendo ou fico dependente?',
  ];
  return (
    <figure style={{ margin: '0 0 var(--space-7)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 'var(--space-4)' }}>
        {medos.map(m => (
          <div key={m} style={{ padding: 'var(--space-5)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', background: 'var(--surface-card)' }}>
            {/* Aspas de verdade, abrindo e fechando em volta da frase. A
                versao anterior usava um glifo grande solto na lateral: como
                enfeite ele nunca fechava, e leitor leu isso como erro. */}
            <span style={{ fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: 14, lineHeight: 'var(--leading-normal)', color: 'var(--text-secondary)' }}>“{m}”</span>
          </div>
        ))}
      </div>
      <LegendaForte>Se alguma dessas é sua, continue. A resposta não é “calma, vai dar tudo certo”.</LegendaForte>
    </figure>
  );
}

/* ── 2. o que o júnior entregava de verdade ───────────────────────── */
function DiagramaFragmentos() {
  const pedacos = [
    { t: 'Bug de uma camada só', j: true },
    { t: 'Campo novo no formulário', j: true },
    { t: 'Regra de validação', j: true },
    { t: 'Tela isolada', j: true },
    { t: 'Documentação, planilha de campo por campo', j: true },
    { t: 'Decidir a arquitetura', j: false },
    { t: 'Modelar o domínio', j: false },
    { t: 'Responder pelo resultado', j: false },
  ];
  return (
    <figure style={{ margin: 'var(--space-7) 0' }}>
      <div style={{ padding: 'var(--space-5)', border: '1px dashed var(--border-default)', borderRadius: 'var(--radius-lg)' }}>
        <Rotulo>Uma entrega de valor completa</Rotulo>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 'var(--space-3)' }}>
          {pedacos.map(p => (
            <div key={p.t} style={{ padding: '12px 14px', borderRadius: 'var(--radius-md)', border: `1px solid ${p.j ? 'var(--accent)' : 'var(--border-subtle)'}`, background: p.j ? 'var(--accent-soft)' : 'transparent' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: p.j ? 'var(--accent-strong)' : 'var(--text-muted)', marginBottom: 6 }}>{p.j ? 'júnior' : 'outra pessoa'}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 'var(--leading-normal)', color: p.j ? 'var(--text-primary)' : 'var(--text-muted)' }}>{p.t}</div>
            </div>
          ))}
        </div>
      </div>
      <Legenda>O júnior nunca foi dono de uma entrega. Ele era dono de pedaços dela — pequenos, isolados, supervisionados.</Legenda>
    </figure>
  );
}

/* ── 3. a trilha antiga ───────────────────────────────────────────── */
function DiagramaTrilhaAntiga() {
  const trilha = ['HTML e CSS', 'JavaScript', 'SELECT, INSERT, UPDATE', 'Comandos de terminal', 'Um framework', '…e um dia, o porquê'];
  return (
    <figure style={{ margin: 'var(--space-7) 0' }}>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
        {trilha.map((t, i) => {
          const ultimo = i === trilha.length - 1;
          return (
            <React.Fragment key={t}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, padding: '8px 14px', borderRadius: 'var(--radius-pill)', border: `1px solid ${ultimo ? 'var(--status-warning)' : 'var(--border-subtle)'}`, background: ultimo ? 'transparent' : 'var(--surface-card)', color: ultimo ? 'var(--status-warning)' : 'var(--text-secondary)', whiteSpace: 'nowrap' }}>{t}</span>
              {!ultimo && <span style={{ color: 'var(--text-muted)', fontSize: 13 }}>→</span>}
            </React.Fragment>
          );
        })}
      </div>
      <Legenda>E o “um dia” do fim da fila quase nunca chegava por estudo. Chegava por cicatriz.</Legenda>
    </figure>
  );
}

/* ── 4. o vão que sumiu ───────────────────────────────────────────── */
function DiagramaVao() {
  return (
    <figure style={{ margin: 'var(--space-7) 0' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 0, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
        <div style={{ padding: 'var(--space-5)', background: 'var(--surface-card)' }}>
          <Rotulo>Onde a pessoa de negócio parava</Rotulo>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: 'var(--text-primary)' }}>Uma planilha</div>
        </div>
        <div style={{ padding: 'var(--space-5)', background: 'var(--accent-soft)', borderLeft: '1px solid var(--border-subtle)', borderRight: '1px solid var(--border-subtle)' }}>
          <Rotulo cor="var(--accent-strong)">O trecho que o júnior cobria</Rotulo>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: 'var(--text-primary)' }}>Transformar aquilo em código</div>
        </div>
        <div style={{ padding: 'var(--space-5)', background: 'var(--surface-card)', borderLeft: '1px solid var(--border-subtle)' }}>
          <Rotulo>Onde ninguém chegava sem programador</Rotulo>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: 'var(--text-primary)' }}>Sistema no ar</div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 0, marginTop: 2 }}>
        <div />
        <div style={{ padding: '14px', textAlign: 'center', border: '1px solid var(--status-error)', borderRadius: 'var(--radius-md)', background: 'var(--red-100)' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--status-error)' }}>a IA fechou este trecho</span>
        </div>
        <div />
      </div>

      {/* "No ar" nao e a linha de chegada: a IA leva qualquer um ate ali.
          A fronteira que continua de pe e outra, e e ela que sustenta o
          resto da pagina. */}
      <div style={{ marginTop: 'var(--space-5)', padding: 'var(--space-5) var(--space-6)', border: '1px solid var(--accent)', borderRadius: 'var(--radius-lg)', background: 'var(--accent-soft)' }}>
        <Rotulo cor="var(--accent-strong)">E aqui a fronteira continua de pé</Rotulo>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 8 }}>Sistema que se sustenta e se paga</div>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 'var(--leading-normal)', color: 'var(--text-secondary)' }}>Que aguenta carga, não vaza dado, custa o que pode custar, e continua de pé quando o negócio mudar.</div>
      </div>

      {/* sem <Legenda> aqui: o texto que estava nesta posicao era longo
          demais para nota de rodape e virou paragrafo no corpo da secao,
          depois da figura. Os proprios rotulos do diagrama ja dizem onde
          a fronteira ficou. */}
    </figure>
  );
}

/* ── 5. Brasil → Europa ───────────────────────────────────────────── */
function DiagramaViagem() {
  /* Aqui a figura para na pergunta, de proposito.
     A primeira versao punha o veredito dentro de cada opcao — "carro:
     impossivel", "aviao: o mais barato" — com o aviao ja pintado de
     verde. Quem lia nunca chegava a escolher, e o argumento inteiro
     depende de a pessoa ter escolhido sozinha antes de ouvir por que.

     As tres opcoes trazem so o fato, sem julgamento e com o mesmo
     desenho. A resposta vem no paragrafo seguinte, depois da figura:
     ela chega pela ordem de leitura, sem exigir clique. */
  const meios = [
    { m: 'Carro', v: 'Estrada boa, custo baixo por quilômetro. Só que tem um oceano entre os dois continentes.' },
    { m: 'Navio', v: 'Atravessa o oceano. Semanas a bordo, com cama, comida e tripulação o tempo todo.' },
    { m: 'Avião', v: 'Atravessa o oceano em horas. A passagem, sozinha, parece a mais cara das três.' },
  ];
  return (
    <figure style={{ margin: 'var(--space-7) 0' }}>
      {/* A premissa tem de vir dentro da figura. Sem ela, o oceano no
          caminho do carro não faz sentido nenhum — que oceano, indo aonde. */}
      <Premissa>Você está no Brasil e precisa chegar na Europa do jeito mais rápido e mais barato possível. Pode ir de carro, de navio ou de avião. <strong style={{ color: 'var(--text-primary)' }}>Qual você escolhe?</strong></Premissa>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 'var(--space-4)' }}>
        {meios.map(x => (
          <div key={x.m} style={{ padding: 'var(--space-5)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-subtle)', background: 'var(--surface-card)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 10 }}>{x.m}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 'var(--leading-normal)', color: 'var(--text-secondary)' }}>{x.v}</div>
          </div>
        ))}
      </div>
    </figure>
  );
}

/* ── 6. a inversão ────────────────────────────────────────────────── */
function DiagramaInversao() {
  /* Mesmo tratamento do quadro do solo: nada de tabela dentro de caixa
     arredondada com cabecalho preenchido — aquilo parecia um acordeao a
     ser clicado. Cada metade carrega o proprio rotulo, entao o par
     continua se lendo como par depois de empilhar no celular. */
  const linhas = [
    { antes: 'Aprender a construir o navio', depois: 'Saber que existe navio, carro e avião' },
    { antes: 'Resolver tudo com navio, porque é o que sei', depois: 'Escolher o meio certo para o trajeto' },
    { antes: 'Entender o porquê depois de anos', depois: 'Entender o porquê primeiro' },
    { antes: 'Especializar numa tecnologia', depois: 'Especializar em problemas' },
  ];
  return (
    <figure style={{ margin: 'var(--space-7) 0' }}>
      <div>
        {linhas.map((l, i) => (
          <div key={l.antes} className="stack-on-mobile" style={{ display: 'flex', gap: 'var(--space-6)', padding: 'var(--space-5) 0', borderTop: i ? '1px solid var(--border-subtle)' : 'none' }}>
            <div style={{ flex: 1 }}>
              <Rotulo>Antes da IA</Rotulo>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 'var(--leading-normal)', color: 'var(--text-muted)' }}>{l.antes}</div>
            </div>
            <div style={{ flex: 1 }}>
              <Rotulo cor="var(--accent-strong)">Agora</Rotulo>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600, lineHeight: 'var(--leading-normal)', color: 'var(--text-primary)' }}>{l.depois}</div>
            </div>
          </div>
        ))}
      </div>
      <LegendaForte>A ordem inverteu. Não é que a técnica deixou de importar — é que ela deixou de ser a porta de entrada.</LegendaForte>
    </figure>
  );
}

/* ── 7. o solo e a viga ───────────────────────────────────────────── */
function DiagramaSolo() {
  /* Isto ja foi uma tabela de duas colunas dentro de uma caixa arredondada,
     com a coluna da esquerda preenchida. Dava tres problemas de uma vez:
     parecia um acordeao esperando clique, as celulas de larguras diferentes
     pareciam barra de progresso, e no celular os dois cabecalhos empilhavam
     juntos no topo, longe das linhas que eles nomeavam.

     Agora sao tres itens, e cada metade carrega o proprio rotulo. O sentido
     viaja com o texto e sobrevive ao empilhamento. */
  const pares = [
    { saber: 'Que o solo é areia, e areia precisa ser preparada', fazer: 'Como preparar o solo' },
    { saber: 'Que a casa vai ter dois andares, antes de abrir a fundação', fazer: 'Como calcular a viga' },
    { saber: 'Que vai passar cano por ali', fazer: 'Como dimensionar a tubulação' },
  ];
  return (
    <figure style={{ margin: 'var(--space-7) 0' }}>
      <Premissa>Você vai levantar uma casa. Não sabe calcular viga nem dimensionar fundação — e tudo bem, isso vem depois. Mas tem coisa que precisa estar na sua cabeça <strong style={{ color: 'var(--text-primary)' }}>antes da primeira pá</strong>. O quê?</Premissa>
      <div>
        {pares.map((p, i) => (
          <div key={p.saber} className="stack-on-mobile" style={{ display: 'flex', gap: 'var(--space-6)', padding: 'var(--space-5) 0', borderTop: i ? '1px solid var(--border-subtle)' : 'none' }}>
            <div style={{ flex: 1 }}>
              <Rotulo cor="var(--accent-strong)">Desde o primeiro dia</Rotulo>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600, lineHeight: 'var(--leading-normal)', color: 'var(--text-primary)' }}>{p.saber}</div>
            </div>
            <div style={{ flex: 1 }}>
              <Rotulo>Pode esperar</Rotulo>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 'var(--leading-normal)', color: 'var(--text-muted)' }}>{p.fazer}</div>
            </div>
          </div>
        ))}
      </div>
    </figure>
  );
}

/* ── 8. a represa ─────────────────────────────────────────────────── */
function DiagramaRepresa() {
  return (
    <figure style={{ margin: 'var(--space-7) 0' }}>
      <FiguraLarga src="assets/ia_barragem.webp" alt="Uma represa vista de lado. À esquerda, um lago enorme rotulado como todo o conhecimento acumulado do modelo. No meio, a barragem, rotulada como você, acumulando e segurando, com vazão controlada. À direita, a água que passa move uma turbina que gera energia — o valor entregue — e chega a uma cidade iluminada." />
      {/* A arte já traz a própria legenda dizendo o que a água representa,
          e o texto da seção continua dali. Aqui só o que nenhum dos dois
          diz: quem é o engenheiro dessa barragem. */}
      <LegendaForte>A barragem não se constrói sozinha, e ninguém a calcula por você.</LegendaForte>
    </figure>
  );
}

/* ── 9. você virou tech lead ──────────────────────────────────────── */
function DiagramaTechLead() {
  const antes = ['Escrevo o código', 'Alguém revisa o meu', 'Erro meu, alguém pega'];
  const agora = ['Oriento o que precisa ser feito', 'Reviso o que não escrevi', 'Erro passa, e a conta é minha'];
  return (
    <figure style={{ margin: 'var(--space-7) 0' }}>
      <div className="stack-on-mobile" style={{ display: 'flex', gap: 'var(--space-5)' }}>
        <div style={{ flex: 1, padding: 'var(--space-5)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-subtle)', background: 'var(--surface-card)' }}>
          <Rotulo>Seu cargo até ontem</Rotulo>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {antes.map(a => <li key={a} style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)' }}>{a}</li>)}
          </ul>
        </div>
        <div style={{ flex: 1, padding: 'var(--space-5)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--accent)', background: 'var(--accent-soft)' }}>
          <Rotulo cor="var(--accent-strong)">Seu cargo hoje, sem promoção e sem aviso</Rotulo>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {agora.map(a => <li key={a} style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>{a}</li>)}
          </ul>
        </div>
      </div>
      <LegendaForte>Isso tem nome, e o nome não é “programador substituído”. É <strong>tech lead</strong> — só que de um time de agentes, e sem ninguém ter te ensinado o cargo.</LegendaForte>
    </figure>
  );
}

/* ── 10. a escada da prática ──────────────────────────────────────── */
function DiagramaEscada() {
  // A arte já traz os cinco degraus e a própria legenda, então aqui não
  // entra <Legenda> — repetiria o que está desenhado logo acima.
  return (
    <FiguraLarga
      src="assets/ia-construcao.webp"
      alt="Cinco degraus de construção, ligados por setas: uma cabana de madeira, um cortiço, uma casa, um sobrado e um prédio. Cada degrau é o mesmo problema de negócio com uma restrição maior — de um componente só entregue ponta a ponta até múltiplos clientes com processamento em lote, paralelo e concorrente."
    />
  );
}

/* ── 11. as matérias que você pulou ───────────────────────────────── */
function DiagramaMaterias() {
  /* Mesmo tratamento dos outros dois quadros. A materia vira titulo do
     item e as duas leituras dela ficam lado a lado, cada uma com rotulo
     proprio — que e o que substituiu o texto riscado. */
  const materias = [
    { m: 'Engenharia de software', antes: 'Chata, teórica', agora: 'Como orientar a IA sobre o que construir' },
    { m: 'Redes de computadores', antes: 'Sem aplicação prática', agora: 'Por que websocket segura memória do servidor' },
    { m: 'Arquitetura de sistemas', antes: 'Coisa de sênior', agora: 'A decisão que a IA não toma por você' },
    { m: 'Sistemas de informação', antes: 'Matéria de administração', agora: 'O negócio que o sistema existe para servir' },
  ];
  return (
    <figure style={{ margin: 'var(--space-7) 0' }}>
      <div>
        {materias.map((x, i) => (
          <div key={x.m} style={{ padding: 'var(--space-5) 0', borderTop: i ? '1px solid var(--border-subtle)' : 'none' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 'var(--space-4)' }}>{x.m}</div>
            <div className="stack-on-mobile" style={{ display: 'flex', gap: 'var(--space-6)' }}>
              <div style={{ flex: 1 }}>
                <Rotulo>Você achava</Rotulo>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 'var(--leading-normal)', color: 'var(--text-muted)' }}>{x.antes}</div>
              </div>
              <div style={{ flex: 1 }}>
                <Rotulo cor="var(--accent-strong)">Hoje é</Rotulo>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600, lineHeight: 'var(--leading-normal)', color: 'var(--text-primary)' }}>{x.agora}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <LegendaForte>Eram as matérias que todo mundo empurrava com a barriga, porque não dava para tangibilizar. Hoje são o que separa quem conduz a IA de quem só pede coisa para ela.</LegendaForte>
    </figure>
  );
}

/* ── 12. demonstração do método: supermercado ─────────────────────── */
function DemoSupermercado() {
  return (
    <div style={{ margin: 'var(--space-8) 0', padding: 'var(--space-7)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', background: 'var(--surface-card)' }}>
      <Rotulo cor="var(--accent-strong)">Como eu ensino, na prática</Rotulo>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-xl)', color: 'var(--text-primary)', margin: '0 0 var(--space-5)' }}>Paralelismo e concorrência, sem uma linha de código</h3>

      <P>Fila grande no supermercado. Para adiantar, o mercado abre um segundo caixa. Agora são duas compras processadas ao mesmo tempo — isso é <strong style={{ color: 'var(--text-primary)' }}>paralelismo</strong>.</P>

      <figure style={{ margin: 'var(--space-6) 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 'var(--space-4)', marginBottom: 'var(--space-4)' }}>
          {['Caixa 1', 'Caixa 2'].map(c => (
            <div key={c} style={{ padding: 'var(--space-4)', borderRadius: 'var(--radius-md)', border: '1px solid var(--accent)', background: 'var(--accent-soft)', textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent-strong)' }}>{c}</div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', color: 'var(--text-muted)', marginBottom: 'var(--space-4)' }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M12 4v14M6 12l6 6 6-6" /></svg>
        </div>
        <div style={{ padding: 'var(--space-5)', borderRadius: 'var(--radius-md)', border: '1px solid var(--status-warning)', background: 'var(--gold-100)', textAlign: 'center' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: 'var(--status-warning)' }}>Uma balança só</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-secondary)', marginTop: 6 }}>Enquanto um caixa pesa, o outro espera</div>
        </div>
      </figure>

      <P>Só que existe <strong style={{ color: 'var(--text-primary)' }}>uma balança só</strong> para pesar legume. Quando um caixa está usando, o outro espera. Isso é <strong style={{ color: 'var(--text-primary)' }}>concorrência</strong>: disputa por um recurso compartilhado.</P>

      <P>Daí sai a lição inteira, sem jargão: <strong style={{ color: 'var(--text-primary)' }}>não adianta abrir mais caixas se o gargalo é a balança.</strong> Se pouca gente pesa legume, abrir caixa compensa muito. Se todo mundo pesa, você gastou dinheiro em caixa para a fila continuar parada no mesmo lugar.</P>

      <P>Agora releia essa frase trocando “caixa” por <em>thread</em> e “balança” por <em>lock em recurso compartilhado</em>. É o mesmo texto. E você entendeu antes de saber o nome.</P>
    </div>
  );
}

/* ── a trilha lateral ─────────────────────────────────────────────────
   Não é sumário, é percurso. O trecho andado fica sólido, o que falta
   fica tracejado — é assim que caminho se desenha em mapa. O ícone de
   cada parada conta do que ela trata, então a trilha inteira resume a
   página antes de você ler uma linha. */

const TRILHA = {
  // pulso: o que você sente
  pulso: 'M3 12h3.5l2-5 3.5 10 2-5H21',
  // dois blocos soltos: o júnior entregava fragmentos
  fragmento: 'M4 4h6v6H4zM14 14h6v6h-6z',
  // linha partida ao meio: o vão que sumiu
  vao: 'M3 12h5M16 12h5M11 9v6',
  // avião de papel: a escolha do meio certo
  aviao: 'M21 3L3 10l7 3 3 7z',
  // duas setas em sentidos opostos: a inversão
  inversao: 'M7 20V5M7 5L4 8M7 5l3 3M17 4v15M17 19l3-3M17 19l-3-3',
  // onda contida por uma barra: a represa
  represa: 'M3 10s2-2 4-2 4 2 4 2M3 15s2-2 4-2 4 2 4 2M15 4v16M15 12h6',
  // escudo: responder por algo que não é seu
  escudo: 'M12 3l7 3v5.5c0 4-3 7.5-7 9.5-4-2-7-5.5-7-9.5V6z',
  // degraus: a escada da prática
  degraus: 'M3 20h4v-4h4v-4h4v-4h5',
  // balão de fala: o método
  fala: 'M4 5h16v10H9.5L4 19z',
  // bandeira: o destino
  bandeira: 'M5 21V4M5 4h11l-2.5 3.5L16 11H5',
};

const SECOES = [
  { id: 'medo', n: '01', t: 'O que você está sentindo', i: 'pulso' },
  { id: 'verdade', n: '02', t: 'A verdade sobre o júnior', i: 'fragmento' },
  { id: 'aconteceu', n: '03', t: 'O que a IA levou', i: 'vao' },
  { id: 'qualquer-um', n: '04', t: 'Então qualquer um programa?', i: 'aviao' },
  { id: 'inversao', n: '05', t: 'A ordem inverteu', i: 'inversao' },
  { id: 'represa', n: '06', t: 'A água e a barragem', i: 'represa' },
  { id: 'techlead', n: '07', t: 'Você foi promovido', i: 'escudo' },
  { id: 'caminho', n: '08', t: 'O caminho novo', i: 'degraus' },
  { id: 'metodo', n: '09', t: 'Como eu ensino', i: 'fala' },
  { id: 'convite', n: '10', t: 'Vem comigo', i: 'bandeira' },
];

function ParadaIcone({ nome, cor }) {
  return (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={cor} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={TRILHA[nome]} />
    </svg>
  );
}

function IndiceLateral({ ativo }) {
  const indiceAtivo = Math.max(0, SECOES.findIndex(s => s.id === ativo));

  return (
    <nav className="ia-indice" aria-label="Trilha da página">
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 18, paddingLeft: 2 }}>A travessia</div>

      <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {SECOES.map((s, i) => {
          const andado = i < indiceAtivo;
          const aqui = i === indiceAtivo;
          const ultimo = i === SECOES.length - 1;
          const alcancado = andado || aqui;

          const corNo = aqui ? 'var(--accent-strong)' : andado ? 'var(--accent)' : 'var(--border-default)';
          const corIcone = aqui ? 'var(--ink-900)' : andado ? 'var(--accent)' : 'var(--text-muted)';

          return (
            <li key={s.id} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              {/* coluna da trilha: nó + trecho até a próxima parada */}
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0, alignSelf: 'stretch' }}>
                <div style={{
                  width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: `1.5px solid ${corNo}`,
                  background: aqui ? 'var(--accent-strong)' : 'var(--surface-page)',
                  boxShadow: aqui ? '0 0 0 4px var(--accent-soft)' : 'none',
                  transition: 'background var(--duration-normal) var(--ease-standard)',
                }}>
                  <ParadaIcone nome={s.i} cor={corIcone} />
                </div>
                {!ultimo && (
                  <div style={{
                    width: 0, flex: 1, minHeight: 20, margin: '3px 0',
                    borderLeft: `1.5px ${andado ? 'solid' : 'dashed'} ${andado ? 'var(--accent)' : 'var(--border-subtle)'}`,
                  }} />
                )}
              </div>

              <a href={`#${s.id}`} style={{ textDecoration: 'none', paddingBottom: ultimo ? 0 : 16, display: 'block' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.08em', color: alcancado ? 'var(--accent-strong)' : 'var(--border-default)', marginBottom: 3 }}>{s.n}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, lineHeight: 1.35, fontWeight: aqui ? 600 : 400, color: aqui ? 'var(--text-primary)' : alcancado ? 'var(--text-secondary)' : 'var(--text-muted)' }}>{s.t}</div>
              </a>
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

/* Versão de celular: a trilha inteira não cabe, então vira uma barra
   fina com a parada atual e o quanto já foi andado. */
function TrilhaMobile({ ativo }) {
  const i = Math.max(0, SECOES.findIndex(s => s.id === ativo));
  const atual = SECOES[i];
  const pct = ((i + 1) / SECOES.length) * 100;
  return (
    <div className="ia-trilha-mobile">
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px var(--space-5)' }}>
        <ParadaIcone nome={atual.i} cor="var(--accent-strong)" />
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{atual.t}</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)', flexShrink: 0 }}>{atual.n}/10</span>
      </div>
      <div style={{ height: 2, background: 'var(--border-subtle)' }}>
        <div style={{ height: '100%', width: `${pct}%`, background: 'var(--accent)', transition: 'width var(--duration-normal) var(--ease-standard)' }} />
      </div>
    </div>
  );
}

/* ── a página ─────────────────────────────────────────────────────── */
function IAPage({ onNavigate }) {
  const [ativo, setAtivo] = React.useState('medo');

  React.useEffect(() => {
    const alvos = SECOES.map(s => document.getElementById(s.id)).filter(Boolean);
    if (!alvos.length || !('IntersectionObserver' in window)) return;
    const obs = new IntersectionObserver(
      entradas => {
        const visivel = entradas.filter(e => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
        if (visivel) setAtivo(visivel.target.id);
      },
      { rootMargin: '-90px 0px -60% 0px' }
    );
    alvos.forEach(a => obs.observe(a));
    return () => obs.disconnect();
  }, []);

  return (
    <div className="ia-layout">
      <TrilhaMobile ativo={ativo} />
      <IndiceLateral ativo={ativo} />

      <article className="ia-conteudo">

        <header style={{ marginBottom: 'var(--space-10)' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--accent-strong)', marginBottom: 'var(--space-5)' }}>IA e agora?</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-4xl)', lineHeight: 'var(--leading-tight)', color: 'var(--text-primary)', margin: '0 0 var(--space-6)', textWrap: 'pretty' }}>A IA vai matar a profissão de programador?</h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-primary)', margin: '0 0 var(--space-5)', textWrap: 'pretty' }}><strong>Não.</strong> Mas ela destruiu a porta de entrada — e quase ninguém está te contando isso com clareza.</p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0, textWrap: 'pretty' }}>Esta página não vai te acalmar com frase pronta nem te assustar para você clicar em algo. Vou te mostrar exatamente o que mudou, por que mudou, e qual é o caminho que eu acredito que funciona agora. Leva uns quinze minutos. Vale cada um.</p>
          <div style={{ marginTop: 'var(--space-6)', padding: 'var(--space-5)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: 'var(--surface-card)' }}>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 'var(--leading-normal)', color: 'var(--text-muted)' }}>
              <strong style={{ color: 'var(--text-secondary)' }}>Do que eu estou falando aqui:</strong> sistemas comerciais — cadastro de cliente, gestão de pedido, processamento de pagamento, transformação de dados. É onde a maior parte de nós trabalha, e é justamente onde a IA é mais forte. Embarcado, firmware, engine de jogo e computação científica são outra conversa.
            </div>
          </div>
        </header>

        <Secao id="medo" numero="01" titulo="Primeiro, o que você está sentindo">
          <P lead>Antes de qualquer análise: o medo é legítimo e a informação que você recebeu é ruim.</P>
          <GradeDeMedos />
          <P>Você está no meio de um barulho absurdo. De um lado, gente vendendo que programador acabou. Do outro, gente fingindo que nada mudou. As duas posições são confortáveis para quem fala e inúteis para quem precisa decidir a própria carreira.</P>
          <P>Mudou muita coisa. E dá para atravessar. Mas só se a gente olhar direito para o que aconteceu.</P>
        </Secao>

        <Secao id="verdade" numero="02" titulo="A verdade que ninguém falava sobre o cargo de júnior">
          <P lead>Comecei em 2009, aos dezesseis anos. De lá para cá, em várias empresas, o papel do júnior sempre foi o mesmo: executor.</P>
          <P>O estagiário, por lei, é estudante — está ali para aprender. O júnior é o primeiro cargo formal, e o objetivo dele nunca foi aprender a teoria bruta. Era aprender a <strong style={{ color: 'var(--text-primary)' }}>aplicar</strong> a teoria.</P>
          <P>Só que na prática ninguém entregava uma funcionalidade inteira para um júnior. Ele não tinha essa capacidade — e todo mundo sabia. Então ele pegava o que sobrava:</P>
          <DiagramaFragmentos />
          <P>E era assim que ele era avaliado: pela velocidade e pelo capricho na execução do pedaço. Ninguém perguntava a ele <strong style={{ color: 'var(--text-primary)' }}>por que</strong> aquilo estava sendo feito daquele jeito.</P>
          <P>E a formação dele acompanhava isso. Era o “júnior Java” que só via Java. O “júnior JavaScript” que só via frontend. Especialização por <em>tecnologia</em>, não por problema — a ponto de alguém saber coisa avançada de web e travar num SELECT simples quando o negócio perguntava “como está aquele pedido?”.</P>
          <DiagramaTrilhaAntiga />
          <Destaque>A indústria inteira ensinou o como primeiro, e prometeu que o porquê viria depois.</Destaque>
        </Secao>

        <Secao id="aconteceu" numero="03" titulo="Aí a IA chegou e levou exatamente isso">
          <P lead>A IA faz o como. Rápido, barato, a qualquer hora, sem cansar.</P>
          <P>E o profissional que foi treinado para ser bom no como — porque era só isso que se esperava dele — se viu sem chão. Não é fragilidade emocional. É leitura correta da realidade.</P>
          <P>Mas o golpe não veio de onde você está pensando. Não é que a IA programa melhor que você. É que <strong style={{ color: 'var(--text-primary)' }}>o vão onde o cargo morava deixou de existir</strong>.</P>
          <DiagramaVao />
          <P>Antes, quem entendia de negócio parava na planilha. Para virar sistema, precisava de alguém que soubesse escrever código. Esse alguém era o júnior.</P>
          <P>Hoje essa mesma pessoa descreve o que quer, a IA escreve, e ela publica numa nuvem moderna, com tudo que é preciso para publicar já pronto e documentado. O trecho intermediário sumiu.</P>
          <P>Repare onde a fronteira ficou. Colocar no ar deixou de ser o difícil — hoje isso vem pronto e de graça. O que continua exigindo alguém que entende é tudo que vem <strong style={{ color: 'var(--text-primary)' }}>depois</strong> que o sistema entra no ar.</P>
        </Secao>

        <Secao id="qualquer-um" numero="04" titulo="“Então qualquer um vai programar?”">
          <P lead>Não. E é aqui que quase todo mundo erra a análise — dos dois lados.</P>
          <P>Nem a pessoa de negócio nem o júnior sabem fazer um sistema sustentável e economicamente viável. Os dois delegam essa parte. Comparar os dois em qualidade de engenharia é pergunta errada.</P>
          <P>O que mudou foi o <strong style={{ color: 'var(--text-primary)' }}>teto</strong> de quem não programa. E o que a pessoa de negócio ganhou foi <em>direção e velocidade</em> — não segurança, não escala, não manutenção. O sistema dela também vira Frankenstein. Só que quebra depois, quando já tem cliente dentro.</P>
          <P>Então onde entra você? Numa coisa só, e ela é enorme: <strong style={{ color: 'var(--text-primary)' }}>saber para onde a IA deve ir.</strong></P>
          <P>Para explicar isso eu uso uma pergunta que não tem nada a ver com software — e é justamente por isso que ela funciona.</P>
          <DiagramaViagem />
          <P>Quase certamente você escolheu o avião. E escolheu sem ser engenheiro aeronáutico — porque entende <strong style={{ color: 'var(--text-primary)' }}>para que ele serve</strong> e <strong style={{ color: 'var(--text-primary)' }}>em que contexto</strong>, não porque sabe projetar turbina.</P>
          <P>No terreno técnico a pessoa de negócio não consegue fazer essa escolha. Ela não tem como perceber que a IA pegou um caminho que funciona hoje e desmonta na escala, ou que resolve o caso e vaza dado. Não é falta de inteligência. É falta de repertório.</P>
          <P>E tem um segundo tipo de saber em jogo aqui, que é ainda mais cedo que a escolha.</P>
          <DiagramaSolo />
          <P>Da esquerda ninguém escapa: se faltar, o resto desaba — e ninguém percebe no dia da entrega. A direita você aprende no caminho, ou delega.</P>
          <Destaque>Saber <strong>que</strong> algo importa vem antes de saber <strong>como</strong> se faz.</Destaque>
        </Secao>

        <Secao id="inversao" numero="05" titulo="A ordem dos estudos inverteu">
          <P lead>Antes: construir primeiro, entender depois. Agora: entender primeiro, construir depois.</P>
          <P>A lógica antiga fazia sentido no mundo antigo. Construir era caro, lento e difícil, então quem sabia construir valia ouro — e passava a carreira resolvendo tudo com a única ferramenta que dominava. Se você só sabe fazer navio, todo problema vira travessia de navio.</P>
          <DiagramaInversao />
          <P>Isso não quer dizer largar a técnica. Quer dizer o contrário: você vai precisar de <strong style={{ color: 'var(--text-primary)' }}>mais amplitude técnica que antes</strong>, só que aprendida por necessidade em vez de por catálogo.</P>
          <P>Um exemplo do tamanho certo. HTTP resolve página web. Mas se você precisa que o servidor fale sem ser perguntado, HTTP não serve — vai de SSE ou WebSocket. Só que manter socket aberto significa segurar conexão viva por sessão, consumindo memória e rede o tempo todo, não só na requisição.</P>
          <P>Você não precisa saber implementar o protocolo. Precisa saber que essa escolha existe e o que ela cobra. <strong style={{ color: 'var(--text-primary)' }}>Esse é o novo básico.</strong></P>
        </Secao>

        <Secao id="represa" numero="06" titulo="A IA é a água. Você é a barragem.">
          <P lead>Imagine uma represa segurando toneladas de água.</P>
          <DiagramaRepresa />
          {/* a arte já diz que a água é o conhecimento do modelo — o texto
              daqui em diante continua a partir disso, não repete */}
          <P>Com barragem bem calculada, aquilo vira energia para uma região inteira. Sem barragem — ou com uma barragem mal feita — a mesma água desce de uma vez e leva tudo pela frente: cidade, plantação, bicho, gente.</P>
          <Destaque>O problema nunca foi a quantidade de água. É a ausência de engenharia entre ela e o mundo.</Destaque>
          <P>Por isso eu não estou nem no time do “a IA vai resolver tudo”, nem no do “a IA vai destruir tudo”. Os dois olham para a água. Eu olho para a barragem.</P>
        </Secao>

        <Secao id="techlead" numero="07" titulo="Você foi promovido e ninguém te avisou">
          <P lead>Todo mundo que usa um agente de codificação virou tech lead de um time que não dorme.</P>
          <DiagramaTechLead />
          <P>Não importa se você é júnior, pleno, sênior ou arquiteto. Você delega, recebe algo que não escreveu, não domina por completo, não conferiu linha por linha — e responde por aquilo se der errado.</P>
          <P>Isso assusta. Mas para de assustar quando você percebe que <strong style={{ color: 'var(--text-primary)' }}>não é novo</strong>. É só novo <em>para nós</em>.</P>
          <P>Pense em quem é dono de empresa, em quem é diretor. Essa gente nunca escreveu uma linha do que vende. Fecha contrato de milhões baseado em tecnologia que não sabe construir. Banca o desenvolvimento, vive das consequências das falhas, decide o rumo do barco — tudo isso sem nenhum domínio sobre a execução.</P>
          <P>Como eles sobrevivem a isso há décadas? <strong style={{ color: 'var(--text-primary)' }}>Gestão de risco.</strong> Trava, métrica, medição, limite, plano para quando der errado. Eles não controlam a execução; eles controlam a exposição.</P>
          <P>E aqui vale uma justiça que quase ninguém faz: quando você olha da cadeira deles, o encantamento com a IA é <em>racional</em>. Eles sempre dependeram de um resultado que não conseguiam prever, vindo de pessoas cujo risco ninguém sabia medir. Aparece uma alternativa que trabalha vinte e quatro horas e responde igual toda vez. Claro que eles se animaram.</P>
          <P>A boa notícia é que esse é um problema com décadas de solução acumulada. Você não vai inventar do zero. Vai aprender o que outra gente já resolveu — só que agora aplicado ao seu código.</P>
        </Secao>

        <Secao id="caminho" numero="08" titulo="O caminho novo, na prática">
          <P lead>Desenvolvimento de software é profissão prática. Isso não mudou. O que mudou é o que a prática significa.</P>
          <P>Antes, portfólio era prova de domínio de ferramenta: <em>“olha, eu sei React”</em>. Agora é prova de entrega: <em>“olha, isto aqui funciona e resolve um problema real”</em>.</P>
          <P>Então o estudo passa a ser assim: pegue um problema de negócio pequeno e entregue <strong style={{ color: 'var(--text-primary)' }}>ponta a ponta</strong>. Depois pegue o <strong style={{ color: 'var(--text-primary)' }}>mesmo problema</strong> e aumente a exigência até a arquitetura ser obrigada a mudar.</P>
          <DiagramaEscada />
          <P>Repare que em nenhum degrau você entrega um pedaço. Você sempre entrega algo inteiro — o que cresce é a qualidade e o porte, não o escopo do seu pedacinho.</P>
          <P>E aquelas matérias que todo mundo pulou na faculdade porque “não dava para ver na prática”? Elas eram o porquê. Você as ignorava porque não tinha como tangibilizar — e agora a IA tangibiliza:</P>
          <DiagramaMaterias />
          <Destaque>A ferramenta que teria salvado essas matérias é a mesma que pune quem não as tem.</Destaque>
          <P>É a mesma coisa da trigonometria na escola. Ninguém ignorava por burrice — ignorava porque não conseguia enxergar onde aquilo entraria num mundo que ainda não conhecia. A diferença é que agora dá para ver funcionando no mesmo dia.</P>
        </Secao>

        <Secao id="metodo" numero="09" titulo="Como eu ensino isso">
          <P lead>Meu diferencial não é saber a técnica. É conseguir explicar coisa complexa para quem não tem contexto.</P>
          <P>Eu sou o cara que gosta do detalhe, que quer saber o que acontece atrás dos panos, que fica feliz otimizando. Mas o mundo real é maior que isso — o que a gente constrói é usado por gente, e negócio se faz de conversa humana.</P>
          <P>Então eu ensino assim:</P>
          <DemoSupermercado />
          <P>Nenhum jargão até o final. Nenhuma linha de código. E quando o nome técnico aparece, ele encaixa numa ideia que você já entendeu — em vez de ser um nome que você decora e esquece.</P>
          <P>É esse método que eu uso para tudo. E é ele que eu quero usar para te levar do lugar onde você está até o lugar onde você decide sozinho.</P>
        </Secao>

        <Secao id="convite" numero="10" titulo="Vem comigo">
          <P lead>Você não precisa de mais uma enxurrada de curso, roadmap e lista de tecnologia.</P>
          <P>É exatamente isso que está te paralisando: informação demais, contexto nenhum, todo mundo gritando ao mesmo tempo. O que falta não é conteúdo — é alguém que tire o ruído e caminhe junto.</P>
          <P>É o que eu faço. Não te jogo no mundo com uma lista. Eu te pego pela mão, a gente anda junto, e eu solto quando você não precisar mais de mim.</P>
          <Destaque>Se um dia você não precisar mais de mim, eu fiz o meu trabalho.</Destaque>
          <div style={{ padding: 'var(--space-7)', border: '1px solid var(--accent)', borderRadius: 'var(--radius-lg)', background: 'var(--accent-soft)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-xl)', fontWeight: 600, color: 'var(--text-primary)', marginBottom: 12, textWrap: 'pretty' }}>Se isso fez sentido, o próximo passo é conversar com gente que está no mesmo caminho.</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', marginBottom: 'var(--space-6)' }}>Na comunidade a gente discute decisão real de arquitetura, carreira e o que está acontecendo com a área — sem hype e sem pânico.</div>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button onClick={() => onNavigate && onNavigate('community')} style={{ background: 'var(--accent)', color: 'var(--ink-900)', border: 'none', borderRadius: 'var(--radius-md)', padding: '13px 26px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16, cursor: 'pointer' }}>Entrar na comunidade</button>
              <button onClick={() => onNavigate && onNavigate('manifesto')} style={{ background: 'transparent', color: 'var(--text-primary)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', padding: '13px 26px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16, cursor: 'pointer' }}>Ler o manifesto</button>
            </div>
          </div>
        </Secao>

      </article>
    </div>
  );
}

/* ── chamada da home ──────────────────────────────────────────────── */
function IACallout({ onNavigate }) {
  return (
    <section style={{ padding: 'var(--space-9) var(--space-7)', background: 'var(--surface-page)', borderTop: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 860, margin: '0 auto' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--status-warning)', marginBottom: 'var(--space-5)' }}>IA e agora?</div>

        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-3xl)', lineHeight: 'var(--leading-tight)', color: 'var(--text-primary)', margin: '0 0 var(--space-5)', textWrap: 'pretty' }}>A IA vai matar a profissão de programador?</h2>

        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: '0 0 var(--space-6)', maxWidth: 680, textWrap: 'pretty' }}><strong style={{ color: 'var(--text-primary)' }}>Não.</strong> Mas ela destruiu a porta de entrada, e quase ninguém está te contando isso com clareza.</p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 'var(--space-4)', marginBottom: 'var(--space-6)' }}>
          {[
            'Comecei agora. Vale a pena continuar?',
            'A IA escreve melhor que eu. O que eu ofereço?',
            'As vagas de júnior sumiram. Como eu entro?',
          ].map(m => (
            <div key={m} style={{ padding: 'var(--space-4)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: 'var(--surface-card)', fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 'var(--leading-normal)', color: 'var(--text-secondary)' }}>{m}</div>
          ))}
        </div>

        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: '0 0 var(--space-6)', maxWidth: 680, textWrap: 'pretty' }}>Escrevi uma página inteira sobre o que mudou de verdade, por que mudou, e qual caminho eu acredito que funciona agora. Sem hype e sem pânico.</p>

        <button onClick={() => onNavigate && onNavigate('ia')} style={{ background: 'var(--accent)', color: 'var(--ink-900)', border: 'none', borderRadius: 'var(--radius-md)', padding: '14px 28px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16, cursor: 'pointer' }}>Ler: IA e agora?</button>
      </div>
    </section>
  );
}

Object.assign(window, { IAPage, IACallout });
