import React, { useState } from 'react'; import { useVideoState } from './useVideoState'; import { motion, useTransform, AnimatePresence, useMotionValue, useMotionValueEvent, type MotionValue } from 'framer-motion'; import { ArrowDownRight, ArrowUpRight, BarChart3, Bell, Bot, Brain, Check, ChevronRight, FileText, LayoutDashboard, LogOut, MessageSquare, Plus, Search, Send, Settings, Sparkles, TrendingUp, User, Wallet } from 'lucide-react'; import { Area, LineChart } from 'recharts'; // ─── Scene Components ───────────────────────────────────────────────────── function Scene0({ time }: { time: MotionValue }) { return (

TOP 5 AI WEALTH MANAGEMENT HACKS CHANGING THE GAME!

Unlock superior client outcomes and boost productivity with Artificial Intelligence.

); } function Scene1({ time }) { const titleOpacity = useTransform(time, [0, 0.5], [0, 1]); const titleY = useTransform(time, [0, 0.5], [20, 0]); const item1Opacity = useTransform(time, [1.0, 1.5], [0, 1]); const item1Y = useTransform(time, [1.0, 1.5], [20, 0]); const item2Opacity = useTransform(time, [2.0, 2.5], [0, 1]); const item2Y = useTransform(time, [2.0, 2.5], [20, 0]); const item3Opacity = useTransform(time, [3.0, 3.5], [0, 1]); const item3Y = useTransform(time, [3.0, 3.5], [20, 0]); const item4Opacity = useTransform(time, [4.0, 4.5], [0, 1]); const item4Y = useTransform(time, [4.0, 4.5], [20, 0]); const item5Opacity = useTransform(time, [5.0, 5.5], [0, 1]); const item5Y = useTransform(time, [5.0, 5.5], [20, 0]); const itemsData = [ { icon: Wallet, text: 'Automated Portfolios | Rebalance and tax-loss harvest at scale', opacity: item1Opacity, y: item1Y }, { icon: Check, text: 'Fraud & Compliance | Detect risks faster than ever', opacity: item2Opacity, y: item2Y }, { icon: Brain, text: 'Personalized Investing | ML-powered robo-advisors in action', opacity: item3Opacity, y: item3Y }, { icon: TrendingUp, text: 'Predictive Client Insights | Forecast behavior and boost retention', opacity: item4Opacity, y: item4Y }, { icon: BarChart3, text: 'Market Sentiment | AI for better timing and decisions', opacity: item5Opacity, y: item5Y }, ]; return ( What you'll learn

{itemsData.map((item, index) => ( {item.text} ))}

); } function Scene2({ time }) { // AI Assistant panel animation const aiPanelX = useTransform(time, [4.5, 5.5], ["100%", "0%"]); // Slides in from right const aiPanelOpacity = useTransform(time, [4.5, 5.5], [0, 1]); // Fades in // Highlighting animations for each section const highlightPortfolioOpacity = useTransform(time, [6.5, 7.0, 8.0, 8.5], [0, 1, 1, 0]); const highlightRebalancingOpacity = useTransform(time, [8.5, 9.0, 10.0, 10.5], [0, 1, 1, 0]); const highlightTaxLossOpacity = useTransform(time, [10.5, 11.0, 12.0, 12.5], [0, 1, 1, 0]); // Content for sections const portfolioData = [ { label: "Stocks", value: "45%" }, { label: "Bonds", value: "30%" }, { label: "Real Estate", value: "15%" }, { label: "Cash", value: "10%" }, ]; const rebalancingSuggestions = [ "Sell $5k SPY, Buy $5k BND", "Adjust target allocation for client J.Doe", "Review emerging markets exposure", ]; const taxLossOpportunities = [ "AAPL (Loss: $1,200)", "TSLA (Loss: $850)", "AMZN (Loss: $2,100)", ]; return ( {/* Main Dashboard Container */}

{/* Dashboard Header */}

Wealth Management Dashboard

{/* Dashboard Content Grid */}

{/* Portfolio Allocations */}

Portfolio Allocations

Allocation Chart Placeholder

{portfolioData.map((item, i) => (

{item.label}: {item.value}

))}

{/* Rebalancing Suggestions */}

Rebalancing Suggestions

{item}
Review client risk profile

{/* Tax-Loss Harvesting Opportunities */}

Tax-Loss Harvesting Opportunities

{taxLossOpportunities.map((item, i) => (

{item.split(' ')[0]} {item.split(': ')[1]}

))}

MSFT Loss: $980

GOOG Loss: $1,550

{/* AI Assistant Panel */}

AI Assistant

Hi there! I'm monitoring your clients' portfolios for optimal management.

Automated Portfolio Management and Tax-Loss Harvesting.

I've identified key areas for review and action.

); } function Scene3({ time }) { const fullPromptText = "Analyze all client portfolios for rebalancing needs based on target allocations and current market conditions. Prioritize tax-loss harvesting opportunities for accounts with realized gains, and generate a report of recommended trades for review."; const promptCharIndex = useTransform(time, [1.0, 8.0], [0, fullPromptText.length], { clamp: true }); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(promptCharIndex, "change", (v) => { setDisplayedPrompt(fullPromptText.slice(0, Math.round(v))); }); // Prompt box animation const promptBoxOpacity = useTransform(time, [0.0, 0.5, 8.5, 9.0], [0, 1, 1, 0], { clamp: true }); const promptBoxY = useTransform(time, [0.0, 0.5, 8.5, 9.0], [20, 0, 0, -20], { clamp: true }); // AI response cards animation const aiResponseOpacity = useTransform(time, [9.0, 10.0], [0, 1], { clamp: true }); const aiResponseY = useTransform(time, [9.0, 10.0], [20, 0], { clamp: true }); // Cursor animation for typing const cursorOpacity = useTransform(time, [7.9, 8.0], [1, 0], { clamp: true }); // Cursor disappears after typing const cursorBlink = useTransform(time, (t) => (Math.floor(t * 5) % 2 === 0 ? 1 : 0)); // Blinks 5 times per second return ( {/* Sidebar */}

AI Wealth

Log Out

{/* Main Content Area */}

{/* Header */}

{/* Content Area */}

{/* Initial Dashboard Cards (always present, but get covered by prompt overlay then AI response cards) */}

Portfolio Overview

$12.5M 1.2% Today

Total AUM across all clients.

Market Insights

Recent trends and analyst reports.

{/* AI Prompt Input Overlay */}

AI Assistant

{displayedPrompt} v * cursorBlink.get()) }} // Combine cursor fade-out and blink className="inline-block w-2 h-6 bg-indigo-500 align-text-bottom ml-1" />

{/* AI Response Cards - appear after prompt is 'sent' and overlay fades */}

Tax-Loss Harvesting Opportunities

Sell XYZ (-$500 loss) to offset ABC gain.
Sell LMN (-$200 loss) to offset DEF gain.
Review client ID #123, #456 for immediate action.

Identified 3 opportunities across 2 portfolios.

Recommended Trades

Buy SPG (200 shares) for client #123.
Sell AMC (50 shares) for client #456.
Adjust bond allocation for client #789.

