// === V2 Hero — adapted to match the REAL DashFolio product ===
// Differences from v1:
//   - Sidebar matches the actual nav structure (with collapsible sub-items)
//   - Dashboard mock recreates the real homepage: 7 KPI cards, institutional
//     metrics row, large Portfolio Value chart with gradient fill
//   - Page header has "All Portfolios" + "Widgets" + "Edit Layout" controls
//   - Copy + branding updated to "DashFolio"

// =================== Nav ============================
const V2_NAV_LINKS = [
{ label: "Product Tour", href: "#tour" },
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Compare", href: "#comparison" },
{ label: "FAQ", href: "#faq" },
{ label: "Contact", href: "/contact" }];


function NavBarV2({ theme, onToggleTheme }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`fixed inset-x-0 top-0 z-50 transition-colors border-b ${scrolled ? "nav-elev" : "border-transparent"}`}>
      <div className="mx-auto max-w-7xl px-6 md:px-10">
        <div className="flex h-16 items-center justify-between gap-6">
          <a href="#top" className="flex items-center" aria-label="DashFolio.ai — home">
            <BrandLogo height={34} />
          </a>
          <nav className="hidden md:flex items-center gap-1">
            {V2_NAV_LINKS.map((l) =>
            <a key={l.label} href={l.href} className="px-3 py-1.5 text-sm text-mutedfg hover:text-fg rounded-md transition-colors">
                {l.label}
              </a>
            )}
          </nav>
          <div className="flex items-center gap-2">
            <button
              onClick={onToggleTheme}
              className="rounded-md p-2 text-mutedfg hover:text-fg hover:bg-card2 transition-colors"
              aria-label="Toggle theme">
              
              {theme === "dark" ? <IcoSun size={16} /> : <IcoMoon size={16} />}
            </button>
            <a href="/login.html" className="hidden sm:inline-flex px-3 py-1.5 text-sm text-mutedfg hover:text-fg rounded-md">Sign in</a>
            <a href="/auth?tab=register" className="btn-primary inline-flex items-center gap-1.5 rounded-md px-3.5 py-2 text-sm font-medium">
              Get started
            </a>
          </div>
        </div>
      </div>
    </header>);

}

