import React, { useState } from 'react'; import { useVideoState } from './useVideoState'; import { motion, useTransform, AnimatePresence, useMotionValue, useMotionValueEvent, type MotionValue } from 'framer-motion'; import { Bell, Bot, Brain, Check, ChevronRight, Clock, Code, Download, Edit, FileText, Folder, Home, LayoutDashboard, Link, Menu, MessageSquare, Plus, Search, Send, Settings, Share, Sparkles, Terminal, User, X } from 'lucide-react'; import { Area, Bar } from 'recharts'; // ─── Scene Components ───────────────────────────────────────────────────── function Scene0({ time }: { time: MotionValue }) { // Animations for ChannelLogo const logoOpacity = useTransform(time, [0, 1], [0, 1]); const logoY = useTransform(time, [0, 1], [20, 0]); // Animations for Main Title Text const titleOpacity = useTransform(time, [1.0, 2.5], [0, 1]); const titleY = useTransform(time, [1.0, 2.5], [20, 0]); // Animations for Supporting Element 1 const tag1Opacity = useTransform(time, [4.5, 6.0], [0, 1]); const tag1Y = useTransform(time, [4.5, 6.0], [10, 0]); // Animations for Supporting Element 2 const tag2Opacity = useTransform(time, [6.0, 7.5], [0, 1]); const tag2Y = useTransform(time, [6.0, 7.5], [10, 0]); // Animations for Supporting Element 3 const tag3Opacity = useTransform(time, [7.5, 9.0], [0, 1]); const tag3Y = useTransform(time, [7.5, 9.0], [10, 0]); return ( BUILD YOUR AI TEACHING WORKFLOW IN 6 POWERFUL STEPS!

Lesson Planning Accelerated Personalized Learning at Scale Efficient Grading & Feedback

); } function Scene1({ time }) { const objectivesData = [ { icon: LayoutDashboard, title: "Map a complete workflow", description: "From lesson planning to assessment with AI tools", animationStart: 2.0, }, { icon: FileText, title: "NotebookLM's role", description: "Integrate document analysis and content generation", animationStart: 7.0, }, { icon: Link, title: "Chain AI tools", description: "Maximize efficiency across ChatGPT, Claude, and Copilot", animationStart: 12.0, }, { icon: Code, title: "Reusable templates", description: "Reduce weekly prep time by 5+ hours", animationStart: 17.0, }, { icon: Terminal, title: "Troubleshoot bottlenecks", description: "Overcome common integration issues", animationStart: 22.0, }, ]; const titleOpacity = useTransform(time, [0, 0.5], [0, 1]); const titleY = useTransform(time, [0, 0.5], [20, 0]); return ( What You'll Learn

{objectivesData.map((objective, index) => { const itemOpacity = useTransform( time, [objective.animationStart, objective.animationStart + 1], [0, 1] ); const itemY = useTransform( time, [objective.animationStart, objective.animationStart + 1], [20, 0] ); const IconComponent = objective.icon; return (

{objective.title}

{objective.description}

); })}

); } function Scene2({ time }: { time: MotionValue }) { // No specific animations are required for this scene as the visual description // indicates the interface is "shown" and "visible" from the start. return (

{/* Header */}

{/* Using Sparkles as a neutral placeholder for the AI tool's logo */} Claude Chat

{/* Chat Area - Blank */}

Start a new conversation

Ask Claude anything, or attach documents to begin analysis.

{/* Input Bar */}

{/* Text file icon for attaching documents */}

); } function Scene3({ time }) { const file1Opacity = useTransform(time, [8.0, 8.3], [0, 1]); const file1Y = useTransform(time, [8.0, 8.3], [20, 0]); const file2Opacity = useTransform(time, [8.5, 8.8], [0, 1]); const file2Y = useTransform(time, [8.5, 8.8], [20, 0]); const file3Opacity = useTransform(time, [9.0, 9.3], [0, 1]); const file3Y = useTransform(time, [9.0, 9.3], [20, 0]); return ( {/* Left Sidebar */}

{/* Main Chat Area */}

{/* Header */}

Claude.ai

{/* Chat History */}

Hello! How can I assist you today?

I have some student essays I'd like you to review.

You

{/* Input Area */}

{/* Attached Files Placeholder */} StudentA_Essay.docx StudentB_Essay.docx StudentC_Essay.docx

); } function Scene4({ time }: { time: MotionValue }) { const fullPrompt = "Analyze the attached student essays on 'The Impact of Industrialization.' For each essay, identify common grammatical errors, logical fallacies, and areas where students struggled with evidence-based reasoning. Provide a summary of strengths and weaknesses for each student and a general overview of class performance against a typical secondary English rubric. Suggest three common misconceptions or areas for whole-class reteaching."; const charIndex = useTransform(time, [3.5, 35.5], [0, fullPrompt.length]); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => setDisplayedPrompt(fullPrompt.slice(0, Math.round(v))) ); const cursorOpacity = useTransform(time, [35.5, 36.0], [1, 0]); return (

{/* Sidebar */}

{/* Claude logo placeholder */}

{/* Main Chat Area */}

{/* Header */}

New Chat

{/* Chat messages area - prompt for the user */}

How can I help you today?

{/* Input Box */}

{displayedPrompt}

Claude can make mistakes. Consider checking important information.

); } function Scene5({ time }) { const responseOpacity = useTransform(time, [0.0, 0.5], [0, 1]); const summariesOpacity = useTransform(time, [1.0, 2.0], [0, 1]); const overviewOpacity = useTransform(time, [3.0, 4.0], [0, 1]); const misconceptionsOpacity = useTransform(time, [5.5, 6.5], [0, 1]); return ( {/* Chat Header */}

Claude.ai AI Assistant

{/* Chat Content Area */}

{/* AI Response Card */}

AI Analysis Complete

{/* Individual Student Feedback */}

Individual Student Feedback

Student A Summary

Identified strong thesis, but needs more evidence for argument 2.

Student B Summary

Excellent structure, but grammar errors impacted clarity.

Student C Summary

Good use of examples, but introduction lacked a clear roadmap.

{/* Class Performance Overview */}

Class Performance Overview

Overall, students demonstrated good understanding of the core concepts. However, a common challenge was integrating evidence smoothly.

Average Score: 78% Strongest Area: Thesis Development

{/* Common Misconceptions */}

Common Misconceptions

Confusing correlation with causation.
Misinterpreting primary source context.
Overgeneralizing specific historical events.

); } function Scene6({ time }) { // Animation for the main card to fade in and slide up slightly const cardOpacity = useTransform(time, [0, 0.5], [0, 1]); const cardY = useTransform(time, [0, 0.5], [20, 0]); // Placeholder text for the blank chat window, appearing character by character const placeholderText = "Ready to generate differentiated materials for your classroom."; const charIndex = useTransform(time, [1.0, 3.5], [0, placeholderText.length]); // Start typing at 1.0s, finish at 3.5s const [displayedPlaceholder, setDisplayedPlaceholder] = useState(""); useMotionValueEvent(charIndex, "change", (v) => { setDisplayedPlaceholder(placeholderText.slice(0, Math.round(v))); }); return ( {/* Header */}

{/* Using Sparkles as a neutral placeholder for the Copilot logo */} Microsoft Copilot

{/* Chat Area - Blank with a prompt */}

How can I help you today?

{displayedPlaceholder} {/* Typing cursor animation */} {time.get() > 1.0 && time.get() < 3.5 && ( )}

{/* Input Bar */}

); } function Scene7({ time }: { time: MotionValue }) { const fullPrompt = "Based on the common essay errors and misconceptions about 'The Impact of Industrialization' (e.g., confusion between cause and correlation, weak historical evidence), create three differentiated reading passages and five comprehension questions for each. One passage should be for advanced learners, one for on-level, and one for remedial support. Focus on clarifying the identified misconceptions."; const charIndex = useTransform(time, [11.6, 40.4], [0, fullPrompt.length]); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => setDisplayedPrompt(fullPrompt.slice(0, Math.round(v)))); const cursorOpacity = useTransform(time, [11.5, 11.6, 40.4, 40.5], [0, 1, 1, 0]); // Chat history message opacities const message1Opacity = useTransform(time, [0.5, 1.0], [0, 1]); const message2Opacity = useTransform(time, [1.5, 2.0], [0, 1]); const message3Opacity = useTransform(time, [2.5, 3.0], [0, 1]); return (

