import React, { useState } from 'react'; import { useVideoState } from './useVideoState'; import { motion, useTransform, AnimatePresence, useMotionValue, useMotionValueEvent, type MotionValue } from 'framer-motion'; import { ArrowRight, BarChart3, Bot, Check, ChevronRight, FileText, Folder, Globe, Home, LayoutDashboard, LogOut, Menu, MessageSquare, Plus, Search, Send, Settings, Share, Sparkles, TrendingUp, User, Wallet } from 'lucide-react'; import { Area, LineChart } from 'recharts'; // ─── Scene Components ───────────────────────────────────────────────────── function Scene0({ time }) { const logoOpacity = useTransform(time, [0, 1.0], [0, 1]); const logoY = useTransform(time, [0, 1.0], [20, 0]); const titleOpacity = useTransform(time, [0.5, 2.0], [0, 1]); const titleY = useTransform(time, [0.5, 2.0], [30, 0]); const titleScale = useTransform(time, [0.5, 2.0], [0.95, 1]); const support1Opacity = useTransform(time, [3.0, 4.0], [0, 1]); const support1Y = useTransform(time, [3.0, 4.0], [20, 0]); const support2Opacity = useTransform(time, [4.5, 5.5], [0, 1]); const support2Y = useTransform(time, [4.5, 5.5], [20, 0]); const support3Opacity = useTransform(time, [6.0, 7.0], [0, 1]); const support3Y = useTransform(time, [6.0, 7.0], [20, 0]); return ( {/* AI tool logo placeholder */} AI Newsroom BUILD Your FIRST AI NEWSROOM ASSISTANT in 30 Minutes!

Beyond Basic Transcription & Editing Revolutionize Story Development Pipeline From Raw Input to Pitch-Ready Angles

); } function Scene1({ time }) { const titleOpacity = useTransform(time, [0, 0.5], [0, 1]); const titleY = useTransform(time, [0, 0.5], [20, 0]); const obj1Opacity = useTransform(time, [1.5, 2.0], [0, 1]); const obj1Y = useTransform(time, [1.5, 2.0], [20, 0]); const obj2Opacity = useTransform(time, [5.0, 5.5], [0, 1]); const obj2Y = useTransform(time, [5.0, 5.5], [20, 0]); const obj3Opacity = useTransform(time, [9.5, 10.0], [0, 1]); const obj3Y = useTransform(time, [9.5, 10.0], [20, 0]); const obj4Opacity = useTransform(time, [14.5, 15.0], [0, 1]); const obj4Y = useTransform(time, [14.5, 15.0], [20, 0]); const objectives = [ { icon: Sparkles, title: "Generate Story Angles", subtitle: "From raw news feeds to compelling narratives.", opacity: obj1Opacity, y: obj1Y, }, { icon: FileText, title: "Craft Broadcast Copy", subtitle: "Engineer prompts for varied, broadcast-ready scripts.", opacity: obj2Opacity, y: obj2Y, }, { icon: Sparkles, title: "Assist Fact-Checking", subtitle: "Identify critical verification points for human review.", opacity: obj3Opacity, y: obj3Y, }, { icon: Share, // Replaced Link with Share as Link was not defined title: "Integrate Seamlessly", subtitle: "Directly embed AI outputs into editorial workflows.", opacity: obj4Opacity, y: obj4Y, }, ]; return ( What you'll learn

{objectives.map((obj, index) => (

{obj.title}

{obj.subtitle}

))}

); } function Scene2({ time }: { time: MotionValue }) { return (

{/* Header */}

ChatGPT

{/* Chat Area - Empty */}

How can I help you today?

Input raw news, documents, or articles to generate story angles.

{/* Input Field */}

); } function Scene3({ time }: { time: MotionValue }) { const fullArticleText = "The City Council today announced a groundbreaking new initiative aimed at revitalizing downtown areas and fostering community engagement. Dubbed 'Urban Renewal 2030', the plan outlines several key projects, including the development of a new public park, the renovation of historical buildings, and the expansion of local business support programs. Mayor Thompson, speaking at a press conference, emphasized the collaborative nature of the project, stating, 'This is not just about buildings; it's about building stronger communities together. We've listened to our residents, and this plan reflects their aspirations for a vibrant, inclusive city.' Funding for 'Urban Renewal 2030' will come from a combination of municipal bonds and federal grants, with a projected budget of $150 million over the next five years. Public consultations are scheduled to begin next month, inviting residents to provide feedback on the proposed designs and project timelines. The initiative is expected to create thousands of jobs and significantly boost the local economy, transforming the urban landscape for generations to come."; const textLength = useTransform(time, [1.0, 5.0], [0, fullArticleText.length]); const [displayedArticle, setDisplayedArticle] = useState(""); useMotionValueEvent(textLength, "change", (v) => { setDisplayedArticle(fullArticleText.slice(0, Math.round(v))); }); // Cursor visibility: always visible during typing (1.0s-5.0s), then blinks after typing const cursorBlink = useTransform( time, [5.0, 5.2, 5.4, 5.6, 5.8, 6.0, 6.2, 6.4, 6.6, 6.8, 7.0, 7.2], [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0] ); const cursorOpacity = useTransform(time, (t) => { if (t < 1.0) return 0; // Hidden before typing starts if (t >= 1.0 && t < 5.0) return 1; // Always visible during typing return cursorBlink.get(); // Blinking after typing finishes }); return (

{/* Header */}

AI Assistant

{/* Chat history area */}

Hello! How can I help you today?

{/* Input Area */}

{displayedArticle}

); } function Scene4({ time }: { time: MotionValue }) { const fullPromptText = "Act as a seasoned broadcast journalist specializing in local news. Analyze the following text and generate 3 distinct story angles suitable for a 60-second news segment, targeting a general audience. For each angle, provide a compelling headline, a one-sentence summary, and suggest a potential visual element. Here is the text: Local community meeting discusses new park development and budget allocations."; const typingStartTime = 2.0; const typingEndTime = 26.0; const charIndex = useTransform( time, [typingStartTime, typingEndTime], [0, fullPromptText.length], { clamp: true } ); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => { setDisplayedPrompt(fullPromptText.slice(0, Math.round(v))); }); return (

{/* Chat Header */}

Broadcast Media Assistant

{/* Chat Messages Area (Placeholder) */}

{/* A few placeholder messages to simulate history */}

Hello! How can I assist you with your broadcast media tasks today?

{/* Input Area */}

{displayedPrompt} {/* Typing indicator */} {time.get() >= typingStartTime && time.get() < typingEndTime && ( )}

); } function Scene5({ time }) { // AI response container opacity const responseOpacity = useTransform(time, [0.5, 1.5], [0, 1]); // Angle 1 highlight (border color) const angle1Border = useTransform(time, [4.0, 4.5, 6.2, 6.7], ["#e2e8f0", "#6366f1", "#6366f1", "#e2e8f0"] // slate-200 to indigo-500 ); // Angle 2 highlight (border color) const angle2Border = useTransform(time, [6.2, 6.7, 9.0, 9.5], ["#e2e8f0", "#6366f1", "#6366f1", "#e2e8f0"] ); // Angle 3 highlight (border color) const angle3Border = useTransform(time, [9.0, 9.5, 11.8, 12.3], ["#e2e8f0", "#6366f1", "#6366f1", "#e2e8f0"] ); // Visual suggestion icon highlight (scale and color) const visualIconScale = useTransform(time, [11.8, 12.3, 16.9, 17.4], [1, 1.2, 1.2, 1] ); const visualIconColor = useTransform(time, [11.8, 12.3, 16.9, 17.4], ["#64748b", "#4f46e5", "#4f46e5", "#64748b"] // slate-600 to indigo-600 ); return (

{/* Chat Header */}

ChatGPT

{/* Chat Area - User Prompt (simplified/collapsed) */}

Act as a seasoned broadcast journalist specializing in local news. Analyze the following text and generate 3 distinct story angles suitable for a 60-second news segment...

Show full prompt

{/* AI Response Area */}

Here are 3 distinct story angles based on the provided text, tailored for a 60-second local news segment:

{/* Story Angle 1 */}

City Green Initiative: What it Means for Your Wallet

Explore how the new urban greening project might impact local taxes and property values, and what financial benefits residents can expect.

Visual Suggestion: Animated graphics showing budget allocation and potential savings.

{/* Story Angle 2 */}

Local Parks Get a Makeover: Community Impact Explored

Dive into the recent renovations of city parks, focusing on the changes, community feedback, and the social benefits for residents.

Visual Suggestion: Before-and-after footage of park areas, interviews with park-goers and project managers.

{/* Story Angle 3 */}

Behind the Budget: The Politics of Urban Renewal

Uncover the political debates and decision-making processes that shaped the urban renewal budget, revealing key players and potential controversies.

Visual Suggestion: Graphics illustrating voting records, council meeting clips, and interviews with city officials and activists.

{/* Input Footer (simplified) */}

); } function Scene6({ time }: { time: MotionValue }) { const overlayOpacity = useTransform(time, [0, 0.5], [0, 1]); const overlayY = useTransform(time, [0, 0.5], [20, 0]); return (

PROMPT ENGINEERING TIP

The more specific your persona and output format, the better the AI's results.

Think: 'Who is the AI?' and 'What exact format do I need?'

); } function Scene7({ time }) { const fullPrompt = "Develop three distinct 30-second broadcast script variations for the angle 'City Green Initiative: What it Means for Your Wallet.' Each script should target a different demographic: one for young professionals, one for families, and one for small business owners. Focus on the financial impact and community benefits. Include a call to action to visit the city's website."; const promptChars = fullPrompt.length; // Typing animation for the prompt const charIndex = useTransform(time, [3.0, 15.0], [0, promptChars], { clamp: true }); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (latest) => { setDisplayedPrompt(fullPrompt.slice(0, Math.round(latest))); }); // Input field focus animation (opacity for cursor, border for input) const inputBorder = useTransform(time, [2.0, 2.5], ["border-slate-300", "border-indigo-500"]); const inputShadow = useTransform(time, [2.0, 2.5], ["shadow-sm", "shadow-md"]); const cursorOpacity = useTransform(time, [2.0, 2.1, 2.2, 2.3, 2.4, 2.5], [0, 1, 0, 1, 0, 1], { clamp: true }); // Blinking cursor // Highlight animation for the selected angle const highlightBg = useTransform(time, [0.0, 1.0], ["bg-white", "bg-indigo-50"]); const highlightText = useTransform(time, [0.0, 1.0], ["text-slate-700", "text-indigo-800"]); const previousAngles = [ "Local Business Spotlight: The Rise of Artisanal Coffee Shops", "City Green Initiative: What it Means for Your Wallet.", "Tech Innovations in Education: Bridging the Digital Divide", "Community Heroes: Volunteers Making a Difference", ]; const selectedAngleIndex = 1; // Index of "City Green Initiative: What it Means for Your Wallet." return (

{/* Sidebar */}

AI Studio

Recent Broadcast Ideas Scripting Prompts Audience Analysis

Profile Settings Log Out

{/* Chat Area */}

{/* Chat History */}

{/* User message */}

Suggest some non-obvious story angles for broadcast media on local initiatives.

{/* AI response with angles */}

Here are a few fresh angles for local initiatives:

{angle}

{/* Input Area */}

              {time.get() >= 2.0 && time.get() < 15.0 && (
                <motion.span
                  className="absolute right-[60px] top-1/2 -translate-y-1/2 w-0.5 h-4 bg-indigo-500"
                  style={{ opacity: cursorOpacity }}
                />
              )}
              <button className="flex items-center justify-center w-10 h-10 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors ml-2 shrink-0">
                <Send className="w-5 h-5" />
              </button>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </motion.div>
  );
}

