const { MicroText, Tabs } = window.DASKINODesignSystem_5a312e;
const { EdRule, EdHead, EdDek, EdBody, EdSection, EdTapeRow } = window;

/* O ARQUIVO no fundo preto, com a palavra na fita e a barra de acento
   territorial — a feição do site antigo, preservada. O que a camada editorial
   acrescenta é só a abertura: uma linha em serif com medida e ar, em vez de um
   rótulo solto no topo da lista. */
function V2Work({ go }) {
  const [kind, setKind] = React.useState("todos");
  const kinds = ["todos", ...Array.from(new Set(window.FILMS.map(f => f.kind)))];
  const list = kind === "todos" ? window.FILMS : window.FILMS.filter(f => f.kind === kind);

  return (
    <div style={{ padding: "clamp(34px,4.4vw,64px) clamp(20px,4vw,56px) clamp(56px,7vw,100px)" }} data-screen-label="Arquivo">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(min(100%,280px),1fr))", gap: "clamp(18px,2.4vw,44px)", alignItems: "end", marginBottom: "clamp(30px,3.6vw,52px)" }}>
        <EdHead level="lg" as="h1" weight={450} measure="narrow">Filmes, fotografias e o que vem entre eles.</EdHead>
        <EdDek measure="narrow">Catorze trabalhos entre o documental e a publicidade, feitos onde a coisa acontece: mercado, porto, casa, estrada.</EdDek>
      </div>

      <EdSection label="ARQUIVO" count={list.length} />
      <Tabs items={kinds.map(k => ({ id: k, label: k }))} value={kind} onChange={setKind} style={{ marginBottom: 30 }} />

      <div style={{ display: "flex", flexDirection: "column" }}>
        {list.map(f => <EdTapeRow key={f.slug} f={f} go={go} />)}
      </div>
      <EdRule />
    </div>
  );
}

Object.assign(window, { V2Work });