{/* Header */}

Copilot

{/* Chat Area */}

I've reviewed the output from Claude regarding common essay errors and misconceptions in your class.

Excellent! How can we leverage these insights for lesson planning?

I want to create differentiated reading passages and questions based on those specific student needs.

{/* Input Box */}

{displayedPrompt}

); } function Scene8({ time }: { time: MotionValue }) { // Animation for the three passage blocks const passage1Opacity = useTransform(time, [0.5, 1.5], [0, 1]); const passage1Y = useTransform(time, [0.5, 1.5], [20, 0]); const passage2Opacity = useTransform(time, [1.5, 2.5], [0, 1]); const passage2Y = useTransform(time, [1.5, 2.5], [20, 0]); const passage3Opacity = useTransform(time, [2.5, 3.5], [0, 1]); const passage3Y = useTransform(time, [2.5, 3.5], [20, 0]); const passageTextAdvanced = `The Industrial Revolution, spanning from the late 18th to mid-19th century, marked a profound shift from agrarian and handicraft economies to industrial and machine-manufacturing ones. While often correlated with significant population growth and urbanization, it is crucial to differentiate between correlation and causation. For instance, improved sanitation and medical advancements, rather than industrialization itself, were primary drivers of population surges, though industrial centers certainly attracted labor, leading to dense urban populations. The era's impact on social structures was immense, creating new classes of industrial capitalists and a vast working class, often living in stark contrast.`; const questionsAdvanced = [ "1. Explain the primary distinction between correlation and causation in the context of industrialization's impact on population growth.", "2. Identify two distinct social classes that emerged as a direct result of the Industrial Revolution and describe their contrasting living conditions.", "3. Analyze how the shift from a handicraft economy to machine manufacturing fundamentally altered production methods and labor demands.", "4. Discuss the role of factors beyond industrialization in driving demographic changes during this period.", "5. Evaluate the long-term societal implications of the new economic structures established by industrial capitalism." ]; const passageTextOnLevel = `The Industrial Revolution was a big change that started in the late 1700s. Before this, most people farmed or made things by hand. After, factories used machines to make goods much faster. This change led to more people moving to cities to find work, causing cities to grow quickly. It's important to know that while industrialization happened at the same time as population growth, they weren't always directly caused by each other. For example, better hygiene also helped more people live longer. The new factories created jobs, but also led to new social groups: wealthy factory owners and many workers who often faced tough conditions.`; const questionsOnLevel = [ "1. What was the main difference between how things were made before and after the Industrial Revolution?", "2. Why did many people move to cities during this time?", "3. Give an example of something that happened at the same time as industrialization but wasn't directly caused by it.", "4. Who were the two main new social groups that appeared because of factories?", "5. Describe one challenge faced by workers in the new factories." ]; const passageTextRemedial = `The Industrial Revolution was a time when many new machines were invented. This made it easier to make things in factories instead of by hand. Factories needed many workers, so people moved from farms to cities to find jobs. Cities became much bigger. It's like when two things happen at the same time, but one doesn't always make the other happen. For example, people started living longer because they were cleaner, not just because of factories. The factories made some people rich (the owners) and many people worked hard for them. These workers often lived in crowded places.`; const questionsRemedial = [ "1. What new things helped make goods faster during the Industrial Revolution?", "2. Where did people move to find work in factories?", "3. Can you think of something else that helped people live longer besides factories?", "4. Who became rich because of the factories?", "5. What was one problem for the factory workers?" ]; const renderPassageBlock = ( title: string, passage: string, questions: string[], opacity: MotionValue, y: MotionValue ) => (

{title} Reading Passage

{passage}

Comprehension Questions:

{q.split(' ')[0]} {q.substring(q.indexOf(' ') + 1)}

); return (

Copilot

Based on the common essay errors and misconceptions about 'The Impact of Industrialization' (e.g., confusion between cause and correlation, weak historical evidence), create three differentiated reading passages and five comprehension questions for each. One passage should be for advanced learners, one for on-level, and one for remedial support. Focus on clarifying the identified misconceptions.

{renderPassageBlock("Advanced", passageTextAdvanced, questionsAdvanced, passage1Opacity, passage1Y)} {renderPassageBlock("On-Level", passageTextOnLevel, questionsOnLevel, passage2Opacity, passage2Y)} {""}

); } function Scene9({ time }) { // Overall UI fade in const uiOpacity = useTransform(time, [0, 0.5], [0, 1]); // Highlight for "Sources" in sidebar when "organizing sources" is mentioned const sourcesHighlightBg = useTransform(time, [3.0, 3.5, 6.0, 6.5], ["rgba(0,0,0,0)", "rgb(238,242,255)", "rgb(238,242,255)", "rgba(0,0,0,0)"] // bg-indigo-50 ); const sourcesHighlightText = useTransform(time, [3.0, 3.5, 6.0, 6.5], ["rgb(100,116,139)", "rgb(67,56,202)", "rgb(67,56,202)", "rgb(100,116,139)"] // text-slate-500 to text-indigo-700 ); // Highlight for the main "Source Documents" card when "generating questions" is mentioned const mainSourcesCardBorderColor = useTransform(time, [7.0, 7.5, 10.0, 10.5], ["rgb(226,232,240)", "rgb(199,210,254)", "rgb(199,210,254)", "rgb(226,232,240)"] // border-slate-200 to border-indigo-300 ); return ( {/* NotebookLM Application Frame */}

{/* Sidebar */}

NotebookLM

{/* Main Content Area */}

{/* Header */}

Source Documents

{/* Uploaded Documents List Container */} Documents previously generated by Copilot:

Differentiated Reading Passage - Group A.pdf

Differentiated Reading Passage - Group B.pdf

Differentiated Reading Passage - Group C.pdf

{/* Placeholder for "New Notebook" or "Chat" */}

Chat with sources to generate guides...

); } function Scene10({ time }: { time: MotionValue }) { // Animation for source selection (border color and width change) const sourceBorderColor = useTransform( time, [1.5, 2.0], ["#e2e8f0", "#6366f1"] // slate-200 to indigo-500 ); const sourceBorderWidth = useTransform( time, [1.5, 2.0], ["1px", "2px"] ); // Animation for Ask feature focus (border color and shadow) const askBorderColor = useTransform( time, [3.5, 4.0], ["#e2e8f0", "#6366f1"] // slate-200 to indigo-500 ); const askShadow = useTransform( time, [3.5, 4.0], [ "0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 0px rgba(0,0,0,0)", // Start: no shadow, two transparent layers "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)" // End: shadow-md, ensuring rgba format and two layers for interpolation ] ); return ( {/* Sidebar */}

NotebookLM

{/* Main content area */}

My Notebook

{/* Sources section */}

Sources

{/* Source cards */} Reading Passage A (Differentiated) Uploaded 3 hours ago Reading Passage B (Differentiated) Uploaded 3 hours ago Reading Passage C (Differentiated) Uploaded 3 hours ago

{/* Ask feature at the bottom */}

); } function Scene11({ time }) { const fullPrompt = "Using only the provided differentiated reading passages, generate 10 open-ended discussion questions suitable for a secondary history class. Include questions that encourage critical thinking, debate, and connection to current events related to industrialization. Also, suggest 3 debate prompts that arise from the content."; const charIndex = useTransform(time, [0, 20.0], [0, fullPrompt.length], { clamp: true }); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => { setDisplayedPrompt(fullPrompt.slice(0, Math.round(v))); }); // Continuous blinking cursor animation const sceneDuration = 21.5; const blinkInterval = 0.5; // Each blink cycle (on + off) is 0.5s const numTransitions = Math.ceil(sceneDuration / (blinkInterval / 2)); // Number of on/off transitions const timeValues = Array.from({ length: numTransitions + 1 }, (_, i) => i * (blinkInterval / 2)); const opacityValues = timeValues.map((_, i) => (i % 2 === 0 ? 1 : 0)); const cursorOpacity = useTransform(time, timeValues, opacityValues); return ( {/* Sidebar - NotebookLM style */}