function Scene8({ time }: { time: MotionValue<number> }) {
  // Full prompt text
  const fullPrompt = "Expand on the angle 'City Green Initiative: What it Means for Your Wallet'. Generate two distinct broadcast scripts, each approximately 120 words. The first script should have a serious, investigative tone, focusing on economic impact and potential risks. The second script should have a more human-interest, feature-style tone, focusing on community benefits and personal stories. Each script should include a compelling opening hook and a clear call to action or forward look.";

  // MotionValue for character index to display
  const charIndex = useTransform(time, [2.0, 10.0], [0, fullPrompt.length], {});

  // State to hold the currently displayed prompt text
  const [displayedPrompt, setDisplayedPrompt] = useState("");

  // Update displayedPrompt whenever charIndex changes
  useMotionValueEvent(charIndex, "change", (v) => {
    setDisplayedPrompt(fullPrompt.slice(0, Math.round(v)));
  });

  // Cursor blinking animation after typing completes
  const cursorOpacity = useTransform(time, (t) => {
    if (t < 2.0) return 0; // Cursor not visible before typing starts
    if (t < 10.0) return 1; // Cursor solid during typing
    // After typing, make it blink
    const blinkInterval = 0.5; // Blink every 0.5 seconds
    const blinkPhase = Math.floor((t - 10.0) / blinkInterval) % 2;
    return blinkPhase === 0 ? 1 : 0; // 1 for visible, 0 for hidden
  });

  // Initial fade-in for the whole chat interface
  const fadeIn = useTransform(time, [0, 0.5], [0, 1]);

  return (
    <motion.div
      key="scene8"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col items-center justify-center p-8 bg-slate-100"
      style={{ opacity: fadeIn }}
    >
      <div className="w-full max-w-2xl h-[400px] bg-white rounded-xl shadow-lg flex flex-col">
        {/* Chat Header */}
        <div className="p-4 border-b border-slate-200 flex items-center gap-3 text-lg font-semibold text-slate-700">
          <Sparkles className="w-6 h-6 text-indigo-500" />
          <span>New Chat</span>
        </div>

        {/* Main Chat Area (empty for this scene) */}
        <div className="flex-1 p-4 overflow-y-auto flex flex-col justify-end">
          {/* Placeholder for previous messages, if any */}
        </div>

        {/* Input Area */}
        <div className="p-4 border-t border-slate-200 flex items-center gap-2 bg-slate-50">
          <div className="flex-1 p-3 min-h-[60px] max-h-[150px] overflow-y-auto rounded-lg border border-slate-300 bg-white shadow-sm text-sm text-slate-700 leading-relaxed relative">
            <span>{displayedPrompt}</span>
            <motion.span
              className="absolute inline-block w-0.5 h-full bg-indigo-500 top-0 left-0 -translate-x-0.5"
              style={{ opacity: cursorOpacity, height: '1.25em' }} // Adjust height to match line-height
            />
          </div>
          <button className="p-3 bg-indigo-600 text-white rounded-lg flex items-center justify-center hover:bg-indigo-700 transition-colors">
            <Send className="w-5 h-5" />
          </button>
        </div>
      </div>
    </motion.div>
  );
}

