index.tsx

import React, { useState, useEffect, useMemo, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { 
  LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, 
  PieChart, Pie, Cell
} from 'recharts';
import { 
  TrendingUp, TrendingDown, Activity, Wallet, ArrowRight, Zap, Search, Plus, 
  LayoutDashboard, Newspaper, Bot, DollarSign, Globe, Lock, Shield, ChevronRight,
  BarChart3, Layers, Smartphone
} from 'lucide-react';
import { motion, useScroll, useTransform, useInView } from 'framer-motion';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { GoogleGenAI } from "@google/genai";

// --- Utility ---
function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// --- Types ---
type Asset = {
  ticker: string;
  name: string;
  shares: number;
  avgPrice: number;
  currentPrice: number;
  sector: string;
};

// --- Mock Data ---
const INITIAL_ASSETS: Asset[] = [
  { ticker: 'AAPL', name: 'Apple Inc.', shares: 45, avgPrice: 150, currentPrice: 185.92, sector: 'Technology' },
  { ticker: 'TSLA', name: 'Tesla, Inc.', shares: 20, avgPrice: 210, currentPrice: 245.50, sector: 'Automotive' },
  { ticker: 'NVDA', name: 'NVIDIA Corp', shares: 15, avgPrice: 400, currentPrice: 650.25, sector: 'Technology' },
  { ticker: 'VTI', name: 'Vanguard Total', shares: 100, avgPrice: 200, currentPrice: 238.40, sector: 'ETF' },
  { ticker: 'JPM', name: 'JPMorgan Chase', shares: 30, avgPrice: 140, currentPrice: 172.10, sector: 'Finance' },
];

const INITIAL_HISTORY = Array.from({ length: 30 }, (_, i) => ({
    date: new Date(Date.now() - (29 - i) * 24 * 60 * 60 * 1000).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
    value: 50000 + (i * 150) + (Math.random() * 2000 - 1000)
}));

// --- UI Components ---

const GlassCard = ({ children, className, hover = true }: { children?: React.ReactNode, className?: string, hover?: boolean }) => (
  <div className={cn(
    "relative overflow-hidden rounded-2xl border border-slate-700/30 bg-slate-900/40 backdrop-blur-xl p-6 transition-all duration-300",
    hover && "hover:bg-slate-800/60 hover:border-slate-600/50 hover:shadow-2xl hover:shadow-emerald-900/10",
    className
  )}>
    {children}
  </div>
);

// --- AI Advisor Component ---
const AIAdvisor = ({ assets }: { assets: Asset[] }) => {
  const [analysis, setAnalysis] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const analyzePortfolio = async () => {
    if (!process.env.API_KEY) {
      alert("Please ensure API_KEY is set in the environment variables.");
      return;
    }

    setLoading(true);
    try {
      const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
      const assetSummary = assets.map(a => `${a.ticker}: ${a.shares} shares @ $${a.currentPrice} (${a.sector})`).join(', ');
      
      const prompt = `
        Act as a ruthless Wall Street portfolio strategist. 
        Analyze: ${assetSummary}.
        
        Output Markdown. Sections:
        1. 🚨 **Risk Exposure**: Concentration issues?
        2. 💎 **Alpha Generators**: Best performers?
        3. 🔮 **Macro Outlook**: Trends affecting these sectors?
        4. ⚖️ **Direct Orders**: Buy/Sell/Hold advice.
        
        Style: Professional, high-conviction, influential. Max 300 words.
      `;

      const response = await ai.models.generateContent({
        model: 'gemini-2.5-flash',
        contents: prompt,
      });
      
      setAnalysis(response.text);
    } catch (error) {
      console.error(error);
      setAnalysis("⚠️ Analysis failed. Ensure API key is valid.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <GlassCard className="h-full flex flex-col relative overflow-hidden group min-h-[400px]">
      <div className="absolute -top-10 -right-10 p-4 opacity-5 rotate-12 group-hover:opacity-10 transition-opacity">
        <Bot size={200} />
      </div>
      
      <div className="flex items-center gap-3 mb-6 relative z-10">
        <div className="p-2 bg-indigo-500/20 rounded-lg text-indigo-400 shadow-[0_0_15px_rgba(99,102,241,0.3)]">
          <Zap size={24} />
        </div>
        <div>
          <h3 className="text-lg font-bold text-white">Gemini 2.5 Analyst</h3>
          <p className="text-xs text-slate-400">Institutional Insight Engine</p>
        </div>
      </div>

      <div className="flex-grow overflow-y-auto pr-2 relative z-10 custom-scrollbar">
        {!analysis ? (
          <div className="h-full flex flex-col items-center justify-center text-center space-y-6 py-8">
            <p className="text-slate-400 text-sm max-w-[260px] leading-relaxed">
              Deploy advanced AI models to audit your diversification, volatility exposure, and projected yield.
            </p>
            <button 
              onClick={analyzePortfolio}
              disabled={loading}
              className="px-6 py-3 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-500 hover:to-violet-500 text-white rounded-xl font-medium transition-all flex items-center gap-2 shadow-lg shadow-indigo-500/20 disabled:opacity-50 disabled:cursor-not-allowed transform active:scale-95"
            >
              {loading ? (
                <>
                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                  <span>Processing...</span>
                </>
              ) : (
                <>
                  <Bot size={18} /> Generate Report
                </>
              )}
            </button>
          </div>
        ) : (
          <div className="prose prose-invert prose-sm max-w-none prose-headings:text-indigo-300 prose-p:text-slate-300 prose-strong:text-white">
             <div dangerouslySetInnerHTML={{ __html: analysis.replace(/\n/g, '<br/>').replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') }} />
             <button onClick={() => setAnalysis(null)} className="mt-6 text-xs text-indigo-400 hover:text-indigo-300 underline underline-offset-4">Reset Analysis</button>
          </div>
        )}
      </div>
    </GlassCard>
  );
};

// --- Landing Page Components ---

const TickerTape = () => (
    <div className="w-full bg-slate-950 border-y border-slate-800 overflow-hidden py-3 relative z-20">
        <div className="flex animate-scroll whitespace-nowrap">
            {[...Array(2)].map((_, i) => (
                <div key={i} className="flex gap-12 px-6">
                    <span className="text-slate-400 font-mono text-sm flex items-center gap-2">AAPL <span className="text-emerald-400">+1.24%</span></span>
                    <span className="text-slate-400 font-mono text-sm flex items-center gap-2">BTC <span className="text-emerald-400">+2.85%</span></span>
                    <span className="text-slate-400 font-mono text-sm flex items-center gap-2">TSLA <span className="text-rose-400">-0.42%</span></span>
                    <span className="text-slate-400 font-mono text-sm flex items-center gap-2">NVDA <span className="text-emerald-400">+3.10%</span></span>
                    <span className="text-slate-400 font-mono text-sm flex items-center gap-2">ETH <span className="text-emerald-400">+1.95%</span></span>
                    <span className="text-slate-400 font-mono text-sm flex items-center gap-2">SPY <span className="text-emerald-400">+0.88%</span></span>
                    <span className="text-slate-400 font-mono text-sm flex items-center gap-2">AMZN <span className="text-rose-400">-0.12%</span></span>
                </div>
            ))}
        </div>
    </div>
);

const FeatureSection = ({ icon: Icon, title, desc, delay }: any) => (
    <motion.div 
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay }}
        viewport={{ once: true }}
        className="p-6 rounded-2xl bg-slate-900/50 border border-slate-800 hover:border-emerald-500/30 transition-colors group"
    >
        <div className="w-12 h-12 bg-slate-800 rounded-lg flex items-center justify-center mb-4 group-hover:bg-emerald-500/20 transition-colors">
            <Icon className="text-slate-300 group-hover:text-emerald-400" size={24} />
        </div>
        <h3 className="text-xl font-bold text-white mb-2">{title}</h3>
        <p className="text-slate-400 leading-relaxed">{desc}</p>
    </motion.div>
);

const LandingPage = ({ onEnter }: { onEnter: () => void }) => {
  const { scrollYProgress } = useScroll();
  const y = useTransform(scrollYProgress, [0, 1], [0, -50]);

  return (
    <div className="min-h-screen bg-[#020617] font-sans text-slate-50 selection:bg-emerald-500/30 overflow-hidden">
      
      {/* Navbar */}
      <nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-md bg-[#020617]/70 border-b border-slate-800/50">
        <div className="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
            <div className="flex items-center gap-2">
                <div className="w-8 h-8 bg-emerald-500 rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(16,185,129,0.4)]">
                    <TrendingUp size={20} className="text-[#020617]" />
                </div>
                <span className="font-bold text-xl tracking-tight">Portfolio<span className="text-emerald-500">Pro</span></span>
            </div>
            <div className="flex items-center gap-6">
                <button onClick={onEnter} className="hidden md:block text-slate-400 hover:text-white transition-colors text-sm font-medium">Log In</button>
                <button 
                    onClick={onEnter}
                    className="px-5 py-2.5 bg-white text-slate-950 rounded-lg font-semibold text-sm hover:bg-slate-200 transition-all shadow-lg hover:shadow-white/10"
                >
                    Get Started
                </button>
            </div>
        </div>
      </nav>

      {/* Hero Section */}
      <header className="relative pt-32 pb-20 md:pt-48 md:pb-32 px-6 max-w-7xl mx-auto flex flex-col items-center text-center">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] bg-emerald-500/10 rounded-full blur-[120px] pointer-events-none" />
        
        <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-900/80 border border-slate-800 text-emerald-400 text-xs font-bold uppercase tracking-widest mb-8 backdrop-blur-sm"
        >
            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_10px_#10b981]" />
            v2.5 Now Available
        </motion.div>

        <motion.h1 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="text-5xl md:text-8xl font-bold tracking-tight mb-8 leading-[1.1]"
        >
            Build Wealth. <br/>
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-teal-400 to-cyan-400">
                Not Spreadsheets.
            </span>
        </motion.h1>

        <motion.p 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="text-lg md:text-xl text-slate-400 max-w-2xl mb-12 leading-relaxed"
        >
            The institutional-grade portfolio tracker for the modern investor. 
            Real-time net worth analysis, AI-powered risk assessment, and dividend forecasting.
        </motion.p>

        <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto"
        >
            <button 
                onClick={onEnter}
                className="px-8 py-4 bg-emerald-500 hover:bg-emerald-400 text-slate-950 rounded-xl font-bold text-lg transition-all shadow-[0_0_30px_rgba(16,185,129,0.3)] hover:shadow-[0_0_50px_rgba(16,185,129,0.5)] hover:-translate-y-1 flex items-center justify-center gap-2"
            >
                Start Tracking Free <ArrowRight size={20} />
            </button>
            <button className="px-8 py-4 bg-slate-800/50 hover:bg-slate-800 text-white border border-slate-700 rounded-xl font-semibold text-lg transition-all backdrop-blur-sm hover:-translate-y-1">
                View Live Demo
            </button>
        </motion.div>
      </header>

      <TickerTape />

      {/* Tilted Interface Preview */}
      <section className="py-24 relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 perspective-[2000px]">
            <motion.div 
                style={{ y, rotateX: 20 }}
                className="relative z-10 mx-auto max-w-5xl rounded-2xl border border-slate-700/50 bg-slate-900/80 p-2 shadow-2xl shadow-emerald-500/10 backdrop-blur-sm transform-gpu"
            >
                <div className="rounded-xl overflow-hidden bg-[#020617] aspect-video relative flex items-center justify-center border border-slate-800">
                    {/* Mock UI Content */}
                    <div className="absolute inset-0 bg-gradient-to-br from-slate-900 to-slate-950 flex flex-col p-8">
                        <div className="flex gap-8 mb-8">
                             <div className="w-1/3 bg-slate-800/50 rounded-xl h-32 animate-pulse" />
                             <div className="w-1/3 bg-slate-800/50 rounded-xl h-32 animate-pulse delay-100" />
                             <div className="w-1/3 bg-slate-800/50 rounded-xl h-32 animate-pulse delay-200" />
                        </div>
                        <div className="flex gap-8 flex-1">
                            <div className="w-2/3 bg-slate-800/30 rounded-xl h-full border border-slate-700/30 relative overflow-hidden">
                                <div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-emerald-500/10 to-transparent" />
                                <div className="absolute bottom-10 left-10 right-10 top-20 border-l border-b border-slate-700" />
                            </div>
                            <div className="w-1/3 bg-slate-800/30 rounded-xl h-full border border-slate-700/30" />
                        </div>
                    </div>
                    
                    <div className="absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-[2px]">
                         <button 
                            onClick={onEnter} 
                            className="px-6 py-3 bg-white text-black rounded-full font-bold shadow-2xl hover:scale-105 transition-transform"
                         >
                            Enter Dashboard
                         </button>
                    </div>
                </div>
            </motion.div>
        </div>
      </section>

      {/* Feature Grid */}
      <section className="py-32 bg-slate-950 relative">
        <div className="max-w-7xl mx-auto px-6">
            <div className="text-center mb-24">
                <h2 className="text-3xl md:text-5xl font-bold mb-6">Built for the <span className="text-emerald-400">Obsessive</span>.</h2>
                <p className="text-slate-400 max-w-2xl mx-auto text-lg">
                    Most trackers are just spreadsheets in disguise. We built a command center for your entire financial life.
                </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <FeatureSection 
                    icon={Activity} 
                    title="Real-Time Sync" 
                    desc="Connects to 12,000+ financial institutions globally. Updates instantly." 
                    delay={0}
                />
                <FeatureSection 
                    icon={Bot} 
                    title="AI Analyst" 
                    desc="Our Gemini-powered engine audits your portfolio 24/7 for risks and opportunities." 
                    delay={0.1}
                />
                <FeatureSection 
                    icon={Shield} 
                    title="Bank-Grade Security" 
                    desc="AES-256 encryption. We never sell your data. Your keys, your crypto." 
                    delay={0.2}
                />
                <FeatureSection 
                    icon={Globe} 
                    title="Global Currency" 
                    desc="Automatic currency conversion for international stocks and crypto assets." 
                    delay={0.3}
                />
                <FeatureSection 
                    icon={Layers} 
                    title="Dividend Tracking" 
                    desc="Visualize your passive income stream with precise ex-dividend date alerts." 
                    delay={0.4}
                />
                <FeatureSection 
                    icon={Smartphone} 
                    title="Mobile First" 
                    desc="A native-quality experience on your phone without the app store bloat." 
                    delay={0.5}
                />
            </div>
        </div>
      </section>

      {/* Social Proof */}
      <section className="py-24 border-t border-slate-900 bg-[#020617]">
          <div className="max-w-7xl mx-auto px-6 text-center">
              <p className="text-slate-500 font-mono uppercase tracking-widest text-sm mb-12">Trusted by investors at</p>
              <div className="flex flex-wrap justify-center gap-12 md:gap-24 opacity-40 grayscale hover:grayscale-0 transition-all duration-500">
                  {['Goldman Sachs', 'BlackRock', 'Vanguard', 'Fidelity', 'Coinbase'].map((name) => (
                      <span key={name} className="text-2xl font-bold font-serif text-slate-300">{name}</span>
                  ))}
              </div>
          </div>
      </section>

      {/* Footer */}
      <footer className="py-12 border-t border-slate-900 bg-slate-950 text-center">
          <p className="text-slate-600 text-sm">© 2024 PortfolioPro Inc. Not financial advice.</p>
      </footer>
    </div>
  );
};

// --- Dashboard Components ---

const MetricCard = ({ label, value, trend, subtext }: { label: string, value: string, trend?: number, subtext?: string }) => (
    <div className="flex flex-col">
        <span className="text-slate-500 text-xs font-semibold uppercase tracking-wider mb-2">{label}</span>
        <div className="flex items-baseline gap-3">
            <span className="text-3xl font-mono font-bold text-white tracking-tight">{value}</span>
        </div>
        <div className="flex items-center gap-2 mt-3">
            {trend !== undefined && (
                <span className={cn(
                    "flex items-center text-xs font-bold px-2 py-0.5 rounded-full",
                    trend >= 0 ? "text-emerald-400 bg-emerald-400/10" : "text-rose-400 bg-rose-400/10"
                )}>
                    {trend >= 0 ? <TrendingUp size={12} className="mr-1" /> : <TrendingDown size={12} className="mr-1" />}
                    {Math.abs(trend)}%
                </span>
            )}
            {subtext && <span className="text-slate-500 text-xs">{subtext}</span>}
        </div>
    </div>
);

// --- Main App ---

const App = () => {
  const [view, setView] = useState<'landing' | 'dashboard'>('landing');
  const [activeTab, setActiveTab] = useState('overview');
  
  // Calculations
  const totalValue = INITIAL_ASSETS.reduce((acc, a) => acc + (a.shares * a.currentPrice), 0);
  const totalCost = INITIAL_ASSETS.reduce((acc, a) => acc + (a.shares * a.avgPrice), 0);
  const totalReturnPercent = ((totalValue - totalCost) / totalCost) * 100;
  
  const allocationData = useMemo(() => {
     const data: Record<string, number> = {};
     INITIAL_ASSETS.forEach(a => {
         data[a.sector] = (data[a.sector] || 0) + (a.shares * a.currentPrice);
     });
     return Object.keys(data).map(key => ({ name: key, value: data[key] }));
  }, []);

  const ALLOCATION_COLORS = ['#10b981', '#6366f1', '#f43f5e', '#f59e0b', '#8b5cf6'];

  if (view === 'landing') return <LandingPage onEnter={() => setView('dashboard')} />;

  return (
    <div className="min-h-screen bg-[#020617] text-slate-50 font-sans selection:bg-emerald-500/30 flex flex-col md:flex-row">
      
      {/* Sidebar */}
      <aside className="fixed bottom-0 w-full md:w-20 md:static md:h-screen bg-slate-950/80 backdrop-blur-xl border-t md:border-t-0 md:border-r border-slate-800 z-50 flex md:flex-col items-center justify-around md:justify-start md:pt-8 p-2 md:p-0">
         <div className="hidden md:flex mb-12 p-3 bg-emerald-500/10 rounded-xl text-emerald-400">
             <TrendingUp size={24} />
         </div>
         
         {[
             { id: 'overview', icon: LayoutDashboard, label: 'Overview' },
             { id: 'holdings', icon: Wallet, label: 'Holdings' },
             { id: 'news', icon: Newspaper, label: 'News' },
         ].map(item => (
             <button
                key={item.id}
                onClick={() => setActiveTab(item.id)}
                className={cn(
                    "p-3 rounded-xl transition-all relative group",
                    activeTab === item.id 
                        ? "text-white bg-slate-800 shadow-[0_0_15px_rgba(30,41,59,0.5)]" 
                        : "text-slate-500 hover:text-slate-300 hover:bg-slate-900"
                )}
             >
                 <item.icon size={22} />
                 {activeTab === item.id && (
                     <span className="hidden md:block absolute right-0 top-2 bottom-2 w-1 bg-emerald-500 rounded-l-full" />
                 )}
             </button>
         ))}
         
         <div className="flex-grow hidden md:block" />
         <div className="hidden md:flex flex-col gap-4 mb-8">
            <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-indigo-500 to-purple-500 ring-2 ring-slate-800" />
         </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 p-4 md:p-8 md:pb-12 pb-32 max-w-[1600px] mx-auto overflow-y-auto h-screen">
          
          {/* Header */}
          <header className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-6">
              <div>
                  <h1 className="text-slate-400 font-medium mb-1">Total Net Worth</h1>
                  <div className="flex items-baseline gap-4">
                      <span className="text-4xl md:text-5xl font-mono font-bold tracking-tight text-white">
                          ${totalValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                      </span>
                      <div className="px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-400 text-sm font-bold flex items-center gap-1 border border-emerald-500/20">
                          <TrendingUp size={14} /> +{totalReturnPercent.toFixed(2)}%
                      </div>
                  </div>
              </div>
              <div className="flex gap-3 w-full md:w-auto">
                  <button className="flex-1 md:flex-none px-5 py-2.5 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold rounded-lg transition-all flex items-center justify-center gap-2 shadow-lg shadow-emerald-500/20">
                      <Plus size={18} /> Add Asset
                  </button>
                  <button className="px-3 bg-slate-800 text-slate-400 rounded-lg hover:bg-slate-700 transition-colors border border-slate-700">
                      <Search size={20} />
                  </button>
              </div>
          </header>

          {activeTab === 'overview' && (
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                  
                  {/* Chart Section */}
                  <div className="lg:col-span-2 space-y-6">
                      <GlassCard className="h-[450px] flex flex-col p-6 md:p-8">
                          <div className="flex justify-between items-center mb-8">
                              <h3 className="font-bold text-xl text-white flex items-center gap-2">
                                  <BarChart3 size={20} className="text-emerald-500" />
                                  Performance
                              </h3>
                              <div className="flex bg-slate-900 rounded-lg p-1 border border-slate-800">
                                  {['1W', '1M', '3M', 'YTD', 'ALL'].map(t => (
                                      <button key={t} className={cn("px-3 py-1 text-xs rounded-md font-medium transition-all", t === '1M' ? "bg-slate-700 text-white shadow-sm" : "text-slate-500 hover:text-slate-300")}>{t}</button>
                                  ))}
                              </div>
                          </div>
                          
                          {/* Explicit height wrapper for Recharts */}
                          <div className="flex-1 min-h-0 w-full relative">
                            <ResponsiveContainer width="100%" height="100%">
                                <AreaChart data={INITIAL_HISTORY}>
                                    <defs>
                                        <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="5%" stopColor="#10b981" stopOpacity={0.3}/>
                                            <stop offset="95%" stopColor="#10b981" stopOpacity={0}/>
                                        </linearGradient>
                                    </defs>
                                    <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
                                    <XAxis 
                                        dataKey="date" 
                                        axisLine={false} 
                                        tickLine={false} 
                                        tick={{fill: '#64748b', fontSize: 11}} 
                                        minTickGap={40}
                                        dy={10}
                                    />
                                    <YAxis 
                                        axisLine={false} 
                                        tickLine={false} 
                                        tick={{fill: '#64748b', fontSize: 11, fontFamily: 'JetBrains Mono'}} 
                                        domain={['auto', 'auto']}
                                        tickFormatter={(val) => `$${val/1000}k`}
                                        dx={-10}
                                    />
                                    <Tooltip 
                                        contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155', borderRadius: '12px', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.5)' }}
                                        itemStyle={{ color: '#10b981', fontFamily: 'JetBrains Mono' }}
                                        labelStyle={{ color: '#94a3b8', marginBottom: '0.5rem' }}
                                        formatter={(value: number) => [`$${value.toLocaleString()}`, 'Value']}
                                    />
                                    <Area 
                                        type="monotone" 
                                        dataKey="value" 
                                        stroke="#10b981" 
                                        strokeWidth={3} 
                                        fillOpacity={1} 
                                        fill="url(#colorValue)" 
                                        animationDuration={1500}
                                    />
                                </AreaChart>
                            </ResponsiveContainer>
                          </div>
                      </GlassCard>

                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <GlassCard>
                             <div className="flex justify-between items-start">
                                 <MetricCard label="Today's Gain" value="+$1,240.50" trend={1.24} />
                                 <div className="p-3 bg-emerald-500/10 rounded-xl text-emerald-500 border border-emerald-500/20">
                                     <Activity size={20} />
                                 </div>
                             </div>
                          </GlassCard>
                          <GlassCard>
                             <div className="flex justify-between items-start">
                                 <MetricCard label="Est. Dividends" value="$3,420" subtext="2.4% Yield" />
                                 <div className="p-3 bg-blue-500/10 rounded-xl text-blue-500 border border-blue-500/20">
                                     <DollarSign size={20} />
                                 </div>
                             </div>
                          </GlassCard>
                      </div>
                  </div>

                  {/* Right Column */}
                  <div className="space-y-6">
                      {/* Allocation */}
                      <GlassCard className="h-[380px] flex flex-col">
                          <h3 className="font-bold text-lg text-white mb-6">Allocation</h3>
                          <div className="flex-1 relative min-h-0">
                               <ResponsiveContainer width="100%" height="100%">
                                  <PieChart>
                                      <Pie
                                          data={allocationData}
                                          innerRadius={70}
                                          outerRadius={100}
                                          paddingAngle={4}
                                          dataKey="value"
                                          cornerRadius={6}
                                      >
                                          {allocationData.map((entry, index) => (
                                              <Cell 
                                                key={`cell-${index}`} 
                                                fill={ALLOCATION_COLORS[index % ALLOCATION_COLORS.length]} 
                                                stroke="rgba(0,0,0,0)"
                                              />
                                          ))}
                                      </Pie>
                                      <Tooltip 
                                          contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155', borderRadius: '8px' }}
                                          itemStyle={{ color: '#fff' }}
                                      />
                                  </PieChart>
                              </ResponsiveContainer>
                              <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                                  <span className="text-3xl font-bold text-white">{INITIAL_ASSETS.length}</span>
                                  <span className="text-xs text-slate-500 uppercase tracking-widest">Assets</span>
                              </div>
                          </div>
                          <div className="mt-6 flex flex-wrap gap-3 justify-center">
                              {allocationData.map((entry, index) => (
                                  <div key={entry.name} className="flex items-center gap-2 text-xs font-medium text-slate-400 bg-slate-800/50 px-2 py-1 rounded">
                                      <div className="w-2 h-2 rounded-full" style={{ backgroundColor: ALLOCATION_COLORS[index % ALLOCATION_COLORS.length] }} />
                                      {entry.name}
                                  </div>
                              ))}
                          </div>
                      </GlassCard>
                      
                      {/* AI Advisor */}
                      <AIAdvisor assets={INITIAL_ASSETS} />
                  </div>
              </div>
          )}

          {activeTab === 'holdings' && (
              <GlassCard className="p-0 overflow-hidden">
                  <div className="p-6 border-b border-slate-800 flex justify-between items-center bg-slate-900/30">
                      <h3 className="font-bold text-lg text-white">Your Assets</h3>
                      <button className="text-sm text-emerald-400 hover:text-emerald-300 font-medium">Download CSV</button>
                  </div>
                  <div className="overflow-x-auto">
                      <table className="w-full">
                          <thead className="bg-slate-950 text-slate-500 text-xs uppercase font-semibold tracking-wider">
                              <tr>
                                  <th className="px-6 py-4 text-left">Asset</th>
                                  <th className="px-6 py-4 text-right">Price</th>
                                  <th className="px-6 py-4 text-right">Balance</th>
                                  <th className="px-6 py-4 text-right">Return</th>
                                  <th className="px-6 py-4 text-right">Action</th>
                              </tr>
                          </thead>
                          <tbody className="divide-y divide-slate-800/50">
                              {INITIAL_ASSETS.map((asset) => {
                                  const balance = asset.shares * asset.currentPrice;
                                  const profit = balance - (asset.shares * asset.avgPrice);
                                  const profitPercent = (profit / (asset.shares * asset.avgPrice)) * 100;
                                  
                                  return (
                                      <tr key={asset.ticker} className="hover:bg-slate-800/30 transition-colors group">
                                          <td className="px-6 py-5">
                                              <div className="flex items-center gap-4">
                                                  <div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center font-bold text-sm text-slate-300 border border-slate-700">
                                                      {asset.ticker[0]}
                                                  </div>
                                                  <div>
                                                      <div className="font-bold text-white group-hover:text-emerald-400 transition-colors">{asset.ticker}</div>
                                                      <div className="text-xs text-slate-500">{asset.name}</div>
                                                  </div>
                                              </div>
                                          </td>
                                          <td className="px-6 py-5 text-right">
                                              <div className="font-mono text-slate-300">${asset.currentPrice.toFixed(2)}</div>
                                          </td>
                                          <td className="px-6 py-5 text-right">
                                              <div className="font-mono font-bold text-white">${balance.toLocaleString()}</div>
                                              <div className="text-xs text-slate-500">{asset.shares} shares</div>
                                          </td>
                                          <td className="px-6 py-5 text-right">
                                              <div className={cn(
                                                  "font-mono inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold",
                                                  profit >= 0 ? "text-emerald-400 bg-emerald-400/10" : "text-rose-400 bg-rose-400/10"
                                              )}>
                                                  {profit >= 0 ? '+' : ''}{profitPercent.toFixed(2)}%
                                              </div>
                                              <div className={cn("text-xs mt-1", profit >= 0 ? "text-emerald-500/50" : "text-rose-500/50")}>
                                                  {profit >= 0 ? '+' : '-'}${Math.abs(profit).toLocaleString()}
                                              </div>
                                          </td>
                                          <td className="px-6 py-5 text-right">
                                               <button className="text-slate-400 hover:text-white p-2 hover:bg-slate-800 rounded-lg transition-colors">
                                                   <ChevronRight size={18} />
                                               </button>
                                          </td>
                                      </tr>
                                  );
                              })}
                          </tbody>
                      </table>
                  </div>
              </GlassCard>
          )}
      </main>
    </div>
  );
};

const root = createRoot(document.getElementById('root')!);
root.render(<App />);