NotebookLM

{/* Spacer */}

Profile

{/* Main Content Area */}

{/* Header */}

History Class Resources

{/* Content Split: Sources on left, Chat on right */}

{/* Sources Panel */}

Source Documents

Industrial_Rev_Article_A.pdf

Factory_Conditions_Primary.docx

Child_Labor_Laws_Overview.pdf

Economic_Impact_Industrialization.pptx

{/* Chat/Prompt Area */}

Ready to generate questions?

{/* Input Box */}

              {/* Blinking Cursor */}
              <motion.div
                className="absolute bottom-4 right-12 w-0.5 h-4 bg-slate-700"
                style={{ opacity: cursorOpacity }}
              />
              <button className="absolute bottom-3 right-3 p-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors">
                <Send className="w-5 h-5" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </motion.div>
  );
}

function Scene12({ time }) {
  // Animation for the generated content card appearing
  const generatedContentOpacity = useTransform(time, [2.0, 2.5], [0, 1]);
  const generatedContentY = useTransform(time, [2.0, 2.5], [20, 0]);

  // Animation for the "Generating..." text fading out
  const generatingTextOpacity = useTransform(time, [1.5, 2.0], [1, 0]);

  // Animation for source citations appearing or becoming more prominent
  const citationOpacity = useTransform(time, [4.0, 4.5], [0, 1]);

  const discussionQuestions = [
    "1. Analyze the main arguments presented in the text regarding climate change.",
    "2. How do the differing perspectives in 'Reading A' and 'Reading B' contribute to your understanding of the topic?",
    "3. Discuss the ethical implications of the technological advancements described.",
    "4. What role does historical context play in understanding the current situation?",
    "5. Evaluate the effectiveness of the proposed solutions in 'Reading C'.",
    "6. How might the author's background influence their portrayal of events?",
    "7. Identify and explain the key vocabulary terms introduced in the passages.",
    "8. Compare and contrast the societal impacts discussed in different readings.",
    "9. What are the potential long-term consequences of the trends highlighted?",
    "10. Propose an alternative solution based on your synthesis of the materials."
  ];

  const debatePrompts = [
    "1. Be it resolved, that AI should be integrated into all aspects of secondary education.",
    "2. Be it resolved, that standardized testing accurately measures student potential.",
    "3. Be it resolved, that historical monuments should be re-evaluated based on modern ethical standards."
  ];

  const sourceCitation = "Source: Differentiated Reading Passages (P.1, P.2, P.3)";

  return (
    <motion.div
      key="scene12"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col bg-slate-50 p-6"
    >
      <div className="flex-1 flex bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200">
        {/* Sidebar */}
        <div className="w-64 bg-slate-100 border-r border-slate-200 flex flex-col p-4">
          <div className="flex items-center gap-2 mb-6">
            <Sparkles className="w-6 h-6 text-indigo-500" />
            <span className="font-semibold text-xl text-slate-800">NotebookLM</span>
          </div>
          <nav className="flex flex-col gap-2">
            <div className="flex items-center gap-3 p-3 rounded-lg bg-indigo-50 text-indigo-700 font-medium">
              <FileText className="w-5 h-5" />
              <span>My Sources</span>
            </div>
            <div className="flex items-center gap-3 p-3 rounded-lg text-slate-600 hover:bg-slate-100">
              <Bot className="w-5 h-5" />
              <span>Chatbot</span>
            </div>
            <div className="flex items-center gap-3 p-3 rounded-lg text-slate-600 hover:bg-slate-100">
              <Brain className="w-5 h-5" />
              <span>Insights</span>
            </div>
          </nav>
          <div className="mt-auto pt-4 border-t border-slate-200">
            <div className="text-sm font-semibold text-slate-600 mb-2">Uploaded Files</div>
            <div className="flex flex-col gap-1 text-sm text-slate-500">
              <div className="flex items-center gap-2 p-2 rounded-md hover:bg-slate-100">
                <FileText className="w-4 h-4 text-slate-400" />
                <span>Reading A.pdf</span>
              </div>
              <div className="flex items-center gap-2 p-2 rounded-md hover:bg-slate-100">
                <FileText className="w-4 h-4 text-slate-400" />
                <span>Reading B.pdf</span>
              </div>
              <div className="flex items-center gap-2 p-2 rounded-md hover:bg-slate-100">
                <FileText className="w-4 h-4 text-slate-400" />
                <span>Reading C.pdf</span>
              </div>
            </div>
          </div>
        </div>

        {/* Main Content Area */}
        <div className="flex-1 p-8 flex flex-col overflow-auto relative">
          <h2 className="text-3xl font-bold text-slate-800 mb-6">Generated Prompts</h2>

          {/* "Generating..." text */}
          <motion.div
            style={{ opacity: generatingTextOpacity }}
            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-2 text-slate-400 text-lg"
          >
            <Bot className="w-6 h-6 animate-pulse" />
            <span>Generating...</span>
          </motion.div>

          {/* Generated Content Card */}
          <motion.div
            style={{ opacity: generatedContentOpacity, y: generatedContentY }}
            className="flex flex-col gap-6"
          >
            {/* Discussion Questions */}
            <div className="bg-white p-6 rounded-xl shadow-md border border-slate-200">
              <h3 className="text-xl font-semibold text-slate-700 mb-4 flex items-center gap-2">
                <MessageSquare className="w-5 h-5 text-indigo-500" />
                Discussion Questions (10)
              </h3>
              <ul className="list-none space-y-3 text-slate-700">
                {discussionQuestions.map((q, i) => (
                  <li key={i} className="flex flex-col gap-1">
                    <span className="text-base">{q}</span>
                    <motion.span
                      style={{ opacity: citationOpacity }}
                      className="text-xs text-slate-500 font-medium flex items-center gap-1"
                    >
                      <Link className="w-3 h-3" />
                      {sourceCitation}
                    </motion.span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Debate Prompts */}
            <div className="bg-white p-6 rounded-xl shadow-md border border-slate-200">
              <h3 className="text-xl font-semibold text-slate-700 mb-4 flex items-center gap-2">
                <Sparkles className="w-5 h-5 text-indigo-500" />
                Debate Prompts (3)
              </h3>
              <ul className="list-none space-y-3 text-slate-700">
                {debatePrompts.map((p, i) => (
                  <li key={i} className="flex flex-col gap-1">
                    <span className="text-base">{p}</span>
                    <motion.span
                      style={{ opacity: citationOpacity }}
                      className="text-xs text-slate-500 font-medium flex items-center gap-1"
                    >
                      <Link className="w-3 h-3" />
                      {sourceCitation}
                    </motion.span>
                  </li>
                ))}
              </ul>
            </div>
          </motion.div>
        </div>
      </div>
    </motion.div>
  );
}

function Scene13({ time }) {
  // Chat window visibility
  const chatWindowOpacity = useTransform(time, [0, 0.5], [0, 1]);
  const chatWindowTranslateY = useTransform(time, [0, 0.5], [20, 0]);

  // Pasted content 1: Essay Analysis Summary
  const output1Opacity = useTransform(time, [2.0, 2.5], [0, 1]);
  const output1TranslateY = useTransform(time, [2.0, 2.5], [10, 0]);

  // Pasted content 2: Differentiated Materials
  const output2Opacity = useTransform(time, [6.0, 6.5], [0, 1]);
  const output2TranslateY = useTransform(time, [6.0, 6.5], [10, 0]);

  // Pasted content 3: Discussion Questions
  const output3Opacity = useTransform(time, [10.0, 10.5], [0, 1]);
  const output3TranslateY = useTransform(time, [10.0, 10.5], [10, 0]);

  // Typing effect for the final prompt instruction
  const fullPromptInstruction = "Combine these elements into a 60-minute lesson plan for a 10th-grade English class, focusing on persuasive writing.";
  const promptCharIndex = useTransform(time, [14.0, 17.0], [0, fullPromptInstruction.length], { clamp: true });
  const [displayedPrompt, setDisplayedPrompt] = useState("");

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

  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-6"
    >
      <motion.div
        style={{ opacity: chatWindowOpacity, translateY: chatWindowTranslateY }}
        className="w-full max-w-4xl h-[500px] bg-white rounded-2xl shadow-xl flex border border-slate-200 overflow-hidden"
      >
        {/* Sidebar */}
        <div className="w-64 bg-slate-100 border-r border-slate-200 p-4 flex flex-col gap-4">
          <div className="flex items-center gap-3 text-indigo-600 font-semibold text-lg">
            <Sparkles className="w-6 h-6" />
            <span>AI Assistant</span>
          </div>
          <button className="flex items-center gap-2 p-3 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors">
            <Plus className="w-5 h-5" />
            New Chat
          </button>
          <div className="flex-1 overflow-y-auto">
            <div className="text-sm text-slate-500 font-semibold mb-2">Recent</div>
            <div className="flex flex-col gap-2">
              <div className="p-2 text-sm text-slate-700 bg-slate-200 rounded-md">Lesson Plan Draft</div>
              <div className="p-2 text-sm text-slate-500 hover:bg-slate-100 rounded-md">Essay Feedback</div>
              <div className="p-2 text-sm text-slate-500 hover:bg-slate-100 rounded-md">Differentiated Content</div>
            </div>
          </div>
        </div>

        {/* Main Chat Area */}
        <div className="flex-1 flex flex-col">
          <div className="p-4 border-b border-slate-200 flex items-center justify-between">
            <h2 className="text-lg font-semibold text-slate-800">Lesson Plan Draft</h2>
            <Menu className="w-5 h-5 text-slate-500" />
          </div>

          <div className="flex-1 p-6 flex flex-col gap-4 overflow-y-auto bg-slate-50">
            {/* Initial user prompt */}
            <div className="flex items-start gap-3">
              <User className="w-7 h-7 p-1 rounded-full bg-indigo-100 text-indigo-600" />
              <div className="bg-indigo-500 text-white p-3 rounded-xl rounded-bl-none shadow-sm max-w-[80%]">
                <p className="text-sm">
                  I need to create a comprehensive lesson plan. I have some existing outputs from other AI tools.
                  Please use the following information:
                </p>
              </div>
            </div>

            {/* Pasted Content 1: Essay Analysis Summary */}
            <motion.div
              style={{ opacity: output1Opacity, translateY: output1TranslateY }}
              className="flex items-start gap-3"
            >
              <FileText className="w-7 h-7 p-1 rounded-full bg-emerald-100 text-emerald-600" />
              <div className="bg-emerald-50 text-emerald-800 p-3 rounded-xl rounded-bl-none shadow-sm max-w-[80%]">
                <p className="font-semibold text-sm mb-1">Essay Analysis Summary:</p>
                <p className="text-sm">Students struggled with thesis statements. Focus on argumentative structure.</p>
              </div>
            </motion.div>

            {/* Pasted Content 2: Differentiated Materials */}
            <motion.div
              style={{ opacity: output2Opacity, translateY: output2TranslateY }}
              className="flex items-start gap-3"
            >
              <FileText className="w-7 h-7 p-1 rounded-full bg-emerald-100 text-emerald-600" />
              <div className="bg-emerald-50 text-emerald-800 p-3 rounded-xl rounded-bl-none shadow-sm max-w-[80%]">
                <p className="font-semibold text-sm mb-1">Differentiated Materials:</p>
                <p className="text-sm">Group A: advanced reading on counter-arguments. Group B: graphic organizer for essay structure.</p>
              </div>
            </motion.div>

            {/* Pasted Content 3: Discussion Questions */}
            <motion.div
              style={{ opacity: output3Opacity, translateY: output3TranslateY }}
              className="flex items-start gap-3"
            >
              <FileText className="w-7 h-7 p-1 rounded-full bg-emerald-100 text-emerald-600" />
              <div className="bg-emerald-50 text-emerald-800 p-3 rounded-xl rounded-bl-none shadow-sm max-w-[80%]">
                <p className="font-semibold text-sm mb-1">Discussion Questions:</p>
                <p className="text-sm">What makes an argument persuasive? How do you anticipate counter-arguments?</p>
              </div>
            </motion.div>

            {/* Final Instruction being typed by user */}
            <div className="flex items-start gap-3">
              <User className="w-7 h-7 p-1 rounded-full bg-indigo-100 text-indigo-600" />
              <div className="bg-indigo-500 text-white p-3 rounded-xl rounded-bl-none shadow-sm max-w-[80%]">
                <p className="text-sm">
                  {displayedPrompt}
                  <motion.span
                    initial={{ opacity: 0 }}
                    animate={{ opacity: [0, 1, 0] }}
                    transition={{ duration: 0.8, repeat: Infinity}}
                    className="inline-block w-1 h-4 bg-white ml-0.5"
                  />
                </p>
              </div>
            </div>
          </div>

          {/* Input field */}
          <div className="p-4 border-t border-slate-200 bg-white flex items-center gap-3">
            <input
              type="text"
              placeholder="Message AI Assistant..."
              className="flex-1 p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none text-sm"
            />
            <Send className="w-6 h-6 text-indigo-500 cursor-pointer hover:text-indigo-600 transition-colors" />
          </div>
        </div>
      </motion.div>
    </motion.div>
  );
}

function Scene14({ time }: { time: MotionValue<number> }) {
  const fullPrompt = "Using the attached essay analysis summary, the outlines of the differentiated reading passages, and the discussion questions provided, create a detailed 60-minute lesson plan for a secondary English/History class focusing on 'The Impact of Industrialization.' Include clear learning objectives, a warm-up activity, a main activity incorporating the differentiated readings and discussion, a concluding wrap-up, and ideas for formative assessment.";

  const charIndex = useTransform(time, [15.5, 45.0], [0, fullPrompt.length], { clamp: true });
  const [displayedPrompt, setDisplayedPrompt] = useState("");

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

  const blinkVisible = useTransform(time, (t) => {
    const phase = (t % 0.8); // 0.8 second blink cycle
    if (phase < 0.4) return 1; // Visible for 0.4s
    return 0; // Hidden for 0.4s
  });

  const cursorOpacity = useTransform(time, (t) => {
    if (t < 45.0) { // Cursor blinks until typing is complete
      return blinkVisible.get();
    }
    return 0; // Cursor disappears after typing
  });

  const sendButtonOpacity = useTransform(time, [45.0, 45.3], [0, 1]); // Appear over 0.3s

  return (
    <motion.div
      key="scene14"
      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-6"
    >
      <div className="flex w-full max-w-4xl h-[600px] bg-white rounded-xl shadow-xl overflow-hidden border border-slate-200">
        {/* Sidebar */}
        <div className="w-20 bg-slate-50 border-r border-slate-100 flex flex-col items-center py-6 gap-6">
          <Sparkles className="w-8 h-8 text-indigo-500" />
          <div className="flex flex-col gap-4 mt-8">
            <div className="p-2 rounded-lg bg-indigo-100/50 text-indigo-600">
              <MessageSquare className="w-6 h-6" />
            </div>
            <div className="p-2 rounded-lg text-slate-500 hover:bg-slate-100">
              <FileText className="w-6 h-6" />
            </div>
            <div className="p-2 rounded-lg text-slate-500 hover:bg-slate-100">
              <Bot className="w-6 h-6" />
            </div>
          </div>
          <div className="mt-auto p-2 rounded-lg text-slate-500 hover:bg-slate-100">
            <Settings className="w-6 h-6" />
          </div>
        </div>

        {/* Main Chat Area */}
        <div className="flex-1 flex flex-col p-6">
          {/* Header */}
          <div className="flex items-center justify-between pb-4 border-b border-slate-100 mb-4">
            <h2 className="text-xl font-semibold text-slate-800">New Chat</h2>
            <Plus className="w-6 h-6 text-slate-500 cursor-pointer hover:text-slate-700" />
          </div>

          {/* Chat History Placeholder */}
          <div className="flex-1 flex flex-col items-center justify-center text-slate-400 text-center">
            <Brain className="w-16 h-16 mb-4" />
            <p className="text-lg font-medium">How can I help you today?</p>
            <p className="text-sm mt-1">Ask me anything.</p>
          </div>

          {/* Input Box */}
          <div className="relative w-full bg-slate-50 rounded-xl p-4 border border-slate-200 shadow-sm">
            <div className="min-h-[60px] max-h-[150px] overflow-y-auto pr-10 text-slate-800 text-base leading-relaxed">
              <span>{displayedPrompt}</span>
              <motion.span
                style={{ opacity: cursorOpacity }}
                className="inline-block w-0.5 h-5 bg-indigo-500 ml-0.5 align-text-bottom"
              />
            </div>
            <motion.button
              style={{ opacity: sendButtonOpacity }}
              className="absolute bottom-4 right-4 p-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors"
            >
              <Send className="w-5 h-5" />
            </motion.button>
          </div>
        </div>
      </div>
    </motion.div>
  );
}

function Scene15({ time }) {
  // TIMING MAP:
  // [0.0s - 0.5s] Scene setup, Claude.ai UI (header, sidebar, input, user prompt) is visible.
  // [0.5s - 6.0s] Claude generates the lesson plan text, character by character.
  //               Narration: "And now, Claude generates a complete, structured lesson plan that integrates all the elements we've created."
  // [6.0s - 20.0s] Lesson plan is fully displayed.
  //               Narration: "This is a really useful trick because it demonstrates how to chain multiple AI tools together for a single teaching task, maximizing your efficiency and ensuring coherence across your materials."
  // [20.0s - End] Reinforce efficiency.
  //               Narration: "You've just created a full lesson plan in minutes, not hours."

  const fullLessonPlan = `
**Lesson Plan: The Water Cycle & Ecosystems**

**Subject:** Science
**Grade Level:** 7-8
**Time Allotment:** 60 minutes

**1. Learning Objectives:**
   - Students will be able to identify and describe the stages of the water cycle.
   - Students will analyze the impact of the water cycle on various ecosystems.
   - Students will connect local weather patterns to global climate systems.

**2. Materials:**
   - Interactive whiteboard/projector
   - Handout: Water Cycle Diagram (pre-generated by AI)
   - Small group activity cards (from AI-generated prompts)
   - Markers, flip charts

**3. Lesson Activities:**

   **a. Introduction (10 min):**
      - **Hook:** Show a short AI-generated video clip (placeholder) of extreme weather events.
      - **Discussion:** "What causes these events? How does water play a role?"
      - Introduce learning objectives.

   **b. Water Cycle Exploration (20 min):**
      - Review the AI-generated Water Cycle Diagram.
      - Small group activity: Students use AI-generated prompt cards to label and explain stages of the water cycle on flip charts.
      - Teacher circulates, provides support, and facilitates discussion.

   **c. Ecosystem Impact (15 min):**
      - Class discussion: How does the water cycle affect different ecosystems (e.g., deserts, rainforests, oceans)?
      - Use AI-generated case studies (short paragraphs) for each ecosystem to prompt discussion.

   **d. Global Connections & Local Impact (10 min):**
      - Briefly discuss global climate patterns and how they influence local weather.
      - Ask students to brainstorm local examples of the water cycle's impact.

**4. Assessment:**
   - **Formative:** Observe group work and participation in discussions.
   - **Summative:** Exit ticket - "Describe one way the water cycle impacts an ecosystem you discussed today."
   - **Homework:** Research a local water issue and propose an AI-supported solution (e.g., using AI to monitor water quality).

**5. Differentiation:**
   - **Support:** Provide simplified diagrams and sentence starters for struggling learners.
   - **Challenge:** Encourage advanced students to research specific hydrological processes or climate models.

**Teacher Notes:**
- Emphasize the interconnectedness of all stages.
- Encourage critical thinking about human impact on the water cycle.
`;

  const charIndex = useTransform(time, [0.5, 6.0], [0, fullLessonPlan.length], { clamp: true });
  const [displayedLessonPlan, setDisplayedLessonPlan] = useState("");

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

  // Helper to convert **text** to <strong>text</strong>
  const formatTextWithBold = (text) => {
    return text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
  };

  return (
    <motion.div
      key="scene15"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col bg-slate-50 overflow-hidden"
    >
      <div className="flex-1 flex flex-col p-6">
        {/* Claude.ai Interface */}
        <div className="flex flex-col h-full bg-white rounded-2xl shadow-xl overflow-hidden">
          {/* 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">
              <Sparkles className="w-6 h-6 text-indigo-500" />
              <span className="text-lg font-semibold text-slate-800">Claude</span>
            </div>
            <div className="flex items-center gap-4">
              <Plus className="w-5 h-5 text-slate-500 hover:text-indigo-600 cursor-pointer" />
              <Menu className="w-5 h-5 text-slate-500 hover:text-indigo-600 cursor-pointer" />
            </div>
          </div>

          {/* Main Content Area */}
          <div className="flex-1 flex overflow-hidden">
            {/* Sidebar */}
            <div className="w-56 bg-slate-100 border-r border-slate-200 p-4 flex flex-col gap-3 text-sm">
              <div className="flex items-center gap-2 text-slate-600 font-medium">
                <LayoutDashboard className="w-4 h-4" />
                <span>Chat</span>
              </div>
              <div className="flex items-center gap-2 text-indigo-600 font-semibold bg-indigo-50 px-3 py-2 rounded-lg">
                <MessageSquare className="w-4 h-4" />
                <span>New Chat</span>
              </div>
              <div className="flex items-center gap-2 text-slate-500 mt-4">
                <Clock className="w-4 h-4" />
                <span>Recent</span>
              </div>
              <ul className="text-slate-500 text-xs mt-1 space-y-2">
                <li className="hover:text-indigo-600 cursor-pointer truncate">Lesson Plan Draft 1</li>
                <li className="hover:text-indigo-600 cursor-pointer truncate">Quiz Questions - History</li>
                <li className="hover:text-indigo-600 cursor-pointer truncate">Essay Feedback Prompts</li>
              </ul>
            </div>

            {/* Chat/Output Area */}
            <div className="flex-1 flex flex-col bg-white overflow-hidden">
              <div className="flex-1 p-6 overflow-y-auto">
                {/* User Prompt (from previous scene context) */}
                <div className="flex items-start gap-3 mb-6">
                  <User className="w-8 h-8 p-1.5 bg-slate-200 rounded-full text-slate-600" />
                  <div className="bg-slate-100 rounded-xl p-3 text-sm text-slate-700 max-w-[70%] shadow-sm">
                    "Generate a comprehensive 60-minute lesson plan for 7th grade science, integrating the water cycle diagram and activity ideas we discussed earlier."
                  </div>
                </div>

                {/* AI Response */}
                <div className="flex items-start gap-3">
                  <Bot className="w-8 h-8 p-1.5 bg-indigo-100 rounded-full text-indigo-600" />
                  <motion.div className="bg-indigo-50 rounded-xl p-4 text-sm text-slate-800 leading-relaxed max-w-[80%] shadow-sm whitespace-pre-wrap">
                    <span className="font-medium text-slate-900">Here is your complete lesson plan, incorporating the elements we refined:</span>
                    <br /><br />
                    <span dangerouslySetInnerHTML={{ __html: formatTextWithBold(displayedLessonPlan) }} />
                  </motion.div>
                </div>
              </div>

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

function Scene16({ time }) {
  const fullTemplateText = `Role: Secondary School Teacher
Subject: [SUBJECT]
Topic: [TOPIC]
Grade Level: [GRADE_LEVEL]
Task: Create a [QUIZ/LESSON PLAN/ESSAY PROMPT]
Include: [KEY_ELEMENTS]
Output Format: [FORMAT_DETAILS]
Tone: [TONE_PREFERENCE]`;

  const charIndex = useTransform(time, [9.0, 15.0], [0, fullTemplateText.length], { clamp: true });
  const [displayedTemplate, setDisplayedTemplate] = useState("");

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

  const saveButtonOpacity = useTransform(time, [15.5, 16.0], [0, 1]);
  const saveButtonY = useTransform(time, [15.5, 16.0], [10, 0]);

  return (
    <motion.div
      key="scene16"
      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
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="w-full max-w-4xl bg-white rounded-2xl shadow-xl p-8 flex flex-col gap-6 border border-slate-200"
      >
        <div className="flex items-center gap-3 text-indigo-600">
          <Sparkles className="w-7 h-7" />
          <h2 className="text-3xl font-bold">AI Prompt Library</h2>
        </div>

        <div className="flex gap-6 h-[400px]">
          {/* Template Editor Section */}
          <div className="flex-1 flex flex-col gap-4 bg-slate-50 p-5 rounded-xl border border-slate-200 shadow-sm">
            <h3 className="text-lg font-semibold text-slate-700">New Template</h3>
            <div className="flex-1 bg-white border border-slate-300 rounded-lg p-4 font-mono text-sm text-slate-800 overflow-auto whitespace-pre-wrap shadow-inner">
              {displayedTemplate}
              {displayedTemplate.length < fullTemplateText.length && (
                <motion.span
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ repeat: Infinity, duration: 0.8}}
                  className="inline-block w-2 h-4 bg-indigo-500 ml-1 align-bottom"
                />
              )}
            </div>
            <motion.button
              style={{ opacity: saveButtonOpacity, y: saveButtonY }}
              className="mt-2 px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold text-base shadow-md hover:bg-indigo-700 transition-colors self-end"
            >
              <Plus className="inline-block w-5 h-5 mr-2 -mt-1" />
              Save Template
            </motion.button>
          </div>

          {/* Saved Templates Section */}
          <div className="w-72 flex flex-col gap-4 bg-slate-50 p-5 rounded-xl border border-slate-200 shadow-sm">
            <h3 className="text-lg font-semibold text-slate-700">Saved Templates</h3>
            <ul className="flex flex-col gap-2">
              <li className="flex items-center justify-between p-3 bg-white rounded-md border border-slate-200 shadow-sm text-sm text-slate-700">
                <span>Quiz Generator</span>
                <ChevronRight className="w-4 h-4 text-slate-400" />
              </li>
              <li className="flex items-center justify-between p-3 bg-white rounded-md border border-slate-200 shadow-sm text-sm text-slate-700">
                <span>Essay Prompt</span>
                <ChevronRight className="w-4 h-4 text-slate-400" />
              </li>
              <li className="flex items-center justify-between p-3 bg-white rounded-md border border-slate-200 shadow-sm text-sm text-slate-700">
                <span>Lesson Plan Outline</span>
                <ChevronRight className="w-4 h-4 text-slate-400" />
              </li>
              <li className="flex items-center justify-between p-3 bg-white rounded-md border border-slate-200 shadow-sm text-sm text-slate-700">
                <span>Feedback Assistant</span>
                <ChevronRight className="w-4 h-4 text-slate-400" />
              </li>
            </ul>
          </div>
        </div>
      </motion.div>
    </motion.div>
  );
}

function Scene17({ time }) {
  const fullPromptText = `You are an expert secondary school teacher assistant. Your task is to analyze student essays and generate a detailed lesson plan.

**Essay Analysis:**
Review the attached student essays on [TOPIC].
Identify common strengths and weaknesses.
Provide specific, actionable feedback for each student.
Suggest areas for improvement focusing on [RUBRIC CRITERIA].

**Lesson Plan Generation:**
Based on the essay analysis and the curriculum for [GRADE LEVEL], create a 60-minute lesson plan for next week.
The lesson should address the identified weaknesses and reinforce key concepts related to [TOPIC].
Include:
- Learning objectives
- Materials needed (e.g., [ATTACHED MATERIALS])
- Step-by-step activities with timings
- Differentiation strategies for [DIFFERENTIATED NEEDS]
- Assessment ideas

Ensure all feedback and lesson content is aligned with best pedagogical practices.`;

  const charIndex = useTransform(time, [1.0, 7.0], [0, fullPromptText.length], { clamp: true });
  const [displayedPrompt, setDisplayedPrompt] = useState("");

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

  const editorCardOpacity = useTransform(time, [0.0, 0.5], [0, 1]);
  const editorCardY = useTransform(time, [0.0, 0.5], [20, 0]);

  const highlightStartTime = 8.0;
  const fillInStartTime = 10.0;

  const highlightBg = useTransform(time, [highlightStartTime, highlightStartTime + 0.5], ['rgba(129, 140, 248, 0)', 'rgba(129, 140, 248, 0.2)']); // indigo-300 with opacity
  const highlightScale = useTransform(time, [highlightStartTime, highlightStartTime + 0.5], [1, 1.02]);

  const topicPlaceholderOpacity = useTransform(time, [fillInStartTime, fillInStartTime + 0.5], [1, 0]);
  const filledTopicOpacity = useTransform(time, [fillInStartTime + 0.5, fillInStartTime + 1.0], [0, 1]);

  const renderAnimatedPrompt = (text) => {
    const parts = text.split(/(\[.*?\])/g);
    return parts.map((part, i) => {
      if (part.startsWith('[') && part.endsWith(']')) {
        const isTopicPlaceholder = (part === '[TOPIC]' && i === 5); // Target the first [TOPIC]
        const isSecondTopicPlaceholder = (part === '[TOPIC]' && i === 23); // Target the second [TOPIC]
        return (
          <React.Fragment key={i}>
            {isTopicPlaceholder && (
              <motion.span
                style={{ opacity: filledTopicOpacity, display: useTransform(filledTopicOpacity, v => v > 0.01 ? 'inline' : 'none') }}
                className="text-indigo-600 font-semibold bg-indigo-50 px-1 py-0.5 rounded-md whitespace-pre-wrap"
              >
                World War II
              </motion.span>
            )}
            <motion.span
              style={{
                backgroundColor: highlightBg,
                scale: highlightScale,
                opacity: isTopicPlaceholder ? topicPlaceholderOpacity : 1,
                display: isTopicPlaceholder ? useTransform(topicPlaceholderOpacity, v => v > 0.01 ? 'inline' : 'none') : 'inline',
              }}
              className="text-indigo-600 font-semibold px-1 py-0.5 rounded-md whitespace-pre-wrap"
            >
              {part}
            </motion.span>
          </React.Fragment>
        );
      }
      return <span key={i} className="whitespace-pre-wrap">{part}</span>;
    });
  };

  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 overflow-hidden"
    >
      <motion.div
        style={{ opacity: editorCardOpacity, y: editorCardY }}
        className="bg-white rounded-xl shadow-lg w-full max-w-3xl flex flex-col border border-slate-200"
      >
        <div className="flex items-center justify-between p-4 border-b border-slate-100">
          <span className="text-lg font-semibold text-slate-800 flex items-center gap-2">
            <Code className="w-5 h-5 text-slate-400" /> My Prompt Templates
          </span>
          <div className="flex items-center gap-3">
            <motion.button
              className="flex items-center gap-1 text-sm text-slate-600 hover:text-indigo-600 transition-colors"
            >
              <Plus className="w-4 h-4" /> New
            </motion.button>
            <motion.button
              className="flex items-center gap-1 text-sm text-indigo-600 font-medium bg-indigo-50 hover:bg-indigo-100 px-3 py-1 rounded-md transition-colors"
            >
              <Download className="w-4 h-4" /> Export
            </motion.button>
          </div>
        </div>
        <div className="p-6 font-mono text-sm text-slate-700 leading-relaxed overflow-auto max-h-[calc(100vh-180px)]">
          {renderAnimatedPrompt(displayedPrompt)}
        </div>
      </motion.div>
    </motion.div>
  );
}

