// Feed post detail screen
const FEED_BODY = {
  0: [
    "A Anthropic liberou Haiku 4.5 em GA essa semana. Pra quem opera atendimento, isso importa por três motivos que não estão no release notes.",
    "Primeiro: a janela de 1M tokens muda quem você considera candidato ao roteamento. Até ontem, Haiku era o 'rápido e barato pra primeira camada'. Agora ele lê base de conhecimento inteira sem RAG — o que reduz arquitetura e elimina uma fonte de erro (retrieval ruim).",
    "Segundo: o custo por milhão de tokens caiu o suficiente pra viabilizar classificação multi-eixo em toda conversa. Se você hoje classifica intenção só quando precisa, agora compensa classificar sempre.",
    "Terceiro — e esse é o que quase ninguém tá comentando — a latência melhorou em ~18% nos nossos benchmarks internos com prompts em português. Isso é percepção de velocidade no WhatsApp, e é diferença entre 'a IA tá lenta' e 'a IA tá boa'.",
    "Pra decidir se vale trocar: se você usa Haiku 3.5 hoje, troca sem pensar. Se usa Sonnet pra atendimento simples, roda o benchmark da Tela 04 da trilha de Operar e vê se o Haiku 4.5 cobre.",
  ],
  1: [
    "A Pittol tem loja de material de construção online em três estados. Nove minutos de primeira resposta no WhatsApp, picos de 24min. Três pessoas no atendimento, demanda crescendo 40% ao ano.",
    "Em 11 semanas, ficou em 14 segundos de primeira resposta. Não é mágica e não foi só 'colocar IA'.",
    "O que funcionou: triagem em três camadas, handoff com resumo de contexto automático, e — o mais importante — uma métrica de qualidade própria que não é CSAT.",
    "Os três erros do caminho: 1) quiseram personalizar o tom antes de acertar a arquitetura; 2) escolheram o modelo errado pra triagem (Sonnet quando Haiku resolvia); 3) não desenharam o handoff, e perderam 3 semanas refazendo.",
    "O case completo, com prompts, fluxos e os números semana a semana, tá disponível na Biblioteca.",
  ],
};

const ScreenPost = ({ idx, go }) => {
  const post = VELYX.feed[idx] || VELYX.feed[0];
  const body = FEED_BODY[idx] || FEED_BODY[0];
  const other = VELYX.feed.filter((_, i) => i !== idx).slice(0, 3);

  return (
    <div className="max-w-[760px] mx-auto px-10 py-10" data-screen-label={`Post · ${post.title}`}>
      <button onClick={() => go({name:'feed'})}
        className="flex items-center gap-1.5 text-mute hover:text-ink t-fast text-[12.5px] mb-8">
        <I.chevLeft size={14}/> Voltar pro feed
      </button>

      <header className="mb-10 pb-8 border-b border-line">
        <div className="flex items-center gap-3 mb-5">
          <span className="font-mono text-[11px] text-mute2 uppercase tracking-wide">{post.date} · 2026</span>
          <span className="text-mute2">·</span>
          <Badge tone={post.tag === 'Modelo novo' || post.tag === 'Nova capacidade' ? 'accent' : 'neutral'}>{post.tag}</Badge>
          <span className="text-mute2 ml-auto font-mono text-[11px]">~4 min leitura</span>
        </div>
        <h1 className="text-[34px] leading-[1.1] font-semibold tracking-tightest text-ink mb-4">
          {post.title}
        </h1>
        <p className="text-mute text-[16px] leading-relaxed">{post.summary}</p>
      </header>

      <article className="space-y-5 text-[16px] leading-[1.75] text-ink/90">
        {body.map((p, i) => (
          <p key={i}>{p}</p>
        ))}
      </article>

      <div className="mt-10 pt-8 border-t border-line flex items-center gap-3">
        <Button variant="secondary" size="md" icon={<I.copy size={13}/>}>Copiar link</Button>
        <Button variant="ghost" size="md" icon={<I.ext size={13}/>}>Compartilhar</Button>
      </div>

      {/* Related */}
      <section className="mt-14">
        <div className="text-mute2 text-[10.5px] font-mono uppercase tracking-[0.12em] mb-4">Continue lendo</div>
        <div className="space-y-1">
          {other.map((p, i) => (
            <button key={i}
              onClick={() => {
                const realIdx = VELYX.feed.findIndex(x => x.title === p.title);
                go({name:'post', idx: realIdx});
              }}
              className="w-full flex items-start gap-4 py-4 border-b border-line text-left group">
              <span className="font-mono text-[11px] text-mute2 uppercase tracking-wide pt-1 w-16 shrink-0">{p.date}</span>
              <div className="flex-1 min-w-0">
                <h3 className="text-[15px] font-medium text-ink leading-snug group-hover:text-accent t-fast mb-0.5">{p.title}</h3>
                <p className="text-mute text-[12.5px] line-clamp-1">{p.summary}</p>
              </div>
              <I.arrowRight size={13} className="text-mute2 group-hover:text-accent t-fast mt-1.5"/>
            </button>
          ))}
        </div>
      </section>
    </div>
  );
};

window.ScreenPost = ScreenPost;