From 584532af6b17bf90ef0cdc6c008a2a81e62c9c9c Mon Sep 17 00:00:00 2001
From: HolgerHatGarKeineNode <fsociety.mkv@pm.me>
Date: Sat, 24 Jan 2026 14:35:03 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=AC=20Integrate=20CountryStatsScene=20?=
 =?UTF-8?q?and=20fix=20test=20mocks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace placeholder with actual CountryStatsScene (Scene 5) in
PortalPresentation, remove unused PlaceholderScene component,
add missing mock for CountryStatsScene in tests, and fix
PortalPresentationMobile tests to mock correct mobile scene
components.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 videos/src/PortalPresentation.test.tsx       | 12 ++++
 videos/src/PortalPresentation.tsx            | 24 +-------
 videos/src/PortalPresentationMobile.test.tsx | 63 ++++++++++++--------
 3 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/videos/src/PortalPresentation.test.tsx b/videos/src/PortalPresentation.test.tsx
index a729196..a12d77f 100644
--- a/videos/src/PortalPresentation.test.tsx
+++ b/videos/src/PortalPresentation.test.tsx
@@ -88,6 +88,12 @@ vi.mock("./scenes/portal/MeetupShowcaseScene", () => ({
   )),
 }));
 
+vi.mock("./scenes/portal/CountryStatsScene", () => ({
+  CountryStatsScene: vi.fn(() => (
+    <div data-testid="country-stats-scene">CountryStatsScene</div>
+  )),
+}));
+
 vi.mock("./scenes/portal/TopMeetupsScene", () => ({
   TopMeetupsScene: vi.fn(() => (
     <div data-testid="top-meetups-scene">TopMeetupsScene</div>
@@ -210,6 +216,12 @@ describe("PortalPresentation", () => {
     expect(scene).toBeInTheDocument();
   });
 
+  it("renders Scene 5: CountryStatsScene", () => {
+    const { container } = render(<PortalPresentation />);
+    const scene = container.querySelector('[data-testid="country-stats-scene"]');
+    expect(scene).toBeInTheDocument();
+  });
+
   it("renders Scene 6: TopMeetupsScene", () => {
     const { container } = render(<PortalPresentation />);
     const scene = container.querySelector('[data-testid="top-meetups-scene"]');
diff --git a/videos/src/PortalPresentation.tsx b/videos/src/PortalPresentation.tsx
index ba0c3e4..e095392 100644
--- a/videos/src/PortalPresentation.tsx
+++ b/videos/src/PortalPresentation.tsx
@@ -4,6 +4,7 @@ import { PortalIntroScene } from "./scenes/portal/PortalIntroScene";
 import { PortalTitleScene } from "./scenes/portal/PortalTitleScene";
 import { DashboardOverviewScene } from "./scenes/portal/DashboardOverviewScene";
 import { MeetupShowcaseScene } from "./scenes/portal/MeetupShowcaseScene";
+import { CountryStatsScene } from "./scenes/portal/CountryStatsScene";
 import { TopMeetupsScene } from "./scenes/portal/TopMeetupsScene";
 import { ActivityFeedScene } from "./scenes/portal/ActivityFeedScene";
 import { CallToActionScene } from "./scenes/portal/CallToActionScene";
@@ -172,7 +173,7 @@ export const PortalPresentation: React.FC = () => {
         durationInFrames={sceneFrames.topLaender.duration}
         premountFor={fps}
       >
-        <PlaceholderScene name="Top Länder" sceneNumber={5} />
+        <CountryStatsScene />
       </Sequence>
 
       {/* Scene 6: Top Meetups (10s) */}
@@ -213,24 +214,3 @@ export const PortalPresentation: React.FC = () => {
     </AbsoluteFill>
   );
 };
-
-/**
- * Placeholder component for scenes that haven't been implemented yet.
- * Displays a centered scene name with visual indicators.
- */
-const PlaceholderScene: React.FC<{ name: string; sceneNumber: number }> = ({
-  name,
-  sceneNumber,
-}) => {
-  return (
-    <AbsoluteFill className="flex items-center justify-center">
-      <div className="text-center">
-        <div className="w-24 h-24 mx-auto mb-6 rounded-full bg-orange-500/20 border-2 border-orange-500/50 flex items-center justify-center">
-          <span className="text-4xl font-bold text-orange-500">{sceneNumber}</span>
-        </div>
-        <h2 className="text-4xl font-bold text-white mb-2">{name}</h2>
-        <p className="text-lg text-neutral-400">Scene placeholder</p>
-      </div>
-    </AbsoluteFill>
-  );
-};
diff --git a/videos/src/PortalPresentationMobile.test.tsx b/videos/src/PortalPresentationMobile.test.tsx
index bdfbf60..5e5169a 100644
--- a/videos/src/PortalPresentationMobile.test.tsx
+++ b/videos/src/PortalPresentationMobile.test.tsx
@@ -63,52 +63,58 @@ vi.mock("@remotion/media", () => ({
 }));
 /* eslint-enable @remotion/warn-native-media-tag */
 
-// Mock all scene components
-vi.mock("./scenes/portal/PortalIntroScene", () => ({
-  PortalIntroScene: vi.fn(() => (
-    <div data-testid="portal-intro-scene">PortalIntroScene</div>
+// Mock all mobile scene components
+vi.mock("./scenes/portal/mobile/PortalIntroSceneMobile", () => ({
+  PortalIntroSceneMobile: vi.fn(() => (
+    <div data-testid="portal-intro-scene">PortalIntroSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/PortalTitleScene", () => ({
-  PortalTitleScene: vi.fn(() => (
-    <div data-testid="portal-title-scene">PortalTitleScene</div>
+vi.mock("./scenes/portal/mobile/PortalTitleSceneMobile", () => ({
+  PortalTitleSceneMobile: vi.fn(() => (
+    <div data-testid="portal-title-scene">PortalTitleSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/DashboardOverviewScene", () => ({
-  DashboardOverviewScene: vi.fn(() => (
-    <div data-testid="dashboard-overview-scene">DashboardOverviewScene</div>
+vi.mock("./scenes/portal/mobile/DashboardOverviewSceneMobile", () => ({
+  DashboardOverviewSceneMobile: vi.fn(() => (
+    <div data-testid="dashboard-overview-scene">DashboardOverviewSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/MeetupShowcaseScene", () => ({
-  MeetupShowcaseScene: vi.fn(() => (
-    <div data-testid="meetup-showcase-scene">MeetupShowcaseScene</div>
+vi.mock("./scenes/portal/mobile/MeetupShowcaseSceneMobile", () => ({
+  MeetupShowcaseSceneMobile: vi.fn(() => (
+    <div data-testid="meetup-showcase-scene">MeetupShowcaseSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/TopMeetupsScene", () => ({
-  TopMeetupsScene: vi.fn(() => (
-    <div data-testid="top-meetups-scene">TopMeetupsScene</div>
+vi.mock("./scenes/portal/mobile/CountryStatsSceneMobile", () => ({
+  CountryStatsSceneMobile: vi.fn(() => (
+    <div data-testid="country-stats-scene">CountryStatsSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/ActivityFeedScene", () => ({
-  ActivityFeedScene: vi.fn(() => (
-    <div data-testid="activity-feed-scene">ActivityFeedScene</div>
+vi.mock("./scenes/portal/mobile/TopMeetupsSceneMobile", () => ({
+  TopMeetupsSceneMobile: vi.fn(() => (
+    <div data-testid="top-meetups-scene">TopMeetupsSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/CallToActionScene", () => ({
-  CallToActionScene: vi.fn(() => (
-    <div data-testid="call-to-action-scene">CallToActionScene</div>
+vi.mock("./scenes/portal/mobile/ActivityFeedSceneMobile", () => ({
+  ActivityFeedSceneMobile: vi.fn(() => (
+    <div data-testid="activity-feed-scene">ActivityFeedSceneMobile</div>
   )),
 }));
 
-vi.mock("./scenes/portal/PortalOutroScene", () => ({
-  PortalOutroScene: vi.fn(() => (
-    <div data-testid="portal-outro-scene">PortalOutroScene</div>
+vi.mock("./scenes/portal/mobile/CallToActionSceneMobile", () => ({
+  CallToActionSceneMobile: vi.fn(() => (
+    <div data-testid="call-to-action-scene">CallToActionSceneMobile</div>
+  )),
+}));
+
+vi.mock("./scenes/portal/mobile/PortalOutroSceneMobile", () => ({
+  PortalOutroSceneMobile: vi.fn(() => (
+    <div data-testid="portal-outro-scene">PortalOutroSceneMobile</div>
   )),
 }));
 
@@ -210,6 +216,12 @@ describe("PortalPresentationMobile", () => {
     expect(scene).toBeInTheDocument();
   });
 
+  it("renders Scene 5: CountryStatsScene", () => {
+    const { container } = render(<PortalPresentationMobile />);
+    const scene = container.querySelector('[data-testid="country-stats-scene"]');
+    expect(scene).toBeInTheDocument();
+  });
+
   it("renders Scene 6: TopMeetupsScene", () => {
     const { container } = render(<PortalPresentationMobile />);
     const scene = container.querySelector('[data-testid="top-meetups-scene"]');
@@ -390,6 +402,7 @@ describe("PortalPresentationMobile mobile-specific", () => {
     expect(container.querySelector('[data-testid="portal-title-scene"]')).toBeInTheDocument();
     expect(container.querySelector('[data-testid="dashboard-overview-scene"]')).toBeInTheDocument();
     expect(container.querySelector('[data-testid="meetup-showcase-scene"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-testid="country-stats-scene"]')).toBeInTheDocument();
     expect(container.querySelector('[data-testid="top-meetups-scene"]')).toBeInTheDocument();
     expect(container.querySelector('[data-testid="activity-feed-scene"]')).toBeInTheDocument();
     expect(container.querySelector('[data-testid="call-to-action-scene"]')).toBeInTheDocument();