function Scene9({ time }) {
  // Hooks for investigative script body
  const fullInvestigativeScriptBody = "Tonight, we ask the tough questions: Where is your taxpayer money really going? A recent city council decision has allocated a significant portion of the budget to a new urban development project, but at what cost to existing infrastructure and vital community services? We delve into the numbers, examine the long-term financial implications, and hear from residents concerned about fiscal transparency. Join us as we uncover the true impact of these decisions on our city's future.";
  const investigativeWords = fullInvestigativeScriptBody.split(" ");
  const investigativeWordIndex = useTransform(time, [1.0, 4.0], [0, investigativeWords.length], {});
  const [investigativeScriptDisplayed, setInvestigativeScriptDisplayed] = useState("");
  useMotionValueEvent(investigativeWordIndex, "change", (v) => {
    setInvestigativeScriptDisplayed(investigativeWords.slice(0, Math.round(v)).join(" "));
  });

  // Hooks for human-interest script body
  const fullHumanInterestScriptBody = "In a world often focused on challenges, sometimes the simplest stories bring the most joy. Meet the families in the Maplewood district, whose lives are being revitalized by the city's new green spaces. From vibrant playgrounds to serene walking trails, these parks are fostering stronger community bonds, improving local well-being, and providing a breath of fresh air for everyone. We explore how these initiatives are creating a ripple effect of positive change. Discover how a touch of green is bringing people closer, tonight.";
  const humanInterestWords = fullHumanInterestScriptBody.split(" ");
  const humanInterestWordIndex = useTransform(time, [4.0, 7.0], [0, humanInterestWords.length], {});
  const [humanInterestScriptDisplayed, setHumanInterestScriptDisplayed] = useState("");
  useMotionValueEvent(humanInterestWordIndex, "change", (v) => {
    setHumanInterestScriptDisplayed(humanInterestWords.slice(0, Math.round(v)).join(" "));
  });

  // Animation for the main AI response bubble container
  const aiBubbleOpacity = useTransform(time, [0.0, 0.5], [0, 1]);
  const aiBubbleY = useTransform(time, [0.0, 0.5], [20, 0]);

  // Animation for the intro text "Here are two distinct broadcast scripts:"
  const introTextOpacity = useTransform(time, [0.5, 1.0], [0, 1]);

  return (
    <motion.div
      key="scene9"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col overflow-hidden bg-slate-50 p-8"
    >
      <div className="flex flex-col h-full items-center justify-center">
        <div className="w-full max-w-4xl flex flex-col gap-6">
          <motion.div style={{ opacity: aiBubbleOpacity, y: aiBubbleY }} className="flex items-start gap-4">
            <Bot className="w-8 h-8 text-indigo-500 flex-shrink-0" />
            <div className="bg-white p-5 rounded-2xl shadow-md border border-slate-200 flex-1">
              <motion.p style={{ opacity: introTextOpacity }} className="text-slate-700 font-semibold mb-3">
                Here are two distinct broadcast scripts:
              </motion.p>
              <div className="flex flex-col md:flex-row gap-6">
                {/* Script 1: Investigative */}
                <div className="flex-1 bg-indigo-50 p-4 rounded-xl shadow-sm border border-indigo-200">
                  <h3 className="font-bold text-indigo-700 mb-2 flex items-center gap-2">
                    <Search className="w-5 h-5" /> Investigative Tone
                  </h3>
                  <p className="text-sm text-indigo-800">
                    <span className="font-semibold block mb-1">Taxpayer Tangle: Unpacking the City's Latest Budget Allocation</span>
                    {investigativeScriptDisplayed}
                  </p>
                </div>

                {/* Script 2: Human-Interest */}
                <div className="flex-1 bg-emerald-50 p-4 rounded-xl shadow-sm border border-emerald-200">
                  <h3 className="font-bold text-emerald-700 mb-2 flex items-center gap-2">
                    <Sparkles className="w-5 h-5" /> Human-Interest Tone
                  </h3>
                  <p className="text-sm text-emerald-800">
                    <span className="font-semibold block mb-1">Green Dreams: How Urban Parks Are Transforming Communities</span>
                    {humanInterestScriptDisplayed}
                  </p>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </motion.div>
  );
}

function Scene10({ time }) {
  const cardOpacity = useTransform(time, [0, 1], [0, 1]);
  const cardY = useTransform(time, [0, 1], [20, 0]);

  return (
    <motion.div
      key="scene10"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col items-center justify-center bg-slate-50 p-8 overflow-hidden"
    >
      <motion.div
        style={{ opacity: cardOpacity, y: cardY }}
        className="bg-white p-8 rounded-2xl shadow-xl border border-slate-200 max-w-2xl w-full flex flex-col gap-6 text-center"
      >
        <div className="flex items-center justify-center gap-3 mb-2">
          <Sparkles className="w-8 h-8 text-indigo-500" />
          <h2 className="text-3xl font-bold text-slate-800">TONE & STYLE</h2>
        </div>
        <p className="text-xl text-slate-700 leading-relaxed">
          AI can adapt its writing style. Experiment with keywords like <span className="font-semibold text-indigo-600">'investigative,' 'upbeat,' 'somber,' 'feature-style,' 'breaking news'</span> to get varied outputs.
        </p>
      </motion.div>
    </motion.div>
  );
}

function Scene11({ time }) {
  const promptFullText = "Identify all factual claims in the following script that require external verification for accuracy and provide a brief rationale for each.";
  const promptCharIndex = useTransform(time, [10.0, 18.67], [0, promptFullText.length]);
  const [displayedPrompt, setDisplayedPrompt] = useState("");

  useMotionValueEvent(promptCharIndex, "change", (v) => {
    setDisplayedPrompt(promptFullText.slice(0, Math.round(v)));
  });

  const promptBorderColor = useTransform(time, [9.5, 10.0], ["#cbd5e1", "#a5b4fc"]); // slate-300 to indigo-300
  const promptBoxShadow = useTransform(time, [9.5, 10.0], ["0 0 #0000", "0 0 0 4px rgba(165, 180, 252, 0.25)"]); // no shadow to ring-indigo-200

  const cursorOpacity = useTransform(time, v => {
    if (v < 10.0 || v > 18.67) return 0; // Cursor only blinks during typing
    const phase = ((v - 10.0) * 2) % 2; // 0 to 2, repeating every 1 second (2 phases per second)
    return phase < 1 ? 1 : 0; // 1 for first 0.5s, 0 for next 0.5s
  });

  return (
    <motion.div
      key="scene11"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col overflow-hidden bg-slate-100"
    >
      {/* Main content area */}
      <div className="flex flex-1 overflow-hidden">
        {/* Collapsed Sidebar */}
        <div className="w-16 bg-slate-900 flex flex-col items-center py-4 gap-4">
          <Menu className="w-6 h-6 text-slate-400" />
          <div className="flex flex-col gap-2 mt-8">
            <Home className="w-6 h-6 text-indigo-400" />
            <LayoutDashboard className="w-6 h-6 text-slate-400" />
            <LineChart className="w-6 h-6 text-slate-400" />
          </div>
        </div>

        {/* Chat Interface */}
        <div className="flex-1 flex flex-col bg-slate-50">
          {/* Header */}
          <div className="flex items-center justify-between p-4 border-b border-slate-200 bg-white shadow-sm">
            <h2 className="text-lg font-semibold text-slate-800 flex items-center gap-2">
              <Sparkles className="w-5 h-5 text-indigo-500" /> AI Assistant
            </h2>
            <button className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-indigo-500 text-white text-sm font-medium hover:bg-indigo-600 transition-colors">
              <Plus className="w-4 h-4" /> New Chat
            </button>
          </div>

          {/* Chat Messages Area */}
          <div className="flex-1 p-6 overflow-y-auto flex flex-col gap-6">
            {/* Previous User Message (Script) */}
            <div className="flex justify-start">
              <div className="bg-indigo-500 text-white p-4 rounded-b-xl rounded-tr-xl max-w-2xl shadow-md">
                <p className="font-medium mb-2">User</p>
                <p className="text-sm leading-relaxed">
                  <span className="font-semibold">Headline:</span> Breaking News: City Council Approves Controversial Downtown Redevelopment Plan<br /><br />
                  <span className="font-semibold">Intro:</span> Good evening, our top story tonight: In a contentious 3-2 vote, the city council has given the green light to the ambitious "Metropolis Revitalization Project," a plan critics say will displace thousands of residents and small businesses. The project promises to bring 10,000 new jobs and boost the local economy by 15% over the next five years.<br /><br />
                  <span className="font-semibold">Details:</span> Opponents argue the economic projections are inflated and that the environmental impact assessment, conducted by "Green Future Consultants," was rushed. Proponents, including Mayor Thompson, cite a recent independent survey showing 70% public support for urban renewal. The first phase of construction is slated to begin next quarter.
                </p>
              </div>
            </div>
          </div>

          {/* Input Area */}
          <div className="p-4 border-t border-slate-200 bg-white flex items-center gap-3 shadow-md">
            <div className="flex-1 relative">
              <motion.textarea
                rows={3}
                className="w-full pl-4 pr-12 py-2 text-sm rounded-xl border focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 outline-none resize-none bg-slate-50 transition-all duration-200"
                placeholder="Type your message..."
                value={displayedPrompt}
                readOnly
                style={{
                  borderColor: promptBorderColor,
                  boxShadow: promptBoxShadow,
                }}
              />
              <motion.div
                className="absolute right-4 top-1/2 -translate-y-1/2 w-2 h-6 bg-slate-700 rounded-sm"
                style={{ opacity: cursorOpacity }}
              />
            </div>
            <button className="bg-indigo-500 text-white p-2 rounded-xl hover:bg-indigo-600 transition-colors">
              <Send className="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>
    </motion.div>
  );
}