// =================== Sidebar (matches real product) ====================
function AppSidebarV2() {
  // open sections by default match the screenshots
  const [open, setOpen] = React.useState({ Trades: true, Strategies: true, Income: false, Capital: false, Performance: false, History: false });
  const toggle = (k) => setOpen((s) => ({ ...s, [k]: !s[k] }));

  const SectionParent = ({ label, Icon, k, badge }) =>
  <li>
      <button
      onClick={() => toggle(k)}
      className="w-full flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12.5px] text-mutedfg hover:text-fg hover:bg-card2 transition-colors">
      
        <Icon size={14} />
        <span className="flex-1 truncate text-left">{label}</span>
        {badge && <span className="rounded-full bg-warn/20 text-warn px-1.5 py-px text-[9px] font-mono">{badge}</span>}
        <IcoChevronDown size={12} className={`transition-transform ${open[k] ? "" : "-rotate-90"}`} />
      </button>
    </li>;


  const SubItem = ({ label, active }) =>
  <li>
      <a className={`block rounded-md pl-8 pr-2.5 py-1 text-[12px] transition-colors ${
    active ? "text-fg font-medium" : "text-subtlefg hover:text-fg"}`
    }>
        {label}
      </a>
    </li>;


  const FlatItem = ({ label, Icon, active, badge, badgeRed }) =>
  <li>
      <a className={`flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12.5px] transition-colors ${
    active ? "bg-primary text-primaryFg" : "text-mutedfg hover:text-fg hover:bg-card2"}`
    }>
        <Icon size={14} />
        <span className="flex-1 truncate">{label}</span>
        {badge && <span className="rounded-full bg-warn/20 text-warn px-1.5 py-px text-[9px] font-mono">{badge}</span>}
        {badgeRed && <span className="rounded-full bg-negative/25 text-negative px-1.5 py-px text-[9px] font-mono">{badgeRed}</span>}
      </a>
    </li>;


  return (
    <aside className="w-[210px] shrink-0 border-r border-border1 bg-bg2 flex flex-col">
      {/* Logo header */}
      <div className="h-14 px-3.5 flex items-center gap-2.5 border-b border-border1">
        <BrandLogo height={26} />
        <button className="ml-auto text-subtlefg hover:text-fg p-1 rounded">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M9 4v16" /></svg>
        </button>
      </div>

      <nav className="flex-1 overflow-y-auto py-2 scroll-thin">
        <div className="px-3.5 pt-2 pb-1.5 text-[9.5px] font-medium uppercase tracking-wider text-subtlefg">Menu</div>
        <ul className="px-2 space-y-0.5">
          <FlatItem label="Dashboard" Icon={IcoDashboard} active />
          <FlatItem label="Open Positions" Icon={IcoTrending} />

          <SectionParent label="Trades" Icon={IcoExchange} k="Trades" />
          {open.Trades && <>
            <SubItem label="Overview" />
            <SubItem label="Trade Analy…" />
            <SubItem label="Archive" />
          </>}

          <FlatItem label="Upcoming Orders" Icon={IcoClipboard} />

          <SectionParent label="Strategies" Icon={IcoTarget} k="Strategies" />
          {open.Strategies && <>
            <SubItem label="Overview" />
            <SubItem label="Manage" />
          </>}

          <SectionParent label="Performance" Icon={IcoBars} k="Performance" />
          {open.Performance && <>
            <SubItem label="Overview" />
            <SubItem label="By Strategy" />
            <SubItem label="By Portfolio" />
          </>}

          <SectionParent label="History" Icon={IcoCalendar} k="History" />
          {open.History && <>
            <SubItem label="By Strategy" />
            <SubItem label="By Symbol" />
          </>}

          <FlatItem label="Earnings" Icon={IcoCalendarClock} badge={3} />

          <SectionParent label="Income" Icon={IcoDollar} k="Income" />
          {open.Income && <>
            <SubItem label="Dividends" />
            <SubItem label="Interests" />
          </>}

          <SectionParent label="Capital" Icon={IcoBadge} k="Capital" badge={2} />
          {open.Capital && <>
            <SubItem label="Capital Allo…" />
            <SubItem label="Deposits & …" />
            <SubItem label="Currency" />
          </>}

          <FlatItem label="Corp. Events" Icon={IcoShuffle} />
          <FlatItem label="Portfolios" Icon={IcoBriefcase} />
          <FlatItem label="Add Trades" Icon={IcoLink} />
          <FlatItem label="Plugins" Icon={IcoPuzzle} />
        </ul>

        <div className="px-3.5 pt-4 pb-1.5 text-[9.5px] font-medium uppercase tracking-wider text-subtlefg">Support</div>
        <ul className="px-2 space-y-0.5">
          <FlatItem label="Settings" Icon={IcoSettings} />
          <FlatItem label="Help Center" Icon={IcoHelp} />
          <FlatItem label="Light Mode" Icon={IcoSun} />
        </ul>
      </nav>

      <div className="border-t border-border1 p-2.5">
        <div className="flex items-center gap-2 rounded-md bg-card2 px-2 py-1.5">
          <div className="h-6 w-6 rounded bg-primary text-primaryFg text-[10px] font-semibold flex items-center justify-center">SF</div>
          <div className="flex-1 min-w-0">
            <div className="text-[11px] font-medium leading-tight truncate">SteveF</div>
            <div className="text-[10px] text-subtlefg leading-tight truncate">email@gmai…</div>
          </div>
          <IcoExternal size={11} className="text-subtlefg" />
        </div>
      </div>
    </aside>);

}

