const ScreenFeed = ({ go }) => {
  const { feed } = VELYX;
  const [filter, setFilter] = React.useState('todos');
  const filters = [
    ['todos','Todos'], ['Modelo novo','Modelos'], ['Ferramenta','Ferramentas'],
    ['Case','Cases'], ['Políticas','Políticas'], ['Nova capacidade','Capacidades'],
  ];
  const shown = filter === 'todos' ? feed : feed.filter(f => f.tag === filter);

  return (
    <div className="max-w-[820px] mx-auto px-10 py-10" data-screen-label="06 Acontecendo">
      <PageHeader
        eyebrow="Conteúdo vivo"
        title="O que está acontecendo"
        desc="Toda semana, o que mudou no mundo de IA para atendimento — sem o ruído."
        right={<Badge tone="accent"><span className="inline-block w-1.5 h-1.5 rounded-full bg-accent mr-1"/>atualizado hoje</Badge>}
      />

      {/* Filters */}
      <div className="flex items-center gap-1.5 mb-8 overflow-x-auto pb-1">
        {filters.map(([id, label]) => (
          <button key={id} onClick={() => setFilter(id)}
            className={`h-8 px-3.5 rounded-[6px] text-[12.5px] t-fast shrink-0
              ${filter === id ? 'bg-white/[0.08] text-ink hairline2' : 'text-mute hover:text-ink hover:bg-white/[0.04]'}`}>
            {label}
          </button>
        ))}
      </div>

      {/* Feed */}
      <div className="space-y-1">
        {shown.map((p, i) => (
          <article key={i}
            onClick={() => {
              const realIdx = VELYX.feed.findIndex(x => x.title === p.title);
              go && go({name:'post', idx: realIdx});
            }}
            className="py-6 border-b border-line group cursor-pointer">
            <div className="flex items-center gap-3 mb-3">
              <span className="font-mono text-[11px] text-mute2 uppercase tracking-wide">{p.date}</span>
              <span className="text-mute2">·</span>
              <Badge tone={p.tag === 'Modelo novo' || p.tag === 'Nova capacidade' ? 'accent' : 'neutral'}>{p.tag}</Badge>
            </div>
            <h2 className="text-[22px] font-semibold text-ink tracking-tightest leading-[1.2] mb-2.5 group-hover:text-accent t-fast cursor-pointer">
              {p.title}
            </h2>
            <p className="text-mute text-[14.5px] leading-relaxed mb-4 max-w-2xl">{p.summary}</p>
            <span className="text-ink text-[13px] group-hover:text-accent t-fast inline-flex items-center gap-1.5">
              Ler mais <I.arrowRight size={13}/>
            </span>
          </article>
        ))}
      </div>

      <div className="flex justify-center mt-10">
        <Button variant="secondary" size="md">Carregar mais</Button>
      </div>
    </div>
  );
};

window.ScreenFeed = ScreenFeed;