function Scene18({ time }) {
  const titleOpacity = useTransform(time, [0, 0.5], [0, 1]);
  const titleY = useTransform(time, [0, 0.5], [20, 0]);

  const item1Opacity = useTransform(time, [0.8, 1.3], [0, 1]);
  const item1Y = useTransform(time, [0.8, 1.3], [10, 0]);

  const item2Opacity = useTransform(time, [1.8, 2.3], [0, 1]);
  const item2Y = useTransform(time, [1.8, 2.3], [10, 0]);

  const item3Opacity = useTransform(time, [2.8, 3.3], [0, 1]);
  const item3Y = useTransform(time, [2.8, 3.3], [10, 0]);

  const item4Opacity = useTransform(time, [3.8, 4.3], [0, 1]);
  const item4Y = useTransform(time, [3.8, 4.3], [10, 0]);

  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
        className="bg-white rounded-2xl shadow-xl p-8 md:p-10 lg:p-12 w-full max-w-2xl flex flex-col gap-6 border border-slate-200"
      >
        <motion.h2
          style={{ opacity: titleOpacity, translateY: titleY }}
          className="text-4xl font-bold text-indigo-700 text-center mb-4"
        >
          Troubleshooting Tips
        </motion.h2>

        <div className="flex flex-col gap-4">
          <motion.div
            style={{ opacity: item1Opacity, translateY: item1Y }}
            className="flex items-start gap-3 p-4 bg-indigo-50 rounded-lg border border-indigo-100 shadow-sm"
          >
            <Check className="w-6 h-6 text-indigo-600 mt-0.5 flex-shrink-0" />
            <p className="text-lg font-medium text-indigo-800">
              <span className="font-semibold mr-2">1.</span> Formatting Issues
            </p>
          </motion.div>

          <motion.div
            style={{ opacity: item2Opacity, translateY: item2Y }}
            className="flex items-start gap-3 p-4 bg-indigo-50 rounded-lg border border-indigo-100 shadow-sm"
          >
            <Check className="w-6 h-6 text-indigo-600 mt-0.5 flex-shrink-0" />
            <p className="text-lg font-medium text-indigo-800">
              <span className="font-semibold mr-2">2.</span> Token Limits
            </p>
          </motion.div>

          <motion.div
            style={{ opacity: item3Opacity, translateY: item3Y }}
            className="flex items-start gap-3 p-4 bg-indigo-50 rounded-lg border border-indigo-100 shadow-sm"
          >
            <Check className="w-6 h-6 text-indigo-600 mt-0.5 flex-shrink-0" />
            <p className="text-lg font-medium text-indigo-800">
              <span className="font-semibold mr-2">3.</span> Prompt Consistency
            </p>
          </motion.div>

          <motion.div
            style={{ opacity: item4Opacity, translateY: item4Y }}
            className="flex items-start gap-3 p-4 bg-indigo-50 rounded-lg border border-indigo-100 shadow-sm"
          >
            <Check className="w-6 h-6 text-indigo-600 mt-0.5 flex-shrink-0" />
            <p className="text-lg font-medium text-indigo-800">
              <span className="font-semibold mr-2">4.</span> Iterative Refinement
            </p>
          </motion.div>
        </div>
      </motion.div>
    </motion.div>
  );
}