// =================== KPI Card (matches real product) ====================
function KPICard({ label, tag = "ALL", value, currency = "USD", sub, tone = "neutral", featured }) {
  const valueColor = {
    neutral: "text-fg",
    positive: "text-positive",
    negative: "text-negative",
    primary: "text-primary"
  }[tone];
  return (
    <div className={`card1 px-4 py-3.5 ${featured ? "ring-violet" : ""}`}>
      {/* Label row — label + optional (TAG), wraps naturally if needed */}
      <div className="flex items-start justify-between gap-1.5 mb-2 min-h-[14px]">
        <div className="flex flex-wrap items-baseline gap-x-1 gap-y-0 min-w-0">
          <span className="text-[10px] font-semibold uppercase tracking-wider text-subtlefg leading-tight">{label}</span>
          {tag && <span className="text-[10px] font-semibold uppercase tracking-wider text-primary leading-tight">({tag})</span>}
        </div>
        <IcoInfo size={11} className="text-subtlefg/50 shrink-0 mt-px" />
      </div>
      {/* Value — tight $ + number, no gap */}
      <div className={`font-mono font-bold tracking-tight ${valueColor} leading-none flex items-baseline`}>
        <span className={`${featured ? "text-[22px]" : "text-[19px]"} tabular-nums whitespace-nowrap`}>{value}</span>
        <span className="text-[10px] text-subtlefg font-medium ml-1.5">{currency}</span>
      </div>
      {sub && <div className="mt-2 text-[10px] text-subtlefg leading-tight truncate">{sub}</div>}
    </div>);

}

// Inline metric chip for the institutional metrics strip
function MetricInline({ icon: Icon, label, value, tone = "positive", suffix }) {
  const color = {
    positive: "text-positive",
    negative: "text-negative",
    primary: "text-primary",
    neutral: "text-fg"
  }[tone];
  return (
    <div className="flex items-center gap-1.5 whitespace-nowrap">
      <Icon size={12} className="text-subtlefg" />
      <span className="text-[10.5px] font-semibold uppercase tracking-wider text-mutedfg">{label}</span>
      {value &&
      <>
          <span className={`font-mono text-[12px] font-semibold ${color}`}>{value}</span>
          {suffix && <span className="text-[10px] text-subtlefg">{suffix}</span>}
        </>
      }
    </div>);

}