function Scene12({ time }: { time: MotionValue<number> }) {
  const fullPrompt = "Review the following broadcast script. Identify 3-5 specific factual claims that would require independent human verification. For each claim, suggest the type of source (e.g., official city budget documents, expert interviews, public records, scientific studies) a human fact-checker should consult. Here is the script: The city council approved a 10% budget increase for public safety, amounting to $5 million, based on a report by the Mayor's office.";

  const charIndex = useTransform(time, [0, 7.0], [0, fullPrompt.length], {});
  const [displayedPrompt, setDisplayedPrompt] = useState("");

  useMotionValueEvent(charIndex, "change", (v) => {
    setDisplayedPrompt(fullPrompt.slice(0, Math.round(v)));
  });

  return (
    <motion.div
      key="scene12"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col items-center justify-center p-8 bg-slate-50 relative overflow-hidden"
    >
      <div className="w-full max-w-3xl h-full flex flex-col bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200">
        {/* Chat Header */}
        <div className="flex items-center justify-between p-4 border-b border-slate-200 bg-slate-50">
          <div className="flex items-center gap-3">
            <Bot className="w-6 h-6 text-indigo-500" />
            <span className="text-lg font-semibold text-slate-800">AI Fact-Checker Assistant</span>
          </div>
          <Menu className="w-6 h-6 text-slate-500" />
        </div>

        {/* Chat Messages Area (Placeholder) */}
        <div className="flex-1 p-6 overflow-y-auto flex flex-col gap-4 text-sm text-slate-600">
          <div className="flex items-start gap-3">
            <div className="w-8 h-8 flex items-center justify-center bg-indigo-100 rounded-full text-indigo-600 font-semibold text-xs flex-shrink-0">
              <User className="w-4 h-4" />
            </div>
            <div className="bg-indigo-50 px-4 py-2 rounded-xl rounded-bl-none shadow-sm max-w-[80%]">
              <p>Hey, I need some help fact-checking a broadcast script.</p>
            </div>
          </div>
          <div className="flex items-start gap-3 justify-end">
            <div className="bg-slate-100 px-4 py-2 rounded-xl rounded-br-none shadow-sm max-w-[80%]">
              <p>Sure, I can help with that. Please paste the script and your instructions.</p>
            </div>
            <div className="w-8 h-8 flex items-center justify-center bg-slate-100 rounded-full text-slate-600 font-semibold text-xs flex-shrink-0">
              <Bot className="w-4 h-4" />
            </div>
          </div>
        </div>

        {/* Input Field */}
        <div className="p-4 border-t border-slate-200 bg-slate-50 flex items-center gap-3">
          <div className="relative flex-1">
            <div className="min-h-[44px] w-full bg-white border border-slate-300 rounded-xl px-4 py-2 text-base text-slate-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent overflow-hidden whitespace-pre-wrap">
              {displayedPrompt}
              {time.get() < 7.0 && (
                <motion.span
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.5, repeat: Infinity, repeatType: "reverse" }}
                  className="inline-block w-0.5 h-5 bg-slate-700 ml-1 align-bottom"
                  style={{ y: '-1px' }} // Adjust vertical alignment
                />
              )}
            </div>
            {""}
          </div>
          <button className="p-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <Send className="w-5 h-5" />
          </button>
        </div>
      </div>
    </motion.div>
  );
}

function Scene13({ time }) {
  const aiResponseChunks = [
    {
      content: (
        <p>Here are factual claims from your script requiring verification:</p>
      ),
      start: 0.5,
      end: 2.5,
    },
    {
      content: (
        <ul className="list-disc pl-5">
          <li>
            <span className="font-semibold">Claim:</span> "a 15% increase in property taxes"
            <ul className="list-disc pl-6">
              <li>
                <span className="font-semibold">Verify against:</span> Official city budget documents, Tax assessor's reports
              </li>
            </ul>
          </li>
        </ul>
      ),
      start: 2.5,
      end: 10.0,
    },
    {
      content: (
        <ul className="list-disc pl-5">
          <li>
            <span className="font-semibold">Claim:</span> "local businesses reporting a 10% drop in revenue"
            <ul className="list-disc pl-6">
              <li>
                <span className="font-semibold">Verify against:</span> Local business association data, Chamber of commerce surveys
              </li>
            </ul>
          </li>
        </ul>
      ),
      start: 10.0,
      end: 18.0,
    },
    {
      content: (
        <p>This process highlights specific data points needing human attention, streamlining verification and reducing the risk of errors.</p>
      ),
      start: 18.0,
      end: 25.0,
    },
  ];

  const chunkOpacities = aiResponseChunks.map((chunk) =>
    useTransform(time, [chunk.start, chunk.start + 0.5], [0, 1])
  );

  return (
    <motion.div
      key="scene13"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col items-center justify-center bg-slate-50 p-4"
    >
      <div className="w-full max-w-2xl h-full max-h-[600px] bg-white rounded-xl shadow-xl flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-slate-200">
          <div className="flex items-center gap-2">
            <Bot className="w-6 h-6 text-indigo-500" />
            <span className="font-semibold text-lg text-slate-800">Fact-Checker AI</span>
          </div>
          <Menu className="w-5 h-5 text-slate-500" />
        </div>

        {/* Messages Area */}
        <div className="flex-1 p-4 overflow-y-auto flex flex-col gap-3 text-sm">
          {/* User's initial prompt */}
          <div className="self-end bg-indigo-500 text-white p-3 rounded-2xl rounded-br-none max-w-[80%] shadow-sm">
            Please analyze this script for factual claims and suggest verification sources.
          </div>

          {/* AI's response chunks */}
          <div className="self-start bg-slate-100 text-slate-800 p-3 rounded-2xl rounded-bl-none max-w-[80%] shadow-sm flex flex-col gap-2">
            {aiResponseChunks.map((chunk, index) => (
              <motion.div key={index} style={{ opacity: chunkOpacities[index] }}>
                {chunk.content}
              </motion.div>
            ))}
          </div>
        </div>

        {/* Footer Input */}
        <div className="p-4 border-t border-slate-200 flex gap-2">
          <input
            type="text"
            placeholder="Message Fact-Checker AI..."
            className="flex-1 bg-slate-50 border border-slate-200 rounded-lg p-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-200"
          />
          <button className="bg-indigo-600 text-white rounded-lg p-2 flex items-center justify-center hover:bg-indigo-700 transition-colors">
            <Send className="w-5 h-5" />
          </button>
        </div>
      </div>
    </motion.div>
  );
}