Generated 8 rebalancing trades for review.

); } function Scene4({ time }: { time: MotionValue }) { // Animation for the main title const titleOpacity = useTransform(time, [1.0, 2.5], [0, 1]); // Animations for transactions appearing in groups const transaction1Opacity = useTransform(time, [2.5, 3.0], [0, 1]); const transaction1Y = useTransform(time, [2.5, 3.0], [20, 0]); const transaction2Opacity = useTransform(time, [2.7, 3.2], [0, 1]); const transaction2Y = useTransform(time, [2.7, 3.2], [20, 0]); const transaction3Opacity = useTransform(time, [2.9, 3.4], [0, 1]); const transaction3Y = useTransform(time, [2.9, 3.4], [20, 0]); const transaction4Opacity = useTransform(time, [4.5, 5.0], [0, 1]); const transaction4Y = useTransform(time, [4.5, 5.0], [20, 0]); const transaction5Opacity = useTransform(time, [4.7, 5.2], [0, 1]); const transaction5Y = useTransform(time, [4.7, 5.2], [20, 0]); // Flagged transaction 1 and its popup const flaggedTransaction1Opacity = useTransform(time, [6.0, 6.5], [0, 1]); const flaggedTransaction1Y = useTransform(time, [6.0, 6.5], [20, 0]); const flag1IndicatorOpacity = useTransform(time, [6.5, 6.8], [0, 1]); const flag1IndicatorScale = useTransform(time, [6.5, 6.8], [0.8, 1]); const popup1Opacity = useTransform(time, [6.8, 7.3], [0, 1]); // Flagged transaction 2 and its popup const flaggedTransaction2Opacity = useTransform(time, [7.5, 8.0], [0, 1]); const flaggedTransaction2Y = useTransform(time, [7.5, 8.0], [20, 0]); const flag2IndicatorOpacity = useTransform(time, [8.0, 8.3], [0, 1]); const flag2IndicatorScale = useTransform(time, [8.0, 8.3], [0.8, 1]); const popup2Opacity = useTransform(time, [8.3, 8.8], [0, 1]); // Helper for rendering a single transaction row const renderTransaction = (opacity: MotionValue, translateY: MotionValue, description: string, amount: string, type: 'deposit' | 'withdrawal', flagged = false, flagText = "") => (

{type === 'deposit' ? ( ) : ( )}

{description}

2023-10-26

{amount}

{flagged && ( {flagText} )}

); return (

{/* Header */}

Compliance Dashboard

Enhanced Compliance & Fraud Detection

{/* Transaction Feed */}

{/* This is the positioning context for popups */} {renderTransaction(transaction1Opacity, transaction1Y, "Salary Deposit", "$5,000.00", "deposit")} {renderTransaction(transaction2Opacity, transaction2Y, "Online Shopping", "-$120.50", "withdrawal")} {renderTransaction(transaction3Opacity, transaction3Y, "Investment Purchase", "-$2,500.00", "withdrawal")} {renderTransaction(transaction4Opacity, transaction4Y, "Utility Bill Payment", "-$85.00", "withdrawal")} {renderTransaction(transaction5Opacity, transaction5Y, "ATM Withdrawal", "-$300.00", "withdrawal")} {/* Flagged Transactions */} {renderTransaction(flaggedTransaction1Opacity, flaggedTransaction1Y, "Large Fund Transfer (Intl)", "-$500,000.00", "withdrawal", true, "High Risk")} {/* Pop-up for the first flagged item */}

AI Alert:

Unusual transaction size & destination for this account. Review required.

{renderTransaction(flaggedTransaction2Opacity, flaggedTransaction2Y, "Frequent Small Deposits", "$1,500.00", "deposit", true, "Compliance Alert")} {/* Pop-up for the second flagged item */}

ML Insight:

Multiple small deposits from varied sources. Potential layering pattern.

{/* Footer */}

Last updated: just now

); } function Scene5({ time }) { // TIMING MAP: // [0.0s - 0.5s] Scene setup: Background transaction feed visible. Prompt input box appears from bottom. // [0.5s - 1.5s] Narration: "An AI prompt for this might be:" (4 words ~1.6s) - Prompt box is ready. // [1.5s - 8.0s] Narration continues as prompt types: "Review all client transactions from the past quarter for potential compliance breaches related to 'AML regulations' and 'insider trading rules'. Focus on unusual large transfers or trades made just before public announcements. Generate a risk score for each flagged activity." (62 words ~24.8s) // - Typewriter effect for the full prompt text happens from 1.5s to 8.0s. // [8.0s - 9.0s] Prompt submission: Send button animates. Prompt input box content is 'sent'. // [9.0s - 12.0s] Narration: "You'll see the system immediately highlights suspicious transactions, providing context and a risk score." (16 words ~6.4s + 0.5s pause = 6.9s) // - Transaction list transitions: original items fade out (9.0s-9.5s), new "flagged" items with risk scores fade in (9.5s-10.5s). // [12.0s - 18.0s] Narration: "What makes this useful is that it allows compliance officers to focus on genuine threats, rather than sifting through mountains of data, significantly reducing regulatory risk for the firm." (38 words ~15.2s + 0.5s pause = 15.7s) // - Final flagged transactions remain visible. const fullPromptText = "Review all client transactions from the past quarter for potential compliance breaches related to 'AML regulations' and 'insider trading rules'. Focus on unusual large transfers or trades made just before public announcements. Generate a risk score for each flagged activity."; const charIndex = useTransform(time, [1.5, 8.0], [0, fullPromptText.length], { clamp: true }); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => { setDisplayedPrompt(fullPromptText.slice(0, Math.round(v))); }); const promptBoxY = useTransform(time, [0, 0.5], [200, 0], { clamp: true }); // Animate from below const promptBoxOpacity = useTransform(time, [0, 0.5], [0, 1], { clamp: true }); const sendButtonScale = useTransform(time, [8.0, 8.2, 8.5], [1, 1.1, 1], { clamp: true }); const sendButtonOpacity = useTransform(time, [8.0, 8.5], [1, 0.5], { clamp: true }); const initialTransactionsOpacity = useTransform(time, [9.0, 9.5], [1, 0], { clamp: true }); const flaggedTransactionsOpacity = useTransform(time, [9.5, 10.5], [0, 1], { clamp: true }); const initialTransactions = [ { id: 1, client: "Alice Johnson", amount: "$12,500", date: "2024-03-10", type: "Purchase" }, { id: 2, client: "Bob Williams", amount: "$50,000", date: "2024-03-15", type: "Transfer" }, { id: 3, client: "Carol Davis", amount: "$2,000", date: "2024-03-20", type: "Withdrawal" }, { id: 4, client: "David Lee", amount: "$150,000", date: "2024-03-22", type: "Investment" }, { id: 5, client: "Eve Green", amount: "$7,000", date: "2024-03-25", type: "Deposit" }, ]; const flaggedTransactions = [ { id: 1, client: "Alice Johnson", amount: "$12,500", date: "2024-03-10", type: "Purchase", flagged: false }, { id: 2, client: "Bob Williams", amount: "$50,000", date: "2024-03-15", type: "Transfer", flagged: true, risk: "High (8.5)", context: "Large transfer just before acquisition announcement.", }, { id: 3, client: "Carol Davis", amount: "$2,000", date: "2024-03-20", type: "Withdrawal", flagged: false }, { id: 4, client: "David Lee", amount: "$150,000", date: "2024-03-22", type: "Investment", flagged: true, risk: "Medium (6.2)", context: "Unusual investment timing related to market news.", }, { id: 5, client: "Eve Green", amount: "$7,000", date: "2024-03-25", type: "Deposit", flagged: false }, ]; return ( {/* Main Content Area - Transaction Feed */}

Client Transactions Overview

{/* Transaction list container */}

{/* Initial Transactions */} {initialTransactions.map((tx) => (

{tx.client} {tx.type} - {tx.date}

{tx.amount}

))} {/* Flagged Transactions */} {flaggedTransactions.map((tx) => (

{tx.flagged && } {tx.client}

{tx.amount}

{tx.type} - {tx.date} {tx.flagged && Risk: {tx.risk}}

{tx.flagged &&

{tx.context}

}

))}

{/* Prompt Input Box */}

AI Compliance Assistant

          <motion.button
            style={{ scale: sendButtonScale, opacity: sendButtonOpacity }}
            className="absolute bottom-3 right-3 p-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition-colors duration-200"
          >
            <Send className="w-5 h-5" />
          </motion.button>
        </div>
      </motion.div>
    </motion.div>
  );
}

