// Página de transparência sobre o uso de IA na produção do site.
//
// Enquadramento deliberado: não é aviso legal, é demonstração. A página
// "IA e agora?" defende que o valor humano está em conduzir. Esta aqui
// mostra isso acontecendo.

function TP({ 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 TSecao({ titulo, children }) {
  return (
    <section style={{ marginBottom: 'var(--space-9)' }}>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', lineHeight: 'var(--leading-snug)', color: 'var(--text-primary)', margin: '0 0 var(--space-6)', textWrap: 'pretty' }}>{titulo}</h2>
      {children}
    </section>
  );
}

function TDestaque({ 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 TRotulo({ 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>;
}

/* ── o ciclo, desenhado como ciclo ──────────────────────────────────── */
function DiagramaLaco() {
  const passos = [
    { n: '01', quem: 'eu', t: 'Penso', d: 'Trago o raciocínio, o contexto e o que eu acredito. Isso não vem de modelo nenhum.' },
    { n: '02', quem: 'ela', t: 'Rascunha', d: 'Escreve, estrutura, desenha, programa. Rápido, e quase sempre pelo caminho mais comum.' },
    { n: '03', quem: 'eu', t: 'Recuso', d: 'Aponto o que soa falso, o que não é meu, o que está inflado. É aqui que deixa de ser genérico.' },
    { n: '04', quem: 'ela', t: 'Refaz e mede', d: 'Reescreve com a direção nova e confere o que o olho não confere.' },
  ];
  return (
    <figure style={{ margin: 'var(--space-7) 0' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 'var(--space-3)' }}>
        {passos.map(p => {
          const meu = p.quem === 'eu';
          return (
            <div key={p.n} style={{ padding: 'var(--space-5)', borderRadius: 'var(--radius-lg)', border: `1px solid ${meu ? 'var(--accent)' : 'var(--border-subtle)'}`, background: meu ? 'var(--accent-soft)' : 'var(--surface-card)', display: 'flex', flexDirection: 'column', gap: 8 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: meu ? 'var(--accent-strong)' : 'var(--text-muted)' }}>{p.n} · {meu ? 'eu' : 'a IA'}</span>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: 'var(--text-primary)' }}>{p.t}</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 'var(--leading-normal)', color: 'var(--text-secondary)' }}>{p.d}</span>
            </div>
          );
        })}
      </div>
      {/* a seta de volta é o que faz isto ser ciclo e não linha de montagem */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 'var(--space-4)', color: 'var(--accent-strong)' }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v5h5" />
        </svg>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>e volta pro 01, quantas vezes for preciso</span>
      </div>
      {/* legenda que e o argumento, nao a descricao do desenho: em corpo
          13 cinza ela passava batido logo depois da figura */}
      <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' }}>
        Não é linha de montagem, é ciclo. Este parágrafo que você está lendo passou por ele algumas vezes.
      </figcaption>
    </figure>
  );
}

/* ── divisão de trabalho ──────────────────────────────────────────── */
function DiagramaDivisao() {
  const meu = ['O raciocínio e a tese de cada página', 'As analogias e ilustrações', 'O que é verdade sobre mim', 'O tom, o ritmo e as palavras que eu usaria', 'A decisão final de tudo que está publicado'];
  const dela = ['Escrever o rascunho a partir do meu raciocínio', 'Estruturar, diagramar e programar', 'Calibrar ênfase de fala para texto publicado', 'Medir o que o olho não confere'];
  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-6)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--accent)', background: 'var(--accent-soft)' }}>
          <TRotulo cor="var(--accent-strong)">Não delego</TRotulo>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {meu.map(x => <li key={x} style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 'var(--leading-normal)', color: 'var(--text-primary)' }}>{x}</li>)}
          </ul>
        </div>
        <div style={{ flex: 1, padding: 'var(--space-6)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-subtle)', background: 'var(--surface-card)' }}>
          <TRotulo>Delego</TRotulo>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {dela.map(x => <li key={x} style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 'var(--leading-normal)', color: 'var(--text-secondary)' }}>{x}</li>)}
          </ul>
        </div>
      </div>
    </figure>
  );
}