function Scene14({ time }) {
  const titleOpacity = useTransform(time, [0, 0.5], [0, 1]);
  const text1Opacity = useTransform(time, [1.0, 1.5], [0, 1]);
  const text2Opacity = useTransform(time, [3.0, 3.5], [0, 1]);

  return (
    <motion.div
      key="scene14"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex items-center justify-center p-8 bg-gradient-to-br from-slate-50 to-slate-100"
    >
      <motion.div
        className="w-full max-w-2xl bg-white rounded-2xl shadow-xl p-8 flex flex-col items-center text-center gap-6 border border-slate-200"
        initial={{ scale: 0.95, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 0.5, delay: 0 }}
      >
        <motion.h2
          className="text-3xl font-extrabold text-indigo-700 leading-tight"
          style={{ opacity: titleOpacity }}
        >
          AI's Role in Fact-Checking
        </motion.h2>

        <div className="flex flex-col gap-4">
          <motion.p
            className="text-xl text-slate-700 leading-relaxed font-medium"
            style={{ opacity: text1Opacity }}
          >
            Not to verify, but to <span className="text-indigo-600 font-semibold italic">identify claims needing verification</span>.
          </motion.p>
          <motion.p
            className="text-xl text-slate-700 leading-relaxed font-medium"
            style={{ opacity: text2Opacity }}
          >
            Human judgment remains essential.
          </motion.p>
        </div>

        <div className="mt-4 flex gap-4 items-center justify-center">
          <Sparkles className="w-8 h-8 text-indigo-400" />
          <ChevronRight className="w-6 h-6 text-slate-400" />
          <Check className="w-8 h-8 text-emerald-500" />
          <ChevronRight className="w-6 h-6 text-slate-400" />
          <User className="w-8 h-8 text-slate-500" />
        </div>
      </motion.div>
    </motion.div>
  );
}

function Scene15({ time }) {
  const fullOutput = "AI-generated script outline for 'Morning Buzz' segment on local community heroes: Focus on inspiring stories, interview questions for 3 guests, and potential B-roll suggestions.";
  const outputCharIndex = useTransform(time, [0.5, 7.0], [0, fullOutput.length]);
  const [displayedOutput, setDisplayedOutput] = useState("");

  useMotionValueEvent(outputCharIndex, "change", (v) => {
    setDisplayedOutput(fullOutput.slice(0, Math.round(v)));
  });

  const arrowOpacity = useTransform(time, [7.8, 8.3], [0, 1]);
  const arrowTranslateX = useTransform(time, [8.3, 8.8, 9.3, 9.8, 10.3, 10.8], [0, 5, 0, 5, 0, 5]);

  return (
    <motion.div
      key="scene15"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-row overflow-hidden bg-slate-50 p-8 gap-6 justify-center items-stretch"
    >
      {/* Left Panel: ChatGPT Interface */}
      <motion.div
        className="flex flex-col flex-1 bg-white rounded-2xl shadow-xl p-6 border border-slate-100 relative min-h-0"
      >
        <div className="flex items-center gap-3 text-xl font-bold text-slate-800 mb-4">
          <Bot className="w-7 h-7 text-indigo-500" />
          <span>ChatGPT</span>
        </div>

        <div className="flex-1 overflow-y-auto pr-2 pb-20">
          <div className="bg-slate-50 p-4 rounded-xl text-slate-700 text-base leading-relaxed shadow-sm">
            <span>{displayedOutput}</span>
          </div>
        </div>

        {/* Input Area */}
        <div className="absolute bottom-6 left-6 right-6 flex items-center gap-3 bg-slate-100 rounded-full p-2 pr-4 shadow-md">
          <MessageSquare className="w-5 h-5 text-slate-400 ml-2" />
          <span className="text-slate-500 flex-1 text-sm">Type your prompt...</span>
          <Send className="w-5 h-5 text-slate-500" />
        </div>
      </motion.div>

      {/* Integration Arrow */}
      <motion.div
        style={{ opacity: arrowOpacity, x: arrowTranslateX }}
        className="flex items-center justify-center p-4"
      >
        <ArrowRight className="w-8 h-8 text-indigo-500" />
      </motion.div>

      {/* Right Panel: Collaborative Tool Placeholder */}
      <motion.div
        className="flex flex-col flex-1 bg-white rounded-2xl shadow-xl p-6 border border-slate-100 min-h-0"
      >
        <div className="flex items-center gap-3 text-xl font-bold text-indigo-800 mb-4">
          <FileText className="w-7 h-7 text-emerald-500" />
          <span>Project Board</span>
        </div>

        <div className="flex-1 overflow-y-auto grid grid-cols-1 gap-4">
          <div className="bg-emerald-50 p-4 rounded-lg flex items-center gap-3 text-emerald-700 font-medium shadow-sm">
            <Check className="w-5 h-5" />
            <span>AI Script Outline</span>
          </div>
          <div className="bg-slate-50 p-4 rounded-lg flex items-center gap-3 text-slate-700 font-medium shadow-sm">
            <Plus className="w-5 h-5" />
            <span>Guest Outreach</span>
          </div>
          <div className="bg-slate-50 p-4 rounded-lg flex items-center gap-3 text-slate-700 font-medium shadow-sm">
            <Plus className="w-5 h-5" />
            <span>B-roll Shotlist</span>
          </div>
          <div className="bg-slate-50 p-4 rounded-lg flex items-center gap-3 text-slate-700 font-medium shadow-sm">
            <Plus className="w-5 h-5" />
            <span>Marketing Assets</span>
          </div>
        </div>
      </motion.div>
    </motion.div>
  );
}

