import React, { useState, useMemo } from 'react'; import { useVideoState } from './useVideoState'; import { motion, useTransform, AnimatePresence, useMotionValue, useMotionValueEvent, type MotionValue } from 'framer-motion'; import { Bot, Brain, Check, Code, Eye, Menu, MessageSquare, MousePointer2, Search, Send, Settings, Share, Sparkles, Table, Terminal, User, X } from 'lucide-react'; import { Area, Bar, Cell, LineChart, Tooltip } from 'recharts'; // ─── Scene Components ───────────────────────────────────────────────────── function Scene0({ time }: { time: MotionValue }) { return (

5 POWERFUL FINANCIAL MODELS YOU CAN BUILD WITH AI RIGHT NOW!

AI Assistant

Spreadsheet

); } function Scene1({ time }) { const itemFadeInDuration = 0.6; // Duration for each item to fade in // Opacity and Y transforms for each item to appear progressively const item1Opacity = useTransform(time, [2.0, 2.0 + itemFadeInDuration], [0, 1]); const item1Y = useTransform(time, [2.0, 2.0 + itemFadeInDuration], [20, 0]); const item2Opacity = useTransform(time, [5.5, 5.5 + itemFadeInDuration], [0, 1]); const item2Y = useTransform(time, [5.5, 5.5 + itemFadeInDuration], [20, 0]); const item3Opacity = useTransform(time, [8.5, 8.5 + itemFadeInDuration], [0, 1]); const item3Y = useTransform(time, [8.5, 8.5 + itemFadeInDuration], [20, 0]); const item4Opacity = useTransform(time, [11.5, 11.5 + itemFadeInDuration], [0, 1]); const item4Y = useTransform(time, [11.5, 11.5 + itemFadeInDuration], [20, 0]); const item5Opacity = useTransform(time, [14.5, 14.5 + itemFadeInDuration], [0, 1]); const item5Y = useTransform(time, [14.5, 14.5 + itemFadeInDuration], [20, 0]); // Define Wallet component locally to resolve "Wallet is not defined" error const Wallet = ({ size = 24, strokeWidth = 2, ...props }) => ( ); const listItems = [ { icon: Sparkles, title: "Cash Flow Projections", description: "Generate detailed forecasts with AI prompts", opacity: item1Opacity, y: item1Y, }, { icon: Brain, title: "Break-Even Analysis", description: "Get instant formulas for critical thresholds", opacity: item2Opacity, y: item2Y, }, { icon: Bot, title: "Budget Variance Tracker", description: "Automatically flag spending anomalies", opacity: item3Opacity, y: item3Y, }, { icon: LineChart, title: "Startup Runway Calculator", description: "Forecast burn rate and cash needs", opacity: item4Opacity, y: item4Y, }, { icon: Wallet, title: "Pricing Strategy Model", description: "Optimize profit margins with AI scenarios", opacity: item5Opacity, y: item5Y, }, ]; return (

What You'll Learn

{listItems.map((item, index) => (

{item.title}

{item.description}

))}

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

{/* Header */}

ChatGPT

{/* Chat History Area - Empty for this scene */}

Start a new conversation...

{/* Input Area */}

); } function Scene3({ time }) { // TIMING MAP: // [0.0s - 0.5s] Scene loads, ChatGPT interface shell appears. // [0.5s - 9.5s] Prompt text is typed character by character into the input box. // [9.0s - 9.5s] Send button fades in. const fullPromptText = "Generate a cash flow projection model for a small service business. Include columns for month, opening cash, revenue, operating expenses, capital expenditures, and closing cash. Provide example data for 6 months and suggest common assumptions."; const promptLength = fullPromptText.length; const charIndex = useTransform(time, [0.5, 9.5], [0, promptLength], { clamp: true }); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => { setDisplayedPrompt(fullPromptText.slice(0, Math.round(v))); }); const sendButtonOpacity = useTransform(time, [9.0, 9.5], [0, 1], { clamp: true }); return (

{/* Chat Header */}

Financial Model AI

{/* Main Chat Area - simplified, just a placeholder for now */}

Ready for your prompt...

{/* Input Area */}

{displayedPrompt} {/* Blinking cursor */}

); } function Scene4({ time }) { const tableData = [ { month: 'Jan', opening: 10000, revenue: 5000, expenses: 3000, net: 2000, closing: 12000 }, { month: 'Feb', opening: 12000, revenue: 5500, expenses: 3200, net: 2300, closing: 14300 }, { month: 'Mar', opening: 14300, revenue: 6000, expenses: 3500, net: 2500, closing: 16800 }, { month: 'Apr', opening: 16800, revenue: 5800, expenses: 3100, net: 2700, closing: 19500 }, { month: 'May', opening: 19500, revenue: 6200, expenses: 3400, net: 2800, closing: 22300 }, { month: 'Jun', opening: 22300, revenue: 6500, expenses: 3600, net: 2900, closing: 25200 }, ]; const assumptions = [ 'Monthly Revenue Growth Rate', 'Monthly Expense Growth Rate', 'Starting Cash Balance', 'Tax Rate & Payment Schedule', ]; return (

{/* ChatGPT Header */}

{/* Replaced with an inline SVG */}

ChatGPT

GPT-4 Turbo

{/* Chat Content Area */}

{/* User Prompt */}

{'Generate a 6-month cash flow projection with example data and assumptions.'}

{/* AI Response - Table & Assumptions */}

Cash Flow Projection

{tableData.map((row, index) => ( ))}

Month	Opening Cash	Revenue	Expenses	Net Flow	Closing Cash
{row.month}	{'$'}{row.opening.toLocaleString()}	{'$'}{row.revenue.toLocaleString()}	{'$'}{row.expenses.toLocaleString()}	{'$'}{row.net.toLocaleString()}	{'$'}{row.closing.toLocaleString()}

Common Assumptions:

{item}

{/* Input bar placeholder */}

); } function Scene5({ time }: { time: MotionValue }) { // AI icon opacity animation, appearing when AI assistants are mentioned const aiIconOpacity = useTransform(time, [11.2, 11.7], [0, 1]); // Data for the spreadsheet cells const financialData = [ { label: 'Fixed Costs', value: '$10,000' }, { label: 'Variable Cost Per Unit', value: '$5' }, { label: 'Selling Price Per Unit', value: '$15' }, ]; return ( {/* Spreadsheet Application Container */}

{/* Top Bar - Mock Spreadsheet Menus */}

File Edit View Insert Format Data Tools Extensions

Break-Even Analysis

{/* Formula Bar */}

{/* Spreadsheet Grid */}

{/* Column Headers */}

{['A', 'B', 'C', 'D'].map((col, i) => (

{col}

))} {/* Row Headers and Data Cells */} {Array.from({ length: 5 }).map((_, rowIndex) => ( {/* Row Header */}

{rowIndex + 1}

{/* Data Cells */} {Array.from({ length: 4 }).map((_, colIndex) => { const cellKey = `cell-${rowIndex}-${colIndex}`; let content = ''; let cellClassName = 'flex items-center px-3 border-b border-r border-slate-200 bg-white text-slate-800'; // Populate specific cells with financial data if (rowIndex < financialData.length) { if (colIndex === 0) { // Label column content = financialData[rowIndex].label; cellClassName += ' font-medium'; } else if (colIndex === 1) { // Value column content = financialData[rowIndex].value; cellClassName += ' text-right font-mono'; } } return (

{content}

); })} ))}