function Scene6({ time }: { time: MotionValue<number> }) {
  // Step 1: Risk Assessment - Active then Complete
  const step1ActiveProgress = useTransform(time, [5.5, 6.0], [0, 1], { clamp: true });
  const step1CompleteProgress = useTransform(time, [8.0, 8.5], [0, 1], { clamp: true });

  // Step 2: Goal Setting - Active then Complete
  const step2ActiveProgress = useTransform(time, [8.5, 9.0], [0, 1], { clamp: true });
  const step2CompleteProgress = useTransform(time, [10.5, 11.0], [0, 1], { clamp: true });

  // Step 3: Portfolio Recommendation - Active
  const step3ActiveProgress = useTransform(time, [11.0, 11.5], [0, 1], { clamp: true });
  const portfolioDetailsOpacity = useTransform(time, [12.0, 12.5], [0, 1], { clamp: true });

  // Progress bar width
  const rawProgressBarWidth = useTransform(
    time,
    [5.5, 8.0, 8.5, 10.5, 11.0, 12.0],
    [0, 33, 33, 66, 66, 100],
    { clamp: true }
  );
  const progressBarWidth = useTransform(rawProgressBarWidth, (v) => `{"$"}{"{"}v}%`);

  // Step indicator colors
  const step1Color = useTransform(step1CompleteProgress, [0, 1], ["#cbd5e1", "#34d399"]); // slate-300 to emerald-500
  const step2Color = useTransform(step2CompleteProgress, [0, 1], ["#cbd5e1", "#34d399"]); // slate-300 to emerald-500
  const step3Color = useTransform(step3ActiveProgress, [0, 1], ["#cbd5e1", "#4f46e5"]); // slate-300 to indigo-600

  // Step text colors
  const step1TextColor = useTransform(step1ActiveProgress, [0, 1], ["#64748b", "#1e293b"]); // slate-500 to slate-900
  const step2TextColor = useTransform(step2ActiveProgress, [0, 1], ["#64748b", "#1e293b"]);
  const step3TextColor = useTransform(step3ActiveProgress, [0, 1], ["#64748b", "#1e293b"]);

  // Content opacities for different steps
  const riskContentOpacity = useTransform(time, [5.5, 6.0, 8.0, 8.5], [0, 1, 1, 0], { clamp: true });
  const goalContentOpacity = useTransform(time, [8.5, 9.0, 10.5, 11.0], [0, 1, 1, 0], { clamp: true });
  const portfolioContentOpacity = useTransform(time, [11.0, 11.5], [0, 1], { clamp: true });

  return (
    <motion.div
      key="scene6"
      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"
    >
      <motion.div
        className="w-full max-w-2xl bg-white rounded-2xl shadow-xl p-8 flex flex-col gap-6"
        initial={{ y: 20, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ delay: 0.2, duration: 0.5 }}
      >
        {/* Header */}
        <div className="flex items-center justify-between border-b border-slate-200 pb-4 mb-4">
          <h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
            <Sparkles className="w-7 h-7 text-indigo-500" /> Robo-Advisor
          </h2>
          <button className="flex items-center gap-2 text-indigo-600 hover:text-indigo-700 text-sm font-semibold">
            <Settings className="w-4 h-4" /> Settings
          </button>
        </div>

        {/* Progress Steps */}
        <div className="flex justify-between items-center relative mb-6">
          <div className="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-0.5 bg-slate-200 z-0"></div>
          <motion.div
            className="absolute left-0 top-1/2 -translate-y-1/2 h-0.5 bg-indigo-400 z-10"
            style={{ width: progressBarWidth }}
          />

          {/* Step 1 */}
          <div className="flex flex-col items-center gap-2 relative z-20">
            <motion.div
              className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-md"
              style={{ backgroundColor: step1Color }}
            >
              <motion.span style={{ opacity: step1CompleteProgress }}><Check className="w-4 h-4" /></motion.span>
              <motion.span style={{ opacity: useTransform(step1CompleteProgress, [0, 1], [1, 0]) }}>1</motion.span>
            </motion.div>
            <motion.span className="text-sm font-semibold" style={{ color: step1TextColor }}>Risk Assessment</motion.span>
          </div>

          {/* Step 2 */}
          <div className="flex flex-col items-center gap-2 relative z-20">
            <motion.div
              className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-md"
              style={{ backgroundColor: step2Color }}
            >
              <motion.span style={{ opacity: step2CompleteProgress }}><Check className="w-4 h-4" /></motion.span>
              <motion.span style={{ opacity: useTransform(step2CompleteProgress, [0, 1], [1, 0]) }}>2</motion.span>
            </motion.div>
            <motion.span className="text-sm font-semibold" style={{ color: step2TextColor }}>Goal Setting</motion.span>
          </div>

          {/* Step 3 */}
          <div className="flex flex-col items-center gap-2 relative z-20">
            <motion.div
              className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-md"
              style={{ backgroundColor: step3Color }}
            >
              3
            </motion.div>
            <motion.span className="text-sm font-semibold" style={{ color: step3TextColor }}>Portfolio</motion.span>
          </div>
        </div>

        {/* Content Area */}
        <div className="flex-1 min-h-[200px] relative overflow-hidden">
          {/* Risk Assessment Content */}
          <motion.div
            className="absolute inset-0 flex flex-col items-center justify-center gap-4 p-4 text-center"
            style={{ opacity: riskContentOpacity, pointerEvents: useTransform(riskContentOpacity, v => v > 0 ? "auto" : "none") }}
          >
            <LineChart className="w-12 h-12 text-indigo-400" />
            <h3 className="text-xl font-semibold text-slate-700">Assess Your Risk Tolerance</h3>
            <p className="text-slate-500 text-sm">Answer a few questions to understand your investment comfort level.</p>
            <div className="w-2/3 h-2 bg-slate-200 rounded-full my-2 relative">
              <div className="absolute left-0 top-0 h-full w-1/2 bg-indigo-500 rounded-full"></div>
              <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-indigo-700 rounded-full shadow-md"></div>
            </div>
            <button className="px-5 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700">Start Assessment</button>
          </motion.div>

          {/* Goal Setting Content */}
          <motion.div
            className="absolute inset-0 flex flex-col items-center justify-center gap-4 p-4 text-center"
            style={{ opacity: goalContentOpacity, pointerEvents: useTransform(goalContentOpacity, v => v > 0 ? "auto" : "none") }}
          >
            <Wallet className="w-12 h-12 text-emerald-400" />
            <h3 className="text-xl font-semibold text-slate-700">Define Your Financial Goals</h3>
            <p className="text-slate-500 text-sm">What are you saving for? Retirement, home, or something else?</p>
            <div className="w-2/3 flex flex-col gap-2">
              <input type="text" placeholder="Goal Name (e.g., Retirement)" className="p-2 border border-slate-200 rounded-md text-sm" />
              <input type="number" placeholder="Target Amount" className="p-2 border border-slate-200 rounded-md text-sm" />
            </div>
            <button className="px-5 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700">Set Goals</button>
          </motion.div>

          {/* Portfolio Recommendation Content */}
          <motion.div
            className="absolute inset-0 flex flex-col justify-start gap-4 p-4"
            style={{ opacity: portfolioContentOpacity, pointerEvents: useTransform(portfolioContentOpacity, v => v > 0 ? "auto" : "none") }}
          >
            <BarChart3 className="w-12 h-12 text-purple-400 self-center mb-2" />
            <h3 className="text-xl font-semibold text-slate-700 text-center">Your Personalized Portfolio</h3>
            <p className="text-slate-500 text-sm text-center">Based on your profile, we recommend the following allocation:</p>

            <motion.div
              className="grid grid-cols-2 gap-4 mt-4"
              style={{ opacity: portfolioDetailsOpacity }}
            >
              <div className="bg-slate-50 p-4 rounded-lg flex flex-col gap-1 shadow-sm border border-slate-100">
                <span className="text-sm font-medium text-slate-700">Vanguard S&P 500 ETF (VOO)</span>
                <span className="text-xs text-indigo-600 font-semibold">50% Equity</span>
                <span className="text-xs text-slate-500">Large-cap US stocks</span>
              </div>
              <div className="bg-slate-50 p-4 rounded-lg flex flex-col gap-1 shadow-sm border border-slate-100">
                <span className="text-sm font-medium text-slate-700">iShares Core U.S. Aggregate Bond ETF (AGG)</span>
                <span className="text-xs text-emerald-600 font-semibold">30% Bonds</span>
                <span className="text-xs text-slate-500">Investment-grade bonds</span>
              </div>
              <div className="bg-slate-50 p-4 rounded-lg flex flex-col gap-1 shadow-sm border border-slate-100">
                <span className="text-sm font-medium text-slate-700">Vanguard Total International Stock ETF (VXUS)</span>
                <span className="text-xs text-orange-600 font-semibold">15% International Equity</span>
                <span className="text-xs text-slate-500">Developed & emerging markets</span>
              </div>
              <div className="bg-slate-50 p-4 rounded-lg flex flex-col gap-1 shadow-sm border border-slate-100">
                <span className="text-sm font-medium text-slate-700">SPDR Gold Shares (GLD)</span>
                <span className="text-xs text-yellow-600 font-semibold">5% Commodities</span>
                <span className="text-xs text-slate-500">Gold exposure</span>
              </div>
            </motion.div>
            <motion.button
              className="px-6 py-2 bg-purple-600 text-white rounded-lg text-base font-medium hover:bg-purple-700 mt-6 self-center"
              style={{ opacity: portfolioDetailsOpacity }}
            >
              Confirm Portfolio
            </motion.button>
          </motion.div>
        </div>
      </motion.div>
    </motion.div>
  );
}