function Scene19({ time }: { time: MotionValue<number> }) {
  const tip1Opacity = useTransform(time, [1.5, 2.5], [0, 1]);
  const tip2Opacity = useTransform(time, [8.5, 9.5], [0, 1]);
  const tip3Opacity = useTransform(time, [16.5, 17.5], [0, 1]);
  const tip4Opacity = useTransform(time, [24.5, 25.5], [0, 1]);

  const tips = [
    {
      icon: FileText,
      title: "Formatting Issues",
      description: "Copy-pasting text can lose formatting; use plain text or markdown.",
      opacity: tip1Opacity,
    },
    {
      icon: Folder,
      title: "Token Limits",
      description: "Large documents may need summarization or chunking before processing.",
      opacity: tip2Opacity,
    },
    {
      icon: Link,
      title: "Prompt Consistency",
      description: "Ensure your prompts clearly link previous outputs.",
      opacity: tip3Opacity,
    },
    {
      icon: Edit,
      title: "Iterative Refinement",
      description: "Don't expect perfect results first time; refine prompts based on output.",
      opacity: tip4Opacity,
    },
  ];

  return (
    <motion.div
      key="scene19"
      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="w-full max-w-2xl bg-white rounded-2xl shadow-xl p-8 flex flex-col gap-6">
        <h2 className="text-3xl font-bold text-slate-800 text-center mb-4">Troubleshooting Tips</h2>

        {tips.map((tip, index) => (
          <motion.div
            key={index}
            style={{ opacity: tip.opacity }}
            className="flex items-start gap-4 p-4 bg-slate-50 rounded-xl border border-slate-200"
          >
            <div className="flex-shrink-0 p-3 bg-indigo-500/10 rounded-full">
              <tip.icon className="w-6 h-6 text-indigo-600" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-slate-800">{tip.title}</h3>
              <p className="text-sm text-slate-600 mt-1">{tip.description}</p>
            </div>
          </motion.div>
        ))}
      </div>
    </motion.div>
  );
}

