import { useState, useEffect } from "react";
import { AreaChart, Area, BarChart, Bar, RadialBarChart, RadialBar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from "recharts";

// ── DESIGN: Refined dark executive aesthetic — Midnight Navy + Electric Teal + Gold ──
const T = {
  bg:       "#03080f",
  surface:  "#060d18",
  card:     "#08111f",
  border:   "#0e2038",
  teal:     "#00e5cc",
  tealDim:  "#006659",
  gold:     "#f5c842",
  goldDim:  "#7a6108",
  blue:     "#2979ff",
  blueDim:  "#0d2f80",
  red:      "#ff4060",
  green:    "#00e676",
  white:    "#e8f4ff",
  dim:      "#3a5a7a",
  dimmer:   "#1a2f45",
};

const F = {
  display: "'Bebas Neue', 'Orbitron', sans-serif",
  heading: "'Rajdhani', 'Exo 2', sans-serif",
  mono:    "'JetBrains Mono', 'Share Tech Mono', monospace",
  body:    "'Outfit', 'Exo 2', sans-serif",
};

// ── DATA ──────────────────────────────────────────────────────────────────────
const ARR_DATA = [
  { q: "Q1'24", arr: 0.4 }, { q: "Q2'24", arr: 0.9 }, { q: "Q3'24", arr: 1.6 },
  { q: "Q4'24", arr: 2.4 }, { q: "Q1'25", arr: 3.8 }, { q: "Q2'25", arr: 5.1 },
  { q: "Q3'25", arr: 6.9 }, { q: "Q4'25", arr: 8.7 }, { q: "Q1'26", arr: 11.2 },
  { q: "Q2'26", arr: 14.8, projected: true }, { q: "Q3'26", arr: 19.2, projected: true },
  { q: "Q4'26", arr: 24.0, projected: true },
];

const MARKET_DATA = [
  { name: "PAM Core", value: 5.4, color: T.teal },
  { name: "SOAR", value: 2.3, color: T.gold },
  { name: "Identity", value: 8.1, color: T.blue },
  { name: "Adjacent", value: 12.6, color: T.dim },
];

const PIPELINE_DATA = [
  { stage: "Qualify", deals: 48, value: 24.2 },
  { stage: "Demo", deals: 31, value: 16.8 },
  { stage: "POV", deals: 14, value: 9.4 },
  { stage: "Negotiate", deals: 8, value: 5.1 },
  { stage: "Close", deals: 4, value: 2.8 },
];

const CUSTOMER_SECTORS = [
  { name: "Financial Services", pct: 34, color: T.teal },
  { name: "Healthcare", pct: 22, color: T.gold },
  { name: "Government", pct: 18, color: T.blue },
  { name: "Manufacturing", pct: 14, color: "#9c5ffd" },
  { name: "Retail / Ecomm", pct: 12, color: T.green },
];

const METRICS = [
  { label: "ARR",             value: "$11.2M",   delta: "+29%",  up: true,  sub: "vs Q4'25",     color: T.teal },
  { label: "Customers",       value: "74",        delta: "+18",   up: true,  sub: "new this qtr", color: T.gold },
  { label: "NRR",             value: "138%",      delta: "+12pp", up: true,  sub: "net rev ret.", color: T.green },
  { label: "Gross Margin",    value: "78%",       delta: "+4pp",  up: true,  sub: "SaaS target",  color: T.blue },
  { label: "CAC Payback",     value: "8.2mo",     delta: "-1.4",  up: true,  sub: "months",       color: T.teal },
  { label: "Pipeline",        value: "$58.3M",    delta: "+41%",  up: true,  sub: "qualified",    color: T.gold },
];

const COMPETITIVE = [
  { name: "CyberArk",     score: 91, cat: "Market Leader",    strength: "Brand + Enterprise",   weakness: "Expensive, Slow Deploy", color: "#4488ff" },
  { name: "Delinea",      score: 74, cat: "Challenger",       strength: "Mid-market Price",      weakness: "Limited SOAR/AI",        color: "#8866ff" },
  { name: "BeyondTrust",  score: 68, cat: "Niche Player",     strength: "Endpoint PAM",          weakness: "Complex, Legacy UI",     color: "#ff8844" },
  { name: "Cybofense",    score: 95, cat: "Disruptor",        strength: "AI + SOAR + Speed",     weakness: "Brand Awareness",        color: T.teal },
];

const USE_OF_FUNDS = [
  { cat: "Sales & Marketing", pct: 42, color: T.teal },
  { cat: "R&D / Engineering",  pct: 31, color: T.gold },
  { cat: "G&A",               pct: 15, color: T.blue },
  { cat: "Customer Success",  pct: 12, color: T.green },
];

function Card({ children, style = {}, glow }) {
  return (
    <div style={{
      background: T.card,
      border: `1px solid ${glow ? glow + "44" : T.border}`,
      borderRadius: 10,
      boxShadow: glow ? `0 0 30px ${glow}10` : "none",
      position: "relative", overflow: "hidden",
      ...style,
    }}>
      {children}
    </div>
  );
}

function CardHeader({ title, icon, badge, color = T.white }) {
  return (
    <div style={{ padding: "14px 18px 10px", borderBottom: `1px solid ${T.border}`, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ fontSize: 15 }}>{icon}</span>
        <span style={{ fontFamily: F.heading, fontSize: 13, color, letterSpacing: 1.5, fontWeight: 700 }}>{title}</span>
      </div>
      {badge && <span style={{ fontFamily: F.mono, fontSize: 9, color: T.dim, letterSpacing: 1 }}>{badge}</span>}
    </div>
  );
}

function Delta({ value, up }) {
  return (
    <span style={{
      fontFamily: F.mono, fontSize: 11,
      color: up ? T.green : T.red,
      background: up ? `${T.green}18` : `${T.red}18`,
      border: `1px solid ${up ? T.green : T.red}33`,
      borderRadius: 4, padding: "2px 7px",
    }}>
      {up ? "▲" : "▼"} {value}
    </span>
  );
}

// ── SECTIONS ──────────────────────────────────────────────────────────────────

function TopBar({ tab, setTab }) {
  const tabs = ["Overview", "Financials", "Market", "Pipeline", "Ask"];
  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "14px 28px",
      background: `linear-gradient(90deg, #030810, #050d1a)`,
      borderBottom: `1px solid ${T.border}`,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 8,
          background: `linear-gradient(135deg, ${T.teal}33, ${T.gold}22)`,
          border: `1px solid ${T.teal}55`,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontSize: 18, boxShadow: `0 0 16px ${T.teal}22`,
        }}>🛡️</div>
        <div>
          <div style={{ fontFamily: F.display, fontSize: 18, color: T.teal, letterSpacing: 4 }}>CYBOFENSE</div>
          <div style={{ fontFamily: F.mono, fontSize: 8, color: T.dim, letterSpacing: 3 }}>INVESTOR PITCH · IMPACT 2026</div>
        </div>
      </div>

      <div style={{ display: "flex", gap: 4 }}>
        {tabs.map(t => (
          <button key={t} onClick={() => setTab(t)} style={{
            padding: "7px 16px", borderRadius: 6, cursor: "pointer",
            fontFamily: F.heading, fontSize: 12, letterSpacing: 1,
            border: `1px solid ${tab === t ? T.teal + "66" : T.border}`,
            background: tab === t ? `${T.teal}18` : "transparent",
            color: tab === t ? T.teal : T.dim,
            transition: "all 0.2s",
          }}>{t}</button>
        ))}
      </div>

      <div style={{ textAlign: "right" }}>
        <div style={{ fontFamily: F.mono, fontSize: 9, color: T.dim }}>SERIES A · 2026</div>
        <div style={{ fontFamily: F.heading, fontSize: 14, color: T.gold, fontWeight: 700, letterSpacing: 1 }}>RAISING $18M</div>
      </div>
    </div>
  );
}

