(() => {
const { SectionLabel, DisplayHeading, FilterBar, WorkCard, GhostLink, Tag, Divider, ScrollReveal, LineReveal } = window.DigitalConteDoDesignSystem_c80f58;

const ALL_CASES = [
  { client: "Varejo alimentar", year: "2025", title: "Do catálogo ao carrinho", tags: ["Performance","CRM"] },
  { client: "Saúde", year: "2025", title: "Uma marca que explica", tags: ["Branding","Conteúdo"] },
  { client: "Educação", year: "2024", title: "Matrículas em escala", tags: ["Mídia paga","Landing pages"] },
  { client: "Indústria", year: "2024", title: "Catálogo técnico digital", tags: ["Tecnologia","SEO"] },
  { client: "Serviços financeiros", year: "2023", title: "Conteúdo que qualifica", tags: ["Conteúdo","SEO"] },
  { client: "Imobiliário", year: "2023", title: "Lançamento em 6 semanas", tags: ["Performance","Landing pages"] },
];

function WorkScreen({ onNavigate }) {
  const [filter, setFilter] = React.useState("Tudo");
  const m = window.useIsMobile();
  const narrow = window.useIsMobile(1180);
  const list = filter === "Tudo" ? ALL_CASES : ALL_CASES.filter((c) => c.tags.some((t) => t.includes(filter)));
  return (
    <React.Fragment>
      <section style={{ padding: m ? "46px 19px 30px" : "76px 30px 46px" }}>
        <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "46px" }}>
          <SectionLabel index="01">Cases</SectionLabel>
          <LineReveal as="h1" size={m ? "xs" : narrow ? "sm" : "lg"} lines={["Trabalho", "publicado"]} style={{ maxWidth: "20ch" }} />
          <FilterBar filters={["Tudo","Performance","Branding","Conteúdo","Tecnologia"]} value={filter} onChange={setFilter}
            trailing={<span style={{ fontSize: "var(--text-caption)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--text-secondary)" }}>{list.length} projetos</span>} />
        </div>
      </section>
      <section style={{ padding: m ? "0 19px 46px" : "0 30px 119px" }}>
        <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr", gap: "19px" }}>
          {list.map((c, i) => <ScrollReveal key={c.title} delay={(i % 2) * 70}><WorkCard {...c} onClick={(e) => { e.preventDefault(); onNavigate("case"); }} /></ScrollReveal>)}
        </div>
        <div style={{ maxWidth: "var(--page-max)", margin: "46px auto 0", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "15px" }}>
          <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
            {["2025","2024","2023"].map((y) => <Tag key={y}>{y}</Tag>)}
          </div>
          <GhostLink size="sm" onClick={(e) => { e.preventDefault(); onNavigate("contato"); }}>Quero um projeto assim</GhostLink>
        </div>
      </section>
    </React.Fragment>
  );
}
Object.assign(window, { WorkScreen, ALL_CASES });
})();