import React, { useState, useMemo, useEffect } from 'react';
import { 
  LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, ComposedChart, Area, Cell
} from 'recharts';
import { 
  TrendingUp, Wallet, PieChart, Calendar, Info, Calculator, DollarSign, ChevronRight, Settings, Users, ShieldCheck, Landmark, Receipt, Briefcase, HelpCircle, Layers, MousePointer2, Printer, ChevronUp, ChevronDown, Sparkles, Cloud, CloudOff, Save, RefreshCw
} from 'lucide-react';

// --- AWS CONFIGURATION (FOR ATLAS DEPLOYMENT) ---
// Note: In a production AWS build, these are usually injected via environment variables.
const AWS_CONFIG = {
  region: "us-east-1", // Update to your region
  userPoolId: "us-east-1_XXXXX",
  userPoolClientId: "XXXXX",
  dynamoDbTable: "EquityBriefings"
};

const App = () => {
  // --- STATE & CALCULATIONS ---
  const [valuationMultiple, setValuationMultiple] = useState(12);
  const [selectedYear, setSelectedYear] = useState('Series B');
  const [showSettings, setShowSettings] = useState(false);
  const [isSummaryExpanded, setIsSummaryExpanded] = useState(false);
  const [isSyncing, setIsSyncing] = useState(false);
  const [lastSynced, setLastSynced] = useState(null);
  
  // Inputs
  const [employeeName, setEmployeeName] = useState('Sarah Jenkins');
  const [jobTitle, setJobTitle] = useState('Chief Design Officer');
  const [initialShares, setInitialShares] = useState(150000); 
  const [newGrantShares, setNewGrantShares] = useState(350000); 
  const [strikePrice, setStrikePrice] = useState(0.01); 
  const [taxRate, setTaxRate] = useState(25); 
  const [totalPool, setTotalPool] = useState(10000000); 

  const totalSharesForEmployee = Number(initialShares) + Number(newGrantShares);
  
  const scenarios = [
    { stage: 'Current', year: '2025', arr: 0, valuation: 1000000, totalShares: totalPool, sharePrice: 0.10, newVestedPercent: 0 },
    { stage: 'Seed', year: '2026', arr: 500000, valuation: 25000000, totalShares: totalPool * 1.25, sharePrice: 2.00, newVestedPercent: 30 },
    { stage: 'Series A', year: '2027', arr: 2500000, valuation: 50000000, totalShares: totalPool * 1.56, sharePrice: 3.20, newVestedPercent: 60 },
    { stage: 'Series B', year: '2028', arr: 7500000, valuation: 125000000, totalShares: totalPool * 1.95, sharePrice: 6.40, newVestedPercent: 100 }
  ];

  const chartData = useMemo(() => {
    return scenarios.map(s => {
      const dynamicValuation = s.arr > 0 ? s.arr * valuationMultiple : s.valuation;
      const dynamicSharePrice = dynamicValuation / s.totalShares;
      const ownershipPercent = (totalSharesForEmployee / s.totalShares) * 100;
      
      const grossValue = totalSharesForEmployee * dynamicSharePrice;
      const exerciseCost = totalSharesForEmployee * strikePrice;
      const netPreTax = Math.max(0, grossValue - exerciseCost);
      const taxLiability = netPreTax * (taxRate / 100);
      const netPostTax = netPreTax - taxLiability;

      return {
        ...s,
        ownershipPercent: ownershipPercent.toFixed(3),
        grossValue,
        exerciseCost,
        netPreTax,
        taxLiability,
        netPostTax,
        displayValue: (netPostTax / 1000000).toFixed(2)
      };
    });
  }, [valuationMultiple, initialShares, newGrantShares, totalPool, strikePrice, taxRate]);

  const selectedData = chartData.find(d => d.stage === selectedYear);

  const initialPercent = ((initialShares / totalPool) * 100).toFixed(2);
  const newGrantPercent = ((newGrantShares / totalPool) * 100).toFixed(2);
  const totalCombinedPercent = ((totalSharesForEmployee / totalPool) * 100).toFixed(2);

  const formatCurrency = (val) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(val);
  const formatCompact = (val) => new Intl.NumberFormat('en-US', { notation: "compact", compactDisplay: "short" }).format(val);

  // Persistence Logic (Stubs for AWS Amplify/AppSync)
  const handleSaveToCloud = async () => {
    setIsSyncing(true);
    // Real logic would be: await DataStore.save(new Briefing({...}))
    setTimeout(() => {
      setIsSyncing(false);
      setLastSynced(new Date().toLocaleTimeString());
    }, 1500);
  };

  const LaymanTooltip = ({ title, text }) => (
    <div className="group relative inline-block ml-1 align-middle">
      <HelpCircle size={14} className="text-slate-300 cursor-help hover:text-indigo-500 transition-colors" />
      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 p-4 bg-[#0F172A] text-white text-[11px] rounded-2xl shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-[100] pointer-events-none border border-slate-700 backdrop-blur-md">
        <p className="font-bold mb-1 text-indigo-400 uppercase tracking-widest flex items-center gap-1">
          <Sparkles size={10} /> {title}
        </p>
        <p className="leading-relaxed opacity-90 font-medium">{text}</p>
        <div className="absolute top-full left-1/2 -translate-x-1/2 border-8 border-transparent border-t-[#0F172A]"></div>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-[#FDFDFF] p-4 md:p-10 font-sans text-[#1E293B] pb-40 print:p-0 print:bg-white print:pb-0">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
        body { font-family: 'Inter', sans-serif; }
        @media print {
          .no-print { display: none !important; }
          .print-full-width { width: 100% !important; max-width: 100% !important; }
          .print-grid-reset { display: block !important; }
          .print-mb { margin-bottom: 2.5rem !important; }
          body { font-size: 11pt; }
        }
        .fownd-gradient {
          background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
        }
      `}</style>

      {/* HEADER SECTION */}
      <div className="max-w-7xl mx-auto mb-12 print-mb">
        <div className="flex flex-col xl:flex-row xl:items-end justify-between gap-10">
          <div className="flex-1">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-xl fownd-gradient flex items-center justify-center text-white shadow-lg shadow-indigo-200">
                <ShieldCheck size={24} />
              </div>
              <span className="text-[11px] font-black text-indigo-600 uppercase tracking-[0.2em]">Confidential Equity Briefing</span>
            </div>
            <h1 className="text-5xl md:text-6xl font-black text-[#0F172A] tracking-tighter leading-none mb-2">
              {employeeName}
            </h1>
            <p className="text-2xl font-semibold text-slate-400 flex items-center gap-2">
              {jobTitle}
            </p>
          </div>

          {/* ARR INTERACTIVE SLIDER */}
          <div className="bg-white p-7 rounded-[2rem] shadow-xl shadow-slate-200/50 border border-slate-100 flex flex-col md:flex-row items-center gap-8 xl:max-w-2xl no-print relative overflow-hidden group">
             <div className="absolute top-0 left-0 w-1 h-full fownd-gradient"></div>
             <div className="flex-1 space-y-3 w-full">
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Market Multiplier</span>
                    <LaymanTooltip title="The Value Amplifier" text="Shows how market demand for AI Health Tech impacts your personal net worth." />
                  </div>
                  <span className="text-indigo-600 font-black text-xl bg-indigo-50 px-3 py-1 rounded-xl border border-indigo-100">{valuationMultiple}x</span>
                </div>
                <input 
                  type="range" min="6" max="25" step="1" 
                  value={valuationMultiple} 
                  onChange={(e) => setValuationMultiple(parseInt(e.target.value))}
                  className="w-full h-2 bg-slate-100 rounded-full appearance-none cursor-pointer accent-indigo-600"
                />
             </div>
             <div className="h-12 w-px bg-slate-100 hidden md:block"></div>
             <button 
                onClick={() => setShowSettings(!showSettings)}
                className={`flex items-center gap-2 px-6 py-4 rounded-2xl font-bold transition-all border shrink-0 w-full md:w-auto justify-center ${showSettings ? 'bg-slate-900 text-white border-slate-900 shadow-xl' : 'bg-white text-slate-700 border-slate-200 hover:border-indigo-400 hover:shadow-lg'}`}
              >
                <Settings size={20} /> {showSettings ? 'Exit' : 'Configure'}
              </button>
          </div>
        </div>

        {/* SETTINGS PANEL */}
        {showSettings && (
          <div className="bg-white p-10 rounded-[2.5rem] shadow-2xl border border-indigo-50 mt-8 animate-in fade-in slide-in-from-top-6 duration-500 no-print">
            <div className="flex justify-between items-center mb-8">
              <h3 className="text-sm font-black text-slate-900 uppercase tracking-widest flex items-center gap-2">
                <Calculator size={18} className="text-indigo-500" /> Administrative (AWS Sync)
              </h3>
              
              <div className="flex items-center gap-4 bg-slate-50 p-2 rounded-2xl border border-slate-100">
                <div className="px-3">
                  <p className="text-[9px] font-black text-slate-400 uppercase tracking-tighter leading-none mb-1 text-right">AWS Storage</p>
                  <p className="text-[10px] font-bold text-slate-600 flex items-center gap-1">
                    {lastSynced ? <><Cloud size={12} className="text-emerald-500" /> Last Synced {lastSynced}</> : <><CloudOff size={12} className="text-amber-500" /> Offline Mode</>}
                  </p>
                </div>
                <button 
                  onClick={handleSaveToCloud}
                  disabled={isSyncing}
                  className="bg-white border border-slate-200 hover:border-indigo-500 text-indigo-600 p-3 rounded-xl shadow-sm transition-all active:scale-95 disabled:opacity-50"
                >
                  {isSyncing ? <RefreshCw size={18} className="animate-spin" /> : <Save size={18} />}
                </button>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              <div className="space-y-3">
                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Employee Name</label>
                <input type="text" value={employeeName} onChange={(e) => setEmployeeName(e.target.value)} className="w-full p-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-100 outline-none font-bold text-sm transition-all" />
              </div>
              <div className="space-y-3">
                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Job Title</label>
                <input type="text" value={jobTitle} onChange={(e) => setJobTitle(e.target.value)} className="w-full p-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-100 outline-none font-bold text-sm transition-all" />
              </div>
              <div className="space-y-3">
                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Existing Stake</label>
                <input type="number" value={initialShares} onChange={(e) => setInitialShares(Number(e.target.value))} className="w-full p-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-100 outline-none font-bold text-sm transition-all" />
              </div>
              <div className="space-y-3">
                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider text-indigo-600">Additional Grant</label>
                <input type="number" value={newGrantShares} onChange={(e) => setNewGrantShares(Number(e.target.value))} className="w-full p-4 bg-indigo-50/50 border border-indigo-200 rounded-2xl focus:ring-4 focus:ring-indigo-100 outline-none font-bold text-sm transition-all" />
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mt-10 pt-10 border-t border-slate-100">
               <div className="space-y-4">
                 <div className="flex items-center">
                    <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Tax Provision (%)</label>
                    <LaymanTooltip title="Managing Taxes" text="Models a 25% - 35% 'haircut' to show actual cash outcomes, not just paper numbers." />
                 </div>
                 <input type="number" value={taxRate} onChange={(e) => setTaxRate(Number(e.target.value))} className="w-32 p-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-100 outline-none font-bold text-sm transition-all" />
               </div>
               <div className="space-y-4">
                 <div className="flex items-center">
                    <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Exercise Strike ($)</label>
                    <LaymanTooltip title="Buying Your Shares" text="The fixed price you pay to purchase your shares. Everything above this is pure profit." />
                 </div>
                 <input type="number" step="0.01" value={strikePrice} onChange={(e) => setStrikePrice(Number(e.target.value))} className="w-32 p-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-100 outline-none font-bold text-sm transition-all" />
               </div>
            </div>
          </div>
        )}
      </div>

      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-10 print-grid-reset">
        
        {/* SUMMARY CARDS */}
        <div className="lg:col-span-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 print-mb">
           <div className="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-100 flex flex-col justify-between hover:shadow-xl hover:scale-[1.02] transition-all">
              <div>
                <p className="text-[10px] font-black text-indigo-500 uppercase tracking-[0.2em] mb-4">Allocation Summary</p>
                <div className="space-y-2 mb-6">
                  <div className="flex justify-between text-xs font-semibold text-slate-400">
                    <span>Vested Baseline</span>
                    <span className="text-slate-900">{initialShares.toLocaleString()}</span>
                  </div>
                  <div className="flex justify-between text-xs font-semibold text-indigo-500">
                    <span>Performance Grant</span>
                    <span className="font-bold">+{newGrantShares.toLocaleString()}</span>
                  </div>
                </div>
                <div className="pt-4 border-t border-slate-50 flex justify-between items-baseline">
                  <span className="text-[11px] font-black text-slate-300 uppercase">Target Shares</span>
                  <p className="text-4xl font-black text-[#0F172A] leading-none tracking-tighter">{totalSharesForEmployee.toLocaleString()}</p>
                </div>
              </div>
           </div>

           <div className="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-100 flex flex-col justify-between hover:shadow-xl hover:scale-[1.02] transition-all">
              <div>
                <p className="text-[10px] font-black text-emerald-500 uppercase tracking-[0.2em] mb-4">Ownership Stake</p>
                <div className="space-y-2 mb-6">
                  <div className="flex justify-between text-xs font-semibold text-slate-400">
                    <span>Pre-Round %</span>
                    <span className="text-slate-900">{initialPercent}%</span>
                  </div>
                  <div className="flex justify-between text-xs font-semibold text-emerald-500">
                    <span>Equity Boost</span>
                    <span className="font-bold">+{newGrantPercent}%</span>
                  </div>
                </div>
                <div className="pt-4 border-t border-slate-50 flex justify-between items-baseline">
                  <span className="text-[11px] font-black text-slate-300 uppercase">Total Target</span>
                  <p className="text-4xl font-black text-[#0F172A] leading-none tracking-tighter">{totalCombinedPercent}%</p>
                </div>
              </div>
           </div>

           <div className="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-100 flex flex-col justify-between hover:shadow-xl hover:scale-[1.02] transition-all">
              <div>
                <p className="text-[10px] font-black text-amber-500 uppercase tracking-[0.2em] mb-4">Capital Multiple</p>
                <p className="text-5xl font-black text-[#0F172A] tracking-tighter mb-1">
                    {(selectedData.netPostTax / (Math.max(1, initialShares * 0.10))).toFixed(0)}X
                </p>
                <p className="text-xs font-bold text-slate-400 uppercase tracking-widest mt-2">Projected Appreciation</p>
              </div>
              <p className="text-[11px] text-slate-400 mt-4 font-semibold italic">Scenario: {selectedYear}</p>
           </div>

           <div className="fownd-gradient p-8 rounded-[2rem] shadow-2xl shadow-indigo-200 flex flex-col justify-between text-white hover:scale-[1.02] transition-all">
              <div>
                <p className="text-[10px] font-black text-indigo-100 uppercase tracking-[0.2em] mb-4">Stage Payout (Net)</p>
                <p className="text-5xl font-black text-white leading-none tracking-tighter mb-2">{formatCompact(selectedData.netPostTax)}</p>
                <p className="text-[11px] font-bold text-indigo-100/80 leading-snug">
                  Post-Tax Outcome for {selectedData.stage}
                </p>
              </div>
              <div className="pt-4 border-t border-white/20 mt-6 flex items-center justify-between">
                <span className="text-[9px] font-black uppercase tracking-widest">Calculated with {taxRate}% tax</span>
                <TrendingUp size={16} className="text-white opacity-50" />
              </div>
           </div>
        </div>

        {/* FINANCIAL DETAIL */}
        <div className="lg:col-span-4 space-y-8 print-full-width">
          <div className="bg-[#0F172A] rounded-[2.5rem] p-10 text-white shadow-2xl relative overflow-hidden group print-full-width">
            <div className="absolute -top-10 -right-10 w-40 h-40 bg-indigo-500/20 rounded-full blur-3xl"></div>
            <div className="relative z-10">
              <p className="text-indigo-400 text-[10px] font-black uppercase tracking-[0.2em] mb-6">Pro Forma Calculation</p>
              <h3 className="text-6xl font-black mb-2 tracking-tighter">{formatCompact(selectedData.netPostTax)}</h3>
              <p className="text-slate-400 text-sm font-bold tracking-wide italic">Stage: {selectedYear}</p>
              
              <div className="mt-12 space-y-5 pt-8 border-t border-white/10">
                <div className="flex justify-between items-center text-xs">
                  <span className="opacity-50 font-bold uppercase tracking-widest">Gross Value</span>
                  <span className="font-black text-lg">{formatCurrency(selectedData.grossValue)}</span>
                </div>
                <div className="flex justify-between items-center text-xs">
                  <span className="opacity-50 font-bold uppercase tracking-widest flex items-center gap-1">Exercise Cost</span>
                  <span className="font-bold text-rose-400">-{formatCurrency(selectedData.exerciseCost)}</span>
                </div>
                <div className="flex justify-between items-center text-xs font-bold text-indigo-400">
                  <span className="opacity-80 font-black uppercase tracking-widest">Net Cash Potential</span>
                  <span className="font-black text-xl">{formatCurrency(selectedData.netPostTax)}</span>
                </div>
              </div>
            </div>
          </div>

          {/* Vesting */}
          <div className="bg-white rounded-[2.5rem] shadow-sm border border-slate-100 p-8 no-print">
            <h3 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-8 flex items-center gap-2">
              <Layers size={16} className="text-indigo-600" /> Vesting Progress
            </h3>
            <div className="space-y-6">
              {[
                { label: 'Baseline', shares: initialShares, progress: 100, color: 'bg-emerald-400' },
                { label: 'Year 1: 30%', shares: Math.round(newGrantShares * 0.3), progress: selectedData.newVestedPercent >= 30 ? 100 : 0, color: 'bg-indigo-400' },
                { label: 'Year 2: 30%', shares: Math.round(newGrantShares * 0.3), progress: selectedData.newVestedPercent >= 60 ? 100 : 0, color: 'bg-indigo-500' },
                { label: 'Year 3: 40%', shares: Math.round(newGrantShares * 0.4), progress: selectedData.newVestedPercent >= 100 ? 100 : 0, color: 'bg-indigo-600' },
              ].map((item, i) => (
                <div key={i} className="space-y-2">
                  <div className="flex justify-between text-[11px] font-bold text-slate-500">
                    <span className="uppercase tracking-widest">{item.label}</span>
                    <span className="font-mono">{item.shares.toLocaleString()}</span>
                  </div>
                  <div className="h-2.5 w-full bg-slate-50 rounded-full overflow-hidden border border-slate-100">
                    <div className={`h-full ${item.color} transition-all duration-1000 shadow-sm`} style={{ width: `${item.progress}%` }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* CHARTS */}
        <div className="lg:col-span-8 space-y-10 print-full-width">
          <div className="bg-white rounded-[2.5rem] shadow-sm border border-slate-100 p-10 print-p">
            <div className="flex flex-col md:flex-row md:items-center justify-between mb-12 gap-6">
              <div>
                <h3 className="text-2xl font-black text-slate-900 tracking-tight">The Growth Narrative</h3>
                <p className="text-sm text-slate-400 mt-1 font-bold italic">Value Growth vs. Round Dilution</p>
              </div>
              <div className="flex flex-wrap gap-2 bg-slate-50 p-2 rounded-2xl no-print border border-slate-100">
                {scenarios.map(s => (
                  <button 
                    key={s.stage} 
                    onClick={() => setSelectedYear(s.stage)} 
                    className={`px-5 py-2 text-xs font-black rounded-xl transition-all uppercase tracking-widest ${selectedYear === s.stage ? 'bg-white shadow-lg text-indigo-600' : 'text-slate-400 hover:text-slate-600'}`}
                  >
                    {s.stage}
                  </button>
                ))}
              </div>
            </div>

            <div className="h-[400px] w-full">
              <ResponsiveContainer width="100%" height="100%">
                <ComposedChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#F1F5F9" />
                  <XAxis dataKey="stage" axisLine={false} tickLine={false} tick={{fill: '#94A3B8', fontSize: 10, fontWeight: 800}} dy={15} />
                  <YAxis yAxisId="left" axisLine={false} tickLine={false} tick={{fill: '#6366F1', fontSize: 10, fontWeight: 800}} unit="M" />
                  <YAxis yAxisId="right" orientation="right" axisLine={false} tickLine={false} tick={{fill: '#CBD5E1', fontSize: 10, fontWeight: 800}} unit="%" />
                  <Tooltip cursor={{fill: '#F8FAFC'}} contentStyle={{ borderRadius: '24px', border: 'none', boxShadow: '0 30px 60px -12px rgba(0,0,0,0.15)', padding: '20px' }} />
                  <Bar yAxisId="left" dataKey="displayValue" name="Net Asset ($M)" radius={[12, 12, 0, 0]} barSize={65}>
                    {chartData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={selectedYear === entry.stage ? '#6366F1' : '#E2E8F0'} />
                    ))}
                  </Bar>
                  <Line yAxisId="right" type="monotone" dataKey="ownershipPercent" name="Stake %" stroke="#CBD5E1" strokeWidth={4} dot={{ r: 6, fill: '#fff', stroke: '#CBD5E1', strokeWidth: 3 }} />
                </ComposedChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>

        {/* TABLE */}
        <div className="lg:col-span-12 print-mb">
          <div className="bg-white rounded-[2.5rem] shadow-sm border border-slate-100 overflow-hidden">
            <div className="p-8 border-b border-slate-50 bg-slate-50/50 flex justify-between items-center">
              <h3 className="text-sm font-black text-[#0F172A] uppercase tracking-widest flex items-center gap-2">
                <Receipt size={18} className="text-indigo-500" /> Full Round Modeling
              </h3>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full text-left text-[14px] border-collapse min-w-[700px]">
                <thead>
                  <tr className="text-slate-400 font-bold uppercase text-[10px] tracking-[0.2em] border-b border-slate-50 bg-slate-50/20">
                    <th className="px-8 py-5">Funding Round</th>
                    <th className="px-8 py-5">Valuation</th>
                    <th className="px-8 py-5">Price</th>
                    <th className="px-8 py-5 text-right font-black">Net Cash</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-50">
                  {chartData.map((d, i) => (
                    <tr key={i} className={`transition-all ${selectedYear === d.stage ? 'bg-indigo-50/30 no-print' : 'hover:bg-slate-50/30'}`}>
                      <td className="px-8 py-6 font-black text-[#0F172A]">{d.stage} ({d.year})</td>
                      <td className="px-8 py-6 text-slate-500 font-bold">{formatCompact(d.arr > 0 ? d.arr * valuationMultiple : d.valuation)}</td>
                      <td className="px-8 py-6 font-mono text-indigo-500 font-black">{formatCurrency(d.sharePrice)}</td>
                      <td className="px-8 py-6 text-right font-black text-[#0F172A] text-lg">{formatCompact(d.netPostTax)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      {/* BOTTOM TAB */}
      <div className={`fixed bottom-0 left-0 right-0 z-50 transition-all duration-700 ease-in-out no-print ${isSummaryExpanded ? 'p-6' : 'p-0'}`}>
        <div className={`max-w-7xl mx-auto transition-all duration-700 ${isSummaryExpanded ? 'translate-y-0' : 'translate-y-[calc(100%-64px)]'}`}>
          <div onClick={() => setIsSummaryExpanded(!isSummaryExpanded)} className="w-full flex justify-center mb-0 cursor-pointer group">
            <div className="bg-[#0F172A]/90 backdrop-blur-xl border border-slate-700/50 px-8 py-3 rounded-t-3xl flex items-center gap-6 shadow-2xl transition-all group-hover:bg-[#0F172A]">
               <div className="flex items-center gap-2 text-white">
                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">Quick Summary</span>
                  {isSummaryExpanded ? <ChevronDown size={16} className="text-indigo-400" /> : <ChevronUp size={16} className="text-indigo-400" />}
               </div>
            </div>
          </div>
          <div className="bg-[#0F172A]/95 backdrop-blur-2xl rounded-3xl p-10 text-white shadow-[0_-20px_60px_-15px_rgba(0,0,0,0.5)] border border-slate-700/50 flex flex-col lg:flex-row items-center gap-12 relative overflow-hidden">
            <div className="absolute top-0 right-0 w-[500px] h-full fownd-gradient opacity-10 blur-3xl -mr-64 pointer-events-none"></div>
            <div className="flex-1 space-y-4">
              <div className="flex items-center gap-3">
                <Sparkles size={20} className="text-indigo-400" />
                <h4 className="text-xl font-black text-white tracking-tight">Growth Briefing Summary</h4>
              </div>
              <p className="text-slate-400 text-sm leading-relaxed max-w-3xl font-medium">
                Our strategic roadmap targets a net post-tax outcome of <span className="text-white font-black underline decoration-indigo-500 underline-offset-8 decoration-2">{formatCompact(chartData[3].netPostTax)}</span> at Series B scale.
              </p>
            </div>
            <div className="flex flex-col sm:flex-row gap-10 items-center shrink-0 w-full lg:w-auto border-t lg:border-t-0 lg:border-l border-white/10 pt-10 lg:pt-0 lg:pl-10">
              <div className="text-center lg:text-right">
                <p className="text-[10px] uppercase font-black text-indigo-400 tracking-[0.3em] mb-2">Maximum Liquidity</p>
                <p className="text-6xl font-black text-white tracking-tighter tabular-nums">{formatCompact(chartData[3].netPostTax)}</p>
              </div>
              <button onClick={() => window.print()} className="fownd-gradient px-8 py-5 rounded-[1.25rem] font-black transition-all shadow-xl flex items-center gap-3 text-sm uppercase tracking-widest border border-white/20 group">
                <Printer size={20} /> Print Briefing
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;