function OverviewTab() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14 }}>
      {/* KPI row */}
      {METRICS.map(m => (
        <Card key={m.label} glow={m.color} style={{ padding: "18px 20px" }}>
          <div style={{ fontFamily: F.mono, fontSize: 9, color: T.dim, letterSpacing: 2, marginBottom: 8 }}>{m.label.toUpperCase()}</div>
          <div style={{ fontFamily: F.display, fontSize: 32, color: m.color, lineHeight: 1, marginBottom: 8 }}>{m.value}</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <Delta value={m.delta} up={m.up} />
            <span style={{ fontFamily: F.mono, fontSize: 9, color: T.dim }}>{m.sub}</span>
          </div>
        </Card>
      ))}

      {/* ARR Chart */}
      <Card style={{ gridColumn: "1 / 3", padding: 0 }} glow={T.teal}>
        <CardHeader title="ARR GROWTH TRAJECTORY" icon="📈" badge="Q1 2024 → Q4 2026P" color={T.teal} />
        <div style={{ padding: "10px 16px 14px" }}>
          <ResponsiveContainer width="100%" height={160}>
            <AreaChart data={ARR_DATA}>
              <defs>
                <linearGradient id="arrGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor={T.teal} stopOpacity={0.4} />
                  <stop offset="95%" stopColor={T.teal} stopOpacity={0} />
                </linearGradient>
                <linearGradient id="projGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor={T.gold} stopOpacity={0.3} />
                  <stop offset="95%" stopColor={T.gold} stopOpacity={0} />
                </linearGradient>
              </defs>
              <XAxis dataKey="q" tick={{ fontFamily: F.mono, fontSize: 9, fill: T.dim }} axisLine={false} tickLine={false} />
              <YAxis tick={{ fontFamily: F.mono, fontSize: 9, fill: T.dim }} axisLine={false} tickLine={false} tickFormatter={v => `$${v}M`} />
              <Tooltip
                contentStyle={{ background: T.card, border: `1px solid ${T.border}`, borderRadius: 6, fontFamily: F.mono, fontSize: 10 }}
                formatter={(v, _, p) => [`$${v}M ARR`, p.payload.projected ? "Projected" : "Actual"]}
              />
              <Area type="monotone" dataKey="arr" stroke={T.teal} strokeWidth={2} fill="url(#arrGrad)" dot={(props) => {
                const { cx, cy, payload } = props;
                return payload.projected
                  ? <circle key={cx} cx={cx} cy={cy} r={3} fill="none" stroke={T.gold} strokeWidth={1.5} strokeDasharray="2 2" />
                  : <circle key={cx} cx={cx} cy={cy} r={3} fill={T.teal} stroke={T.bg} strokeWidth={1} />;
              }} />
            </AreaChart>
          </ResponsiveContainer>
          <div style={{ display: "flex", gap: 18, paddingLeft: 8, marginTop: 4 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
              <div style={{ width: 16, height: 2, background: T.teal }} />
              <span style={{ fontFamily: F.mono, fontSize: 9, color: T.dim }}>Actual ARR</span>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
              <div style={{ width: 16, height: 2, background: T.gold, borderTop: "1px dashed", opacity: 0.6 }} />
              <span style={{ fontFamily: F.mono, fontSize: 9, color: T.dim }}>Projected (conservative)</span>
            </div>
          </div>
        </div>
      </Card>

      {/* Customer sectors */}
      <Card style={{ padding: 0 }} glow={T.gold}>
        <CardHeader title="CUSTOMER MIX" icon="🏢" color={T.gold} />
        <div style={{ padding: "12px 18px" }}>
          {CUSTOMER_SECTORS.map(s => (
            <div key={s.name} style={{ marginBottom: 10 }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                <span style={{ fontFamily: F.mono, fontSize: 10, color: T.white }}>{s.name}</span>
                <span style={{ fontFamily: F.mono, fontSize: 10, color: s.color }}>{s.pct}%</span>
              </div>
              <div style={{ height: 5, background: T.dimmer, borderRadius: 3, overflow: "hidden" }}>
                <div style={{ width: `${s.pct}%`, height: "100%", background: s.color, borderRadius: 3, boxShadow: `0 0 8px ${s.color}` }} />
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function FinancialsTab() {
  const milestones = [
    { date: "Q3 2024", event: "Seed round closed — $3.2M", done: true },
    { date: "Q4 2024", event: "First 10 paying customers", done: true },
    { date: "Q1 2025", event: "SOC2 Type I certification", done: true },
    { date: "Q2 2025", event: "MSSP channel program launched", done: true },
    { date: "Q3 2025", event: "50th customer — $6.9M ARR", done: true },
    { date: "Q1 2026", event: "$11.2M ARR — Series A launch", done: true },
    { date: "Q3 2026", event: "SOC2 Type II (in progress)", done: false },
    { date: "Q4 2026", event: "$24M ARR target", done: false },
    { date: "Q2 2027", event: "Series B — $60M ARR target", done: false },
  ];

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
      <Card glow={T.teal} style={{ padding: 0 }}>
        <CardHeader title="UNIT ECONOMICS" icon="💰" color={T.teal} />
        <div style={{ padding: "14px 18px" }}>
          {[
            { label: "Average Contract Value (ACV)", value: "$151,350", color: T.teal },
            { label: "Customer Acquisition Cost (CAC)", value: "$42,800", color: T.gold },
            { label: "LTV (3-year)",                   value: "$454,050", color: T.green },
            { label: "LTV:CAC Ratio",                  value: "10.6x",    color: T.blue },
            { label: "CAC Payback Period",              value: "8.2 months",color: T.teal },
            { label: "Gross Revenue Retention",        value: "94%",       color: T.green },
            { label: "Net Revenue Retention (NRR)",    value: "138%",      color: T.green },
            { label: "Churn Rate (annual)",            value: "6%",        color: T.dim },
          ].map(r => (
            <div key={r.label} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: `1px solid ${T.border}` }}>
              <span style={{ fontFamily: F.body, fontSize: 12, color: T.dim }}>{r.label}</span>
              <span style={{ fontFamily: F.mono, fontSize: 12, color: r.color, fontWeight: 700 }}>{r.value}</span>
            </div>
          ))}
        </div>
      </Card>

      <Card glow={T.gold} style={{ padding: 0 }}>
        <CardHeader title="MILESTONE TIMELINE" icon="🗓️" color={T.gold} />
        <div style={{ padding: "10px 18px" }}>
          {milestones.map((m, i) => (
            <div key={i} style={{ display: "flex", gap: 12, marginBottom: 10, alignItems: "flex-start" }}>
              <div style={{
                width: 20, height: 20, borderRadius: "50%", flexShrink: 0, marginTop: 1,
                background: m.done ? `${T.teal}33` : `${T.dimmer}`,
                border: `2px solid ${m.done ? T.teal : T.dim}`,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: 9,
              }}>
                {m.done ? "✓" : "○"}
              </div>
              <div>
                <div style={{ fontFamily: F.mono, fontSize: 9, color: m.done ? T.teal : T.dim }}>{m.date}</div>
                <div style={{ fontFamily: F.body, fontSize: 12, color: m.done ? T.white : T.dim, marginTop: 1 }}>{m.event}</div>
              </div>
            </div>
          ))}
        </div>
      </Card>

      <Card glow={T.blue} style={{ padding: 0, gridColumn: "1 / -1" }}>
        <CardHeader title="USE OF SERIES A FUNDS — $18M" icon="📊" color={T.blue} />
        <div style={{ padding: "14px 18px", display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12 }}>
          {USE_OF_FUNDS.map(u => (
            <div key={u.cat} style={{
              textAlign: "center", padding: "16px 12px",
              background: `${u.color}08`,
              border: `1px solid ${u.color}33`,
              borderRadius: 8,
            }}>
              <div style={{ fontFamily: F.display, fontSize: 28, color: u.color, marginBottom: 6 }}>{u.pct}%</div>
              <div style={{ fontFamily: F.body, fontSize: 11, color: T.dim }}>{u.cat}</div>
              <div style={{ fontFamily: F.mono, fontSize: 10, color: u.color, marginTop: 4 }}>
                ${(18 * u.pct / 100).toFixed(1)}M
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function MarketTab() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
      <Card glow={T.teal} style={{ padding: 0 }}>
        <CardHeader title="TAM · SAM · SOM" icon="🌐" color={T.teal} />
        <div style={{ padding: "14px 18px" }}>
          {[
            { label: "TAM — Total Addressable Market",   value: "$28.4B",  sub: "Identity Security (2026)",      color: T.teal,  w: "100%" },
            { label: "SAM — Serviceable Addressable",    value: "$7.7B",   sub: "PAM + SOAR + Identity Orch.",   color: T.gold,  w: "27%" },
            { label: "SOM — Serviceable Obtainable",     value: "$380M",   sub: "Mid-market, 5-year horizon",    color: T.blue,  w: "5%" },
            { label: "Current Market Capture",           value: "$11.2M",  sub: "Q1 2026 ARR",                   color: T.green, w: "0.15%" },
          ].map(r => (
            <div key={r.label} style={{ marginBottom: 14 }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 5 }}>
                <span style={{ fontFamily: F.body, fontSize: 11, color: T.dim }}>{r.label}</span>
                <span style={{ fontFamily: F.mono, fontSize: 12, color: r.color, fontWeight: 700 }}>{r.value}</span>
              </div>
              <div style={{ height: 6, background: T.dimmer, borderRadius: 3 }}>
                <div style={{ width: r.w, height: "100%", background: r.color, borderRadius: 3, boxShadow: `0 0 10px ${r.color}55` }} />
              </div>
              <div style={{ fontFamily: F.mono, fontSize: 9, color: T.dimmer, marginTop: 3 }}>{r.sub}</div>
            </div>
          ))}
        </div>
      </Card>

      <Card glow={T.gold} style={{ padding: 0 }}>
        <CardHeader title="COMPETITIVE POSITIONING" icon="⚔️" color={T.gold} />
        <div style={{ padding: "12px 18px" }}>
          {COMPETITIVE.map(c => (
            <div key={c.name} style={{
              padding: "10px 12px", marginBottom: 8, borderRadius: 6,
              background: c.name === "Cybofense" ? `${T.teal}12` : `${T.dimmer}44`,
              border: `1px solid ${c.name === "Cybofense" ? T.teal + "44" : T.border}`,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
                <div>
                  <span style={{ fontFamily: F.heading, fontSize: 13, color: c.color, fontWeight: 700 }}>{c.name}</span>
                  <span style={{ fontFamily: F.mono, fontSize: 9, color: T.dim, marginLeft: 8 }}>{c.cat}</span>
                </div>
                <span style={{ fontFamily: F.display, fontSize: 18, color: c.color }}>{c.score}</span>
              </div>
              <div style={{ height: 4, background: T.dimmer, borderRadius: 2, marginBottom: 6 }}>
                <div style={{ width: `${c.score}%`, height: "100%", background: c.color, borderRadius: 2 }} />
              </div>
              <div style={{ display: "flex", gap: 8 }}>
                <span style={{ fontFamily: F.mono, fontSize: 9, color: T.green }}>✓ {c.strength}</span>
                <span style={{ fontFamily: F.mono, fontSize: 9, color: T.red }}>✗ {c.weakness}</span>
              </div>
            </div>
          ))}
        </div>
      </Card>

      <Card glow={T.blue} style={{ gridColumn: "1 / -1", padding: 0 }}>
        <CardHeader title="MARKET SEGMENT BREAKDOWN ($B)" icon="🥧" color={T.blue} badge="2026 EST." />
        <div style={{ padding: "10px 16px 14px", display: "flex", gap: 20, alignItems: "center" }}>
          <ResponsiveContainer width={220} height={160}>
            <RadialBarChart cx={110} cy={80} innerRadius={30} outerRadius={100} data={MARKET_DATA} startAngle={90} endAngle={-270}>
              <RadialBar dataKey="value" background={{ fill: T.dimmer }}>
                {MARKET_DATA.map((e, i) => <Cell key={i} fill={e.color} />)}
              </RadialBar>
            </RadialBarChart>
          </ResponsiveContainer>
          <div style={{ flex: 1, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            {MARKET_DATA.map(m => (
              <div key={m.name} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: `${m.color}0c`, border: `1px solid ${m.color}33`, borderRadius: 6 }}>
                <div style={{ width: 8, height: 8, borderRadius: "50%", background: m.color, boxShadow: `0 0 6px ${m.color}` }} />
                <div>
                  <div style={{ fontFamily: F.mono, fontSize: 10, color: T.white }}>{m.name}</div>
                  <div style={{ fontFamily: F.display, fontSize: 18, color: m.color }}>${m.value}B</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Card>
    </div>
  );
}

function PipelineTab() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
      <Card glow={T.teal} style={{ padding: 0, gridColumn: "1 / -1" }}>
        <CardHeader title="SALES PIPELINE FUNNEL" icon="🎯" color={T.teal} badge="LIVE Q1 2026" />
        <div style={{ padding: "14px 18px" }}>
          <ResponsiveContainer width="100%" height={180}>
            <BarChart data={PIPELINE_DATA} layout="vertical" margin={{ left: 10, right: 40 }}>
              <XAxis type="number" tick={{ fontFamily: F.mono, fontSize: 9, fill: T.dim }} axisLine={false} tickLine={false} />
              <YAxis dataKey="stage" type="category" tick={{ fontFamily: F.mono, fontSize: 10, fill: T.white }} axisLine={false} tickLine={false} />
              <Tooltip
                contentStyle={{ background: T.card, border: `1px solid ${T.border}`, fontFamily: F.mono, fontSize: 10 }}
                formatter={(v, k) => [k === "deals" ? `${v} deals` : `$${v}M`, k]}
              />
              <Bar dataKey="value" radius={[0, 4, 4, 0]} label={{ position: "right", fontFamily: F.mono, fontSize: 10, fill: T.teal, formatter: v => `$${v}M` }}>
                {PIPELINE_DATA.map((_, i) => (
                  <Cell key={i} fill={`rgba(0,229,204,${0.9 - i * 0.15})`} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </Card>

      {[
        { title: "TOP VERTICALS", icon: "🏆", items: [
          { name: "Goldman Sachs MSSP", stage: "POV", val: "$2.4M", color: T.teal },
          { name: "NHS Digital (UK)",   stage: "Negotiate", val: "$1.8M", color: T.gold },
          { name: "DoD Contractor",     stage: "Close", val: "$1.2M", color: T.green },
          { name: "JPM Chase",          stage: "Demo", val: "$3.1M", color: T.blue },
          { name: "Siemens AG",         stage: "Qualify", val: "$1.5M", color: T.teal },
        ]},
        { title: "CHANNEL PARTNERS", icon: "🤝", items: [
          { name: "Optiv Security",      stage: "Active", val: "$8.4M pipeline",  color: T.teal },
          { name: "Presidio",            stage: "Active", val: "$5.2M pipeline",  color: T.gold },
          { name: "Herjavec Group",      stage: "NDA",    val: "In negotiation",  color: T.blue },
          { name: "Trustwave (MSSP)",    stage: "NDA",    val: "In negotiation",  color: T.dim },
          { name: "AWS Marketplace",     stage: "Listed", val: "Self-serve",      color: T.green },
        ]},
      ].map(section => (
        <Card key={section.title} glow={T.gold} style={{ padding: 0 }}>
          <CardHeader title={section.title} icon={section.icon} color={T.gold} />
          <div style={{ padding: "10px 16px" }}>
            {section.items.map(item => (
              <div key={item.name} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: `1px solid ${T.border}` }}>
                <div>
                  <div style={{ fontFamily: F.body, fontSize: 12, color: T.white }}>{item.name}</div>
                  <div style={{ fontFamily: F.mono, fontSize: 9, color: T.dim, marginTop: 2 }}>{item.stage}</div>
                </div>
                <span style={{ fontFamily: F.mono, fontSize: 11, color: item.color, alignSelf: "center" }}>{item.val}</span>
              </div>
            ))}
          </div>
        </Card>
      ))}
    </div>
  );
}

function AskTab() {
  const [hovered, setHovered] = useState(null);
  const terms = [
    { label: "Raise Amount",    value: "$18M",         sub: "Series A",              color: T.teal },
    { label: "Pre-Money Val.",  value: "$72M",         sub: "4.5x ARR multiple",     color: T.gold },
    { label: "Post-Money Val.", value: "$90M",         sub: "target",                color: T.blue },
    { label: "Lead Check",      value: "$8–12M",       sub: "seeking 1 lead investor",color: T.green },
    { label: "Round Close",     value: "Q3 2026",      sub: "target close date",     color: T.teal },
    { label: "Use of Funds",    value: "24-mo runway", sub: "to $40M ARR inflection",color: T.gold },
  ];

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
      {terms.map(t => (
        <Card key={t.label} glow={t.color} style={{ padding: "20px 22px", textAlign: "center" }}
          onMouseEnter={() => setHovered(t.label)} onMouseLeave={() => setHovered(null)}
        >
          <div style={{ fontFamily: F.mono, fontSize: 9, color: T.dim, letterSpacing: 2, marginBottom: 10 }}>{t.label.toUpperCase()}</div>
          <div style={{ fontFamily: F.display, fontSize: 30, color: t.color, lineHeight: 1, marginBottom: 6 }}>{t.value}</div>
          <div style={{ fontFamily: F.mono, fontSize: 10, color: T.dim }}>{t.sub}</div>
        </Card>
      ))}

      <Card glow={T.teal} style={{ gridColumn: "1 / -1", padding: "20px 24px" }}>
        <div style={{ fontFamily: F.heading, fontSize: 14, color: T.teal, letterSpacing: 2, marginBottom: 14 }}>WHY INVEST IN CYBOFENSE NOW</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }}>
          {[
            { icon: "⚡", title: "Urgency",      body: "74% of breaches involve privileged credentials. The regulatory window for compliance automation is NOW — DORA, NIS2, and SEC cyber rules are forcing enterprise spend." },
            { icon: "📈", title: "Momentum",     body: "138% NRR. 29% QoQ ARR growth. CAC payback of 8.2 months. Every cohort expands. Zero customer churned in the last 5 quarters." },
            { icon: "🏆", title: "Team",         body: "Founding team from CyberArk, Palo Alto Networks, and Splunk. 3 patents pending. 140+ combined years in enterprise security." },
            { icon: "🛣️", title: "Path to Exit", body: "$380M SAM with a clear path to #2 in PAM behind CyberArk. Strategic acquirers include Microsoft, Palo Alto, Crowdstrike, and CyberArk itself." },
            { icon: "🔒", title: "Moat",         body: "AI behavioral models trained on 2.4B privileged events. Switching cost is high — 90-day SOC integration means customers don't leave." },
            { icon: "💡", title: "Timing",       body: "Post-SolarWinds, post-Colonial Pipeline regulatory environment means PAM is now a board-level conversation. Budget is unlocked." },
          ].map(r => (
            <div key={r.title} style={{ padding: "14px 16px", background: `${T.teal}08`, border: `1px solid ${T.border}`, borderRadius: 8 }}>
              <div style={{ fontSize: 20, marginBottom: 6 }}>{r.icon}</div>
              <div style={{ fontFamily: F.heading, fontSize: 12, color: T.white, fontWeight: 700, marginBottom: 5 }}>{r.title}</div>
              <div style={{ fontFamily: F.body, fontSize: 11, color: T.dim, lineHeight: 1.6 }}>{r.body}</div>
            </div>
          ))}
        </div>
      </Card>

      <Card glow={T.gold} style={{ gridColumn: "1 / -1", padding: "18px 24px", textAlign: "center" }}>
        <div style={{ fontFamily: F.display, fontSize: 22, color: T.gold, letterSpacing: 4, marginBottom: 6 }}>SCHEDULE A DEEPER SESSION</div>
        <div style={{ fontFamily: F.mono, fontSize: 11, color: T.dim, marginBottom: 12 }}>
          Data room · Financial model · Customer references · Technical architecture review
        </div>
        <div style={{ display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
          {["investors@cybofense.io", "demo.cybofense.io", "docs.cybofense.io/data-room"].map(link => (
            <div key={link} style={{
              padding: "8px 18px", borderRadius: 6,
              border: `1px solid ${T.gold}44`, background: `${T.gold}12`,
              fontFamily: F.mono, fontSize: 11, color: T.gold,
            }}>{link}</div>
          ))}
        </div>
      </Card>
    </div>
  );
}

// ── MAIN ──────────────────────────────────────────────────────────────────────
export default function InvestorDashboard() {
  const [tab, setTab] = useState("Overview");
  const [count, setCount] = useState(11.2);

  useEffect(() => {
    const t = setInterval(() => setCount(c => +(c + 0.0001).toFixed(4)), 800);
    return () => clearInterval(t);
  }, []);

  return (
    <div style={{ background: T.bg, minHeight: "100vh", color: T.white, fontFamily: F.body }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@600;700&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@300;400;600&display=swap');
        * { box-sizing: border-box; margin: 0; padding: 0; }
        ::-webkit-scrollbar { width: 3px; }
        ::-webkit-scrollbar-track { background: ${T.bg}; }
        ::-webkit-scrollbar-thumb { background: ${T.teal}66; border-radius: 2px; }
        button:focus { outline: none; }
      `}</style>

      <TopBar tab={tab} setTab={setTab} />

      {/* Live ticker */}
      <div style={{
        background: `linear-gradient(90deg, ${T.teal}18, ${T.gold}18, ${T.teal}18)`,
        borderBottom: `1px solid ${T.border}`,
        padding: "7px 28px",
        display: "flex", gap: 40, overflowX: "auto",
      }}>
        {[
          { label: "LIVE ARR", value: `$${count.toFixed(4)}M`, color: T.teal },
          { label: "CUSTOMERS", value: "74", color: T.gold },
          { label: "NRR", value: "138%", color: T.green },
          { label: "PIPELINE", value: "$58.3M", color: T.blue },
          { label: "THREATS BLOCKED TODAY", value: "4,847", color: T.teal },
          { label: "SESSIONS MONITORED", value: "1,284", color: T.gold },
          { label: "SERIES A TARGET", value: "$18M", color: T.gold },
          { label: "DATA ROOM", value: "docs.cybofense.io/data-room", color: T.dim },
        ].map(({ label, value, color }) => (
          <div key={label} style={{ display: "flex", gap: 8, alignItems: "center", flexShrink: 0 }}>
            <span style={{ fontFamily: F.mono, fontSize: 8, color: T.dim, letterSpacing: 2 }}>{label}</span>
            <span style={{ fontFamily: F.mono, fontSize: 11, color, fontWeight: 700 }}>{value}</span>
          </div>
        ))}
      </div>

      <div style={{ padding: "16px 20px" }}>
        {tab === "Overview"    && <OverviewTab />}
        {tab === "Financials"  && <FinancialsTab />}
        {tab === "Market"      && <MarketTab />}
        {tab === "Pipeline"    && <PipelineTab />}
        {tab === "Ask"         && <AskTab />}
      </div>

      <div style={{ padding: "10px 24px", borderTop: `1px solid ${T.border}`, display: "flex", justifyContent: "space-between" }}>
        <span style={{ fontFamily: F.mono, fontSize: 8, color: T.dim }}>CYBOFENSE CONFIDENTIAL — FOR INVESTOR USE ONLY — NOT FOR DISTRIBUTION</span>
        <span style={{ fontFamily: F.mono, fontSize: 8, color: T.dim }}>IMPACT 2026 · SERIES A PITCH DECK · ALL PROJECTIONS ARE FORWARD-LOOKING ESTIMATES</span>
      </div>
    </div>
  );
}