// =================== Portfolio Chart (clean line + gradient fill) ====================
function PortfolioBigChart({ width = 900, height = 220 }) {
  // Long ascending curve like the real screenshot (Apr 2020 → present)
  const data = React.useMemo(() => {
    const pts = [];
    const n = 70;
    // Realistic portfolio growth: ~12% annual base + small monthly noise + a couple of
    // small drawdowns / recoveries, ending around ~$680K.
    let v = 10000;
    let s = 92837;
    const rng = () => {
      s = (s * 9301 + 49297) % 233280;
      return s / 233280;
    };
    for (let i = 0; i < n; i++) {
      // monthly growth rate ~1% baseline, with small variance
      let g = 0.01 + (rng() - 0.5) * 0.04;
      // small drawdown around month 18 and month 42 (recession-like dips)
      if (i >= 17 && i <= 21) g -= 0.025;
      if (i >= 41 && i <= 45) g -= 0.02;
      // mild recovery boosts after dips
      if (i >= 22 && i <= 28) g += 0.018;
      if (i >= 46 && i <= 52) g += 0.014;
      v = v * (1 + g);
      pts.push(Math.max(0, v));
    }
    return pts;
  }, []);

  const { d, x, y, min, max, pts } = smoothPathFromPoints(data, width, height, 6, 12);
  const id = React.useId();
  const gridY = [0, 1, 2, 3, 4, 5, 6, 7].map((i) => 12 + i / 7 * (height - 24));
  const yLabels = ["$700K", "$600K", "$500K", "$400K", "$300K", "$200K", "$100K", "$0"];
  const xLabels = ["Apr 2020", "Dec 2020", "Jul 2021", "Mar 2022", "Oct 2022", "Jun 2023", "Jan 2024", "Aug 2024", "Mar 2025", "Nov 2025"];

  return (
    <svg width="100%" viewBox={`0 0 ${width + 50} ${height + 24}`} className="overflow-visible">
      <defs>
        <linearGradient id={`pgrad-${id}`} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="hsl(217 90% 65%)" stopOpacity="0.35" />
          <stop offset="100%" stopColor="hsl(217 90% 65%)" stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* y grid lines + labels */}
      {gridY.map((gy, i) =>
      <g key={i}>
          <line x1="50" x2={width + 50} y1={gy} y2={gy} stroke="hsl(var(--border-2))" strokeWidth="1" strokeDasharray="2 4" opacity="0.5" />
          <text x="44" y={gy + 3} fontSize="9" fill="hsl(var(--subtle-fg))" textAnchor="end" fontFamily="JetBrains Mono, monospace">{yLabels[i]}</text>
        </g>
      )}
      {/* x labels */}
      {xLabels.map((label, i) => {
        const xp = 50 + i / (xLabels.length - 1) * width;
        return <text key={label} x={xp} y={height + 16} fontSize="9" fill="hsl(var(--subtle-fg))" textAnchor="middle" fontFamily="JetBrains Mono, monospace">{label}</text>;
      })}
      {/* area + line */}
      <g transform="translate(50, 0)">
        <path d={`${d} L ${pts[pts.length - 1][0]} ${height - 12} L ${pts[0][0]} ${height - 12} Z`} fill={`url(#pgrad-${id})`} />
        <path d={d} fill="none" stroke="hsl(217 90% 65%)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        {/* current dot */}
        {pts && pts.length &&
        <g>
            <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="4" fill="hsl(217 90% 65%)" opacity="0.25" />
            <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="2.2" fill="hsl(217 90% 65%)" />
          </g>
        }
        {/* Mid sample dot like screenshot */}
        {pts && pts.length > 55 &&
        <circle cx={pts[55][0]} cy={pts[55][1]} r="2.5" fill="hsl(340 75% 65%)" />
        }
      </g>
    </svg>);

}