function Scene20({ time }) {
  const logoOpacity = useTransform(time, [0, 0.5], [0, 1]);
  const logoTranslateY = useTransform(time, [0, 0.5], [20, 0]);
  const headingOpacity = useTransform(time, [0.5, 1.0], [0, 1]);
  const item1Opacity = useTransform(time, [1.5, 2.0], [0, 1]);
  const item2Opacity = useTransform(time, [2.5, 3.0], [0, 1]);
  const item3Opacity = useTransform(time, [3.5, 4.0], [0, 1]);
  const item4Opacity = useTransform(time, [4.5, 5.0], [0, 1]);
  const ctaOpacity = useTransform(time, [5.5, 6.0], [0, 1]);

  const learnings = [
    "Map a complete classroom workflow",
    "Identify NotebookLM's role in document analysis",
    "Chain multiple AI tools together",
    "Create reusable templates",
  ];

  return (
    <motion.div
      key="scene20"
      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 text-slate-800"
    >
      <motion.div
        style={{ opacity: logoOpacity, translateY: logoTranslateY }}
        className="mb-8"
      >
        <ChannelLogo size={90} />
      </motion.div>

      <motion.h2
        style={{ opacity: headingOpacity }}
        className="text-3xl font-bold mb-6 text-center"
      >
        What We Covered
      </motion.h2>

      <div className="w-full max-w-md bg-white rounded-2xl shadow-xl p-6 mb-8 border border-slate-200">
        <ol className="list-decimal list-inside space-y-3 text-lg font-medium text-slate-700">
          <motion.li style={{ opacity: item1Opacity }}>
            {learnings[0]}
          </motion.li>
          <motion.li style={{ opacity: item2Opacity }}>
            {learnings[1]}
          </motion.li>
          <motion.li style={{ opacity: item3Opacity }}>
            {learnings[2]}
          </motion.li>
          <motion.li style={{ opacity: item4Opacity }}>
            {learnings[3]}
          </motion.li>
        </ol>
      </div>

      <motion.div
        style={{ opacity: ctaOpacity }}
        className="text-center text-xl font-semibold mb-4"
      >
        <p className="mb-2">
          Create custom AI tutorial videos like this one:
        </p>
        <p className="text-indigo-500 font-bold text-3xl">
          aiunwrap.com
        </p>
      </motion.div>
    </motion.div>
  );
}

