feat: harden portfolio and add SEO foundations

app/components/story/NotebookStory.test.tsx

@@ -1,14 +1,18 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import { portfolio } from "@/lib/portfolio-data";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { getFeaturedProjects } from "@/lib/portfolio-data";
 import NotebookStory, {
   canUseNotebook3D,
   getNotebookRunwayVh,
   getNotebookSeekProgress,
 } from "./NotebookStory";
 
+const mockNotebookStage = jest.fn(({ isVisible }: { isVisible: boolean }) => (
+  <div data-is-visible={String(isVisible)} data-testid="notebook-stage" />
+));
+
 jest.mock("next/dynamic", () => () => {
-  return function DynamicNotebookStage() {
-    return <div data-testid="notebook-stage" />;
+  return function DynamicNotebookStage(props: { isVisible: boolean }) {
+    return mockNotebookStage(props);
   };
 });
 
@@ -26,7 +30,23 @@ jest.mock("gsap", () => ({
 jest.mock("gsap/ScrollTrigger", () => ({
   ScrollTrigger: { getAll: jest.fn(() => []) },
 }));
-const projects = portfolio.projects;
+const projects = getFeaturedProjects(null);
+
+let intersectionCallback: IntersectionObserverCallback | undefined;
+const mockObserve = jest.fn();
+const mockDisconnect = jest.fn();
+
+function setDocumentHidden(hidden: boolean) {
+  Object.defineProperty(document, "hidden", {
+    configurable: true,
+    value: hidden,
+  });
+}
+
+function setSectionIntersects(isIntersecting: boolean) {
+  const entry = { isIntersecting } as IntersectionObserverEntry;
+  act(() => intersectionCallback?.([entry], {} as IntersectionObserver));
+}
 
 function mockMatchMedia({
   reduced = false,
@@ -62,6 +82,26 @@ describe("NotebookStory", () => {
       configurable: true,
       value: 1280,
     });
+    setDocumentHidden(false);
+    intersectionCallback = undefined;
+    mockObserve.mockReset();
+    mockDisconnect.mockReset();
+    class MockIntersectionObserver {
+      readonly root = null;
+      readonly rootMargin = "";
+      readonly thresholds = [];
+
+      constructor(callback: IntersectionObserverCallback) {
+        intersectionCallback = callback;
+      }
+
+      disconnect = mockDisconnect;
+      observe = mockObserve;
+      takeRecords = () => [];
+      unobserve = jest.fn();
+    }
+    global.IntersectionObserver =
+      MockIntersectionObserver as unknown as typeof IntersectionObserver;
   });
 
   afterEach(() => {
@@ -99,6 +139,43 @@ describe("NotebookStory", () => {
       screen.getByLabelText("Projetos em produção no notebook"),
     ).toHaveAttribute("data-notebook-runway-vh", "520");
   });
+
+  it("stays paused when the tab returns while the section is offscreen", async () => {
+    const addEventListener = jest.spyOn(document, "addEventListener");
+    const removeEventListener = jest.spyOn(document, "removeEventListener");
+    const { unmount } = render(<NotebookStory projects={projects} />);
+
+    const stage = await screen.findByTestId("notebook-stage");
+    expect(stage).toHaveAttribute("data-is-visible", "false");
+
+    setSectionIntersects(true);
+    await waitFor(() =>
+      expect(stage).toHaveAttribute("data-is-visible", "true"),
+    );
+
+    setDocumentHidden(true);
+    act(() => document.dispatchEvent(new Event("visibilitychange")));
+    await waitFor(() =>
+      expect(stage).toHaveAttribute("data-is-visible", "false"),
+    );
+
+    setSectionIntersects(false);
+    setDocumentHidden(false);
+    act(() => document.dispatchEvent(new Event("visibilitychange")));
+    expect(stage).toHaveAttribute("data-is-visible", "false");
+
+    expect(
+      addEventListener.mock.calls.filter(
+        ([type]) => type === "visibilitychange",
+      ),
+    ).toHaveLength(1);
+    unmount();
+    expect(
+      removeEventListener.mock.calls.filter(
+        ([type]) => type === "visibilitychange",
+      ),
+    ).toHaveLength(1);
+  });
   it("returns to the static fallback when the viewport loses desktop eligibility", async () => {
     render(<NotebookStory projects={projects} />);
     await waitFor(() =>