feat(cases): mídia no topo, títulos de busca curtos e CreativeWork

Case com mídia ao lado do título e play acessível; problema de cada cliente reescrito com base nos dados; serviços relacionados em 2 cards; FAQ antes do próximo passo e bloco 'Onde já apliquei isso'; Apolo citada em IoT e arquitetura. metaTitle até 43 caracteres e descrições até 155 com teste; JSON-LD CreativeWork; imagens de compartilhamento abaixo de 100 KB; 404 e robots corrigidos; server-only nos módulos com node:.

app/cases/[slug]/page.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, within } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import { caseStudies, getRelatedServices, siteUrl } from "@/lib/site-content";
 import CasesPage from "../page";
 import CasePage, { generateMetadata, generateStaticParams } from "./page";
@@ -49,24 +49,34 @@ function readJsonLdEntities(container: HTMLElement): Record<string, unknown>[] {
   });
 }
 
-/** Nenhum link para /#contact nem para o GitHub; o contato é o WhatsApp com o contexto do case. */
-function expectContactAndNoDeadLinks(caseStudy: { title: string }) {
+/**
+ * Nenhum link para /#contact nem para o GitHub; o contato é o WhatsApp com o contexto do case.
+ * Case de cliente: "projeto parecido"; projeto de laboratório: "problema parecido".
+ */
+function expectContactAndNoDeadLinks(caseStudy: { id: string; title: string }) {
   const hrefs = screen
     .getAllByRole("link")
     .map((link) => link.getAttribute("href") ?? "");
   expect(hrefs).not.toContain("/#contact");
   expect(hrefs.some((href) => /github/i.test(href))).toBe(false);
 
+  const isClient = clientCaseIds.includes(caseStudy.id);
   const cta = screen.getByRole("link", {
-    name: "Conversar sobre um projeto parecido",
+    name: isClient
+      ? "Conversar sobre um projeto parecido"
+      : "Tem um problema parecido? Vamos conversar.",
   });
   const destination = new URL(cta.getAttribute("href") ?? "");
   expect(destination.origin).toBe("https://wa.me");
   expect(destination.searchParams.get("text")).toContain(
-    `um projeto parecido com o da ${caseStudy.title}`,
+    isClient
+      ? `um projeto parecido com o da ${caseStudy.title}`
+      : `um problema parecido com o do projeto ${caseStudy.title}`,
   );
   expect(cta).toHaveAttribute("target", "_blank");
   expect(cta).toHaveAttribute("rel", expect.stringContaining("noopener"));
+  // limão preenchido só no contato: o botão de play e os demais não o usam
+  expect(cta.className).toContain("bg-[var(--slash)]");
 }
 
 it("exposes the eight public cases, the two new client cases among them", async () => {
@@ -80,16 +90,16 @@ it("exposes the eight public cases, the two new client cases among them", async
   for (const id of ["sev-modaintima", "lavacao-047", "as-servicos"]) {
     const caseStudy = getCase(id);
     const url = `${siteUrl}/cases/${caseStudy.id}`;
-    const title = `${caseStudy.title}: ${caseStudy.subtitle}`;
+    const { metaTitle: title, metaDescription: description } = caseStudy;
     const metadata = await generateMetadata({
       params: Promise.resolve({ slug: caseStudy.id }),
     });
     expect(metadata).toMatchObject({
       title,
-      description: caseStudy.summary,
+      description,
       alternates: { canonical: url },
-      openGraph: { title, description: caseStudy.summary, url },
-      twitter: { title, description: caseStudy.summary },
+      openGraph: { title, description, url },
+      twitter: { title, description },
     });
     expect(metadata).not.toHaveProperty("keywords");
   }
@@ -101,7 +111,7 @@ it("renders a client case in the sales order, with media, contact and collapsed
 
   const heading = screen.getByRole("heading", { level: 1 });
   expect(heading).toHaveTextContent(caseStudy.headline);
-  expect(heading.nextElementSibling).toHaveTextContent(caseStudy.summary);
+  expect(isBefore(heading, screen.getByText(caseStudy.summary))).toBe(true);
   expect(screen.getByText(/Case de cliente/)).toBeVisible();
 
   const sectionNames = [
@@ -130,33 +140,28 @@ it("renders a client case in the sales order, with media, contact and collapsed
   // sem dado real, não há seção de resultado
   expect(screen.queryByRole("heading", { name: "Resultado" })).toBeNull();
 
-  // mídia: pôster e vídeo do computador e do celular
-  const desktopVideo = screen.getByLabelText(
-    `Vídeo do site ${caseStudy.title} no computador`,
+  // mídia: o pôster do computador e do celular com um botão de play; nenhum vídeo parado com controles
+  expect(container.querySelector("video")).toBeNull();
+  const desktopPlay = screen.getByRole("button", {
+    name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+  });
+  const mobilePlay = screen.getByRole("button", {
+    name: `Reproduzir o vídeo do site ${caseStudy.title} no celular`,
+  });
+  const mediaSection = screen
+    .getByRole("heading", { level: 2, name: "Como ficou" })
+    .closest("section");
+  expect(mediaSection?.querySelector(".ds-bframe")).toContainElement(
+    desktopPlay,
   );
-  const mobileVideo = screen.getByLabelText(
-    `Vídeo do site ${caseStudy.title} no celular`,
-  );
-  expect(desktopVideo).toHaveAttribute(
-    "poster",
-    `/videos/${caseStudy.id}/desktop.webp`,
-  );
-  expect(mobileVideo).toHaveAttribute(
-    "poster",
-    `/videos/${caseStudy.id}/mobile.webp`,
-  );
-  expect(
-    desktopVideo.querySelectorAll("source[src^='/videos/sev-modaintima/']"),
-  ).toHaveLength(2);
-  expect(container.querySelector(".ds-bframe")).toContainElement(desktopVideo);
-  expect(container.querySelector(".ds-phone")).toContainElement(mobileVideo);
+  expect(mediaSection?.querySelector(".ds-phone")).toContainElement(mobilePlay);
   expect(
     screen.getByRole("link", { name: `Abrir o site ${caseStudy.title}` }),
   ).toHaveAttribute("href", caseStudy.demoUrl);
 
   expectContactAndNoDeadLinks(caseStudy);
 
-  // detalhes técnicos: recolhidos, no fim da página
+  // detalhes técnicos: recolhidos, junto do conteúdo (logo depois do que foi feito), não numa faixa à parte
   const details = container.querySelector("details");
   if (!details) throw new Error("Missing technical details");
   expect(details).not.toHaveAttribute("open");
@@ -167,11 +172,16 @@ it("renders a client case in the sales order, with media, contact and collapsed
   for (const decision of caseStudy.decisions) {
     expect(within(details).getByText(decision)).not.toBeVisible();
   }
-  const contactHeading = sectionHeadings[sectionHeadings.length - 1];
-  expect(isBefore(contactHeading, details)).toBe(true);
+  const doneSection = sectionHeadings[2].closest("section");
+  expect(doneSection).toContainElement(details);
+  expect(isBefore(screen.getByText(caseStudy.deliveries[0]), details)).toBe(
+    true,
+  );
+  expect(isBefore(details, sectionHeadings[3])).toBe(true);
   expect(container.querySelectorAll("details")).toHaveLength(1);
-  const lastSection = container.querySelector("article")?.lastElementChild;
-  expect(lastSection).toContainElement(details);
+  expect(
+    container.querySelector("section[aria-label='Detalhes técnicos']"),
+  ).toBeNull();
 
   // o que saiu: desafio verificável, limites da evidência, fontes e commits
   for (const name of [
@@ -186,11 +196,14 @@ it("renders a client case in the sales order, with media, contact and collapsed
   expect(container.textContent).not.toMatch(/Commit:|[0-9a-f]{40}/);
 
   const graph = readJsonLdEntities(container);
-  expect(graph.map((node) => node["@type"])).toEqual(["BreadcrumbList"]);
+  expect(graph.map((node) => node["@type"])).toEqual([
+    "CreativeWork",
+    "BreadcrumbList",
+  ]);
   expect(JSON.stringify(graph)).not.toMatch(
     /Article|FAQPage|ProfessionalService|LocalBusiness/,
   );
-  const breadcrumb = graph[0] as {
+  const breadcrumb = graph[1] as {
     itemListElement: Array<{
       "@type": string;
       position: number;
@@ -216,7 +229,7 @@ it("renders a client case in the sales order, with media, contact and collapsed
   ]);
 
   const visibleBreadcrumb = screen.getByRole("navigation", {
-    name: "Breadcrumb",
+    name: "Trilha de navegação",
   });
   expect(
     within(visibleBreadcrumb)
@@ -253,7 +266,7 @@ it("renders the two new client cases from the portfolio data", async () => {
   }
 });
 
-it("labels a laboratory case, skips the media block and links its service", async () => {
+it("labels a laboratory case, skips the media block and shows its service as a card", async () => {
   const caseStudy = getCase("twins-lab");
   const { container } = await renderCase(caseStudy.id);
 
@@ -263,11 +276,12 @@ it("labels a laboratory case, skips the media block and links its service", asyn
   ).toBeVisible();
   expect(screen.queryByRole("heading", { name: "Como ficou" })).toBeNull();
   expect(container.querySelector("video")).toBeNull();
+  expect(container.querySelector(".ds-bframe")).toBeNull();
   expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
   expect(screen.queryByText(/indispon/i)).toBeNull();
 
   const relatedLinks = screen.getAllByRole("link", {
-    name: /^Ver serviço relacionado:/,
+    name: /^Ver o serviço:/,
   });
   expect(relatedLinks.map((link) => link.getAttribute("href"))).toEqual(
     getRelatedServices(caseStudy.id).map(({ slug }) => `/servicos/${slug}`),
@@ -276,6 +290,24 @@ it("labels a laboratory case, skips the media block and links its service", asyn
   expectContactAndNoDeadLinks(caseStudy);
 });
 
+it("turns the contact of a laboratory case into the 'problema parecido' invitation", async () => {
+  for (const id of labCaseIds) {
+    const { unmount } = await renderCase(id);
+
+    expect(screen.queryByText("Quer um projeto parecido com este?")).toBeNull();
+    expect(
+      screen.queryByRole("link", {
+        name: "Conversar sobre um projeto parecido",
+      }),
+    ).toBeNull();
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Fale sobre o seu caso" }),
+    ).toBeVisible();
+    expectContactAndNoDeadLinks(getCase(id));
+    unmount();
+  }
+});
+
 it("shows the author's role and no site button for a client project without a public site", async () => {
   const caseStudy = getCase("as-servicos");
   expect(caseStudy.demoUrl).toBeNull();
@@ -289,7 +321,9 @@ it("shows the author's role and no site button for a client project without a pu
   expect(screen.queryByText(/indispon/i)).toBeNull();
   // a capa continua nas molduras
   expect(
-    screen.getByLabelText(`Vídeo do site ${caseStudy.title} no computador`),
+    screen.getByRole("button", {
+      name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+    }),
   ).toBeInTheDocument();
 });
 
@@ -327,26 +361,195 @@ it("shows the result section only when the case has real data", async () => {
   }
 });
 
-it("links every service related to a client case", async () => {
-  const caseStudy = getCase("sc-plus");
+it("shows at most two related services, as cards under the contact button", async () => {
+  // sev-modaintima tem quatro serviços ligados; só os dois primeiros viram cards
+  const sev = getCase("sev-modaintima");
+  const all = getRelatedServices(sev.id);
+  expect(all.length).toBeGreaterThan(2);
+  const { unmount } = await renderCase(sev.id);
+
+  const cards = screen.getAllByRole("link", { name: /^Ver o serviço:/ });
+  expect(cards).toHaveLength(2);
+  expect(cards.map((link) => link.getAttribute("href"))).toEqual(
+    all.slice(0, 2).map(({ slug }) => `/servicos/${slug}`),
+  );
+  for (const link of cards) {
+    const card = link.closest("article");
+    expect(card).toHaveClass("ds-card");
+    expect(
+      within(card as HTMLElement).getByRole("heading", { level: 3 }),
+    ).toBeVisible();
+  }
+  expect(
+    screen.queryByRole("link", { name: /^Ver serviço relacionado:/ }),
+  ).toBeNull();
+  const contact = screen.getByRole("link", {
+    name: "Conversar sobre um projeto parecido",
+  });
+  expect(isBefore(contact, cards[0])).toBe(true);
+  unmount();
+
+  // sc-plus tem dois; as-servicos, um
+  for (const [id, expected] of [
+    ["sc-plus", 2],
+    ["as-servicos", 1],
+  ] as const) {
+    const { unmount: unmountCase } = await renderCase(id);
+    const links = screen.getAllByRole("link", { name: /^Ver o serviço:/ });
+    expect(links).toHaveLength(expected);
+    expect(links.map((link) => link.getAttribute("href"))).toEqual(
+      getRelatedServices(id)
+        .slice(0, 2)
+        .map(({ slug }) => `/servicos/${slug}`),
+    );
+    expectContactAndNoDeadLinks(getCase(id));
+    unmountCase();
+  }
+});
+
+it("writes the CreativeWork of a client case with creator, client and keywords", async () => {
+  const caseStudy = getCase("lavacao-047");
   const { container } = await renderCase(caseStudy.id);
 
-  const relatedLinks = screen.getAllByRole("link", {
-    name: /^Ver serviço relacionado:/,
-  });
-  expect(
-    relatedLinks
-      .map((link) => link.getAttribute("href"))
-      .sort((a, b) => (a ?? "").localeCompare(b ?? "")),
-  ).toEqual(
-    getRelatedServices(caseStudy.id)
-      .map(({ slug }) => `/servicos/${slug}`)
-      .sort(),
+  const work = readJsonLdEntities(container).find(
+    (node) => node["@type"] === "CreativeWork",
   );
-  expectContactAndNoDeadLinks(caseStudy);
-  expect(readJsonLdEntities(container).map((node) => node["@type"])).toEqual([
-    "BreadcrumbList",
-  ]);
+  expect(work).toEqual({
+    "@type": "CreativeWork",
+    "@id": `${siteUrl}/cases/lavacao-047#creative-work`,
+    name: "Lavação 047: Site e painel para lavação automotiva",
+    description: caseStudy.metaDescription,
+    url: `${siteUrl}/cases/lavacao-047`,
+    image: `${siteUrl}/cases/lavacao-047/opengraph-image/lavacao-047`,
+    inLanguage: "pt-BR",
+    creator: { "@id": `${siteUrl}/#person` },
+    sourceOrganization: {
+      "@type": "Organization",
+      name: "Lavação 047",
+      url: "https://landing-page-lavacao047.vercel.app",
+    },
+    keywords: caseStudy.stack.join(", "),
+  });
+});
+
+it("writes the CreativeWork of a laboratory case without a client", async () => {
+  const caseStudy = getCase("twins-lab");
+  const { container } = await renderCase(caseStudy.id);
+
+  const work = readJsonLdEntities(container).find(
+    (node) => node["@type"] === "CreativeWork",
+  );
+  expect(work).toMatchObject({
+    name: "Twins Lab: Painel ao vivo de um reator simulado",
+    url: `${siteUrl}/cases/twins-lab`,
+    creator: { "@id": `${siteUrl}/#person` },
+    keywords: "Next.js, TypeScript, NextAuth, MongoDB, SSE",
+  });
+  expect(work).not.toHaveProperty("sourceOrganization");
+});
+
+it("puts the project cover next to the title, and below it on a phone, in a browser frame", async () => {
+  const caseStudy = getCase("sev-modaintima");
+  const { container } = await renderCase(caseStudy.id);
+
+  const hero = container.querySelector("section");
+  if (!hero) throw new Error("Missing hero");
+  const frame = hero.querySelector(".ds-bframe");
+  if (!frame) throw new Error("Missing hero frame");
+  expect(frame.querySelector("img")).toHaveAttribute(
+    "alt",
+    `Captura de tela do site ${caseStudy.title}`,
+  );
+  expect(frame.querySelector(".ds-bframe-url")).toHaveTextContent(
+    "sevmodaintima.com.br",
+  );
+  // a capa abre a página: carrega antes das demais imagens
+  expect(frame.querySelector("img")).not.toHaveAttribute("loading", "lazy");
+
+  // ordem do documento (a do celular): título, mídia, resumo
+  const heading = screen.getByRole("heading", { level: 1 });
+  const summary = screen.getByText(caseStudy.summary);
+  expect(hero).toContainElement(summary);
+  expect(isBefore(heading, frame)).toBe(true);
+  expect(isBefore(frame, summary)).toBe(true);
+  // no computador: duas colunas, texto à esquerda e mídia à direita
+  const grid = frame.closest(".grid");
+  expect(grid?.className).toContain("lg:grid-cols-[");
+  expect(frame.parentElement?.className).toContain("lg:col-start-2");
+  expect(heading.parentElement?.className).toContain("lg:col-start-1");
+});
+
+it("keeps the hero in one column when the case has no capture", async () => {
+  const { container } = await renderCase("twins-lab");
+
+  const hero = container.querySelector("section");
+  expect(hero?.querySelector(".ds-bframe")).toBeNull();
+  expect(hero?.querySelector(".grid")).toBeNull();
+});
+
+it("shows the optional facts only when they are filled in", async () => {
+  const caseStudy = getCase("lavacao-047");
+  const empty = await renderCase(caseStudy.id);
+  expect(screen.queryByRole("list", { name: "Fatos do projeto" })).toBeNull();
+  empty.unmount();
+
+  caseStudy.facts = ["Fato de teste um", "Fato de teste dois"];
+  try {
+    await renderCase(caseStudy.id);
+    const list = screen.getByRole("list", { name: "Fatos do projeto" });
+    expect(within(list).getAllByRole("listitem")).toHaveLength(2);
+    expect(within(list).getByText("Fato de teste um")).toBeVisible();
+    expect(isBefore(screen.getByText(caseStudy.summary), list)).toBe(true);
+  } finally {
+    delete caseStudy.facts;
+  }
+});
+
+it("starts the video only when the visitor presses play, and moves focus to it", async () => {
+  const caseStudy = getCase("sev-modaintima");
+  const { container } = await renderCase(caseStudy.id);
+
+  const play = screen.getByRole("button", {
+    name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+  });
+  expect(play).toBeVisible();
+  expect(play.className).not.toContain("--slash");
+  expect(container.querySelector("video")).toBeNull();
+
+  fireEvent.click(play);
+
+  const video = screen.getByLabelText(
+    `Vídeo do site ${caseStudy.title} no computador`,
+  );
+  expect(video.tagName).toBe("VIDEO");
+  expect(video).toHaveAttribute(
+    "poster",
+    `/videos/${caseStudy.id}/desktop.webp`,
+  );
+  expect(video).toHaveAttribute("controls");
+  expect(video).toHaveFocus();
+  expect(
+    video.querySelectorAll("source[src^='/videos/sev-modaintima/']"),
+  ).toHaveLength(2);
+  expect(video.closest(".ds-bframe")).not.toBeNull();
+  expect(
+    screen.queryByRole("button", {
+      name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+    }),
+  ).toBeNull();
+  // o celular continua com o pôster até a pessoa tocar nele
+  expect(
+    screen.getByRole("button", {
+      name: `Reproduzir o vídeo do site ${caseStudy.title} no celular`,
+    }),
+  ).toBeVisible();
+});
+
+it("gives the case page the same shell as the home, with no narrow max-width", async () => {
+  const { container } = await renderCase("sev-modaintima");
+  for (const shell of container.querySelectorAll(".ds-section-shell")) {
+    expect(shell.className).not.toMatch(/max-w-/);
+  }
 });
 
 it("lists client cases with a cover first, then the laboratory, and keeps the schema aligned", () => {
@@ -409,7 +612,7 @@ it("lists client cases with a cover first, then the laboratory, and keeps the sc
   expect(new URL(cta.getAttribute("href") ?? "").origin).toBe("https://wa.me");
 
   const visibleBreadcrumb = screen.getByRole("navigation", {
-    name: "Breadcrumb",
+    name: "Trilha de navegação",
   });
   expect(
     within(visibleBreadcrumb)