function Scene16({ time }: { time: MotionValue<number> }) {
  const chatGPTResponse = `Here is a first draft script for your segment on local elections:

[Intro Music fades out]

Host: Welcome back to AI Unwrap. Today, we're diving deep into the upcoming local elections. Early polling suggests a tight race between incumbents and new challengers. We'll be interviewing candidates throughout the week to bring you the latest insights.

[Transition to candidate interview clip]

Host: Our first interview is with Sarah Chen, candidate for City Council District 3. Sarah, thank you for joining us.

Sarah: Thank you for having me.

Host: What are the key issues you're focusing on in your campaign?

Sarah: My campaign is centered on three pillars: sustainable urban development, improved public transportation, and community safety initiatives...`;

  const googleDocHeaderFullText = "AI-Generated First Draft";

  // ChatGPT Card Opacity
  const chatGPTCardOpacity = useTransform(time, [0, 2.8, 3.5], [1, 1, 0]);

  // Google Doc Card Opacity
  const googleDocCardOpacity = useTransform(time, [3.0, 3.5, 9.5], [0, 1, 1]);

  // ChatGPT Text Selection Highlight
  const chatGPTTextHighlightBg = useTransform(
    time,
    [2.0, 2.5, 3.0],
    ['rgba(0,0,0,0)', 'rgba(199,210,254,0.5)', 'rgba(0,0,0,0)'] // A semi-transparent indigo-200 for selection
  );

  // Google Doc Pasted Content Typing Effect
  const pastedContentTypingProgress = useTransform(time, [4.0, 6.5], [0, chatGPTResponse.length]);
  const [pastedContentDisplayed, setPastedContentDisplayed] = useState("");
  useMotionValueEvent(pastedContentTypingProgress, "change", (v) => {
    setPastedContentDisplayed(chatGPTResponse.slice(0, Math.round(v)));
  });

  // Google Doc Header Typing Effect
  const headerTypingProgress = useTransform(time, [6.5, 9.0], [0, googleDocHeaderFullText.length]);
  const [headerDisplayed, setHeaderDisplayed] = useState("");
  useMotionValueEvent(headerTypingProgress, "change", (v) => {
    setHeaderDisplayed(googleDocHeaderFullText.slice(0, Math.round(v)));
  });

  return (
    <motion.div
      key="scene16"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex items-center justify-center bg-slate-50 p-8 relative overflow-hidden"
    >
      {/* ChatGPT Interface */}
      <motion.div
        style={{ opacity: chatGPTCardOpacity }}
        className="absolute inset-0 flex items-center justify-center p-8"
      >
        <div className="w-full max-w-3xl h-full max-h-[600px] bg-white rounded-xl shadow-xl flex flex-col border border-slate-200">
          {/* Header */}
          <div className="flex items-center justify-between p-4 border-b border-slate-200 bg-slate-50 rounded-t-xl">
            <div className="flex items-center gap-2">
              <Bot className="w-5 h-5 text-indigo-500" />
              <span className="font-semibold text-slate-800">ChatGPT</span>
            </div>
            <Menu className="w-5 h-5 text-slate-500" />
          </div>

          {/* Chat content area */}
          <div className="flex-1 p-6 overflow-y-auto text-sm text-slate-700 leading-relaxed custom-scrollbar">
            {/* Previous messages (simplified) */}
            <div className="mb-4">
              <div className="flex items-start gap-3 mb-2">
                <User className="w-6 h-6 p-1 bg-indigo-100 text-indigo-600 rounded-full flex-shrink-0" />
                <p className="bg-indigo-50 p-3 rounded-xl rounded-tl-none shadow-sm max-w-[80%]">
                  Draft a script for a broadcast segment on local elections.
                </p>
              </div>
            </div>

            {/* AI Response (to be copied) */}
            <div className="flex items-start gap-3">
              <Bot className="w-6 h-6 p-1 bg-slate-100 text-slate-600 rounded-full flex-shrink-0" />
              <motion.p
                className="bg-slate-100 p-3 rounded-xl rounded-tl-none shadow-sm max-w-[80%] relative"
                style={{ backgroundColor: chatGPTTextHighlightBg }}
              >
                <span className="whitespace-pre-wrap">{chatGPTResponse}</span>
              </motion.p>
            </div>
          </div>

          {/* Input area */}
          <div className="p-4 border-t border-slate-200 bg-slate-50 rounded-b-xl flex items-center gap-3">
            <input
              type="text"
              placeholder="Message ChatGPT..."
              className="flex-1 p-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-200 text-sm text-slate-700 bg-white"
            />
            <Send className="w-5 h-5 text-indigo-500" />
          </div>
        </div>
      </motion.div>

      {/* Google Doc Interface */}
      <motion.div
        style={{ opacity: googleDocCardOpacity }}
        className="absolute inset-0 flex items-center justify-center p-8"
      >
        <div className="w-full max-w-3xl h-full max-h-[600px] bg-white rounded-xl shadow-xl flex flex-col border border-slate-200">
          {/* Header */}
          <div className="flex items-center justify-between p-4 border-b border-slate-200 bg-slate-50 rounded-t-xl">
            <div className="flex items-center gap-2">
              <FileText className="w-5 h-5 text-emerald-500" />
              <span className="font-semibold text-slate-800">Untitled Document - Google Docs</span>
            </div>
            <div className="flex items-center gap-3">
              <Share className="w-5 h-5 text-slate-500" />
              <Menu className="w-5 h-5 text-slate-500" />
            </div>
          </div>

          {/* Document content area */}
          <div className="flex-1 p-8 overflow-y-auto text-base text-slate-800 leading-relaxed custom-scrollbar">
            <p className="font-bold text-2xl mb-4 text-slate-800">{headerDisplayed}</p>
            <p className="whitespace-pre-wrap font-sans text-slate-700 text-base leading-relaxed">
              {pastedContentDisplayed}
            </p>
            {/* Blinking cursor for realism when no text is present yet */}
            {pastedContentDisplayed.length === 0 && headerDisplayed.length === 0 && (
              <motion.span
                initial={{ opacity: 0 }}
                animate={{ opacity: [0, 1, 1, 0] }}
                transition={{ duration: 0.8, repeat: Infinity}}
                className="inline-block w-0.5 h-5 bg-slate-700 ml-0.5 align-text-bottom"
              ></motion.span>
            )}
          </div>

          {/* Footer/Toolbar (simplified) */}
          <div className="p-3 border-t border-slate-200 bg-slate-50 rounded-b-xl flex justify-end items-center text-sm text-slate-500">
            <span className="mr-4">Last edit was seconds ago</span>
            <Check className="w-4 h-4 text-emerald-500" />
          </div>
        </div>
      </motion.div>
    </motion.div>
  );
}

