Reflect/feels-promo/src/Root.tsx

import { Composition } from "remotion";
import { FeelsPromoV1 } from "./FeelsPromo";
import { ConceptASelfAwareness } from "./ConceptA-SelfAwareness";
import { ConceptBNoJournalJournal } from "./ConceptB-NoJournalJournal";
import { ConceptCYearInFeelings } from "./ConceptC-YearInFeelings";
import { ConceptDAlwaysThere } from "./ConceptD-AlwaysThere";
import { ConceptEMakeItYours } from "./ConceptE-MakeItYours";
import { ConceptFPrivacyFirst } from "./ConceptF-PrivacyFirst";
import { ConceptGStreakEffect } from "./ConceptG-StreakEffect";
// Wild concepts
import { ConceptHMoodHeist } from "./ConceptH-MoodHeist";
import { ConceptIRetroArcade } from "./ConceptI-RetroArcade";
import { ConceptJConspiracy } from "./ConceptJ-Conspiracy";
import { ConceptKSportsCenter } from "./ConceptK-SportsCenter";
import { ConceptLMusical } from "./ConceptL-Musical";

export const RemotionRoot: React.FC = () => {
  const fps = 30;

  // V1 calculations
  const sceneDuration = 3.5 * fps;
  const transitionDuration = Math.round(0.6 * fps);
  const outroDuration = Math.round(2.5 * fps);
  const v1TotalDuration =
    sceneDuration * 7 + outroDuration - transitionDuration * 7;

  return (
    <>
      {/* ═══════════════════════════════════════════════════════════════
          ORIGINAL PROMO
          ═══════════════════════════════════════════════════════════════ */}
      <Composition
        id="FeelsPromoV1"
        component={FeelsPromoV1}
        durationInFrames={v1TotalDuration}
        fps={fps}
        width={1080}
        height={1920}
      />

      {/* ═══════════════════════════════════════════════════════════════
          STANDARD CONCEPTS (A-G)
          ═══════════════════════════════════════════════════════════════ */}

      {/* Concept A: 30 Seconds to Self-Awareness */}
      <Composition
        id="ConceptA-SelfAwareness"
        component={ConceptASelfAwareness}
        durationInFrames={Math.round(30 * fps)}
        fps={fps}
        width={1080}
        height={1920}
      />

      {/* Concept B: The No-Journal Journal (20s) */}
      <Composition
        id="ConceptB-NoJournalJournal"
        component={ConceptBNoJournalJournal}
        durationInFrames={Math.round(20 * fps)}
        fps={fps}
        width={1080}
        height={1920}
      />

      {/* Concept C: Your Year in Feelings (15s) */}
      <Composition
        id="ConceptC-YearInFeelings"
        component={ConceptCYearInFeelings}
        durationInFrames={Math.round(15 * fps)}
        fps={fps}
        width={1080}
        height={1920}
      />

      {/* Concept D: Always There (25s) */}
      <Composition
        id="ConceptD-AlwaysThere"
        component={ConceptDAlwaysThere}
        durationInFrames={Math.round(25 * fps)}
        fps={fps}
        width={1080}
        height={1920}
      />

      {/* Concept E: Make It Yours (20s) */}
      <Composition
        id="ConceptE-MakeItYours"
        component={ConceptEMakeItYours}
        durationInFrames={Math.round(20 * fps)}
        fps={fps}
        width={1080}
        height={1920}
      />

      {/* Concept F: Privacy First (15s) */}
      <Composition
        id="ConceptF-PrivacyFirst"
        component={ConceptFPrivacyFirst}
        durationInFrames={Math.round(15 * fps)}
        fps={fps}
        width={1080}
        height={1920}
      />

      {/* Concept G: The Streak Effect (20s) */}
      <Composition
        id="ConceptG-StreakEffect"
        component={ConceptGStreakEffect}
        durationInFrames={Math.round(20 * fps)}
        fps={fps}
        width={1080}
        height={1920}
      />

      {/* ═══════════════════════════════════════════════════════════════
          WILD CONCEPTS (H-L) - OFF THE WALL CREATIVE
          ═══════════════════════════════════════════════════════════════ */}

      {/* Concept H: The Mood Heist (25s) - Ocean's Eleven style thriller */}
      <Composition
        id="ConceptH-MoodHeist"
        component={ConceptHMoodHeist}
        durationInFrames={Math.round(25 * fps)}
        fps={fps}
        width={1080}
        height={1920}
      />

      {/* Concept I: Retro Arcade Feels (20s) - 8-bit video game */}
      <Composition
        id="ConceptI-RetroArcade"
        component={ConceptIRetroArcade}
        durationInFrames={Math.round(20 * fps)}
        fps={fps}
        width={1080}
        height={1920}
      />

      {/* Concept J: The Feels Conspiracy (20s) - Dark documentary thriller */}
      <Composition
        id="ConceptJ-Conspiracy"
        component={ConceptJConspiracy}
        durationInFrames={Math.round(20 * fps)}
        fps={fps}
        width={1080}
        height={1920}
      />

      {/* Concept K: Sports Center Emotions (20s) - ESPN broadcast parody */}
      <Composition
        id="ConceptK-SportsCenter"
        component={ConceptKSportsCenter}
        durationInFrames={Math.round(20 * fps)}
        fps={fps}
        width={1080}
        height={1920}
      />

      {/* Concept L: Feelings The Musical (25s) - Broadway musical number */}
      <Composition
        id="ConceptL-Musical"
        component={ConceptLMusical}
        durationInFrames={Math.round(25 * fps)}
        fps={fps}
        width={1080}
        height={1920}
      />
    </>
  );
};