function Scene7({ time }) {
  const fullPrompt = "Design an optimized investment portfolio for a new client with a 'moderate-aggressive' risk tolerance, a '15-year' retirement savings goal, and 'existing 401k assets'. Recommend a diversified ETF-based strategy with a focus on sustainable growth.";
  const promptCharIndex = useTransform(time, [1.5, 12.0], [0, fullPrompt.length], { clamp: true });
  const [displayedPrompt, setDisplayedPrompt] = useState("");

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

  const promptBoxOpacity = useTransform(time, [0.0, 1.0], [0, 1], { clamp: true });
  const portfolioOpacity = useTransform(time, [12.0, 13.0], [0, 1], { clamp: true });
  const portfolioScale = useTransform(time, [12.0, 13.0], [0.8, 1], { clamp: true });
  const portfolioY = useTransform(time, [12.0, 13.0], [20, 0], { clamp: true });

  return (
    <motion.div
      key="scene7"
      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-3xl bg-white shadow-xl rounded-2xl p-8 flex flex-col gap-6 border border-slate-200">
        {/* Robo-advisor header placeholder */}
        <div className="flex items-center justify-between pb-4 border-b border-slate-100">
          <div className="flex items-center gap-2">
            <Sparkles className="w-6 h-6 text-indigo-500" />
            <span className="text-xl font-bold text-slate-800">WealthAI</span>
          </div>
          <div className="flex items-center gap-4">
            <Search className="w-5 h-5 text-slate-500" />
            <Bell className="w-5 h-5 text-slate-500" />
            <User className="w-5 h-5 text-slate-500" />
          </div>
        </div>

        {/* Main content area - Prompt input */}
        <motion.div
          style={{ opacity: promptBoxOpacity }}
          className="flex flex-col gap-4"
        >
          <div className="text-lg font-semibold text-slate-700">Client Portfolio Designer</div>
          <div className="relative flex items-center border border-indigo-300 rounded-xl bg-indigo-50/50 p-4 shadow-sm">
            <Bot className="w-6 h-6 text-indigo-500 flex-shrink-0 mr-3" />
            <span className="flex-1 text-base text-indigo-800 font-medium whitespace-pre-wrap">
              {displayedPrompt}
              {time.get() > 1.5 && time.get() < 12.0 && (
                <motion.span
                  animate={{ opacity: [0, 1, 0, 1] }}
                  transition={{ duration: 0.8, repeat: Infinity }}
                  className="inline-block w-2 h-5 bg-indigo-500 ml-1 align-bottom"
                />
              )}
            </span>
            <Send className="w-5 h-5 text-indigo-500 cursor-pointer ml-3 flex-shrink-0" />
          </div>
        </motion.div>

        {/* Portfolio Result */}
        <motion.div
          style={{ opacity: portfolioOpacity, scale: portfolioScale, y: portfolioY }}
          className="mt-4 p-5 bg-white border border-emerald-200 rounded-xl shadow-md flex flex-col gap-4"
        >
          <div className="flex items-center gap-3 pb-3 border-b border-emerald-100">
            <Brain className="w-6 h-6 text-emerald-600" />
            <span className="text-xl font-semibold text-emerald-800">Personalized Portfolio Recommendation</span>
            <Check className="w-5 h-5 text-emerald-500 ml-auto" />
          </div>

          <div className="grid grid-cols-2 gap-4 text-sm">
            <div className="flex flex-col gap-1">
              <span className="font-medium text-slate-600">Client Profile:</span>
              <ul className="list-disc list-inside ml-4 text-slate-500">
                <li>Risk: Moderate-Aggressive</li>
                <li>Goal: 15-Year Retirement</li>
                <li>Assets: Existing 401k</li>
              </ul>
            </div>
            <div className="flex flex-col gap-1">
              <span className="font-medium text-slate-600">Strategy:</span>
              <ul className="list-disc list-inside ml-4 text-slate-500">
                <li>Diversified ETF-Based</li>
                <li>Focus: Sustainable Growth</li>
              </ul>
            </div>
          </div>

          <div className="flex flex-col gap-2">
            <span className="text-base font-semibold text-slate-700">Asset Allocation:</span>
            <div className="flex flex-col gap-1 text-sm text-slate-600">
              <div className="flex justify-between"><span>Equities:</span> <span className="font-medium">60%</span></div>
              <div className="flex justify-between"><span>Fixed Income:</span> <span className="font-medium">25%</span></div>
              <div className="flex justify-between"><span>Real Assets:</span> <span className="font-medium">10%</span></div>
              <div className="flex justify-between"><span>Cash:</span> <span className="font-medium">5%</span></div>
            </div>
          </div>

          <div className="flex flex-col gap-2">
            <span className="text-base font-semibold text-slate-700">Fund Recommendations:</span>
            <ul className="list-disc list-inside ml-4 text-sm text-slate-600">
              <li><span className="font-medium">Vanguard Total Stock Market ETF (VTI)</span> - Broad Market Exposure</li>
              <li><span className="font-medium">iShares Core U.S. Aggregate Bond ETF (AGG)</span> - Diversified Bond Holdings</li>
              <li><span className="font-medium">Vanguard Real Estate ETF (VNQ)</span> - Real Asset Diversification</li>
              <li><span className="font-medium">SPDR S&P 500 ESG ETF (EFIV)</span> - Sustainable Growth Focus</li>
            </ul>
          </div>
        </motion.div>
      </div>
    </motion.div>
  );
}