/* ── caso ─────────────────────────────────────────────────────────────
   Formato editorial, não formulário. A versão anterior tinha três rótulos
   fixos repetidos em todos os cartões — quatro caixas idênticas em fila é
   exatamente o que faz um texto parecer gerado. */
function Caso({ etiqueta, titulo, iaSaia, euDisse }) {
  return (
    <div style={{ marginBottom: 'var(--space-8)', paddingLeft: 'var(--space-6)', borderLeft: '2px solid var(--border-subtle)' }}>
      <TRotulo cor="var(--accent-strong)">{etiqueta}</TRotulo>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-xl)', fontWeight: 600, lineHeight: 'var(--leading-snug)', color: 'var(--text-primary)', marginBottom: 'var(--space-5)', textWrap: 'pretty' }}>{titulo}</div>
      <div style={{ padding: 'var(--space-5)', borderRadius: 'var(--radius-md)', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', marginBottom: 'var(--space-5)' }}>
        <TRotulo>O rascunho dizia</TRotulo>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 'var(--leading-relaxed)', color: 'var(--text-muted)' }}>{iaSaia}</div>
      </div>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0, textWrap: 'pretty' }}>{euDisse}</p>
    </div>
  );
}

function TransparenciaPage({ onNavigate }) {
  return (
    <article style={{ padding: 'var(--space-9) var(--space-7)', maxWidth: 820, margin: '0 auto' }}>

      <header style={{ marginBottom: 'var(--space-9)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--accent-strong)', marginBottom: 'var(--space-5)' }}>Transparência</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' }}>Como este site é feito</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' }}>Este site é escrito e programado com IA. Não vou esconder isso atrás de aviso em letra miúda — vou mostrar exatamente como funciona, com casos reais desta construção.</p>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0, textWrap: 'pretty' }}>Existe uma aversão justa a conteúdo gerado por IA, e ela quase sempre tem o mesmo motivo: texto sem dono, sem opinião e sem risco. O problema nunca foi a ferramenta. É o que sai quando ninguém conduz.</p>
      </header>

      <TSecao titulo="Lembra da represa?">
        <TP lead>Na página sobre IA eu digo que a água é o conhecimento do modelo, e que sem barragem ela desce de uma vez e leva tudo. Esta página é a barragem funcionando.</TP>
        <TP>Se eu escrevesse aquilo e publicasse um site que é despejo de modelo, você teria todo direito de fechar a aba. Então aqui está a vazão, medida.</TP>
      </TSecao>

      <TSecao titulo="O ciclo">
        <TP>Não é “peço um texto e publico”. É um vaivém, e ele roda muitas vezes.</TP>
        <DiagramaLaco />
        <DiagramaDivisao />
        <TP>A coluna da esquerda não é orgulho, é limite técnico: ela não sabe o que é verdade sobre mim, não tem ouvido para a minha língua, e não faz ideia do que eu assinaria embaixo. Ela executa muito bem dentro de uma direção. A direção é minha.</TP>
      </TSecao>

      <TSecao titulo="Onde eu corrigi o rumo">
        <TP>Não são ajustes de palavra. São as decisões que definem o que este site é — e nenhuma delas sai de um modelo, porque nenhuma tem resposta certa por análise.</TP>

        <Caso
          etiqueta="Registro"
          titulo="Usar o medo como porta, nunca como alavanca"
          iaSaia="Todo o assunto puxa para um lado só. “A IA vai matar a profissão” é o que se pesquisa, é o que rende, e é para lá que qualquer texto sobre isso escorrega — urgência, ameaça, contagem regressiva. É o caminho de menor resistência, e ele funciona."
          euDisse="A pergunta ficou, porque é ela que traz quem está com medo. O registro é que não. A página reconhece o medo, explica o que aconteceu e mostra um caminho — sem vender urgência nem usar a ansiedade de ninguém como isca. Do contrário eu viraria exatamente o que critico no manifesto, só que com estética melhor. É a diferença entre atravessar a rua com alguém e empurrar."
        />

        <Caso
          etiqueta="Posicionamento"
          titulo="A IA é a âncora, não o assunto"
          iaSaia="Veio o alerta de que dar destaque à IA transformaria isto no “site do cara da IA” — posicionamento que envelhece junto com o tema, e que some quando o assunto sair de moda."
          euDisse="Não é isso. Todo o meu ensino é fundamento, que é o que não muda quando a ferramenta muda. A IA é a âncora que torna o fundamento urgente agora. Uma coisa é o conteúdo, a outra é o contexto que faz ele importar — e confundir os dois te deixa ou tímido demais, ou refém de um tema que passa."
        />

        <Caso
          etiqueta="Comunicação"
          titulo="Falar da pessoa, não da oferta"
          iaSaia="“Escrevo e ensino sobre arquitetura, escalabilidade e decisões de engenharia.” Correto, informativo e completamente frio. É catálogo de assunto."
          euDisse="O que abre uma página é reconhecimento — a pessoa se vendo ali. Ficou “escrever código deixou de ser o problema; saber o que pedir, e reconhecer quando veio errado, virou o problema”. Foram três rodadas até sair, e o que destravou não foi pedir outra versão: foi eu dizer qual sensação eu queria provocar."
        />

        <Caso
          etiqueta="Esta página"
          titulo="Ser retratado como quem eu não sou"
          iaSaia="O primeiro rascunho desta página colocava conteúdo inventado por um kit de design como se fosse invenção minha, e tratava uma hipérbole de áudio — eu raciocinando em voz alta — como se fosse um dado falso que eu tivesse afirmado."
          euDisse="Mandei refazer inteira. Uma página sobre honestidade não pode me colocar num lugar que não é o meu só para parecer mais humilde. Este caso está aqui porque aconteceu na construção deste texto — e porque uma página de transparência que esconde o próprio erro não vale o nome."
        />
      </TSecao>

      <TSecao titulo="O que isso custa">
        <TP lead>Não é mais rápido do jeito que as pessoas imaginam.</TP>
        <TP>É mais rápido para produzir. Não é mais rápido para <strong style={{ color: 'var(--text-primary)' }}>acertar</strong>. O rascunho chega em segundos, e aí começa o trabalho: ler com desconfiança, achar onde soa falso, explicar por que soa falso, recusar, repetir.</TP>
        <TP>Quem não sabe o que quer dizer não ganha nada com isso. Ganha volume, e volume sem direção é justamente o que fez todo mundo criar aversão a texto de IA.</TP>
        <TDestaque>A ferramenta não tem opinião. Se eu não tiver a minha, o que sai não é meu — é a média da internet com a minha cara.</TDestaque>
      </TSecao>

      <TSecao titulo="Por que esta página existe">
        <TP lead>Porque ela é a prova do que eu defendo na página sobre IA.</TP>
        <TP>Eu argumento lá que o valor humano deixou de estar em digitar e passou a estar em conduzir: saber o que pedir, reconhecer quando veio errado, decidir o que não vai. Este site é isso acontecendo, com histórico público.</TP>
        <TP>Não publiquei nada aqui que eu não assine. Cada linha passou por mim, e as que não passavam no meu crivo foram embora — inclusive linhas que estavam ótimas e não eram minhas.</TP>
        <TDestaque>Se eu ensino que a diferença está em conduzir, eu preciso mostrar a condução — não só afirmar que ela existe.</TDestaque>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 'var(--space-7)' }}>
          <button onClick={() => onNavigate && onNavigate('ia')} 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' }}>Ler: IA e agora?</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>
      </TSecao>

    </article>
  );
}
Object.assign(window, { TransparenciaPage });