function Scene17({ time }) {
  const docTitle = "Broadcast News Script: AI Draft";
  const introText = "Good evening. Tonight, we delve into the latest developments surrounding climate change policies. Our AI analysis suggests a growing public concern over carbon emissions and a strong demand for renewable energy solutions across major urban centers.";
  const claimsHeading = "Key Claims (AI-Identified)";
  const claimsText1 = "Claim 1: 75% of urban dwellers support a complete ban on fossil fuel vehicles by 2030.";
  const claimsText2 = "Claim 2: New solar panel technology can reduce household energy costs by up to 60%.";
  const claimsText3 = "Claim 3: Government incentives for green energy are projected to boost national GDP by 2% annually.";

  const commentTextFull = "This intro sounds strong. Let's ensure the 'growing public concern' is backed by recent survey data.";
  const taskTextFull = "Review 'Claim 1' for accuracy and source verification. @Sarah_FactChecker";

  // Animations for comment icon and box
  const commentIconOpacity = useTransform(time, [5.2, 5.7], [0, 1]);
  const commentBoxOpacity = useTransform(time, [6.0, 6.5], [0, 1]);
  const commentBoxY = useTransform(time, [6.0, 6.5], [20, 0]);

  // Typewriter effect for comment
  const charIndexComment = useTransform(time, [6.5, 9.5], [0, commentTextFull.length]);
  const [displayedComment, setDisplayedComment] = useState("");
  useMotionValueEvent(charIndexComment, "change", (v) => setDisplayedComment(commentTextFull.slice(0, Math.round(v))));

  // Highlight animation
  const highlightBg = useTransform(time, [7.5, 8.0], ["rgba(0,0,0,0)", "rgba(255,255,0,0.2)"]);

  // Animations for task card
  const taskCardOpacity = useTransform(time, [10.5, 11.0], [0, 1]);
  const taskCardY = useTransform(time, [10.5, 11.0], [20, 0]);
  const taskCardScalePulse = useTransform(time, [20.2, 20.7, 21.2], [1, 1.02, 1]);

  // Typewriter effect for task
  const charIndexTask = useTransform(time, [16.2, 20.2], [0, taskTextFull.length]);
  const [displayedTask, setDisplayedTask] = useState("");
  useMotionValueEvent(charIndexTask, "change", (v) => setDisplayedTask(taskTextFull.slice(0, Math.round(v))));

  return (
    <motion.div
      key="scene17"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col items-center justify-center bg-slate-50 p-8"
    >
      <div className="relative w-[850px] h-[550px] bg-white shadow-xl rounded-2xl flex flex-col overflow-hidden">
        {/* Document Header */}
        <div className="flex items-center justify-between p-5 border-b border-slate-200 bg-white">
          <h2 className="text-xl font-semibold text-slate-800">{docTitle}</h2>
          <div className="flex items-center gap-4">
            <span className="text-sm text-slate-500">Shared with:</span>
            <div className="flex -space-x-2">
              <div className="w-8 h-8 rounded-full bg-indigo-200 flex items-center justify-center text-indigo-700 text-sm font-bold border-2 border-white">
                JS
              </div>
              <div className="w-8 h-8 rounded-full bg-emerald-200 flex items-center justify-center text-emerald-700 text-sm font-bold border-2 border-white">
                SA
              </div>
            </div>
            <button className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors">
              <Share className="w-4 h-4" /> Share
            </button>
          </div>
        </div>

        {/* Document Content Area */}
        <div className="flex-1 p-8 text-slate-700 text-base leading-relaxed overflow-y-auto">
          {/* Intro Text with Comment Icon */}
          <div className="relative group mb-6">
            <p className="pr-10">{introText}</p>
            <motion.div
              style={{ opacity: commentIconOpacity }}
              className="absolute top-0 right-0 p-2 rounded-full hover:bg-slate-100 transition-colors cursor-pointer"
            >
              <MessageSquare className="w-5 h-5 text-slate-400" />
            </motion.div>
          </div>

          <h3 className="text-lg font-semibold text-slate-800 mb-3 mt-8">{claimsHeading}</h3>
          <ul className="list-disc pl-5 space-y-2">
            <li>
              <motion.span style={{ backgroundColor: highlightBg }} className="px-1 rounded-sm">
                {claimsText1}
              </motion.span>
            </li>
            <li>{claimsText2}</li>
            <li>{claimsText3}</li>
          </ul>

          {/* Task Assignment Card */}
          <motion.div
            style={{ opacity: taskCardOpacity, y: taskCardY, scale: taskCardScalePulse }}
            className="mt-8 p-4 bg-indigo-50 border border-indigo-200 rounded-lg shadow-sm flex items-start gap-3"
          >
            <Check className="w-5 h-5 text-indigo-600 mt-0.5" />
            <div className="flex-1">
              <p className="text-sm font-medium text-indigo-700 mb-1">Task Assigned</p>
              <p className="text-sm text-indigo-800">
                {displayedTask.split('@Sarah_FactChecker').map((part, index) => (
                  <React.Fragment key={index}>
                    {part}
                    {index < displayedTask.split('@Sarah_FactChecker').length - 1 && (
                      <span className="font-semibold text-indigo-900 bg-indigo-100 rounded-md px-1 py-0.5">
                        @Sarah_FactChecker
                      </span>
                    )}
                  </React.Fragment>
                ))}
              </p>
            </div>
          </motion.div>
        </div>
      </div>

      {/* Comment Sidebar/Box */}
      <motion.div
        style={{ opacity: commentBoxOpacity, y: commentBoxY }}
        className="absolute right-8 top-1/2 -translate-y-1/2 w-80 bg-white p-5 rounded-xl shadow-lg border border-slate-200 flex flex-col gap-3"
      >
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-full bg-indigo-200 flex items-center justify-center text-indigo-700 text-sm font-bold">
            JS
          </div>
          <div>
            <p className="text-sm font-semibold text-slate-800">Jane Smith</p>
            <p className="text-xs text-slate-500">2 min ago</p>
          </div>
        </div>
        <p className="text-sm text-slate-700">{displayedComment}</p>
        <button className="text-sm text-indigo-600 font-medium text-left hover:underline">
          Reply
        </button>
      </motion.div>
    </motion.div>
  );
}

function Scene18({ time }) {
  const cardOpacity = useTransform(time, [0.5, 1.5], [0, 1]);
  const cardScale = useTransform(time, [0.5, 1.5], [0.9, 1]);

  return (
    <motion.div
      key="scene18"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col items-center justify-center bg-slate-50 p-8"
    >
      <motion.div
        style={{ opacity: cardOpacity, scale: cardScale }}
        className="w-full max-w-2xl bg-white p-8 rounded-2xl shadow-xl border border-slate-200 flex flex-col items-center text-center"
      >
        <div className="flex items-center gap-3 mb-6">
          <Sparkles className="w-8 h-8 text-indigo-500" />
          <h2 className="text-3xl font-bold text-slate-800">INTEGRATION TIP</h2>
        </div>
        <p className="text-xl text-slate-700 leading-relaxed max-w-md">
          Treat AI output as a <span className="font-semibold text-indigo-600">'strong first draft'</span> or{' '}
          <span className="font-semibold text-indigo-600">'intelligent assistant input'</span> — always requiring human review and refinement.
        </p>
        <Check className="w-12 h-12 text-emerald-500 mt-8" />
      </motion.div>
    </motion.div>
  );
}

function Scene19({ time }: { time: MotionValue<number> }) {
  const logoOpacity = useTransform(time, [0, 0.5], [0, 1]);
  const titleOpacity = useTransform(time, [0.5, 1.0], [0, 1]);
  const cardOpacity = useTransform(time, [2.0, 2.5], [0, 1]);
  const point1Opacity = useTransform(time, [3.5, 4.0], [0, 1]);
  const point2Opacity = useTransform(time, [5.0, 5.5], [0, 1]);
  const point3Opacity = useTransform(time, [6.5, 7.0], [0, 1]);
  const urlOpacity = useTransform(time, [9.0, 9.5], [0, 1]);

  return (
    <motion.div
      key="scene19"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col overflow-hidden bg-slate-50 p-8 items-center justify-center text-slate-800"
    >
      <motion.div style={{ opacity: logoOpacity }} className="mb-4">
        <ChannelLogo className="w-24 h-24 text-indigo-600" />
      </motion.div>

      <motion.h1
        style={{ opacity: titleOpacity }}
        className="text-5xl font-extrabold text-indigo-800 mb-8 tracking-tight"
      >
        AI Unwrap
      </motion.h1>

      <motion.div
        style={{ opacity: cardOpacity }}
        className="bg-white rounded-2xl shadow-xl p-8 max-w-lg w-full mb-10 border border-slate-100 flex flex-col gap-4"
      >
        <h3 className="text-2xl font-semibold text-slate-700 mb-2 text-center">
          Key Learnings
        </h3>
        <ul className="list-none p-0 m-0 flex flex-col gap-3">
          <motion.li style={{ opacity: point1Opacity }} className="flex items-start gap-3">
            <Check className="w-5 h-5 text-emerald-500 mt-1 flex-shrink-0" />
            <span className="text-lg text-slate-600 font-medium">Generate diverse story angles efficiently.</span>
          </motion.li>
          <motion.li style={{ opacity: point2Opacity }} className="flex items-start gap-3">
            <Check className="w-5 h-5 text-emerald-500 mt-1 flex-shrink-0" />
            <span className="text-lg text-slate-600 font-medium">Craft broadcast-ready copy variations for media.</span>
          </motion.li>
          <motion.li style={{ opacity: point3Opacity }} className="flex items-start gap-3">
            <Check className="w-5 h-5 text-emerald-500 mt-1 flex-shrink-0" />
            <span className="text-lg text-slate-600 font-medium">Build AI-powered verification assistance systems.</span>
          </motion.li>
        </ul>
      </motion.div>

      <motion.p
        style={{ opacity: urlOpacity }}
        className="text-3xl font-bold text-indigo-600 tracking-wide"
      >
        aiunwrap.com
      </motion.p>
    </motion.div>
  );
}