function Scene8({ time }: { time: MotionValue<number> }) {
  const aiModuleOpacity = useTransform(time, [1.5, 2.5], [0, 1]);
  const clientRiskOpacity = useTransform(time, [3.0, 3.8], [0, 1]);
  const actionSuggestOpacity = useTransform(time, [4.5, 5.5], [0, 1]);

  const clientData = [
    { name: "John Doe", value: "$1.2M", engagement: "Last call: 2 weeks ago", risk: false },
    { name: "Sarah Connor", value: "$850K", engagement: "Last call: 3 months ago", risk: true },
    { name: "Michael Scott", value: "$2.5M", engagement: "Last call: 1 month ago", risk: false },
    { name: "Jane Smith", value: "$600K", engagement: "Last call: 4 months ago", risk: true },
  ];

  return (
    <motion.div
      key="scene8"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex bg-slate-50 p-6 gap-6 overflow-hidden"
    >
      {/* Main CRM Dashboard */}
      <div className="flex-1 flex flex-col gap-4 bg-white rounded-2xl shadow-xl p-6">
        {/* Header */}
        <div className="flex items-center justify-between pb-4 border-b border-slate-200">
          <h2 className="text-2xl font-semibold text-slate-800">Client Relationship Manager</h2>
          <div className="flex items-center gap-3">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
              <input
                type="text"
                placeholder="Search clients..."
                className="pl-9 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-200"
              />
            </div>
            <button className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors">
              <Plus className="w-4 h-4" /> New Client
            </button>
          </div>
        </div>

        {/* Client List */}
        <div className="grid grid-cols-2 gap-4 flex-1 overflow-auto pr-2">
          {clientData.map((client, index) => (
            <motion.div
              key={index}
              className={`relative flex flex-col p-5 border rounded-xl shadow-sm transition-all duration-300 ${
                client.risk ? 'border-red-300 bg-red-50' : 'border-slate-200 bg-white'
              }`}
            >
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center">
                  <User className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-slate-800">{client.name}</h3>
                  <p className="text-sm text-slate-500">Portfolio: {client.value}</p>
                </div>
              </div>
              <div className="text-sm text-slate-600">
                <p className="flex items-center gap-2 mb-1">
                  <MessageSquare className="w-4 h-4 text-slate-400" />
                  <span>{client.engagement}</span>
                </p>
                <p className="flex items-center gap-2">
                  <BarChart3 className="w-4 h-4 text-slate-400" />
                  <span>Portfolio trend: {client.risk ? <span className="text-red-600">-5% last quarter</span> : <span className="text-emerald-600">+2% last quarter</span>}</span>
                </p>
              </div>
              {client.risk && (
                <motion.div
                  style={{ opacity: clientRiskOpacity }}
                  className="absolute top-3 right-3 px-3 py-1 bg-red-500 text-white text-xs font-semibold rounded-full shadow-md"
                >
                  High Attrition Risk
                </motion.div>
              )}
            </motion.div>
          ))}
        </div>
      </div>

      {/* AI Insights Panel */}
      <motion.div
        style={{ opacity: aiModuleOpacity }}
        className="w-80 flex-shrink-0 flex flex-col gap-5 bg-white rounded-2xl shadow-xl p-6 border border-indigo-200"
      >
        <div className="flex items-center gap-3 pb-4 border-b border-slate-200">
          <Sparkles className="w-6 h-6 text-indigo-500" />
          <h3 className="text-xl font-semibold text-slate-800">AI Insights: Client Retention</h3>
        </div>

        <div className="flex flex-col gap-4">
          <h4 className="text-base font-semibold text-slate-700">At-Risk Clients</h4>
          <div className="flex flex-col gap-3">
            {clientData.filter(c => c.risk).map((client, index) => (
              <div key={index} className="flex items-center gap-3 p-3 bg-red-50 border border-red-200 rounded-lg">
                <User className="w-5 h-5 text-red-500" />
                <div>
                  <p className="text-sm font-medium text-slate-800">{client.name}</p>
                  <p className="text-xs text-slate-500">Risk Score: 85%</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <motion.div style={{ opacity: actionSuggestOpacity }} className="flex flex-col gap-4">
          <h4 className="text-base font-semibold text-slate-700">Suggested Proactive Actions</h4>
          <div className="flex flex-col gap-3">
            <div className="flex items-start gap-3 p-3 bg-indigo-50 border border-indigo-200 rounded-lg">
              <Check className="w-5 h-5 text-indigo-500 mt-0.5" />
              <div>
                <p className="text-sm font-medium text-slate-800">Schedule follow-up call with Sarah Connor</p>
                <p className="text-xs text-slate-500">Discuss recent market volatility and portfolio adjustments.</p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 bg-indigo-50 border border-indigo-200 rounded-lg">
              <Check className="w-5 h-5 text-indigo-500 mt-0.5" />
              <div>
                <p className="text-sm font-medium text-slate-800">Send personalized report to Jane Smith</p>
                <p className="text-xs text-slate-500">Highlight performance against goals and new opportunities.</p>
              </div>
            </div>
          </div>
        </motion.div>
      </motion.div>
    </motion.div>
  );
}

function Scene9({ time }) {
  const fullPromptText = "Identify the top 10 clients with the highest predicted attrition risk over the next 6 months. For each client, list the contributing factors and suggest three personalized outreach strategies to improve retention.";
  const promptCharIndex = useTransform(time, [0.5, 4.5], [0, fullPromptText.length], { clamp: true });
  const [displayedPrompt, setDisplayedPrompt] = useState("");

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

  const promptBoxOpacity = useTransform(time, [0.0, 0.5], [0, 1], { clamp: true });
  const promptInputSentOpacity = useTransform(time, [4.5, 5.0], [1, 0.6], { clamp: true }); // Simulate sending, slightly dim
  const sendButtonScale = useTransform(time, [4.5, 5.0], [1, 1.1], { clamp: true });
  const sendButtonOpacity = useTransform(time, [4.5, 5.0], [1, 0.7], { clamp: true });

  const initialDashboardOpacity = useTransform(time, [5.0, 5.5], [1, 0], { clamp: true });
  const aiResultsOpacity = useTransform(time, [5.5, 6.0], [0, 1], { clamp: true });

  const client1Opacity = useTransform(time, [6.0, 6.5], [0, 1], { clamp: true });
  const client1Y = useTransform(time, [6.0, 6.5], [20, 0], { clamp: true });

  const client2Opacity = useTransform(time, [7.5, 8.0], [0, 1], { clamp: true });
  const client2Y = useTransform(time, [7.5, 8.0], [20, 0], { clamp: true });

  const client3Opacity = useTransform(time, [9.0, 9.5], [0, 1], { clamp: true });
  const client3Y = useTransform(time, [9.0, 9.5], [20, 0], { clamp: true });

  const clientData = [
    {
      name: "Sarah Chen",
      risk: "High (85%)",
      factors: ["Market volatility", "Recent competitor offering", "Low engagement"],
      strategies: ["Proactive portfolio review call.", "Invite to exclusive market insights webinar.", "Personalized email with new service offerings."],
      opacity: client1Opacity,
      y: client1Y,
    },
    {
      name: "Michael B.",
      risk: "Medium (70%)",
      factors: ["Changes in life stage (new baby)", "Inactive since last review"],
      strategies: ["Schedule a 'life event' financial planning session.", "Send relevant articles on family wealth planning.", "Introduce to estate planning specialist."],
      opacity: client2Opacity,
      y: client2Y,
    },
    {
      name: "Emily R.",
      risk: "Medium (65%)",
      factors: ["Recent large withdrawal", "Competitor ad exposure"],
      strategies: ["Follow-up call to understand withdrawal purpose.", "Offer a complimentary financial health check.", "Highlight unique value propositions of our firm."],
      opacity: client3Opacity,
      y: client3Y,
    },
  ];

  const DashboardContentPlaceholder = () => (
    <motion.div style={{ opacity: initialDashboardOpacity }} className="flex flex-col gap-4 p-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold text-slate-800">Client Overview</h2>
        <motion.button className="px-4 py-2 bg-indigo-500 text-white rounded-lg shadow-sm hover:bg-indigo-600 transition-colors">
          <Plus className="inline-block w-4 h-4 mr-1" /> Add Client
        </motion.button>
      </div>
      <div className="bg-white rounded-xl shadow-md p-4 flex flex-col gap-3">
        <div className="flex items-center justify-between text-sm text-slate-500 font-medium pb-2 border-b border-slate-100">
          <span className="w-1/3">Client Name</span>
          <span className="w-1/4">Portfolio Value</span>
          <span className="w-1/4">Last Activity</span>
          <span className="w-1/6 text-right">Status</span>
        </div>
        {[...Array(4)].map((_, i) => (
          <div key={i} className="flex items-center justify-between py-2 border-b border-slate-50 last:border-b-0">
            <span className="w-1/3 text-slate-700 font-medium">Client {i + 1} Name</span>
            <span className="w-1/4 text-slate-600">{"$"}{(1000000 - i * 50000).toLocaleString()}</span>
            <span className="w-1/4 text-slate-600">{(i % 2 === 0 ? '2 weeks ago' : '1 month ago')}</span>
            <span className={`w-1/6 text-right px-2 py-1 rounded-full text-xs font-semibold ${i % 3 === 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'}`}>
              {i % 3 === 0 ? 'Active' : 'Engaged'}
            </span>
          </div>
        ))}
      </div>
      <div className="w-full h-40 bg-gradient-to-br from-indigo-100 to-indigo-200 rounded-xl flex flex-col items-center justify-center gap-2 mt-4">
        <LineChart className="w-10 h-10 text-indigo-500" />
        <span className="text-sm font-medium text-indigo-600">Portfolio Performance Chart</span>
      </div>
    </motion.div>
  );

  return (
    <motion.div
      key="scene9"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col bg-slate-50 overflow-hidden"
    >
      {/* CRM Dashboard Layout */}
      <div className="flex-1 flex w-full">
        {/* Sidebar */}
        <div className="w-56 bg-white border-r border-slate-100 flex flex-col p-4 shadow-sm">
          <div className="flex items-center gap-2 mb-8">
            <Sparkles className="w-6 h-6 text-indigo-500" />
            <span className="font-bold text-lg text-slate-800">WealthAI</span>
          </div>
          <nav className="flex flex-col gap-2">
            {['Dashboard', 'Clients', 'Portfolio', 'Reports', 'Settings'].map((item, i) => (
              <a
                key={item}
                href="#"
                className={`flex items-center gap-3 p-3 rounded-lg text-sm font-medium ${
                  item === 'Clients'
                    ? 'bg-indigo-50 text-indigo-700'
                    : 'text-slate-600 hover:bg-slate-100'
                }`}
              >
                {item === 'Dashboard' && <LayoutDashboard className="w-5 h-5" />}
                {item === 'Clients' && <User className="w-5 h-5" />}
                {item === 'Portfolio' && <Wallet className="w-5 h-5" />}
                {item === 'Reports' && <BarChart3 className="w-5 h-5" />}
                {item === 'Settings' && <Settings className="w-5 h-5" />}
                {item}
              </a>
            ))}
          </nav>
          <div className="mt-auto pt-4 border-t border-slate-100">
            <a href="#" className="flex items-center gap-3 p-3 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-100">
              <LogOut className="w-5 h-5" /> Logout
            </a>
          </div>
        </div>

        {/* Main Content Area */}
        <div className="flex-1 flex flex-col p-6">
          {/* Header */}
          <div className="flex justify-between items-center mb-6">
            <h1 className="text-2xl font-bold text-slate-900">Clients Dashboard</h1>
            <div className="flex items-center gap-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                <input
                  type="text"
                  placeholder="Search clients..."
                  className="pl-10 pr-4 py-2 rounded-lg border border-slate-200 focus:ring-2 focus:ring-indigo-200 focus:border-indigo-300 transition-all text-sm"
                />
              </div>
              <Bell className="w-5 h-5 text-slate-500 hover:text-slate-700 cursor-pointer" />
              <div className="w-8 h-8 rounded-full bg-indigo-200 flex items-center justify-center text-indigo-700 font-semibold text-sm">
                AD
              </div>
            </div>
          </div>

          {/* Dynamic Content Area */}
          <div className="flex-1 relative">
            {/* Initial Dashboard Content */}
            <Sparkles />

            {/* AI Results Overlay */}
            <motion.div
              style={{ opacity: aiResultsOpacity }}
              className="absolute inset-0 flex flex-col gap-4 p-6 bg-white rounded-xl shadow-md"
            >
              <div className="flex items-center gap-2 text-xl font-semibold text-slate-800">
                <Bot className="w-6 h-6 text-indigo-500" />
                AI-Identified Attrition Risks
              </div>
              <p className="text-sm text-slate-600 -mt-2 mb-2">
                Prioritized list of clients with predicted high attrition risk and suggested strategies.
              </p>

              <div className="flex flex-col gap-4 overflow-y-auto">
                {clientData.map((client, index) => (
                  <motion.div
                    key={index}
                    style={{ opacity: client.opacity, y: client.y }}
                    className="bg-slate-50 p-4 rounded-lg border border-slate-100 shadow-sm flex flex-col gap-2"
                  >
                    <div className="flex justify-between items-center pb-2 border-b border-slate-200">
                      <h3 className="font-semibold text-slate-800 text-base">{client.name}</h3>
                      <span className="px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-700">
                        Risk: {client.risk}
                      </span>
                    </div>
                    <div>
                      <p className="text-sm font-medium text-slate-700 mb-1">Contributing Factors:</p>
                      <ul className="list-disc list-inside text-sm text-slate-600 ml-2">
                        {client.factors.map((factor, i) => (
                          <li key={i}>{factor}</li>
                        ))}
                      </ul>
                    </div>
                    <div>
                      <p className="text-sm font-medium text-slate-700 mb-1">Outreach Strategies:</p>
                      <ul className="list-decimal list-inside text-sm text-slate-600 ml-2">
                        {client.strategies.map((strategy, i) => (
                          <li key={i}>{strategy}</li>
                        ))}
                      </ul>
                    </div>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          </div>
        </div>
      </div>

      {/* AI Prompt Input Box */}
      <motion.div
        style={{ opacity: promptBoxOpacity }}
        className="absolute bottom-6 left-1/2 -translate-x-1/2 w-[60%] max-w-3xl bg-white rounded-2xl shadow-xl border border-slate-200 flex p-3 items-end gap-3"
      >
        <div className="p-2 bg-indigo-500 rounded-full text-white">
          <Brain className="w-5 h-5" />
        </div>
        <motion.div style={{ opacity: promptInputSentOpacity }} className="flex-1">
          <span className="text-slate-700 text-base leading-relaxed whitespace-pre-wrap">
            {displayedPrompt}
          </span>
          {time.get() < 4.5 && ( // Show blinking cursor only during typing phase
            <motion.span
              animate={{ opacity: [0, 1, 0] }}
              transition={{ duration: 0.8, repeat: Infinity, ease: "linear" }}
              className="inline-block w-0.5 h-5 bg-indigo-500 ml-1 align-bottom"
            />
          )}
        </motion.div>
        <motion.button
          style={{ scale: sendButtonScale, opacity: sendButtonOpacity }}
          className="p-2 bg-indigo-600 text-white rounded-xl shadow-md hover:bg-indigo-700 transition-colors"
        >
          <Send className="w-5 h-5" />
        </motion.button>
      </motion.div>
    </motion.div>
  );
}

function Scene10({ time }: { time: MotionValue<number> }) {
  const overallSentimentValue = useTransform(time, [0, 13], [65, 72]); // Simulating a fluctuating sentiment score
  const techSentimentValue = useTransform(time, [0, 13], [75, 80]);
  const financeSentimentValue = useTransform(time, [0, 13], [58, 62]);
  const healthcareSentimentValue = useTransform(time, [0, 13], [68, 70]);
  const energySentimentValue = useTransform(time, [0, 13], [45, 42]);

  const appleSentimentValue = useTransform(time, [0, 13], [70, 75]);
  const microsoftSentimentValue = useTransform(time, [0, 13], [82, 85]);
  const jpmorganSentimentValue = useTransform(time, [0, 13], [60, 55]);
  const teslaSentimentValue = useTransform(time, [0, 13], [48, 52]);

  const [overallSentiment, setOverallSentiment] = useState(65);
  const [techSentiment, setTechSentiment] = useState(75);
  const [financeSentiment, setFinanceSentiment] = useState(58);
  const [healthcareSentiment, setHealthcareSentiment] = useState(68);
  const [energySentiment, setEnergySentiment] = useState(45);

  const [appleSentiment, setAppleSentiment] = useState(70);
  const [microsoftSentiment, setMicrosoftSentiment] = useState(82);
  const [jpmorganSentiment, setJpmorganSentiment] = useState(60);
  const [teslaSentiment, setTeslaSentiment] = useState(48);

  useMotionValueEvent(overallSentimentValue, "change", (v) => setOverallSentiment(Math.round(v)));
  useMotionValueEvent(techSentimentValue, "change", (v) => setTechSentiment(Math.round(v)));
  useMotionValueEvent(financeSentimentValue, "change", (v) => setFinanceSentiment(Math.round(v)));
  useMotionValueEvent(healthcareSentimentValue, "change", (v) => setHealthcareSentiment(Math.round(v)));
  useMotionValueEvent(energySentimentValue, "change", (v) => setEnergySentiment(Math.round(v)));

  useMotionValueEvent(appleSentimentValue, "change", (v) => setAppleSentiment(Math.round(v)));
  useMotionValueEvent(microsoftSentimentValue, "change", (v) => setMicrosoftSentiment(Math.round(v)));
  useMotionValueEvent(jpmorganSentimentValue, "change", (v) => setJpmorganSentiment(Math.round(v)));
  useMotionValueEvent(teslaSentimentValue, "change", (v) => setTeslaSentiment(Math.round(v)));

  const getSentimentStyle = (score: number) => {
    if (score >= 70) return "bg-emerald-100 text-emerald-700 border-emerald-300";
    if (score >= 55) return "bg-amber-100 text-amber-700 border-amber-300";
    return "bg-red-100 text-red-700 border-red-300";
  };

  const getSentimentIcon = (score: number) => {
    if (score >= 70) return <TrendingUp className="w-4 h-4 text-emerald-600" />;
    if (score >= 55) return <LineChart className="w-4 h-4 text-amber-600" />;
    return <ArrowDownRight className="w-4 h-4 text-red-600" />;
  };

  const SentimentCard = ({ title, score, icon }: { title: string; score: number; icon: React.ReactNode }) => (
    <div className={`flex items-center justify-between p-3 rounded-lg border text-sm font-semibold ${getSentimentStyle(score)}`}>
      <div className="flex items-center gap-2">
        {icon}
        <span>{title}</span>
      </div>
      <span>{score}%</span>
    </div>
  );

  return (
    <motion.div
      key="scene10"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col bg-slate-50 p-6 gap-6 overflow-hidden"
    >
      {/* Header */}
      <div className="flex items-center justify-between pb-4 border-b border-slate-200">
        <div className="flex items-center gap-3">
          <Sparkles className="w-7 h-7 text-indigo-500" />
          <h1 className="text-2xl font-bold text-slate-800">AI Market Sentiment</h1>
        </div>
        <div className="flex items-center gap-4">
          <Search className="w-5 h-5 text-slate-500" />
          <Bell className="w-5 h-5 text-slate-500" />
          <User className="w-5 h-5 text-slate-500" />
        </div>
      </div>

      {/* Main Content Grid */}
      <div className="flex-1 grid grid-cols-2 grid-rows-2 gap-6">
        {/* Overall Market Sentiment */}
        <div className="col-span-2 bg-white rounded-xl shadow-md p-5 flex items-center justify-between border border-slate-100">
          <div className="flex flex-col gap-2">
            <h2 className="text-xl font-semibold text-slate-700">Overall Market Sentiment</h2>
            <p className="text-sm text-slate-500">Real-time aggregated sentiment across all sectors.</p>
          </div>
          <div className={`flex items-center gap-3 px-5 py-3 rounded-xl border-2 ${getSentimentStyle(overallSentiment)}`}>
            {getSentimentIcon(overallSentiment)}
            <span className="text-4xl font-bold">{overallSentiment}%</span>
            <span className="text-sm font-medium">
              {overallSentiment >= 70 ? "Bullish" : overallSentiment >= 55 ? "Neutral" : "Bearish"}
            </span>
          </div>
        </div>

        {/* Sector Sentiment */}
        <div className="bg-white rounded-xl shadow-md p-5 flex flex-col gap-4 border border-slate-100">
          <h2 className="text-lg font-semibold text-slate-700">Sector Sentiment</h2>
          <div className="flex flex-col gap-3">
            <Sparkles title="Technology" score={techSentiment} icon={getSentimentIcon(techSentiment)} />
            <Sparkles title="Financials" score={financeSentiment} icon={getSentimentIcon(financeSentiment)} />
            <Sparkles title="Healthcare" score={healthcareSentiment} icon={getSentimentIcon(healthcareSentiment)} />
            <Sparkles title="Energy" score={energySentiment} icon={getSentimentIcon(energySentiment)} />
          </div>
        </div>

        {/* Stock Sentiment & News Feed */}
        <div className="flex flex-col gap-6">
          {/* Stock Sentiment */}
          <div className="bg-white rounded-xl shadow-md p-5 flex flex-col gap-4 border border-slate-100">
            <h2 className="text-lg font-semibold text-slate-700">Key Stock Sentiment</h2>
            <div className="flex flex-col gap-3">
              <Sparkles title="Apple (AAPL)" score={appleSentiment} icon={getSentimentIcon(appleSentiment)} />
              <Sparkles title="Microsoft (MSFT)" score={microsoftSentiment} icon={getSentimentIcon(microsoftSentiment)} />
              <Sparkles title="JPMorgan (JPM)" score={jpmorganSentiment} icon={getSentimentIcon(jpmorganSentiment)} />
              <Sparkles title="Tesla (TSLA)" score={teslaSentiment} icon={getSentimentIcon(teslaSentiment)} />
            </div>
          </div>

          {/* News & Social Feed Placeholder */}
          <div className="flex-1 bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-xl flex flex-col items-center justify-center gap-2 p-4 shadow-md border border-indigo-200">
            <FileText className="w-10 h-10 text-indigo-500" />
            <span className="text-base font-medium text-indigo-700">Aggregated News & Social Feed</span>
            <p className="text-sm text-indigo-600 text-center">AI processes millions of articles and posts in real-time.</p>
          </div>
        </div>
      </div>
    </motion.div>
  );
}

function Scene11({ time }: { time: MotionValue<number> }) {
  const fullPromptText = "Analyze real-time sentiment across major financial news and social media for 'renewable energy stocks' over the last 24 hours. Summarize key bullish and bearish drivers and identify any significant shifts in market perception.";
  const promptCharIndex = useTransform(time, [2.0, 13.0], [0, fullPromptText.length], { clamp: true });
  const [displayedPrompt, setDisplayedPrompt] = useState("");

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

  const promptBoxOpacity = useTransform(time, [0.0, 0.5], [0, 1]);
  const promptBoxY = useTransform(time, [0.0, 0.5], [50, 0]);

  const summaryCardOpacity = useTransform(time, [13.0, 13.5], [0, 1]);
  const summaryCardY = useTransform(time, [13.0, 13.5], [50, 0]);

  return (
    <motion.div
      key="scene11"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col bg-gradient-to-br from-slate-50 to-slate-100 p-6 relative overflow-hidden"
    >
      {/* Dashboard Header */}
      <div className="flex items-center justify-between p-4 bg-white rounded-xl shadow-sm mb-4">
        <div className="flex items-center gap-2">
          <Sparkles className="w-6 h-6 text-indigo-500" />
          <span className="font-semibold text-lg text-slate-800">WealthAI Dashboard</span>
        </div>
        <div className="flex items-center gap-4">
          <Search className="w-5 h-5 text-slate-500" />
          <Bell className="w-5 h-5 text-slate-500" />
          <User className="w-5 h-5 text-slate-500" />
        </div>
      </div>

      {/* Main Dashboard Content */}
      <div className="flex flex-1 gap-4">
        {/* Left Column - Overview Cards */}
        <div className="flex flex-col w-1/3 gap-4">
          <div className="bg-white p-4 rounded-xl shadow-sm border border-slate-200 h-1/2 flex flex-col justify-between">
            <h3 className="font-semibold text-slate-700 mb-2">Market Overview</h3>
            <div className="flex items-center justify-between text-sm text-slate-600">
              <span>S&P 500</span>
              <span className="flex items-center gap-1 text-emerald-600 font-medium">
                +0.5% <ArrowUpRight className="w-4 h-4" />
              </span>
            </div>
            <div className="flex items-center justify-between text-sm text-slate-600">
              <span>NASDAQ</span>
              <span className="flex items-center gap-1 text-emerald-600 font-medium">
                +1.2% <ArrowUpRight className="w-4 h-4" />
              </span>
            </div>
            <div className="flex items-center justify-between text-sm text-slate-600">
              <span>Dow Jones</span>
              <span className="flex items-center gap-1 text-red-600 font-medium">
                -0.1% <ArrowDownRight className="w-4 h-4" />
              </span>
            </div>
            <div className="mt-4 w-full h-20 bg-gradient-to-br from-indigo-100 to-indigo-200 rounded-lg flex items-center justify-center">
              <BarChart3 className="w-8 h-8 text-indigo-500" />
            </div>
          </div>
          <div className="bg-white p-4 rounded-xl shadow-sm border border-slate-200 h-1/2 flex flex-col justify-between">
            <h3 className="font-semibold text-slate-700 mb-2">Sector Performance</h3>
            <div className="flex items-center justify-between text-sm text-slate-600">
              <span>Technology</span>
              <span className="flex items-center gap-1 text-emerald-600 font-medium">
                +1.8% <TrendingUp className="w-4 h-4" />
              </span>
            </div>
            <div className="flex items-center justify-between text-sm text-slate-600">
              <span>Energy</span>
              <span className="flex items-center gap-1 text-emerald-600 font-medium">
                +0.7% <TrendingUp className="w-4 h-4" />
              </span>
            </div>
            <div className="flex items-center justify-between text-sm text-slate-600">
              <span>Healthcare</span>
              <span className="flex items-center gap-1 text-red-600 font-medium">
                -0.3% <ArrowDownRight className="w-4 h-4" />
              </span>
            </div>
            <div className="mt-4 w-full h-20 bg-gradient-to-br from-emerald-100 to-emerald-200 rounded-lg flex items-center justify-center">
              <LineChart className="w-8 h-8 text-emerald-500" />
            </div>
          </div>
        </div>

        {/* Right Column - News Feed */}
        <div className="flex flex-col w-2/3 bg-white p-4 rounded-xl shadow-sm border border-slate-200">
          <h3 className="font-semibold text-slate-700 mb-4">Real-time Financial News</h3>
          <div className="space-y-3 text-sm text-slate-600">
            <p className="flex items-start gap-2">
              <FileText className="w-4 h-4 text-slate-400 mt-0.5" />
              <span>Tech giants report strong Q3 earnings, boosting market confidence.</span>
            </p>
            <p className="flex items-start gap-2">
              <FileText className="w-4 h-4 text-slate-400 mt-0.5" />
              <span>Central bank hints at potential interest rate hike next quarter.</span>
            </p>
            <p className="flex items-start gap-2">
              <FileText className="w-4 h-4 text-slate-400 mt-0.5" />
              <span>Commodity prices surge amid global supply chain disruptions.</span>
            </p>
            <p className="flex items-start gap-2">
              <FileText className="w-4 h-4 text-slate-400 mt-0.5" />
              <span>Renewable energy sector sees increased investment, driven by policy.</span>
            </p>
            <p className="flex items-start gap-2">
              <FileText className="w-4 h-4 text-slate-400 mt-0.5" />
              <span>New government infrastructure bill expected to pass by year-end.</span>
            </p>
            <p className="flex items-start gap-2">
              <FileText className="w-4 h-4 text-slate-400 mt-0.5" />
              <span>Healthcare innovations continue to attract venture capital funding.</span>
            </p>
          </div>
        </div>
      </div>

      {/* Prompt Input Box (Overlay) */}
      <motion.div
        style={{ opacity: promptBoxOpacity, y: promptBoxY }}
        className="absolute bottom-6 left-1/2 -translate-x-1/2 w-[60%] bg-white p-3 rounded-2xl shadow-lg border border-slate-200 flex items-center gap-3"
      >
        <Bot className="w-6 h-6 text-indigo-500" />
        <span className="flex-1 text-slate-700 text-base font-medium min-h-[24px]">
          {displayedPrompt}
          {time.get() >= 2.0 && time.get() < 13.0 && (
            <motion.span
              animate={{ opacity: [0, 1, 0] }}
              transition={{ duration: 0.8, repeat: Infinity }}
              className="ml-0.5"
            >
              |
            </motion.span>
          )}
        </span>
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: time.get() > 13.0 ? 1 : 0 }}
          transition={{ duration: 0.2 }}
        >
          <Send className="w-6 h-6 text-indigo-500 cursor-pointer" />
        </motion.div>
      </motion.div>

      {/* Sentiment Summary Card (Appears after prompt) */}
      <motion.div
        style={{ opacity: summaryCardOpacity, y: summaryCardY }}
        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[70%] max-w-lg bg-white p-6 rounded-2xl shadow-xl border border-indigo-200 flex flex-col gap-4 z-10"
      >
        <h3 className="text-xl font-bold text-indigo-700 flex items-center gap-2">
          <LineChart className="w-6 h-6" /> Sentiment Analysis: Renewable Energy Stocks
        </h3>
        <div className="flex items-center gap-4">
          <div className="text-4xl font-bold text-emerald-600">Bullish</div>
          <div className="flex flex-col text-sm text-slate-600">
            <span className="font-semibold">Shift: Significantly Upward</span>
            <span>Last 24 hours</span>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div>
            <h4 className="font-semibold text-slate-700 mb-1">Key Bullish Drivers:</h4>
            <ul className="list-disc list-inside text-slate-600 space-y-1">
              <li>New government policy announcements (subsidies, tax breaks).</li>
              <li>Increased institutional investment in green technologies.</li>
              <li>Positive earnings reports from key sector players.</li>
            </ul>
          </div>
          <div>
            <h4 className="font-semibold text-slate-700 mb-1">Key Bearish Drivers:</h4>
            <ul className="list-disc list-inside text-slate-600 space-y-1">
              <li>Minor concerns over supply chain bottlenecks.</li>
              <li>Slight increase in energy commodity prices impacting production costs.</li>
            </ul>
          </div>
        </div>
        <div className="p-3 bg-indigo-50 rounded-lg text-indigo-800 text-sm font-medium border border-indigo-100">
          <span className="font-bold">Market Perception Shift:</span> A notable shift towards bullish sentiment, primarily driven by strong governmental support and investor confidence in sustainable growth.
        </div>
      </motion.div>
    </motion.div>
  );
}

function Scene12({ time }: { time: MotionValue<number> }) {
  const takeaways = [
    "Automated Portfolios",
    "Enhanced Compliance",
    "Personalized Strategies",
    "Client Retention",
    "Market Sentiment Analysis",
  ];

  return (
    <motion.div
      key="scene12"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex-1 w-full flex flex-col items-center justify-center p-8 bg-slate-50 text-slate-800"
    >
      <div className="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 flex flex-col items-center text-center gap-6">
        <h2 className="text-4xl font-extrabold text-indigo-700">
          Thank You for Watching!
        </h2>

        <div className="w-full space-y-3 mt-4">
          <p className="text-xl font-semibold text-slate-700">Key Takeaways:</p>
          <ul className="list-none p-0 m-0 space-y-2 text-lg text-slate-600">
            {takeaways.map((item, index) => (
              <li key={item} className="flex items-center justify-center gap-2">
                <Check className="w-5 h-5 text-emerald-500" />
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="mt-8 pt-6 border-t border-slate-200 w-full flex flex-col items-center gap-3">
          <p className="text-lg font-medium text-slate-600">
            Start your AI journey with
          </p>
          <div className="flex items-center gap-2 text-indigo-600 text-xl font-bold">
            <ChannelLogo />
            <span>AI Unwrap</span>
          </div>
        </div>
      </div>
    </motion.div>
  );
}

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

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

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

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

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

Some example AI use cases for the Wealth Management industry

Further Reading

Create Your Own Custom Tutorial