Cap Table Ownership Summary

Installation

Variants

Props

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface Shareholder {
  id: string
  name: string
  role: string
  avatar: string
  shareClass: 'Common Stock' | 'Series Seed Preferred' | 'ISO Option Pool'
  shares: number
  ownershipPct: number
  equityValue: number
  vestingDetail: string
  vestedMonths: number
  totalMonths: number
  isVestedComplete: boolean
  grantDate: string
  liquidationPref?: string
}

Files installed (1)

• components/blocks/CapTableOwnershipSummary.tsx55.6 kB

  Copy

  'use client'
  
  import * as React from 'react'
  import {
    Award,
    Building2,
    Calculator,
    Check,
    Coins,
    FileSpreadsheet,
    Info,
    Layers,
    Plus,
    RefreshCw,
    Search,
    ShieldCheck,
    TrendingUp,
    Users,
    X,
  } from 'lucide-react'
  import { cn } from '@/lib/utils'
  import { Avatar, AvatarFallback } from '@/components/ui/avatar'
  import { Badge } from '@/components/ui/badge'
  import { Button } from '@/components/ui/button'
  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
  import { Input } from '@/components/ui/input'
  import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
  
  export interface CapTableOwnershipSummaryProps {
    initialInvestment?: number
    initialPreMoney?: number
    className?: string
  }
  
  export interface Shareholder {
    id: string
    name: string
    role: string
    avatar: string
    shareClass: 'Common Stock' | 'Series Seed Preferred' | 'ISO Option Pool'
    shares: number
    ownershipPct: number
    equityValue: number
    vestingDetail: string
    vestedMonths: number
    totalMonths: number
    isVestedComplete: boolean
    grantDate: string
    liquidationPref?: string
  }
  
  const initialShareholders: Shareholder[] = [
    {
      id: 'sh-1',
      name: 'Elena Rostova',
      role: 'Co-Founder & CEO',
      avatar: 'ER',
      shareClass: 'Common Stock',
      shares: 3500000,
      ownershipPct: 35.0,
      equityValue: 15750000,
      vestingDetail: '48-Month Vesting · 24/48 Months Vested',
      vestedMonths: 24,
      totalMonths: 48,
      isVestedComplete: false,
      grantDate: 'Feb 15, 2024 · 1-yr Cliff (Satisfied)',
    },
    {
      id: 'sh-2',
      name: 'Marcus Vance',
      role: 'Co-Founder & CTO',
      avatar: 'MV',
      shareClass: 'Common Stock',
      shares: 2500000,
      ownershipPct: 25.0,
      equityValue: 11250000,
      vestingDetail: '48-Month Vesting · 24/48 Months Vested',
      vestedMonths: 24,
      totalMonths: 48,
      isVestedComplete: false,
      grantDate: 'Feb 15, 2024 · 1-yr Cliff (Satisfied)',
    },
    {
      id: 'sh-3',
      name: 'Founders Fund / Seed Syndicate',
      role: 'Lead Seed Investor',
      avatar: 'FF',
      shareClass: 'Series Seed Preferred',
      shares: 1500000,
      ownershipPct: 15.0,
      equityValue: 6750000,
      vestingDetail: 'Fully Vested (100%) · 1.0x Non-Participating',
      vestedMonths: 48,
      totalMonths: 48,
      isVestedComplete: true,
      grantDate: 'Aug 10, 2024 · Board Seat (1)',
      liquidationPref: '1.0x Pref ($6.75M)',
    },
    {
      id: 'sh-4',
      name: 'Sequoia Scout Seed SPV',
      role: 'Seed Co-Investor',
      avatar: 'SQ',
      shareClass: 'Series Seed Preferred',
      shares: 1000000,
      ownershipPct: 10.0,
      equityValue: 4500000,
      vestingDetail: 'Fully Vested (100%) · 1.0x Non-Participating',
      vestedMonths: 48,
      totalMonths: 48,
      isVestedComplete: true,
      grantDate: 'Aug 10, 2024 · Pro-Rata Rights',
      liquidationPref: '1.0x Pref ($4.50M)',
    },
    {
      id: 'sh-5',
      name: 'Unallocated Employee Option Pool',
      role: '2024 Equity Incentive Plan (EIP)',
      avatar: 'EP',
      shareClass: 'ISO Option Pool',
      shares: 1500000,
      ownershipPct: 15.0,
      equityValue: 6750000,
      vestingDetail: 'Authorized Pool · Available for Future Key Hires',
      vestedMonths: 0,
      totalMonths: 48,
      isVestedComplete: false,
      grantDate: 'Board Authorized · Dec 01, 2024',
    },
  ]
  
  export function CapTableOwnershipSummary({
    initialInvestment = 10000000,
    initialPreMoney = 50000000,
    className,
  }: CapTableOwnershipSummaryProps) {
    const currentSharePrice = 4.5
    const currentTotalShares = 10000000
  
    const [shareholders, setShareholders] = React.useState<Shareholder[]>(initialShareholders)
    const [searchQuery, setSearchQuery] = React.useState('')
    const [selectedClassFilter, setSelectedClassFilter] = React.useState<
      'All' | 'Common Stock' | 'Series Seed Preferred' | 'ISO Option Pool'
    >('All')
  
    // Export Cap Table feedback state
    const [isExporting, setIsExporting] = React.useState(false)
    const [exportSuccess, setExportSuccess] = React.useState(false)
  
    const handleExportCapTable = () => {
      setIsExporting(true)
      setTimeout(() => {
        setIsExporting(false)
        setExportSuccess(true)
        setTimeout(() => {
          setExportSuccess(false)
        }, 2500)
      }, 1000)
    }
  
    // Issue Grant Modal State
    const [isGrantDialogOpen, setIsGrantDialogOpen] = React.useState(false)
    const [grantSuccessMessage, setGrantSuccessMessage] = React.useState(false)
    const [grantName, setGrantName] = React.useState('')
    const [grantRole, setGrantRole] = React.useState('')
    const [grantShares, setGrantShares] = React.useState(50000)
    const [grantClass, setGrantClass] = React.useState<'ISO Options' | 'NSO Options' | 'Restricted Stock'>('ISO Options')
    const grantVesting = '4-Year Vesting · 1-Year Cliff (25%), then Monthly'
  
    const handleCreateGrant = (e: React.FormEvent) => {
      e.preventDefault()
      if (!grantName.trim() || grantShares <= 0) return
  
      setGrantSuccessMessage(true)
      setTimeout(() => {
        setGrantSuccessMessage(false)
        setIsGrantDialogOpen(false)
        setGrantName('')
        setGrantRole('')
        setGrantShares(50000)
      }, 1500)
    }
  
    // Filtered Shareholders
    const filteredShareholders = React.useMemo(() => {
      return shareholders.filter((sh) => {
        if (selectedClassFilter !== 'All' && sh.shareClass !== selectedClassFilter) {
          return false
        }
        if (searchQuery.trim()) {
          const q = searchQuery.toLowerCase()
          const matchName = sh.name.toLowerCase().includes(q)
          const matchRole = sh.role.toLowerCase().includes(q)
          const matchClass = sh.shareClass.toLowerCase().includes(q)
          return matchName || matchRole || matchClass
        }
        return true
      })
    }, [shareholders, selectedClassFilter, searchQuery])
  
    // Round Modeling Simulator State
    const [simPreMoney, setSimPreMoney] = React.useState(initialPreMoney)
    const [simInvestment, setSimInvestment] = React.useState(initialInvestment)
  
    const setPresetScenario = (preMoney: number, investment: number) => {
      setSimPreMoney(preMoney)
      setSimInvestment(investment)
    }
  
    // Dynamic Round Calculations
    const simPostMoney = React.useMemo(() => simPreMoney + simInvestment, [simPreMoney, simInvestment])
    const simNewSharePrice = React.useMemo(() => {
      if (currentTotalShares <= 0) return 0
      return simPreMoney / currentTotalShares
    }, [simPreMoney, currentTotalShares])
  
    const simNewSharesIssued = React.useMemo(() => {
      if (simNewSharePrice <= 0) return 0
      return Math.round(simInvestment / simNewSharePrice)
    }, [simInvestment, simNewSharePrice])
  
    const simTotalPostShares = React.useMemo(
      () => currentTotalShares + simNewSharesIssued,
      [currentTotalShares, simNewSharesIssued],
    )
  
    const simFounderShares = 6000000
    const simSeedShares = 2500000
    const simOptionShares = 1500000
  
    const simFounderPct = React.useMemo(() => (simFounderShares / simTotalPostShares) * 100, [simTotalPostShares])
    const simSeedPct = React.useMemo(() => (simSeedShares / simTotalPostShares) * 100, [simTotalPostShares])
    const simOptionPct = React.useMemo(() => (simOptionShares / simTotalPostShares) * 100, [simTotalPostShares])
    const simNewInvestorPct = React.useMemo(
      () => (simNewSharesIssued / simTotalPostShares) * 100,
      [simNewSharesIssued, simTotalPostShares],
    )
  
    const simFounderValue = React.useMemo(() => (simFounderPct / 100) * simPostMoney, [simFounderPct, simPostMoney])
    const simSeedValue = React.useMemo(() => (simSeedPct / 100) * simPostMoney, [simSeedPct, simPostMoney])
    const simOptionValue = React.useMemo(() => (simOptionPct / 100) * simPostMoney, [simOptionPct, simPostMoney])
  
    const formatCurrency = (val: number): string => {
      return val.toLocaleString('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })
    }
  
    const formatNumber = (val: number): string => {
      return val.toLocaleString('en-US')
    }
  
    const formatPercent = (val: number, decimals = 1): string => {
      return `${val.toFixed(decimals)}%`
    }
  
    return (
      <div data-slot="cap-table-ownership-summary" className={cn('mx-auto w-full max-w-6xl space-y-6', className)}>
        {/* Top Header */}
        <header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div className="space-y-1.5">
            <div className="flex flex-wrap items-center gap-2.5">
              <div
                className="bg-primary/10 text-primary border-primary/20 flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-xs"
                aria-hidden="true"
              >
                <Building2 className="size-5" />
              </div>
              <div>
                <h1 className="text-foreground text-2xl font-bold tracking-tight">
                  Capitalization Table &amp; Equity Ownership
                </h1>
              </div>
              <Badge variant="outline" className="border-success/30 bg-success/10 text-success gap-1.5 font-normal">
                <span className="bg-success size-1.5 animate-pulse rounded-full" aria-hidden="true" />
                Audited · Series Seed
              </Badge>
            </div>
  
            <div className="text-muted-foreground flex flex-wrap items-center gap-2 text-xs">
              <span className="bg-muted/70 text-foreground border-border/80 rounded border px-2 py-0.5 font-medium">
                UIPKGE Technologies Inc. · Delaware C-Corp
              </span>
              <span>EIN: 93-8472910</span>
              <span className="inline-flex items-center gap-1 font-mono">
                <ShieldCheck className="text-primary size-3.5" aria-hidden="true" />
                409A FMV: ${currentSharePrice.toFixed(2)}/share
              </span>
            </div>
          </div>
  
          {/* Action Buttons */}
          <div className="flex flex-wrap items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              className="gap-1.5 shadow-xs"
              disabled={isExporting}
              onClick={handleExportCapTable}
            >
              {isExporting ? (
                <RefreshCw className="size-4 animate-spin" aria-hidden="true" />
              ) : exportSuccess ? (
                <Check className="text-success size-4" aria-hidden="true" />
              ) : (
                <FileSpreadsheet className="size-4" aria-hidden="true" />
              )}
              <span>
                {exportSuccess ? 'Cap Table Exported!' : isExporting ? 'Exporting...' : 'Export Cap Table (Excel)'}
              </span>
            </Button>
  
            <Button size="sm" className="gap-1.5 shadow-xs" onClick={() => setIsGrantDialogOpen(true)}>
              <Plus className="size-4" aria-hidden="true" />
              Issue Equity Grant
            </Button>
          </div>
        </header>
  
        {/* Issue Equity Grant Dialog Modal Overlay */}
        {isGrantDialogOpen && (
          <div
            className="bg-background/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-xs"
            role="dialog"
            aria-modal="true"
            aria-labelledby="grant-dialog-title-react"
          >
            <Card className="border-border w-full max-w-lg shadow-lg">
              <CardHeader className="pb-3">
                <div className="flex flex-wrap items-center justify-between gap-x-2">
                  <CardTitle id="grant-dialog-title-react" className="flex items-center gap-2 text-base font-semibold">
                    <Award className="text-primary size-5" />
                    Issue New Equity Option Grant
                  </CardTitle>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="text-muted-foreground hover:text-foreground size-7"
                    aria-label="Close dialog"
                    onClick={() => setIsGrantDialogOpen(false)}
                  >
                    <X className="size-4" />
                  </Button>
                </div>
                <CardDescription className="text-xs">
                  Authorize and draft an option grant under the 2024 Equity Incentive Plan (EIP).
                </CardDescription>
              </CardHeader>
  
              <CardContent className="space-y-4">
                {grantSuccessMessage ? (
                  <div className="border-success/20 bg-success/10 rounded-lg border p-4 text-center">
                    <Check className="text-success mx-auto size-6" />
                    <p className="text-foreground mt-2 text-sm font-semibold">Option Grant Issued &amp; Drafted!</p>
                    <p className="text-muted-foreground mt-0.5 text-xs">
                      Sent to Board of Directors for electronic consent signature.
                    </p>
                  </div>
                ) : (
                  <form className="space-y-3.5" onSubmit={handleCreateGrant}>
                    <div className="space-y-1.5">
                      <label htmlFor="grantee-name-react" className="text-foreground text-xs font-medium">
                        Grantee Legal Name
                      </label>
                      <Input
                        id="grantee-name-react"
                        value={grantName}
                        onChange={(e) => setGrantName(e.target.value)}
                        placeholder="e.g. Dr. Sarah Chen"
                        required
                        className="h-9 text-xs"
                      />
                    </div>
  
                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                      <div className="space-y-1.5">
                        <label htmlFor="grantee-role-react" className="text-foreground text-xs font-medium">
                          Role / Title
                        </label>
                        <Input
                          id="grantee-role-react"
                          value={grantRole}
                          onChange={(e) => setGrantRole(e.target.value)}
                          placeholder="e.g. Principal AI Scientist"
                          required
                          className="h-9 text-xs"
                        />
                      </div>
  
                      <div className="space-y-1.5">
                        <label htmlFor="grant-quantity-react" className="text-foreground text-xs font-medium">
                          Number of Options / Shares
                        </label>
                        <Input
                          id="grant-quantity-react"
                          type="number"
                          min="1000"
                          step="1000"
                          value={grantShares}
                          onChange={(e) => setGrantShares(Number(e.target.value))}
                          required
                          className="h-9 font-mono text-xs tabular-nums"
                        />
                      </div>
                    </div>
  
                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                      <div className="space-y-1.5">
                        <label className="text-foreground text-xs font-medium">Equity Class</label>
                        <div className="border-border bg-muted/30 flex h-9 items-center justify-between rounded-md border px-3 text-xs">
                          <span className="font-medium">{grantClass}</span>
                          <Badge variant="outline" className="text-xs">
                            EIP-2024
                          </Badge>
                        </div>
                      </div>
  
                      <div className="space-y-1.5">
                        <label className="text-foreground text-xs font-medium">Exercise Price (409A FMV)</label>
                        <div className="border-border bg-muted/30 flex h-9 items-center justify-between rounded-md border px-3 font-mono text-xs tabular-nums">
                          <span>${currentSharePrice.toFixed(2)} / share</span>
                          <span className="text-muted-foreground text-xs">Fair Market</span>
                        </div>
                      </div>
                    </div>
  
                    <div className="space-y-1.5">
                      <label className="text-foreground text-xs font-medium">Standard Vesting Schedule</label>
                      <Input value={grantVesting} readOnly className="bg-muted/40 h-9 text-xs" />
                      <p className="text-muted-foreground text-xs">
                        25% vests at 12-month cliff; remaining 75% vests monthly in 36 equal installments.
                      </p>
                    </div>
  
                    <div className="flex items-center justify-end gap-2 pt-3">
                      <Button type="button" variant="outline" size="sm" onClick={() => setIsGrantDialogOpen(false)}>
                        Cancel
                      </Button>
                      <Button type="submit" size="sm" className="gap-1.5">
                        <Check className="size-4" />
                        Draft &amp; Issue Grant
                      </Button>
                    </div>
                  </form>
                )}
              </CardContent>
            </Card>
          </div>
        )}
  
        {/* 4 Capital Structure Overview Cards */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {/* Total Fully Diluted Shares Card */}
          <Card className="border-border relative overflow-hidden shadow-xs">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-muted-foreground text-xs font-medium">Total Fully Diluted Shares</CardTitle>
              <div className="bg-primary/10 text-primary rounded-md p-1.5">
                <Layers className="size-4" aria-hidden="true" />
              </div>
            </CardHeader>
            <CardContent className="space-y-1">
              <div className="text-foreground text-2xl font-bold tracking-tight tabular-nums">10,000,000</div>
              <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs">
                <span>Authorized: 15,000,000</span>
                <span className="text-success font-mono">66.7% Issued</span>
              </div>
            </CardContent>
          </Card>
  
          {/* Founder Common Stock Card */}
          <Card className="border-border relative overflow-hidden shadow-xs">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-muted-foreground text-xs font-medium">Founder Common Stock</CardTitle>
              <div className="bg-success/10 text-success rounded-md p-1.5">
                <Users className="size-4" aria-hidden="true" />
              </div>
            </CardHeader>
            <CardContent className="space-y-1">
              <div className="flex items-baseline gap-2">
                <span className="text-foreground text-2xl font-bold tracking-tight tabular-nums">6,000,000</span>
                <span className="text-success font-mono text-xs font-semibold">60.0%</span>
              </div>
              <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs">
                <span>2 Co-Founders</span>
                <span className="font-mono tabular-nums">$27,000,000.00</span>
              </div>
            </CardContent>
          </Card>
  
          {/* Series Seed Preferred Card */}
          <Card className="border-border relative overflow-hidden shadow-xs">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-muted-foreground text-xs font-medium">Series Seed Preferred</CardTitle>
              <div className="bg-chart-2/10 text-chart-2 rounded-md p-1.5">
                <TrendingUp className="size-4" aria-hidden="true" />
              </div>
            </CardHeader>
            <CardContent className="space-y-1">
              <div className="flex items-baseline gap-2">
                <span className="text-foreground text-2xl font-bold tracking-tight tabular-nums">2,500,000</span>
                <span className="text-chart-2 font-mono text-xs font-semibold">25.0%</span>
              </div>
              <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs">
                <span>2 Seed Investors · 1.0x Pref</span>
                <span className="font-mono tabular-nums">$11,250,000.00</span>
              </div>
            </CardContent>
          </Card>
  
          {/* Unallocated Option Pool Card */}
          <Card className="border-border relative overflow-hidden shadow-xs">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-muted-foreground text-xs font-medium">Unallocated Option Pool</CardTitle>
              <div className="bg-info/10 text-info rounded-md p-1.5">
                <Coins className="size-4" aria-hidden="true" />
              </div>
            </CardHeader>
            <CardContent className="space-y-1">
              <div className="flex items-baseline gap-2">
                <span className="text-foreground text-2xl font-bold tracking-tight tabular-nums">1,500,000</span>
                <span className="text-info font-mono text-xs font-semibold">15.0%</span>
              </div>
              <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs">
                <span>2024 EIP Pool</span>
                <span className="font-mono tabular-nums">$6,750,000.00</span>
              </div>
            </CardContent>
          </Card>
        </div>
  
        {/* Company Valuation Hero & Visual Stacked Ownership Bar Card */}
        <Card className="border-border overflow-hidden shadow-xs">
          <CardHeader className="pb-3">
            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <CardDescription className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
                  Current Post-Money Valuation
                </CardDescription>
                <div className="mt-1 flex flex-wrap items-baseline gap-3">
                  <span className="text-foreground text-3xl font-bold tracking-tight tabular-nums sm:text-4xl">
                    $45,000,000.00
                  </span>
                  <div className="border-success/20 bg-success/10 text-success text-success inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-semibold tabular-nums">
                    <TrendingUp className="size-3.5" aria-hidden="true" />
                    Seed Round Closed
                    <span className="text-muted-foreground ml-0.5 font-normal">($4.50/share)</span>
                  </div>
                </div>
              </div>
  
              <div className="text-muted-foreground flex items-center gap-3 text-xs">
                <div className="flex items-center gap-1.5">
                  <span className="bg-success size-2 rounded-full" aria-hidden="true" />
                  <span>Cap Table Reconciled</span>
                </div>
                <span className="font-mono">10,000,000 Total Units</span>
              </div>
            </div>
          </CardHeader>
  
          <CardContent className="space-y-4 pt-1">
            {/* Multi-segment Stacked Ownership Bar */}
            <div className="space-y-2">
              <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs">
                <span className="text-foreground font-medium">Fully Diluted Equity Distribution</span>
                <span className="tabular-nums">100.0% Allocation</span>
              </div>
  
              <div className="bg-muted/60 border-border/50 flex h-4 w-full gap-0.5 overflow-hidden rounded-full border p-0.5">
                {/* Founders 60% Emerald */}
                <div
                  style={{ width: '60%' }}
                  className="bg-success h-full rounded-l-full transition-opacity duration-300 hover:opacity-90"
                  title="Founders (Common Stock): 60.0% · 6,000,000 Shares"
                />
                {/* Seed Investors 25% */}
                <div
                  style={{ width: '25%' }}
                  className="bg-chart-2 h-full transition-opacity duration-300 hover:opacity-90"
                  title="Seed Investors (Preferred): 25.0% · 2,500,000 Shares"
                />
                {/* Option Pool 15% Blue */}
                <div
                  style={{ width: '15%' }}
                  className="bg-info h-full rounded-r-full transition-opacity duration-300 hover:opacity-90"
                  title="Unallocated Option Pool: 15.0% · 1,500,000 Shares"
                />
              </div>
  
              {/* Stacked Bar Legend */}
              <div className="grid grid-cols-1 gap-3 pt-2 sm:grid-cols-3">
                <div className="border-border/60 bg-muted/20 flex flex-wrap items-center justify-between gap-x-2 rounded-md border p-2.5 text-xs">
                  <div className="flex items-center gap-2">
                    <span className="bg-success size-2.5 shrink-0 rounded-full shadow-xs" aria-hidden="true" />
                    <div>
                      <div className="text-foreground font-medium">Founders (Common)</div>
                      <div className="text-muted-foreground font-mono tabular-nums">6,000,000 shares</div>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-foreground font-bold tabular-nums">60.0%</div>
                    <div className="text-muted-foreground font-mono tabular-nums">$27,000,000.00</div>
                  </div>
                </div>
  
                <div className="border-border/60 bg-muted/20 flex flex-wrap items-center justify-between gap-x-2 rounded-md border p-2.5 text-xs">
                  <div className="flex items-center gap-2">
                    <span className="bg-chart-2 size-2.5 shrink-0 rounded-full shadow-xs" aria-hidden="true" />
                    <div>
                      <div className="text-foreground font-medium">Seed Investors (Preferred)</div>
                      <div className="text-muted-foreground font-mono tabular-nums">2,500,000 shares</div>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-foreground font-bold tabular-nums">25.0%</div>
                    <div className="text-muted-foreground font-mono tabular-nums">$11,250,000.00</div>
                  </div>
                </div>
  
                <div className="border-border/60 bg-muted/20 flex flex-wrap items-center justify-between gap-x-2 rounded-md border p-2.5 text-xs">
                  <div className="flex items-center gap-2">
                    <span className="bg-info size-2.5 shrink-0 rounded-full shadow-xs" aria-hidden="true" />
                    <div>
                      <div className="text-foreground font-medium">Employee Option Pool</div>
                      <div className="text-muted-foreground font-mono tabular-nums">1,500,000 shares</div>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-foreground font-bold tabular-nums">15.0%</div>
                    <div className="text-muted-foreground font-mono tabular-nums">$6,750,000.00</div>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
  
        {/* Shareholder Breakdown Table Card */}
        <Card className="border-border shadow-xs">
          <CardHeader className="border-border/60 border-b pb-4">
            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <CardTitle className="text-foreground text-base font-semibold">
                  Shareholder &amp; Equity Register
                </CardTitle>
                <CardDescription className="text-muted-foreground mt-0.5 text-xs">
                  Detailed registry of individual grants, share classes, fully diluted ownership, and vesting timelines.
                </CardDescription>
              </div>
  
              <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
                {/* Search */}
                <div className="relative w-full sm:w-56">
                  <Search className="text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
                  <Input
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder="Search shareholder or role..."
                    className="h-8 pl-8 text-xs"
                  />
                </div>
  
                {/* Share Class Filter Buttons */}
                <div className="border-border bg-muted/40 flex items-center rounded-lg border p-0.5">
                  <button
                    type="button"
                    className={cn(
                      'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
                      selectedClassFilter === 'All'
                        ? 'bg-background text-foreground shadow-xs'
                        : 'text-muted-foreground hover:text-foreground',
                    )}
                    onClick={() => setSelectedClassFilter('All')}
                  >
                    All (5)
                  </button>
                  <button
                    type="button"
                    className={cn(
                      'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
                      selectedClassFilter === 'Common Stock'
                        ? 'bg-background text-foreground shadow-xs'
                        : 'text-muted-foreground hover:text-foreground',
                    )}
                    onClick={() => setSelectedClassFilter('Common Stock')}
                  >
                    Common (2)
                  </button>
                  <button
                    type="button"
                    className={cn(
                      'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
                      selectedClassFilter === 'Series Seed Preferred'
                        ? 'bg-background text-foreground shadow-xs'
                        : 'text-muted-foreground hover:text-foreground',
                    )}
                    onClick={() => setSelectedClassFilter('Series Seed Preferred')}
                  >
                    Preferred (2)
                  </button>
                  <button
                    type="button"
                    className={cn(
                      'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
                      selectedClassFilter === 'ISO Option Pool'
                        ? 'bg-background text-foreground shadow-xs'
                        : 'text-muted-foreground hover:text-foreground',
                    )}
                    onClick={() => setSelectedClassFilter('ISO Option Pool')}
                  >
                    Pool (1)
                  </button>
                </div>
              </div>
            </div>
          </CardHeader>
  
          <CardContent className="p-0">
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow className="hover:bg-transparent">
                    <TableHead className="w-[260px] pl-6 text-xs font-medium">Shareholder / Entity</TableHead>
                    <TableHead className="w-[180px] text-xs font-medium">Share Class</TableHead>
                    <TableHead className="text-right text-xs font-medium">Shares Owned</TableHead>
                    <TableHead className="text-right text-xs font-medium">Fully Diluted %</TableHead>
                    <TableHead className="text-right text-xs font-medium">Total Equity Value</TableHead>
                    <TableHead className="min-w-[240px] pr-6 text-xs font-medium">Vesting &amp; Status</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredShareholders.map((sh) => (
                    <TableRow key={sh.id} className="hover:bg-muted/30 transition-colors">
                      {/* Shareholder Name & Role */}
                      <TableCell className="py-3.5 pl-6">
                        <div className="flex items-center gap-3">
                          <Avatar className="border-border/80 size-9 border shadow-xs">
                            <AvatarFallback
                              className={cn(
                                'text-xs font-bold',
                                sh.shareClass === 'Common Stock'
                                  ? 'bg-success/10 text-success'
                                  : sh.shareClass === 'Series Seed Preferred'
                                    ? 'bg-chart-2/10 text-chart-2'
                                    : 'bg-info/10 text-info',
                              )}
                            >
                              {
                                {
                                  'Common Stock': sh.avatar,
                                  'Series Seed Preferred': sh.avatar,
                                  'ISO Option Pool': sh.avatar,
                                }[sh.shareClass]
                              }
                            </AvatarFallback>
                          </Avatar>
                          <div className="min-w-0">
                            <div className="text-foreground truncate text-xs font-semibold">{sh.name}</div>
                            <div className="text-muted-foreground truncate text-xs">{sh.role}</div>
                            <div className="text-muted-foreground/70 font-mono text-xs">{sh.grantDate}</div>
                          </div>
                        </div>
                      </TableCell>
  
                      {/* Share Class Badge */}
                      <TableCell className="py-3.5">
                        {sh.shareClass === 'Common Stock' ? (
                          <Badge
                            variant="outline"
                            className="border-success/30 bg-success/10 text-success text-xs font-medium"
                          >
                            Common Stock
                          </Badge>
                        ) : sh.shareClass === 'Series Seed Preferred' ? (
                          <Badge
                            variant="outline"
                            className="border-chart-2/30 bg-chart-2/10 text-chart-2 text-xs font-medium"
                          >
                            Series Seed Preferred
                          </Badge>
                        ) : (
                          <Badge variant="outline" className="border-info/30 bg-info/10 text-info text-xs font-medium">
                            ISO Option Pool
                          </Badge>
                        )}
                      </TableCell>
  
                      {/* Shares Owned */}
                      <TableCell className="py-3.5 text-right">
                        <div className="text-foreground font-mono text-sm font-bold tabular-nums">
                          {
                            {
                              'Common Stock': formatNumber(sh.shares),
                              'Series Seed Preferred': formatNumber(sh.shares),
                              'ISO Option Pool': formatNumber(sh.shares),
                            }[sh.shareClass]
                          }
                        </div>
                        <div className="text-muted-foreground text-xs">Shares</div>
                      </TableCell>
  
                      {/* Fully Diluted Ownership Percentage */}
                      <TableCell className="py-3.5 text-right">
                        <div className="text-foreground font-mono text-sm font-semibold tabular-nums">
                          {formatPercent(sh.ownershipPct)}
                        </div>
                        <div className="text-muted-foreground text-xs">of 10,000,000</div>
                      </TableCell>
  
                      {/* Total Equity Value */}
                      <TableCell className="py-3.5 text-right">
                        <div className="text-foreground font-mono text-sm font-semibold tabular-nums">
                          {formatCurrency(sh.equityValue)}
                        </div>
                        <div className="text-muted-foreground text-xs">@ $4.50/share</div>
                      </TableCell>
  
                      {/* Vesting Status Progress */}
                      <TableCell className="py-3.5 pr-6">
                        <div className="space-y-1.5">
                          <div className="flex flex-wrap items-center justify-between gap-x-2 text-xs">
                            <span className="text-foreground font-medium">
                              {sh.isVestedComplete
                                ? '100% Vested'
                                : sh.vestedMonths > 0
                                  ? `${Math.round((sh.vestedMonths / sh.totalMonths) * 100)}% Vested`
                                  : 'Unallocated'}
                            </span>
                            <span className="text-muted-foreground font-mono tabular-nums">
                              {sh.vestedMonths}/{sh.totalMonths} mo
                            </span>
                          </div>
  
                          <div className="bg-muted/80 relative h-2 w-full overflow-hidden rounded-full">
                            <div
                              className={cn(
                                'h-full transition-[width,background-color] duration-300',
                                sh.isVestedComplete ? 'bg-primary' : sh.vestedMonths > 0 ? 'bg-success' : 'bg-info/40',
                              )}
                              style={{
                                width: `${sh.isVestedComplete ? 100 : (sh.vestedMonths / sh.totalMonths) * 100}%`,
                              }}
                            />
                          </div>
  
                          <div className="text-muted-foreground text-xs">{sh.vestingDetail}</div>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
  
            {/* Table Summary Bar */}
            <div className="border-border/60 bg-muted/20 flex flex-wrap items-center justify-between gap-4 border-t px-6 py-3 text-xs">
              <div className="text-muted-foreground">
                Showing <span className="text-foreground font-semibold">{filteredShareholders.length}</span> of{' '}
                <span className="text-foreground font-semibold">5</span> cap table stakeholders
              </div>
              <div className="flex flex-wrap items-center gap-6 font-mono">
                <div>
                  <span className="text-muted-foreground">Total Shares: </span>
                  <span className="text-foreground font-bold tabular-nums">10,000,000</span>
                </div>
                <div>
                  <span className="text-muted-foreground">Total Ownership: </span>
                  <span className="text-foreground font-bold tabular-nums">100.0%</span>
                </div>
                <div>
                  <span className="text-muted-foreground">Total Valuation: </span>
                  <span className="text-foreground font-bold tabular-nums">$45,000,000.00</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
  
        {/* Round Modeling Simulator Card (Series A Dilution Simulator) */}
        <Card className="border-border shadow-xs">
          <CardHeader className="pb-3">
            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
              <div className="space-y-1">
                <div className="flex items-center gap-2">
                  <div className="bg-primary/10 text-primary rounded-md p-1.5">
                    <Calculator className="size-4" aria-hidden="true" />
                  </div>
                  <CardTitle className="text-foreground text-base font-semibold">
                    Round Modeling Simulator (Series A Pro-Forma)
                  </CardTitle>
                </div>
                <CardDescription className="text-muted-foreground text-xs">
                  Simulate Series A pre-money valuation and capital raised to preview diluted ownership percentages, new
                  share price, and stakeholder equity value accretion.
                </CardDescription>
              </div>
  
              {/* Preset Scenario Buttons */}
              <div className="flex flex-wrap items-center gap-1.5">
                <Button
                  variant="outline"
                  size="sm"
                  className="h-7 text-xs font-medium"
                  onClick={() => setPresetScenario(30000000, 5000000)}
                >
                  $5M @ $30M Pre
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="h-7 text-xs font-medium"
                  onClick={() => setPresetScenario(50000000, 10000000)}
                >
                  $10M @ $50M Pre
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="h-7 text-xs font-medium"
                  onClick={() => setPresetScenario(60000000, 15000000)}
                >
                  $15M @ $60M Pre
                </Button>
              </div>
            </div>
          </CardHeader>
  
          <CardContent className="space-y-6">
            {/* Simulator Inputs */}
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              {/* Pre-Money Valuation Input */}
              <div className="bg-muted/30 border-border/80 space-y-2 rounded-lg border p-4">
                <div className="flex flex-wrap items-center justify-between gap-x-2 text-xs">
                  <label htmlFor="sim-pre-money-react" className="text-foreground font-semibold">
                    Series A Pre-Money Valuation
                  </label>
                  <span className="text-muted-foreground font-mono tabular-nums">
                    ${(simPreMoney / 1000000).toFixed(1)}M
                  </span>
                </div>
                <div className="flex items-center gap-3">
                  <Input
                    id="sim-pre-money-react"
                    type="number"
                    step="1000000"
                    min="10000000"
                    value={simPreMoney}
                    onChange={(e) => setSimPreMoney(Number(e.target.value) || 0)}
                    className="font-mono text-base font-bold tabular-nums"
                  />
                </div>
                <p className="text-muted-foreground text-xs">
                  Implies a share price of{' '}
                  <strong className="text-foreground font-mono tabular-nums">
                    ${simNewSharePrice.toFixed(2)} / share
                  </strong>{' '}
                  (+{(((simNewSharePrice - currentSharePrice) / currentSharePrice) * 100).toFixed(1)}% step-up).
                </p>
              </div>
  
              {/* New Investment Raised Input */}
              <div className="bg-muted/30 border-border/80 space-y-2 rounded-lg border p-4">
                <div className="flex flex-wrap items-center justify-between gap-x-2 text-xs">
                  <label htmlFor="sim-investment-react" className="text-foreground font-semibold">
                    Series A Capital Raised
                  </label>
                  <span className="text-muted-foreground font-mono tabular-nums">
                    ${(simInvestment / 1000000).toFixed(1)}M
                  </span>
                </div>
                <div className="flex items-center gap-3">
                  <Input
                    id="sim-investment-react"
                    type="number"
                    step="1000000"
                    min="1000000"
                    value={simInvestment}
                    onChange={(e) => setSimInvestment(Number(e.target.value) || 0)}
                    className="font-mono text-base font-bold tabular-nums"
                  />
                </div>
                <p className="text-muted-foreground text-xs">
                  Issues{' '}
                  <strong className="text-foreground font-mono tabular-nums">
                    {formatNumber(simNewSharesIssued)} new shares
                  </strong>{' '}
                  to Series A lead syndicate.
                </p>
              </div>
            </div>
  
            {/* Calculated Pro-Forma Summary Metrics */}
            <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
              <div className="border-border/60 bg-muted/20 space-y-1 rounded-md border p-3">
                <div className="text-muted-foreground text-xs">Post-Money Valuation</div>
                <div className="text-foreground font-mono text-lg font-bold tabular-nums">
                  {formatCurrency(simPostMoney)}
                </div>
                <div className="text-muted-foreground text-xs">Pre-Money + Investment</div>
              </div>
  
              <div className="border-border/60 bg-muted/20 space-y-1 rounded-md border p-3">
                <div className="text-muted-foreground text-xs">Series A Share Price</div>
                <div className="text-foreground font-mono text-lg font-bold tabular-nums">
                  ${simNewSharePrice.toFixed(2)}
                </div>
                <div className="text-success text-xs">
                  vs ${currentSharePrice.toFixed(2)} Seed (+
                  {(((simNewSharePrice - currentSharePrice) / currentSharePrice) * 100).toFixed(1)}%)
                </div>
              </div>
  
              <div className="border-border/60 bg-muted/20 space-y-1 rounded-md border p-3">
                <div className="text-muted-foreground text-xs">Total Diluted Shares</div>
                <div className="text-foreground font-mono text-lg font-bold tabular-nums">
                  {formatNumber(simTotalPostShares)}
                </div>
                <div className="text-muted-foreground text-xs">+{formatNumber(simNewSharesIssued)} New Shares</div>
              </div>
  
              <div className="border-border/60 bg-muted/20 space-y-1 rounded-md border p-3">
                <div className="text-muted-foreground text-xs">Investor Dilution Rate</div>
                <div className="text-foreground text-warning text-warning font-mono text-lg font-bold tabular-nums">
                  {formatPercent(simNewInvestorPct)}
                </div>
                <div className="text-muted-foreground text-xs">Effective Round Dilution</div>
              </div>
            </div>
  
            {/* Post-Round Dilution & Valuation Comparison Table */}
            <div className="space-y-3">
              <div className="flex flex-wrap items-center justify-between gap-x-2 text-xs">
                <span className="text-foreground font-semibold">Post-Series A Ownership Comparison</span>
                <span className="text-muted-foreground">Pro-Forma Stakeholder Impact</span>
              </div>
  
              {/* Visual Comparison Bar */}
              <div className="space-y-1.5">
                <div className="bg-muted/60 border-border/50 flex h-4 w-full gap-0.5 overflow-hidden rounded-full border p-0.5">
                  <div
                    style={{ width: `${simFounderPct}%` }}
                    className="bg-success h-full rounded-l-full transition-[width] duration-300"
                    title={`Founders: ${simFounderPct.toFixed(1)}%`}
                  />
                  <div
                    style={{ width: `${simSeedPct}%` }}
                    className="bg-chart-2 h-full transition-[width] duration-300"
                    title={`Seed Investors: ${simSeedPct.toFixed(1)}%`}
                  />
                  <div
                    style={{ width: `${simOptionPct}%` }}
                    className="bg-info h-full transition-[width] duration-300"
                    title={`Option Pool: ${simOptionPct.toFixed(1)}%`}
                  />
                  <div
                    style={{ width: `${simNewInvestorPct}%` }}
                    className="bg-warning h-full rounded-r-full transition-[width] duration-300"
                    title={`Series A Investors: ${simNewInvestorPct.toFixed(1)}%`}
                  />
                </div>
              </div>
  
              {/* Stakeholder Comparative Grid */}
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
                {/* Founders */}
                <div className="border-border/80 bg-card space-y-2 rounded-lg border p-3 text-xs shadow-xs">
                  <div className="flex flex-wrap items-center justify-between gap-x-2">
                    <div className="flex items-center gap-1.5">
                      <span className="bg-success size-2 rounded-full" aria-hidden="true" />
                      <span className="text-foreground font-semibold">Founders</span>
                    </div>
                    <Badge variant="outline" className="border-success/30 text-success font-mono text-xs">
                      {formatPercent(simFounderPct)}
                    </Badge>
                  </div>
                  <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2">
                    <span>Dilution:</span>
                    <span className="text-destructive text-destructive font-mono tabular-nums">
                      60.0% &rarr; {formatPercent(simFounderPct)} (-{(60 - simFounderPct).toFixed(1)}%)
                    </span>
                  </div>
                  <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2">
                    <span>Equity Value:</span>
                    <span className="text-foreground font-mono font-semibold tabular-nums">
                      {formatCurrency(simFounderValue)}
                    </span>
                  </div>
                  <div className="text-success flex flex-wrap items-center justify-between gap-x-2 text-xs">
                    <span>Value Accretion:</span>
                    <span className="font-mono font-semibold tabular-nums">
                      +{formatCurrency(simFounderValue - 27000000)}
                    </span>
                  </div>
                </div>
  
                {/* Seed Investors */}
                <div className="border-border/80 bg-card space-y-2 rounded-lg border p-3 text-xs shadow-xs">
                  <div className="flex flex-wrap items-center justify-between gap-x-2">
                    <div className="flex items-center gap-1.5">
                      <span className="bg-chart-2 size-2 rounded-full" aria-hidden="true" />
                      <span className="text-foreground font-semibold">Seed Investors</span>
                    </div>
                    <Badge variant="outline" className="border-chart-2/30 text-chart-2 font-mono text-xs">
                      {formatPercent(simSeedPct)}
                    </Badge>
                  </div>
                  <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2">
                    <span>Dilution:</span>
                    <span className="text-destructive text-destructive font-mono tabular-nums">
                      25.0% &rarr; {formatPercent(simSeedPct)} (-{(25 - simSeedPct).toFixed(1)}%)
                    </span>
                  </div>
                  <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2">
                    <span>Equity Value:</span>
                    <span className="text-foreground font-mono font-semibold tabular-nums">
                      {formatCurrency(simSeedValue)}
                    </span>
                  </div>
                  <div className="text-success flex flex-wrap items-center justify-between gap-x-2 text-xs">
                    <span>Value Accretion:</span>
                    <span className="font-mono font-semibold tabular-nums">
                      +{formatCurrency(simSeedValue - 11250000)}
                    </span>
                  </div>
                </div>
  
                {/* Option Pool */}
                <div className="border-border/80 bg-card space-y-2 rounded-lg border p-3 text-xs shadow-xs">
                  <div className="flex flex-wrap items-center justify-between gap-x-2">
                    <div className="flex items-center gap-1.5">
                      <span className="bg-info size-2 rounded-full" aria-hidden="true" />
                      <span className="text-foreground font-semibold">Option Pool</span>
                    </div>
                    <Badge variant="outline" className="border-info/30 text-info font-mono text-xs">
                      {formatPercent(simOptionPct)}
                    </Badge>
                  </div>
                  <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2">
                    <span>Dilution:</span>
                    <span className="text-destructive text-destructive font-mono tabular-nums">
                      15.0% &rarr; {formatPercent(simOptionPct)} (-{(15 - simOptionPct).toFixed(1)}%)
                    </span>
                  </div>
                  <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2">
                    <span>Equity Value:</span>
                    <span className="text-foreground font-mono font-semibold tabular-nums">
                      {formatCurrency(simOptionValue)}
                    </span>
                  </div>
                  <div className="text-success flex flex-wrap items-center justify-between gap-x-2 text-xs">
                    <span>Value Accretion:</span>
                    <span className="font-mono font-semibold tabular-nums">
                      +{formatCurrency(simOptionValue - 6750000)}
                    </span>
                  </div>
                </div>
  
                {/* New Series A Investors */}
                <div className="border-border/80 bg-card space-y-2 rounded-lg border p-3 text-xs shadow-xs">
                  <div className="flex flex-wrap items-center justify-between gap-x-2">
                    <div className="flex items-center gap-1.5">
                      <span className="bg-warning size-2 rounded-full" aria-hidden="true" />
                      <span className="text-foreground font-semibold">Series A Syndicate</span>
                    </div>
                    <Badge variant="outline" className="border-warning/30 text-warning font-mono text-xs">
                      New Investor
                    </Badge>
                  </div>
                  <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2">
                    <span>New Ownership:</span>
                    <span className="text-warning text-warning font-mono font-bold tabular-nums">
                      {formatPercent(simNewInvestorPct)}
                    </span>
                  </div>
                  <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2">
                    <span>Shares Purchased:</span>
                    <span className="text-foreground font-mono font-semibold tabular-nums">
                      {formatNumber(simNewSharesIssued)}
                    </span>
                  </div>
                  <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs">
                    <span>Capital Invested:</span>
                    <span className="text-foreground font-mono font-semibold tabular-nums">
                      {formatCurrency(simInvestment)}
                    </span>
                  </div>
                </div>
              </div>
            </div>
  
            {/* Insight Banner Callout */}
            <div className="border-border/60 bg-muted/40 flex items-start gap-3 rounded-lg border p-3.5 text-xs">
              <Info className="text-primary mt-0.5 size-4 shrink-0" aria-hidden="true" />
              <div className="text-muted-foreground space-y-1">
                <span className="text-foreground font-semibold">Round Dynamics Takeaway: </span>
                Raising <span className="text-foreground font-mono font-medium">{formatCurrency(simInvestment)}</span> at
                a <span className="text-foreground font-mono font-medium">{formatCurrency(simPreMoney)}</span> pre-money
                valuation generates a{' '}
                <span className="text-foreground font-mono font-medium">${simNewSharePrice.toFixed(2)}</span> share price.
                Although existing founders experience{' '}
                <span className="text-foreground font-mono font-medium">{(60 - simFounderPct).toFixed(1)}%</span>{' '}
                dilution, their net equity value increases by{' '}
                <span className="text-success font-mono font-bold">+{formatCurrency(simFounderValue - 27000000)}</span> (+
                {(((simFounderValue - 27000000) / 27000000) * 100).toFixed(1)}%) due to the valuation step-up.
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }
  
  export default CapTableOwnershipSummary