{/* AI Assistant Icon/Button */} ); } function Scene6({ time }) { // Animations for cursor highlight on the target cell const cursorOpacity = useTransform(time, [2.5, 2.7, 2.8, 3.0], [0, 1, 1, 0]); // Quick blink/highlight const cursorScale = useTransform(time, [2.5, 2.7], [1, 1.02]); // AI Helper sidebar animation const aiHelperX = useTransform(time, [3.0, 3.5], ["100%", "0%"]); const aiHelperOpacity = useTransform(time, [3.0, 3.5], [0, 1]); // Formula suggestion text typing effect in AI Helper const fullFormulaText = "`=B1/(B3-B2)`"; // Using backticks to show it as code const formulaCharIndex = useTransform(time, [5.0, 7.0], [0, fullFormulaText.length]); const [displayedFormula, setDisplayedFormula] = useState(""); useMotionValueEvent(formulaCharIndex, "change", (v) => { setDisplayedFormula(fullFormulaText.slice(0, Math.round(v))); }); // Formula typing into the spreadsheet cell const finalFormulaText = "=B1/(B3-B2)"; const finalFormulaCharIndex = useTransform(time, [7.0, 8.5], [0, finalFormulaText.length]); const [displayedFinalFormula, setDisplayedFinalFormula] = useState(""); useMotionValueEvent(finalFormulaCharIndex, "change", (v) => { setDisplayedFinalFormula(finalFormulaText.slice(0, Math.round(v))); }); const aiHelperTitleOpacity = useTransform(time, [3.5, 4.0], [0, 1]); const aiHelperPromptOpacity = useTransform(time, [4.0, 4.5], [0, 1]); const aiHelperSuggestionOpacity = useTransform(time, [4.5, 5.0], [0, 1]); return ( {/* Main Spreadsheet Area */}

Financial Model

{/* Spreadsheet Grid Header */}

Metric

Value

{/* Spreadsheet Rows */}

Fixed Costs (B1)

$10,000

Variable Cost per Unit (B2)

$50

Selling Price per Unit (B3)

$150

{/* Break-Even Units Row - Target for AI */}

Break-Even Units

{/* This is the visual highlight, the actual formula appears in the div below */}

{displayedFinalFormula}

Profit (example)

{"=C4*(B3-B2)-B1"}

{/* AI Helper Sidebar */} AI Formula Helper

Prompt:

{"Help me write: `Break-even point in units`"}

Suggested Formula:

{displayedFormula}

Calculates units needed to cover fixed and variable costs.

); } function Scene7({ time }: { time: MotionValue }) { const [typedFormula, setTypedFormula] = useState(""); const fullFormula = "=B1/(1-(B2/B3))"; // Animations for visibility const unitsValueOpacity = useTransform(time, [0, 1], [0, 1]); const revenueCellHighlight = useTransform(time, [4, 5, 13, 14], [0, 1, 1, 0]); const aiTooltipOpacity = useTransform(time, [7, 7.5, 13, 13.5], [0, 1, 1, 0]); const revenueValueOpacity = useTransform(time, [13, 13.5], [0, 1]); // Cursor movement const cursorX = useTransform(time, [4, 5.5], ["35%", "35%"]); const cursorY = useTransform(time, [4, 5.5], ["58%", "68%"]); const cursorOpacity = useTransform(time, [0, 4, 14, 15], [0, 1, 1, 0]); // Formula typing effect const charCount = useTransform(time, [8, 12], [0, fullFormula.length]); useMotionValueEvent(charCount, "change", (v) => { setTypedFormula(fullFormula.slice(0, Math.round(v))); }); const rows = [ { label: "Fixed Costs", value: "$100,000", cell: "B1" }, { label: "Variable Cost / Unit", value: "$10.00", cell: "B2" }, { label: "Selling Price / Unit", value: "$30.00", cell: "B3" }, { label: "Break-Even Units", value: "5,000", cell: "B4", highlight: true }, { label: "Break-Even Revenue", value: "$150,000", cell: "B5", isTarget: true }, ]; return (

{/* Spreadsheet Header */}

{""}

{/* Spreadsheet Body */}

{/* Column Headers */}

{rows.map((row, i) => (

{i + 1}

{row.label}

{row.isTarget ? ( <> {row.value} ) : row.highlight ? ( {row.value} ) : ( row.value )}

))}

{/* AI Suggestion Tooltip */}

AI Formula Suggestion


              {typedFormula}

Esc to ignore

Tab to accept

{/* Cursor */}

{/* Accuracy Badge */}

Accuracy Validated {/* Formula Complexity Note */}

No Guesswork

Correct algebraic structure provided instantly.

Time Saved

Zero searching for complex financial formulas.

); } function Scene8({ time }) { const highlightOpacity = useTransform(time, [19.0, 20.0], [0, 1]); // Highlight appears during AI narration const highlightColor = useTransform(highlightOpacity, (o) => `rgba(252, 165, 165, {"$"}{"{"}o})`); // bg-red-300 with opacity const data = [ { category: 'Rent', budget: 1500, actual: 1500, over: false }, { category: 'Groceries', budget: 400, actual: 550, over: true }, { category: 'Utilities', budget: 150, actual: 180, over: true }, { category: 'Transport', budget: 100, actual: 90, over: false }, { category: 'Entertainment', budget: 200, actual: 350, over: true }, { category: 'Dining Out', budget: 150, actual: 120, over: false }, ]; const headerClasses = "px-4 py-2 text-left text-sm font-semibold text-slate-700 bg-slate-100 border-b border-slate-200"; const cellClasses = "px-4 py-2 text-sm text-slate-700 border-b border-slate-100"; const numberCellClasses = "text-right " + cellClasses; return (

Monthly Budget Tracker

Variance analysis for spending anomalies

{data.map((row, index) => ( {row.over ? ( ${row.actual.toFixed(2)} ) : ( )} ))}

Expense Category	Budget	Actual
{row.category}	{"$"}{row.budget.toFixed(2)}	{"$"}{row.actual.toFixed(2)}

AI-powered insights available

); } function Scene9({ time }: { time: MotionValue }) { // Column selection animation: briefly highlight all 'Actuals' cells const actualsCellSelectionProgress = useTransform(time, [3.7, 4.0, 4.2], [0, 1, 0]); const actualsCellSelectionBg = useTransform(actualsCellSelectionProgress, [0, 1], ['#ffffff', '#e0e7ff']); // white to indigo-100 // Highlighted cells (Groceries, Entertainment) after AI rule is applied const highlightCellsProgress = useTransform(time, [21.5, 22.0], [0, 1]); const groceriesCellBg = useTransform(highlightCellsProgress, [0, 1], [actualsCellSelectionBg, '#fee2e2']); // from current state to red-100 const entertainmentCellBg = useTransform(highlightCellsProgress, [0, 1], [actualsCellSelectionBg, '#fee2e2']); // from current state to red-100 // Sidebar slide-in animation const sidebarX = useTransform(time, [4.5, 5.0], [300, 0]); // AI prompt input opacity const promptInputOpacity = useTransform(time, [11.95, 12.45], [0, 1]); // Typing effect for the AI prompt const fullPromptText = "Highlight any actual expenses that are more than 10% above budget."; const charIndex = useTransform(time, [13.0, 21.0], [0, fullPromptText.length]); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => setDisplayedPrompt(fullPromptText.slice(0, Math.round(v)))); // AI suggested rule opacity const suggestedRuleOpacity = useTransform(time, [21.0, 21.5], [0, 1]); const spreadsheetData = [ { category: "Rent", budget: "$1,200", actuals: "$1,200", isHighlighted: false }, { category: "Utilities", budget: "$150", actuals: "$165", isHighlighted: false }, { category: "Groceries", budget: "$400", actuals: "$450", isHighlighted: true }, // Actual > Budget * 1.10 { category: "Transport", budget: "$100", actuals: "$95", isHighlighted: false }, { category: "Entertainment", budget: "$200", actuals: "$230", isHighlighted: true }, // Actual > Budget * 1.10 ]; return (

{/* Spreadsheet */}

{/* Header Row */}

Conditional Formatting

{/* AI Prompt Input */} {displayedPrompt} | {/* AI Suggested Rule */}

AI Suggestion

{'Actual > Budget * 1.10'}

Highlight in Red

More conditional formatting options...

); } function Scene10({ time }: { time: MotionValue }) { // Define the background color animation for highlighted cells const highlightBgColor = useTransform( time, [2.0, 4.0], // Animation starts at 2s, ends at 4s ["rgba(255, 255, 255, 0)", "rgba(252, 165, 165, 0.4)"] // From transparent to light red ); // Define data for the spreadsheet const data = [ { category: "Rent", budget: 1500, actual: 1500, overrun: false }, { category: "Groceries", budget: 400, actual: 500, overrun: true }, // 500/400 = 1.25 (25% overrun) { category: "Utilities", budget: 150, actual: 160, overrun: false }, // 160/150 = 1.066 (6.6% overrun, less than 10%) { category: "Entertainment", budget: 200, actual: 250, overrun: true }, // 250/200 = 1.25 (25% overrun) { category: "Transport", budget: 100, actual: 105, overrun: false }, // 105/100 = 1.05 (5% overrun, less than 10%) ]; const headers = ["Category", "Budget", "Actuals", "Difference"]; return (

Monthly Budget Analysis

{headers.map((header, index) => (

0 ? "text-right" : "text-left"}> {header}

))}