// =================== Full Dashboard Mock (v2) ====================
function DashboardMockV2() {
  const [period, setPeriod] = React.useState("ALL");
  return (
    <div className="card1 overflow-hidden shadow-[0_30px_120px_-30px_rgba(0,0,0,.8)]" data-screen-label="hero-dashboard-mock-v2">
      {/* macOS window chrome */}
      <div className="flex items-center gap-2 px-3 h-9 border-b border-border1 bg-bg2">
        <span className="h-2.5 w-2.5 rounded-full bg-[#ff5f57]" />
        <span className="h-2.5 w-2.5 rounded-full bg-[#febc2e]" />
        <span className="h-2.5 w-2.5 rounded-full bg-[#28c840]" />
        <div className="flex-1 mx-3 hidden md:flex items-center justify-center">
          <div className="flex items-center gap-2 rounded-md bg-card2 border border-border1 px-2.5 py-1 text-[11px] text-subtlefg">
            <IcoLock size={11} /> dashfolio.ai / dashboard
          </div>
        </div>
        <div className="flex items-center gap-2 text-subtlefg">
          <IcoBell size={13} /><IcoSearch size={13} />
        </div>
      </div>

      <div className="flex">
        <AppSidebarV2 />

        <div className="flex-1 min-w-0 bg-bg">
          {/* Page header */}
          <div className="px-5 py-4 flex items-start justify-between gap-4">
            <div>
              <h3 className="text-xl font-semibold tracking-tight">Dashboard</h3>
              <p className="text-[11px] text-subtlefg mt-1">Track your portfolio performance and trading activity.</p>
            </div>
            <div className="flex items-center gap-2">
              <button className="flex items-center gap-2 rounded-md bg-card2 border border-border1 px-2.5 py-1.5 text-[11px] text-fg hover:bg-card">
                <IcoBriefcase size={12} className="text-subtlefg" />
                All Portfolios
                <IcoChevronDown size={11} className="text-subtlefg" />
              </button>
              <button className="flex items-center gap-1.5 rounded-md bg-card2 border border-border1 px-2.5 py-1.5 text-[11px] text-fg hover:bg-card">
                <IcoGrip size={12} className="text-subtlefg" /> Widgets
              </button>
              <button className="flex items-center gap-1.5 rounded-md bg-card2 border border-border1 px-2.5 py-1.5 text-[11px] text-fg hover:bg-card">
                <IcoSettings size={12} className="text-subtlefg" /> Edit Layout
              </button>
            </div>
          </div>

          {/* KPI strip — 4×2 layout, Portfolio Value as featured hero */}
          <div className="px-5 grid grid-cols-4 gap-2.5">
            <div className="col-span-2">
              <KPICard label="Portfolio Value" tag={null} value={<>$<HeroPortfolioValue /></>} sub="Live · across all accounts · last sync 2 min ago" featured />
            </div>
            <KPICard label="Profit & Loss" tag="ALL" value="$290,995.77" tone="positive" />
            <KPICard label="Performance" tag="ALL" value={<span>+84.55<span className="text-[14px] ml-px">%</span></span>} tone="positive" currency="" />
            <KPICard label="Realized P&L" tag="ALL" value="$197,896.80" tone="positive" />
            <KPICard label="Unrealized P&L" tag="ALL" value="$71,716.16" tone="positive" />
            <KPICard label="Passive Income" tag="ALL" value="$21,382.81" tone="positive" sub="Dividends + Interest" />
            <KPICard label="Cash Balance" tag={null} value="$11,819.40" sub="+ $250.19 CAD across 2 accounts" />
          </div>

          {/* Institutional metrics inline strip */}
          <div className="mx-5 mt-3 rounded-md bg-card2 border border-border1 px-4 py-2.5 flex items-center justify-between flex-wrap gap-x-5 gap-y-1.5">
            <MetricInline icon={IcoTrending} label="TWR ITD" value="+22.41%" suffix="/yr" />
            <MetricInline icon={IcoBars} label="MWR ITD" value="+22.26%" suffix="/yr" />
            <MetricInline icon={IcoZap} label="Sharpe" value="0.90" tone="neutral" />
            <MetricInline icon={IcoArrowDown} label="Max DD" value="-13.4%" tone="negative" />
            <MetricInline icon={IcoTarget} label="vs GSPC" value="+6.16%" suffix="/yr" />
            <span className="text-[10px] text-subtlefg ml-auto">Since Jun 2020</span>
          </div>

          {/* Portfolio Value chart */}
          <div className="px-5 mt-3">
            <div className="card1 p-4">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <span className="text-[11px] font-semibold uppercase tracking-wider">Portfolio Value</span>
                  <span className="text-[10px] font-semibold uppercase tracking-wider text-primary">(ALL)</span>
                  <IcoChevronDown size={11} className="text-subtlefg" />
                </div>
                <div className="flex items-center gap-1.5">
                  {["1 DAY", "7 DAYS", "30 DAYS", "1 YEAR", "ALL TIME"].map((p) =>
                  <button key={p}
                  onClick={() => setPeriod(p)}
                  className={`rounded-md font-mono font-semibold tracking-wider transition-colors px-2 py-1 text-[9.5px] ${
                  period === "ALL" && p === "ALL TIME" || period === p ?
                  "bg-primary text-primaryFg" :
                  "bg-card2 text-mutedfg border border-border1 hover:text-fg"}`
                  }>
                      {p}
                    </button>
                  )}
                </div>
              </div>
              <div className="flex items-center gap-2 mb-1 text-[10px] text-subtlefg justify-end">
                <span className="inline-flex items-center gap-1"><span className="h-1.5 w-1.5 rounded-full bg-[hsl(217_90%_65%)]" /> Portfolio Value</span>
              </div>
              <div className="-mx-1">
                <PortfolioBigChart width={760} height={200} />
              </div>
            </div>
          </div>

          {/* Bottom: Profit Today/Yesterday + Upcoming Earnings */}
          <div className="px-5 mt-3 pb-5 grid grid-cols-2 gap-3">
            <ProfitTodayCard />
            <UpcomingEarningsCard />
          </div>
        </div>
      </div>
    </div>);

}