// ─── Channel Logo ─────────────────────────────────────────────────────────
function ChannelLogo({ size = 40 }: { size?: number }) {
  // Bulb rendered at 70% of 'size' (height) — more visually balanced with the
  // "AI Unwrap" text beside it, and reduces the optical off-centre caused by
  // the bulb's left-side petals when the logo is flex-centred on a scene.
  const iconH = Math.round(size * 0.7);
  const iconW = Math.round(size * 0.5);
  const gap = Math.round(size * 0.12);
  // Optical-centering spacer: when the logo is rendered large (title/outro),
  // add an invisible mirror of the bulb on the right so the "AI Unwrap" text
  // becomes the true geometric centre of the flex row — this way it vertically
  // aligns with other centred text below it. Skipped for small corner watermarks.
  const balance = size >= 60;
  return (
    <div dir="ltr" style={{ display: "flex", alignItems: "center", gap: gap, paddingLeft: balance ? gap : 0 }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="4 4 118 152" 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>
      {balance && <div aria-hidden="true" style={{ width: iconW + "px", marginLeft: -gap + "px", flexShrink: 0 }} />}
    </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} />}
          {sceneIndex === 20 && <Scene20 time={time} />}
        </SceneErrorBoundary>
      </AnimatePresence>
    </div>
  );
}</article></body></html>

BUILD YOUR AI TEACHING WORKFLOW IN 6 STEPS!

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

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