src/Root.tsx

import React from "react";
import { Composition } from "remotion";
import { TextExplainer } from "./compositions/TextExplainer";
import { ProductPromo } from "./compositions/ProductPromo";
import { SocialShort } from "./compositions/SocialShort";
import { SeoSummary } from "./compositions/SeoSummary";

export const Root: React.FC = () => {
  return (
    <>
      <Composition
        id="TextExplainer"
        component={TextExplainer}
        durationInFrames={300}
        fps={30}
        width={1280}
        height={720}
        defaultProps={{
          title: "5 AI Tools That Replace Your Team",
          hook: "Stop hiring. Start automating.",
          bullets: [
            "ChatGPT for content writing",
            "Midjourney for design",
            "Cursor for coding",
          ],
          cta: "Get the full guide",
          ctaUrl: "",
          brandColor: "#22d3a0",
        }}
      />
      <Composition
        id="ProductPromo"
        component={ProductPromo}
        durationInFrames={300}
        fps={30}
        width={1280}
        height={720}
        defaultProps={{
          productName: "AI Automation Blueprint",
          price: "Rp 49.000",
          benefits: [
            "Save 10+ hours per week",
            "Automate repetitive tasks",
            "Scale without hiring",
          ],
          cta: "Get It Now",
          ctaUrl: "",
          brandColor: "#22d3a0",
        }}
      />
      <Composition
        id="SocialShort"
        component={SocialShort}
        durationInFrames={450}
        fps={30}
        width={720}
        height={1280}
        defaultProps={{
          hook: "You're wasting 3 hours a day...",
          points: [
            "Manual data entry? Automated.",
            "Writing emails? AI handles it.",
            "Scheduling posts? One click.",
          ],
          cta: "Link in bio",
          brandColor: "#00e5ff",
        }}
      />
      <Composition
        id="SeoSummary"
        component={SeoSummary}
        durationInFrames={300}
        fps={30}
        width={1280}
        height={720}
        defaultProps={{
          articleTitle: "How AI Is Transforming Small Business",
          keyPoints: [
            "AI adoption grew 270% in 2025",
            "Small businesses save $12K/year avg",
            "Top 3 tools every founder needs",
          ],
          source: "vinOS Blog",
          cta: "Read the full article",
          brandColor: "#7c3aed",
        }}
      />
    </>
  );
};