function ProfitTodayCard() {
  return (
    <div className="card1 p-4">
      <div className="flex items-center gap-1.5 mb-3">
        <span className="text-[10.5px] font-semibold uppercase tracking-wider text-subtlefg">Profit Today & Yesterday</span>
        <IcoInfo size={10} className="text-subtlefg/60" />
      </div>
      <div className="grid grid-cols-2 gap-4">
        {[
        { label: "TODAY", sub: "(LAST UPDATE MAY 18, 03:31 PM)", amount: 14058.00, trades: "8 trades closed", realized: 4302.08, unrealized: 9755.92 },
        { label: "YESTERDAY", sub: "", amount: 11276.88, trades: "0 trades closed", realized: 0.00, unrealized: 11276.88 }].
        map((d) =>
        <div key={d.label}>
            <div className="text-[10px] font-semibold tracking-wider text-subtlefg">
              {d.label} {d.sub && <span className="text-[9px] opacity-70 normal-case font-normal">{d.sub}</span>}
            </div>
            <div className={`mt-1.5 flex items-baseline gap-1 ${d.amount < 0 ? "text-negative" : "text-positive"}`}>
              <span className="text-[10px] opacity-80">{d.amount < 0 ? "-$" : "+$"}</span>
              <span className="font-mono font-bold text-[20px] tracking-tight">{Math.abs(d.amount).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
              <span className="text-[9.5px] text-subtlefg ml-0.5">USD</span>
            </div>
            <div className="mt-1 text-[10px] text-subtlefg flex items-center gap-1">
              <IcoTrending size={9} /> {d.trades}
            </div>
            <div className="mt-2 space-y-0.5 text-[10.5px]">
              <div className="flex justify-between"><span className="text-mutedfg">Realized</span><span className="font-mono">${d.realized.toLocaleString("en-US", { minimumFractionDigits: 2 })}</span></div>
              <div className="flex justify-between"><span className="text-mutedfg">Unrealized</span><span className="font-mono">{d.unrealized < 0 ? "-" : ""}${Math.abs(d.unrealized).toLocaleString("en-US", { minimumFractionDigits: 2 })}</span></div>
            </div>
          </div>
        )}
      </div>
    </div>);

}

function UpcomingEarningsCard() {
  const rows = [
  { sym: "URBN", date: "May 20", when: "🌙 4:00 PM", eps: "$1.14", surprise: "-16.4%", surpriseTone: "negative", countdown: "in 2 days", cdTone: "negative" },
  { sym: "MRVL", date: "May 27", when: "🌙 4:00 PM", eps: "$0.79", surprise: "+1.1%", surpriseTone: "positive", countdown: "in 9 days", cdTone: "neutral" },
  { sym: "CIEN", date: "Jun 4", when: "🌅 8:30 AM", eps: "$1.46", surprise: "+15.6%", surpriseTone: "positive", countdown: "in 17 days", cdTone: "neutral" }];

  return (
    <div className="card1 p-4">
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-1.5">
          <span className="text-[10.5px] font-semibold uppercase tracking-wider text-subtlefg">Upcoming Earnings</span>
          <span className="text-[10.5px] font-semibold uppercase tracking-wider text-primary">(NEXT 21 DAYS)</span>
        </div>
        <span className="text-[9.5px] text-subtlefg">Last sync 9:53 AM</span>
      </div>
      <table className="w-full text-[10.5px]">
        <thead>
          <tr className="text-subtlefg">
            <th className="text-left font-semibold uppercase tracking-wider text-[9px] pb-2">Symbol</th>
            <th className="text-left font-semibold uppercase tracking-wider text-[9px] pb-2">Date</th>
            <th className="text-left font-semibold uppercase tracking-wider text-[9px] pb-2">When</th>
            <th className="text-right font-semibold uppercase tracking-wider text-[9px] pb-2">EPS Est.</th>
            <th className="text-right font-semibold uppercase tracking-wider text-[9px] pb-2">Last Surprise</th>
            <th className="text-right font-semibold uppercase tracking-wider text-[9px] pb-2">Countdown</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) =>
          <tr key={r.sym} className="border-t border-border2">
              <td className="font-mono font-semibold py-1.5">{r.sym}</td>
              <td className="text-mutedfg py-1.5">{r.date}</td>
              <td className="text-mutedfg py-1.5">{r.when}</td>
              <td className="text-right font-mono py-1.5">{r.eps}</td>
              <td className={`text-right font-mono py-1.5 ${r.surpriseTone === "positive" ? "text-positive" : "text-negative"}`}>{r.surprise}</td>
              <td className="text-right py-1.5">
                <span className={`inline-block rounded px-1.5 py-0.5 text-[9px] font-mono ${
              r.cdTone === "negative" ? "bg-negative/15 text-negative" : "bg-card2 text-mutedfg border border-border1"}`
              }>{r.countdown}</span>
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>);

}