{data.map((row, rowIndex) => (

{row.category}

{"$"}{row.budget.toLocaleString()}

${row.actual.toLocaleString()}

0 ? "text-red-600" : "text-emerald-600"}`}> {row.actual - row.budget > 0 ? "+" : ""} {(row.actual - row.budget).toLocaleString()}

))}

* Highlighted in red if actual spending exceeds budget by more than 10%.

); } function Scene11({ time }: { time: MotionValue }) { // TIMING MAP: // [0.0s - 7.6s] "For our fourth use case, we're going to generate a simple startup runway calculator to forecast your burn rate." // [7.6s - 15.3s] "This is absolutely critical for any startup to manage cash flow and plan for fundraising." // [15.3s - 19.8s] "Once again, ChatGPT can provide an excellent starting point." return (

{/* Chat Header */}

ChatGPT

New Chat

{/* Chat History/Content Area - Simplified placeholder */}

{/* Example previous message (optional, just for context) */}

Can you help me build a simple financial model for a small business?

Certainly! I can help you with that. What kind of business is it, and what specific aspects of the financial model are you interested in?

{/* End of example */}

{/* Prompt Input Box */}

ChatGPT can make mistakes. Consider checking important information.

); } function Scene12({ time }) { const fullPrompt = "Create a startup runway calculator in a table format. Include columns for Month, Starting Cash, Monthly Revenue, Monthly Expenses (categorize into Salaries, Marketing, Operations), Net Burn, Ending Cash, and Months of Runway. Provide example data for 12 months, starting with $100,000 cash, $5,000 revenue, and $15,000 expenses. Suggest formulas for Net Burn, Ending Cash, and Months of Runway."; const typingStartTime = 2.9; const typingEndTime = 36.9; // Matches the end of prompt narration const charIndex = useTransform(time, [typingStartTime, typingEndTime], [0, fullPrompt.length], { clamp: true }); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => { setDisplayedPrompt(fullPrompt.slice(0, Math.round(v))); }); return (

{/* Chat Header */}

ChatGPT

{/* Chat Content Area (empty in this scene) */}

{/* Placeholder for future chat messages */}

Start a new conversation...

{/* Input Area */}

            <motion.button
              className="p-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <Send className="w-5 h-5" />
            </motion.button>
          </div>
          <p className="text-xs text-slate-400 mt-2 text-center">
            ChatGPT can make mistakes. Consider checking important information.
          </p>
        </div>
      </div>
    </motion.div>
  );
}

function Scene13({ time }) {
  const aiOptimizationOpacity = useTransform(time, [7.5, 8.5], [0, 1]); // Fade in "AI Optimized" tag

  const headerCells = [
    'Product',
    'Unit Cost',
    'Option 1 Price',
    'Option 1 Sales',
    'Option 1 Profit',
    'Option 2 Price',
    'Option 2 Sales',
    'Option 2 Profit',
  ];

  const dataRows = [
    ['Widget A', '$10.00', '$15.00', '10,000', '$50,000', '$18.00', '8,000', '$64,000'],
    ['Gadget B', '$25.00', '$35.00', '5,000', '$50,000', '$40.00', '4,200', '$63,000'],
    ['Doodad C', '$5.00', '$8.00', '20,000', '$60,000', '$9.50', '16,000', '$72,000'],
  ];

  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 p-8 bg-slate-50 overflow-hidden"
    >
      <div className="w-full max-w-5xl bg-white rounded-xl shadow-lg border border-slate-200 p-6 flex flex-col gap-6">
        {/* Spreadsheet Header */}
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold text-slate-800 flex items-center gap-3">
            Pricing Strategy Model
            <motion.span
              style={{ opacity: aiOptimizationOpacity }}
              className="flex items-center gap-2 text-base font-semibold text-emerald-600 bg-emerald-50 rounded-full px-3 py-1 shadow-sm"
            >
              <Sparkles className="w-4 h-4" /> AI Optimized
            </motion.span>
          </h2>
          <div className="flex items-center gap-2 text-slate-500">
            <Code className="w-5 h-5" />
            <Settings className="w-5 h-5" />
          </div>
        </div>

        {/* Spreadsheet Grid */}
        <div className="overflow-x-auto border border-slate-200 rounded-lg">
          <div className="grid grid-cols-8 text-sm font-semibold text-slate-700 bg-slate-100 p-2 gap-x-2 border-b border-slate-200">
            {headerCells.map((header, index) => (
              <div key={index} className="px-3 py-2 text-left">
                {header}
              </div>
            ))}
          </div>
          {dataRows.map((row, rowIndex) => (
            <div
              key={rowIndex}
              className={`grid grid-cols-8 text-sm text-slate-700 py-2 gap-x-2 ${
                rowIndex % 2 === 0 ? 'bg-white' : 'bg-slate-50'
              } ${rowIndex < dataRows.length - 1 ? 'border-b border-slate-100' : ''}`}
            >
              {row.map((cell, cellIndex) => (
                <div key={cellIndex} className="px-3 py-2 text-left">
                  {cell}
                </div>
              ))}
            </div>
          ))}
        </div>

        {/* Footer with summary or action */}
        <div className="flex justify-end text-sm text-slate-600 pt-4 border-t border-slate-100">
          <p>Last updated: Today, 10:30 AM</p>
        </div>
      </div>
    </motion.div>
  );
}

function Scene14({ time }: { time: MotionValue<number> }) {
  const highlightPriceCell = useTransform(time, [2.5, 3.0], [0, 1]); // Highlight Price Option 1 cell
  const aiSidebarOpacity = useTransform(time, [5.0, 5.5], [0, 1]);
  const aiSidebarX = useTransform(time, [5.0, 5.5], ['100%', '0%']);

  const Cell = ({ label, value, className = '', highlight }: { label?: string; value: string; className?: string; highlight?: MotionValue<number> }) => {
    // Create a stable MotionValue(0) if no highlight prop is provided
    // This ensures useTransform always receives a MotionValue, preventing the error.
    const defaultHighlight = useMemo(() => useMotionValue(0), []);
    const currentHighlight = highlight ?? defaultHighlight;

    return (
      <motion.div
        className={`flex items-center p-2 text-sm border border-slate-200 bg-white min-h-[40px] ${className}`}
        style={{
          backgroundColor: useTransform(currentHighlight, [0, 1], ['#ffffff', '#e0f2fe']), // bg-sky-50
          borderColor: useTransform(currentHighlight, [0, 1], ['#e2e8f0', '#0ea5e9']), // border-sky-500
        }}
      >
        {label && <span className="font-medium text-slate-600 mr-2">{label}</span>}
        <span className="text-slate-800">{value}</span>
      </motion.div>
    );
  };

  return (
    <motion.div
      key="scene14"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex overflow-hidden bg-slate-50 p-6 gap-6"
    >
      {/* Main Spreadsheet Area */}
      <div className="flex-1 flex flex-col bg-white rounded-xl shadow-lg border border-slate-100 overflow-hidden">
        {/* Spreadsheet Header */}
        <div className="flex items-center justify-between p-3 border-b border-slate-200 bg-slate-50">
          <div className="flex items-center gap-2">
            <Code className="w-4 h-4 text-slate-500" />
            <span className="font-semibold text-slate-700 text-sm">FinancialModel.xlsx</span>
          </div>
          <div className="flex items-center gap-3 text-slate-500">
            <Eye className="w-4 h-4" />
            <Terminal className="w-4 h-4" />
          </div>
        </div>

        {/* Spreadsheet Grid */}
        <div className="flex-1 grid grid-cols-[120px_minmax(100px,1fr)_minmax(100px,1fr)_minmax(100px,1fr)_minmax(100px,1fr)] grid-rows-[30px_repeat(6,minmax(40px,1fr))] p-px">
          {/* Column Headers */}
          <div className="flex items-center justify-center text-xs font-semibold text-slate-500 bg-slate-100 border border-slate-200"></div>
          <div className="flex items-center justify-center text-xs font-semibold text-slate-500 bg-slate-100 border border-slate-200">A</div>
          <div className="flex items-center justify-center text-xs font-semibold text-slate-500 bg-slate-100 border border-slate-200">B</div>
          <div className="flex items-center justify-center text-xs font-semibold text-slate-500 bg-slate-100 border border-slate-200">C</div>
          <div className="flex items-center justify-center text-xs font-semibold text-slate-500 bg-slate-100 border border-slate-200">D</div>

          {/* Row 1 */}
          <div className="flex items-center justify-center text-xs font-semibold text-slate-500 bg-slate-100 border border-slate-200">1</div>
          <Cell value="Product" className="font-semibold bg-slate-50" />
          <Cell value="Value" className="font-semibold bg-slate-50" />
          <Cell value="Scenario 2" className="font-semibold bg-slate-50" />
          <Cell value="Scenario 3" className="font-semibold bg-slate-50" />

          {/* Row 2 */}
          <div className="flex items-center justify-center text-xs font-semibold text-slate-500 bg-slate-100 border border-slate-200">2</div>
          <Cell value="Unit Cost" className="bg-slate-50" />
          <Cell value="$50" />
          <Cell value="" />
          <Cell value="" />

          {/* Row 3 */}
          <div className="flex items-center justify-center text-xs font-semibold text-slate-500 bg-slate-100 border border-slate-200">3</div>
          <Cell value="Sales Volume 1" className="bg-slate-50" />
          <Cell value="100 units" />
          <Cell value="" />
          <Cell value="" />

          {/* Row 4 */}
          <div className="flex items-center justify-center text-xs font-semibold text-slate-500 bg-slate-100 border border-slate-200">4</div>
          <Cell value="Price Option 1" className="bg-slate-50" />
          <Cell value="$100" highlight={highlightPriceCell} className="ring-2 ring-blue-500 ring-offset-1" />
          <Cell value="$75" />
          <Cell value="$125" />

          {/* Row 5 */}
          <div className="flex items-center justify-center text-xs font-semibold text-slate-500 bg-slate-100 border border-slate-200">5</div>
          <Cell value="Revenue 1" className="bg-slate-50" />
          <Cell value="=$B$3*$B$4" />
          <Cell value="=$B$3*C4" />
          <Cell value="=$B$3*D4" />

          {/* Row 6 */}
          <div className="flex items-center justify-center text-xs font-semibold text-slate-500 bg-slate-100 border border-slate-200">6</div>
          <Cell value="Profit 1" className="bg-slate-50" />
          <Cell value="=$B$5-($B$2*$B$3)" />
          <Cell value="=C5-($B$2*$B$3)" />
          <Cell value="=D5-($B$2*$B$3)" />
        </div>
      </div>

      {/* AI Suggestion Sidebar */}
      <motion.div
        className="w-80 flex-shrink-0 bg-indigo-700 text-white rounded-xl shadow-xl p-5 flex flex-col gap-4"
        style={{ opacity: aiSidebarOpacity, x: aiSidebarX }}
      >
        <div className="flex items-center gap-3">
          <Sparkles className="w-6 h-6 text-indigo-300" />
          <h3 className="text-lg font-semibold text-indigo-100">AI Pricing Assistant</h3>
        </div>
        <p className="text-indigo-200 text-sm leading-relaxed">
          Need help optimizing your product pricing? I can analyze your data and suggest scenarios.
        </p>
        <div className="bg-indigo-600 rounded-lg p-3 border border-indigo-500">
          <p className="text-indigo-100 text-sm font-medium mb-2">Suggested Action:</p>
          <p className="text-indigo-50 text-xs leading-snug">
            "Suggest optimal pricing for 20% profit margin, assuming variable sales volume based on price elasticity."
          </p>
        </div>
        <button className="flex items-center justify-center gap-2 bg-indigo-500 hover:bg-indigo-400 text-white text-sm font-medium py-2 px-4 rounded-lg transition-colors duration-200">
          <Bot className="w-4 h-4" />
          Generate Scenarios
        </button>
        <button className="flex items-center justify-center gap-2 bg-transparent border border-indigo-400 hover:bg-indigo-800 text-indigo-200 text-sm font-medium py-2 px-4 rounded-lg transition-colors duration-200">
          <MessageSquare className="w-4 h-4" />
          Open Chat
        </button>
      </motion.div>
    </motion.div>
  );
}

function Scene15({ time }) {
  const headers = ['Price Option', 'Assumed Sales Volume', 'Revenue', 'Profit'];
  const data = [
    { option: 'Basic', sales: '1,000', revenue: '$100,000', profit: '$30,000' },
    { option: 'Standard', sales: '800', revenue: '$120,000', profit: '$45,000' }, // Sweet spot
    { option: 'Premium', sales: '500', revenue: '$125,000', profit: '$40,000' },
  ];

  // Animation for general profit cell highlight (fade in, fade out)
  // Applies to all profit cells during the [8.0s - 10.0s] interval.
  const generalProfitHighlightBg = useTransform(
    time,
    [8.0, 9.0, 10.0],
    ['transparent', 'rgba(209, 250, 229, 0.5)', 'transparent'] // emerald-100 at 50% opacity
  );

  // Combined background animation for the 'Standard' (sweet spot) profit cell.
  // This transform incorporates both the general highlight and a stronger, pulsing highlight.
  const standardProfitCellBg = useTransform(time, v => {
    let color = 'transparent';

    // General highlight effect (active from 8.0s to 10.0s)
    if (v >= 8.0 && v < 10.0) {
      const progress = Math.min(1, Math.max(0, (v - 8.0) / 1.0)); // 1s fade in
      if (v < 9.0) {
        color = `rgba(209, 250, 229, ${0.5 * progress})`;
      } else { // 1s fade out
        color = `rgba(209, 250, 229, ${0.5 * (1 - (v - 9.0) / 1.0)})`;
      }
    }

    // Sweet spot pulse effect (active from 22.0s to 25.0s, overrides general if overlapping)
    if (v >= 22.0 && v <= 25.0) {
      const pulseDuration = 0.5; // Time for one fade-in or fade-out segment
      const cycleTime = v - 22.0; // Time elapsed since start of pulse animation
      const timeInPulseCycle = cycleTime % (pulseDuration * 2); // Time within a full 1s pulse cycle (in + out)

      let opacity = 0;
      if (timeInPulseCycle < pulseDuration) { // Fade in part of cycle
        opacity = timeInPulseCycle / pulseDuration;
      } else { // Fade out part of cycle
        opacity = 1 - (timeInPulseCycle - pulseDuration) / pulseDuration;
      }
      color = `rgba(209, 250, 229, ${Math.max(0, Math.min(1, opacity))})`; // emerald-100 at varying opacity
    }
    return color;
  });

  // Animation for "Assumed Sales Volume" text color (briefly darkens)
  const salesVolumeTextColor = useTransform(
    time,
    [18.9, 19.4, 21.0, 21.5],
    ['#64748b', '#0f172a', '#0f172a', '#64748b'] // slate-500 to slate-900 and back
  );

  return (
    <motion.div
      key="scene15"
      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="w-full max-w-4xl bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden">
        {/* Table Header */}
        <div className="grid grid-cols-4 bg-slate-100 font-semibold text-slate-700 border-b border-slate-200">
          {headers.map((header, index) => (
            <div key={index} className="p-4 text-sm">
              {header}
            </div>
          ))}
        </div>

        {/* Table Rows */}
        {data.map((row, rowIndex) => (
          <div key={rowIndex} className="grid grid-cols-4 border-b border-slate-100 last:border-b-0">
            {/* Price Option */}
            <div className="p-4 text-sm text-slate-800">
              {row.option}
            </div>
            {/* Assumed Sales Volume */}
            <motion.div
              className="p-4 text-sm text-slate-500"
              style={{ color: salesVolumeTextColor }}
            >
              {row.sales}
            </motion.div>
            {/* Revenue */}
            <div className="p-4 text-sm text-slate-800">
              {row.revenue}
            </div>
            {/* Profit */}
            <motion.div
              className="p-4 text-sm font-medium text-emerald-700 relative overflow-hidden"
              style={{
                // Apply specific animation for the sweet spot row, otherwise apply general highlight
                backgroundColor: rowIndex === 1 ? standardProfitCellBg : generalProfitHighlightBg
              }}
            >
              {row.profit}
            </motion.div>
          </div>
        ))}
      </div>
    </motion.div>
  );
}

function Scene16({ time }) {
  const item1Opacity = useTransform(time, [27.0, 27.5], [0, 1]);
  const item2Opacity = useTransform(time, [28.0, 28.5], [0, 1]);
  const item3Opacity = useTransform(time, [29.0, 29.5], [0, 1]);
  const item4Opacity = useTransform(time, [30.0, 30.5], [0, 1]);
  const item5Opacity = useTransform(time, [31.0, 31.5], [0, 1]);

  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 overflow-hidden"
    >
      <div className="w-full max-w-2xl bg-white rounded-2xl shadow-xl p-8 flex flex-col gap-6 items-center border border-slate-100">
        <h1 className="text-4xl font-extrabold text-indigo-700 text-center leading-tight">
          Reclaim Your Time with AI Financial Models!
        </h1>

        <hr className="w-full border-t border-slate-200" />

        <h2 className="text-2xl font-bold text-slate-800 self-start">
          Key Takeaways:
        </h2>

        <ul className="w-full flex flex-col gap-3 text-lg text-slate-700">
          <motion.li style={{ opacity: item1Opacity }} className="flex items-center gap-3">
            <Check className="text-emerald-500 flex-shrink-0" size={20} />
            <span>Cash Flow Projections in minutes</span>
          </motion.li>
          <motion.li style={{ opacity: item2Opacity }} className="flex items-center gap-3">
            <Check className="text-emerald-500 flex-shrink-0" size={20} />
            <span>Instant Break-Even Analysis</span>
          </motion.li>
          <motion.li style={{ opacity: item3Opacity }} className="flex items-center gap-3">
            <Check className="text-emerald-500 flex-shrink-0" size={20} />
            <span>Automated Budget Tracking</span>
          </motion.li>
          <motion.li style={{ opacity: item4Opacity }} className="flex items-center gap-3">
            <Check className="text-emerald-500 flex-shrink-0" size={20} />
            <span>Quick Runway Forecasts</span>
          </motion.li>
          <motion.li style={{ opacity: item5Opacity }} className="flex items-center gap-3">
            <Check className="text-emerald-500 flex-shrink-0" size={20} />
            <span>Smart Pricing Scenarios</span>
          </motion.li>
        </ul>
      </div>
    </motion.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} />}
        </SceneErrorBoundary>
      </AnimatePresence>
    </div>
  );
}</article></body></html>

Build a simple financial model in a spreadsheet with AI

Create Your Own Custom Tutorial