// ─── Channel Logo ─────────────────────────────────────────────────────────
function ChannelLogo({ size = 40 }: { size?: number }) {
  const iconH = size;
  const iconW = Math.round(size * 0.85);
  return (
    <div dir="ltr" style={{ display: "flex", alignItems: "center", gap: Math.round(size * 0.15) }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 160" fill="none" width={iconW} height={iconH}>
        {/* Bulb body */}
        <path d="M70 8C42 8 22 30 22 56c0 18 9 30 18 40 6 6 8 13 8 20v6h44v-6c0-7 2-14 8-20 9-10 18-22 18-40C118 30 98 8 70 8z" fill="#2563eb"/>
        {/* Slight highlight on right side of bulb */}
        <path d="M70 8C98 8 118 30 118 56c0 18-9 30-18 40-4 4-6 8-7 13" fill="#3b82f6" opacity="0.3"/>
        {/* Screw base ridges */}
        <rect x="48" y="126" width="44" height="6" rx="3" fill="#1e40af"/>
        <rect x="50" y="135" width="40" height="5" rx="2.5" fill="#1e40af"/>
        <rect x="54" y="143" width="32" height="5" rx="2.5" fill="#1e40af"/>
        <path d="M60 148q10 8 20 0" stroke="#1e40af" strokeWidth="3" fill="none" strokeLinecap="round"/>
        {/* Three sweeping petal/swoosh shapes on the left — separated with gaps */}
        <path d="M28 64C23 52 21 38 24 18c0 0 9 18 18 32c-4 2-8 6-14 14z" fill="#2563eb"/>
        <path d="M30 76C18 64 11 46 14 26c0 0 9 18 20 34c-2 3-4 8-4 16z" fill="#2563eb"/>
        <path d="M35 88C18 74 7 52 12 26c0 0 11 22 24 44c-3 4-6 10-1 18z" fill="#2563eb"/>
        {/* Brain outline (two hemispheres) */}
        <ellipse cx="62" cy="52" rx="16" ry="22" fill="#60a5fa" opacity="0.3"/>
        <ellipse cx="78" cy="52" rx="16" ry="22" fill="#60a5fa" opacity="0.3"/>
        {/* Central glow */}
        <radialGradient id="glow">
          <stop offset="0%" stopColor="white" stopOpacity="0.6"/>
          <stop offset="100%" stopColor="white" stopOpacity="0"/>
        </radialGradient>
        <circle cx="70" cy="48" r="14" fill="url(#glow)"/>
        {/* Circuit traces — left hemisphere */}
        <path d="M70 30v44" stroke="white" strokeWidth="1.5" opacity="0.8"/>
        <path d="M56 34v10h-6v10h6v10" stroke="white" strokeWidth="1.3" opacity="0.7" fill="none"/>
        <path d="M62 32v8l-8 5v8" stroke="white" strokeWidth="1.2" opacity="0.65" fill="none"/>
        <path d="M52 50h10" stroke="white" strokeWidth="1" opacity="0.6" fill="none"/>
        <path d="M56 60l6-4" stroke="white" strokeWidth="1" opacity="0.55" fill="none"/>
        {/* Circuit traces — right hemisphere */}
        <path d="M84 36v10h5v10h-5v10" stroke="white" strokeWidth="1.3" opacity="0.7" fill="none"/>
        <path d="M78 34v6l8 5v8" stroke="white" strokeWidth="1.2" opacity="0.65" fill="none"/>
        <path d="M78 52h10" stroke="white" strokeWidth="1" opacity="0.6" fill="none"/>
        <path d="M84 62l-6-4" stroke="white" strokeWidth="1" opacity="0.55" fill="none"/>
        {/* Circuit nodes — left */}
        <circle cx="56" cy="34" r="2.2" fill="white" opacity="0.9"/>
        <circle cx="62" cy="32" r="2" fill="white" opacity="0.9"/>
        <circle cx="50" cy="44" r="2.2" fill="white" opacity="0.9"/>
        <circle cx="56" cy="54" r="2" fill="white" opacity="0.85"/>
        <circle cx="52" cy="50" r="1.8" fill="white" opacity="0.8"/>
        <circle cx="56" cy="60" r="1.8" fill="white" opacity="0.85"/>
        {/* Circuit nodes — right */}
        <circle cx="84" cy="36" r="2.2" fill="white" opacity="0.9"/>
        <circle cx="78" cy="34" r="2" fill="white" opacity="0.9"/>
        <circle cx="89" cy="46" r="2.2" fill="white" opacity="0.9"/>
        <circle cx="84" cy="56" r="2" fill="white" opacity="0.85"/>
        <circle cx="78" cy="52" r="1.8" fill="white" opacity="0.8"/>
        <circle cx="84" cy="62" r="1.8" fill="white" opacity="0.85"/>
        {/* Central nodes */}
        <circle cx="70" cy="42" r="2" fill="white" opacity="0.9"/>
        <circle cx="70" cy="54" r="2" fill="white" opacity="0.9"/>
        <circle cx="70" cy="48" r="2.5" fill="white" opacity="1"/>
      </svg>
      <span style={{ fontSize: Math.round(size * 0.35) + "px", fontWeight: 700, color: "#1e40af" }}>AI Unwrap</span>
    </div>
  );
}

// ─── Scene Error Boundary ─────────────────────────────────────────────────
class SceneErrorBoundary extends React.Component<
  { children: React.ReactNode; sceneIndex: number },
  { error: string | null }
> {
  constructor(props: { children: React.ReactNode; sceneIndex: number }) {
    super(props);
    this.state = { error: null };
  }
  static getDerivedStateFromError(err: Error): { error: string } {
    return { error: err.message };
  }
  componentDidCatch(err: Error) {
    // Notify the host (StudioPlayer) so it can show the Auto-Fix / Show Code overlay
    try { window.parent.postMessage({ type: 'scene-boundary-error', message: err.message }, '*'); } catch (_) {}
  }
  render() {
    if (this.state.error) {
      return (
        <div className="w-full h-full flex items-center justify-center bg-red-50 p-6 text-center">
          <div className="max-w-sm">
            <div className="text-4xl mb-3">⚠️</div>
            <p className="text-red-700 font-semibold text-sm">Scene {this.props.sceneIndex + 1} rendering error</p>
            <p className="text-red-500 text-xs mt-2 font-mono break-all">{this.state.error}</p>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

// ─── App Wrapper ─────────────────────────────────────────────────────────

export default function App() {
  const { time, sceneIndex } = useVideoState();

  return (
    <div className="absolute inset-0 overflow-hidden flex flex-col" style={{ maxHeight: '100%' }}>
      <AnimatePresence mode="wait">
        <SceneErrorBoundary key={sceneIndex} sceneIndex={sceneIndex}>
          {sceneIndex === 0 && <Scene0 time={time} />}
          {sceneIndex === 1 && <Scene1 time={time} />}
          {sceneIndex === 2 && <Scene2 time={time} />}
          {sceneIndex === 3 && <Scene3 time={time} />}
          {sceneIndex === 4 && <Scene4 time={time} />}
          {sceneIndex === 5 && <Scene5 time={time} />}
          {sceneIndex === 6 && <Scene6 time={time} />}
          {sceneIndex === 7 && <Scene7 time={time} />}
          {sceneIndex === 8 && <Scene8 time={time} />}
          {sceneIndex === 9 && <Scene9 time={time} />}
          {sceneIndex === 10 && <Scene10 time={time} />}
          {sceneIndex === 11 && <Scene11 time={time} />}
          {sceneIndex === 12 && <Scene12 time={time} />}
          {sceneIndex === 13 && <Scene13 time={time} />}
          {sceneIndex === 14 && <Scene14 time={time} />}
          {sceneIndex === 15 && <Scene15 time={time} />}
          {sceneIndex === 16 && <Scene16 time={time} />}
          {sceneIndex === 17 && <Scene17 time={time} />}
          {sceneIndex === 18 && <Scene18 time={time} />}
          {sceneIndex === 19 && <Scene19 time={time} />}
        </SceneErrorBoundary>
      </AnimatePresence>
    </div>
  );
}</article></body></html>

BUILD YOUR FIRST AI NEWSROOM ASSISTANT IN 30 MINUTES!

قراءات إضافية

أنشئ درسك التعليمي الخاص