function HeroPortfolioValue() {
  return <AnimatedNumber value={635185.64} decimals={2} duration={1600} className="font-mono" />;
}

// =================== Hero ============================
function HeroV2() {
  return (
    <section id="top" className="relative pt-32 pb-16 md:pt-36 md:pb-24 bg-spot overflow-hidden" style={{ padding: "96px 0px 46px" }}>
      <div className="absolute inset-0 bg-grid opacity-40 pointer-events-none" aria-hidden="true" />
      <div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-b from-transparent to-bg pointer-events-none" aria-hidden="true" />
      <div className="relative mx-auto max-w-7xl px-6 md:px-10">
        <div className="max-w-4xl">
          <Eyebrow>Portfolio Intelligence for Systematic Traders</Eyebrow>
          <h1 className="mt-5 text-[40px] md:text-[64px] font-semibold tracking-tight leading-[1.04] text-fg">
            Every trade. Every strategy.<br />
            <span className="text-mutedfg">Every currency. </span>
            <span className="text-primary">One dashboard.</span>
          </h1>
          <p className="mt-5 text-base md:text-lg text-mutedfg max-w-2xl leading-relaxed">
            <span className="text-fg">DashFolio</span> consolidates Interactive Brokers, OrderClerk, and RealTest into one ledger: FIFO-matched round trips, strategy-level attribution, multicurrency P&L, and institutional metrics that always reconcile.
          </p>
          <div className="mt-8 flex flex-wrap items-center gap-3">
            <a href="#cta-final" className="btn-primary inline-flex items-center gap-2 rounded-md px-5 py-2.5 text-sm font-semibold">
              Start your 14-day trial <IcoArrowRight size={14} />
            </a>
          </div>
          <div className="mt-3 text-[12px] text-subtlefg">
            No credit card required &nbsp;·&nbsp; Cancel anytime
          </div>
        </div>

        {/* Dashboard mock — matches the real product */}
        <div className="relative mt-12 md:mt-16">
          <div className="absolute -inset-x-10 -top-10 bottom-10 bg-primary/10 blur-3xl rounded-full pointer-events-none" aria-hidden="true" />
          <div className="relative">
            <DashboardMockV2 />
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  NavBarV2, HeroV2, AppSidebarV2, DashboardMockV2, KPICard, MetricInline,
  PortfolioBigChart, ProfitTodayCard, UpcomingEarningsCard
});