// All the "narrative" sections — trust strip, integrations, problem cards,
// feature blocks, workflow, comparison, pillars, testimonials, use cases,
// security, stat band, changelog, final CTA.

// === Trust strip ================================================
function TrustStrip() {
  const items = [
  "Connect your broker in 90 seconds",
  "12 currencies supported, FX-converted in real time",
  "Every fill, every split, every dividend: reconciled",
  "Built by traders who run this themselves"];

  return (
    <section className="border-y border-border1 bg-bg2/60" style={{ borderWidth: "1px 0px" }}>
      <div className="mx-auto max-w-7xl px-6 md:px-10">
        <div className="grid grid-cols-1 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-border1">
          {items.map((t, i) =>
          <div key={i} className="px-2 md:px-6 py-6 text-sm text-mutedfg flex items-center gap-3">
              <span className="text-primary font-mono font-semibold text-[11px]">0{i + 1}</span>
              <span className="leading-snug">{t}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// === Integrations strip (static) ================================
function IntegrationsMarquee() {
  const Logo = ({ name }) =>
  <div className="flex items-center gap-2 px-6 md:px-8 shrink-0">
      <span className="h-6 w-6 rounded grid place-items-center bg-card2 border border-border1 text-[10px] font-mono text-subtlefg">
        {name.split(" ").map((w) => w[0]).slice(0, 2).join("")}
      </span>
      <span className="font-semibold text-[15px] text-mutedfg tracking-tight whitespace-nowrap">{name}</span>
    </div>;

  const items = [...INTEGRATIONS];
  return (
    <section className="pt-0 pb-10 border-b border-border1">
      <div className="mx-auto max-w-7xl px-6 md:px-10 mb-6">
        <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-subtlefg text-center">Connects to the tools you already use</div>
      </div>
      <div className="mx-auto max-w-7xl px-6 md:px-10">
        <div className="flex flex-wrap items-center justify-center gap-y-4">
          {items.map((it) => <Logo key={it.id} name={it.name} />)}
        </div>
      </div>
    </section>);

}

// === Problem cards ==============================================
function TangledLog() {
  return (
    <svg viewBox="0 0 280 100" className="w-full h-24">
      {[0, 1, 2, 3, 4].map((i) =>
      <g key={i}>
          <line x1="10" x2="270" y1={15 + i * 16} y2={15 + i * 16} stroke="hsl(var(--border-1))" strokeDasharray="2 4" />
          <rect x={20 + i * 7 % 30} y={9 + i * 16} width={30 + i * 11 % 40} height="10" rx="2" fill={`hsl(262 50% ${40 + i * 6}%)`} opacity={0.6 - i * 0.05} />
          <rect x={80 + i * 13 % 50} y={9 + i * 16} width={20 + i * 9 % 30} height="10" rx="2" fill={`hsl(${145 - i * 10} 50% 40%)`} opacity={0.55} />
          <rect x={150 + i * 7 % 40} y={9 + i * 16} width={28 + i * 3 % 26} height="10" rx="2" fill={`hsl(${0 + i * 4} 75% 55%)`} opacity={0.55} />
        </g>
      )}
      {/* error markers */}
      {[1, 3].map((i) =>
      <g key={i}>
          <circle cx={235} cy={14 + i * 16} r="6" fill="hsl(var(--negative) / 0.2)" />
          <circle cx={235} cy={14 + i * 16} r="3" fill="hsl(var(--negative))" />
        </g>
      )}
      <text x="10" y="98" fontSize="8" fill="hsl(var(--subtle-fg))" className="font-mono">2 mismatches · manual reconciliation needed</text>
    </svg>);

}

function FxTableViz() {
  return (
    <div className="relative">
      <table className="w-full text-[10.5px] font-mono">
        <thead><tr className="text-subtlefg">
          <th className="text-left pb-1">From</th>
          <th className="text-left pb-1">To</th>
          <th className="text-right pb-1">Rate</th>
          <th className="text-right pb-1">Date</th>
        </tr></thead>
        <tbody>
          {[
          ["USD", "CAD", "1.3691", "?"],
          ["CAD", "USD", "0.7304", "?"],
          ["USD", "AUD", "1.5142", "?"],
          ["AUD", "USD", "0.6604", "?"],
          ["EUR", "USD", "1.0842", "?"]].
          map((r, i) =>
          <tr key={i} className="border-t border-border2"><td className="py-1">{r[0]}</td><td>{r[1]}</td><td className="text-right">{r[2]}</td><td className="text-right text-warn">{r[3]}</td></tr>
          )}
        </tbody>
      </table>
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="rounded-md border border-warn/50 bg-bg/90 backdrop-blur-sm px-3 py-1.5 text-warn text-xs font-semibold inline-flex items-center gap-1.5">
          <IcoAlert size={13} /> Stale FX · last rate March 14
        </div>
      </div>
    </div>);

}

function UnattributedBlob() {
  return (
    <svg viewBox="0 0 280 100" className="w-full h-24">
      {Array.from({ length: 22 }).map((_, i) => {
        const x = 20 + (i * 23 + i * i) % 240;
        const y = 12 + (i * 17 + 7) % 70;
        const r = 4 + i % 4;
        return <circle key={i} cx={x} cy={y} r={r} fill="hsl(var(--muted-fg))" opacity="0.5" />;
      })}
      <text x="10" y="96" fontSize="9" fill="hsl(var(--subtle-fg))" className="font-mono">784 trades · 0 strategies tagged</text>
    </svg>);

}

function CorpEventsBreakViz() {
  const rows = [
  { sym: "OGC", date: "Jun 2025", note: "Reverse split 1:3, qty no longer matches", broken: true },
  { sym: "CDE", date: "Mar 2026", note: "Acquired by NGD, ticker delisted", broken: true },
  { sym: "DPM", date: "Sep 2025", note: "CUSIP changed, history orphaned", broken: true }];

  return (
    <div className="space-y-1.5 font-mono text-[10px]">
      {rows.map((r) =>
      <div key={r.sym} className="flex items-center gap-2 rounded bg-card2/60 border border-border2 px-2 py-1.5">
          <span className="text-subtlefg w-[58px] shrink-0">{r.date}</span>
          <span className="text-mutedfg line-through w-[40px] shrink-0 font-semibold">{r.sym}</span>
          <span className="text-negative/90 text-[9.5px] truncate flex-1">{r.note}</span>
          <IcoAlert size={11} className="text-warn shrink-0" />
        </div>
      )}
      <div className="text-[9px] text-subtlefg font-mono pt-1">3 of 12 symbol aliases unresolved</div>
    </div>);

}

function ProblemCards() {
  const cards = [
  {
    title: "Your broker tracks accounts. Not strategies.",
    desc: "IBKR doesn't know this fill is Momentum_Tech and that one is Trend_TSX. Run 8 strategies and you get one number back, when you need eight.",
    viz: <UnattributedBlob />
  },
  {
    title: "Corporate events silently rewrite your past.",
    desc: "OGC reverse-splits 1-for-3. CDE gets acquired and becomes NGD. Without symbol aliases your historical P&L points at tickers that no longer exist, and your win-rate from 2022 is fiction.",
    viz: <CorpEventsBreakViz />
  },
  {
    title: "Multi-currency P&L drifts every month.",
    desc: "Mix USD, CAD, and AUD fills. Miss one FX update. By month-end your base-currency total is off 2-4%. By year-end you don't actually know if you made money.",
    viz: <FxTableViz />
  }];

  return (
    <Section id="problem"
    eyebrow="The reality"
    title="Brokers track positions. You trade strategies."
    sub="Three problems your account statement won't solve.">
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {cards.map((c, i) =>
        <div key={i} className="card1 p-5 reveal" style={{ transitionDelay: `${i * 60}ms` }}>
            <div className="text-[11px] font-mono text-primary mb-3">0{i + 1}</div>
            <h3 className="text-lg font-semibold tracking-tight">{c.title}</h3>
            <p className="mt-2 text-[13.5px] text-mutedfg leading-relaxed">{c.desc}</p>
            <div className="mt-4 pt-4 border-t border-border2">{c.viz}</div>
          </div>
        )}
      </div>
    </Section>);

}

// === Feature block layout =======================================
function FeatureBlock({ idx, title, desc, snippet, snippetSide = "right" }) {
  const left = snippetSide === "left";
  return (
    <div className={`grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center reveal py-12 lg:py-16 border-b border-border1 last:border-b-0`} style={{ padding: "62px 0px 64px" }}>
      <div className={`lg:col-span-5 ${left ? "lg:order-2" : ""}`}>
        <div className="text-[12.5px] font-mono text-primary mb-2 tracking-wider">FEATURE · {idx.toString().padStart(2, "0")}</div>
        <h3 className="text-2xl md:text-[28px] font-semibold tracking-tight leading-[1.15]">{title}</h3>
        <p className="mt-4 text-[15px] text-mutedfg leading-relaxed">{desc}</p>
      </div>
      <div className={`lg:col-span-7 ${left ? "lg:order-1" : ""}`}>
        {snippet}
      </div>
    </div>);

}

function Features() {
  return (
    <Section id="features"
    eyebrow="What you can do"
    title="Seven things your spreadsheet can't."
    sub="Each block is a real surface in the app: same UI, same data shape, same density.">
      
      <div>
        <FeatureBlock
          idx={1}
          title="Unified trade history across every source"
          desc="Import from IBKR Flex Query, sync from OrderClerk, drop in CSV, or enter manually. Every trade lands in one ledger, tagged with its strategy, ready to analyze."
          snippet={<SnippetHistoryTable />} />
        
        <FeatureBlock
          idx={2}
          title="Round-trip P&L that survives the messy stuff"
          desc="Partial fills, stock splits, corporate actions: DashFolio reconstructs every round-trip using FIFO matching against post-split quantities. Realized P&L is always right, even when your broker statement isn't."
          snippet={<SnippetRoundTrip />}
          snippetSide="left" />
        
        <FeatureBlock
          idx={3}
          title="Strategy-level performance, not account-level guesswork"
          desc="Filter by strategy. Toggle realized, unrealized, or combined. See exactly which strategies are paying for themselves and which are bleeding, month by month, with unrealized monthly delta calculated against EODHD end-of-month prices."
          snippet={<SnippetPerformance />} />
        
        <FeatureBlock
          idx={4}
          title="Capital allocation that respects every movement"
          desc="Track every capital movement per strategy, in any currency. Recurring contributions, one-off withdrawals, FX conversion to base: all handled, all auditable, all editable."
          snippet={<SnippetCapital />}
          snippetSide="left" />
        
        <FeatureBlock
          idx={5}
          title="From RealTest signal to live order, end to end"
          desc="RealTest generates the orders. DashFolio shows them on a unified agenda grouped by date and strategy. OrderClerk executes. You see every pending order across every strategy before market open, and every historical order on demand."
          snippet={<SnippetUpcoming />} />
        
        <FeatureBlock
          idx={6}
          title="Dividends, interest, and corporate actions handled right"
          desc="Dividends automatically allocated across strategies by share count at ex-date. Interest routed to the right column. Corporate actions resolved with auto-generated symbol aliases. Withholding tax tracked. Nothing falls through the cracks."
          snippet={<SnippetDividends />}
          snippetSide="left" />
        
        <FeatureBlock
          idx={7}
          title="Open positions, always reconciled"
          desc="Live positions across every account, every strategy. Mark-to-market with EODHD prices, Yahoo Finance as fallback. Edit inline. Audit instantly."
          snippet={<SnippetOpenPositions />} />
        
        <FeatureBlock
          idx={8}
          title="Manual and CSV trades when you need them"
          desc="Import historical CSVs, enter manual round-trips, or paste OrderClerk data. Overlap detection rejects conflicting trades at import time, with a clear report on what was kept and what was sent back."
          snippet={<SnippetManualCsv />}
          snippetSide="left" />
        
      </div>
    </Section>);

}

// === Workflow walkthrough ======================================
function WorkflowMiniA() {
  return (
    <div className="space-y-1.5 font-mono text-[10px]">
      <div className="flex items-center gap-2 rounded border border-border1 bg-card2 px-2 py-1.5">
        <span className="h-1.5 w-1.5 rounded-full bg-info" /><span className="text-mutedfg flex-1">IBKR Flex Queries</span><span className="text-positive">connected</span>
      </div>
      <div className="flex items-center gap-2 rounded border border-border1 bg-card2 px-2 py-1.5">
        <span className="h-1.5 w-1.5 rounded-full bg-positive" /><span className="text-mutedfg flex-1">DashFolioSync · 3 folders</span><span className="text-positive">connected</span>
      </div>
    </div>);

}

function WorkflowMiniB() {
  return (
    <div className="font-mono text-[10px] space-y-1.5">
      <div className="flex items-center justify-between rounded border border-border1 bg-card2 px-2 py-1.5">
        <span className="text-mutedfg inline-flex items-center gap-1.5"><span className="live-dot" />DashFolioSync Status</span>
        <span className="text-subtlefg">v1.5.1</span>
      </div>
      <div className="rounded border border-border1 bg-bg p-2 space-y-1">
        <div className="flex items-center justify-between gap-2">
          <span className="text-subtlefg">Device</span>
          <span className="text-mutedfg">PC-SMOOKIE</span>
        </div>
        <div className="flex items-center justify-between gap-2">
          <span className="text-subtlefg">Folders</span>
          <span className="text-mutedfg">1 active</span>
        </div>
        <div className="flex items-center justify-between gap-2">
          <span className="text-subtlefg">Last sync</span>
          <span className="text-mutedfg inline-flex items-center gap-1">2026-05-21 13:23:20 <span className="text-positive">✓</span></span>
        </div>
      </div>
      <div className="rounded border border-border1 bg-bg p-2">
        <div className="text-[9px] text-subtlefg mb-1 uppercase tracking-wider">Recent Activity</div>
        <div className="text-positive">+ 184 trades <span className="text-subtlefg">· 13:23</span></div>
      </div>
    </div>);

}

function WorkflowMiniC() {
  const c = genCurve(100, 124, 12, 999);
  return (
    <div className="space-y-2">
      <div className="rounded border border-border1 bg-card2 p-2">
        <div className="text-[9px] uppercase tracking-wider text-subtlefg">YTD attribution</div>
        <Sparkline data={c} width={160} height={36} stroke="hsl(var(--primary))" fill />
      </div>
      <div className="grid grid-cols-2 gap-2 text-[10px]">
        <div className="rounded border border-border1 bg-card2 px-2 py-1.5">
          <div className="text-subtlefg text-[9px] uppercase">Realized</div>
          <div className="font-mono text-positive">+$28,640</div>
        </div>
        <div className="rounded border border-border1 bg-card2 px-2 py-1.5">
          <div className="text-subtlefg text-[9px] uppercase">Win rate</div>
          <div className="font-mono">61.8%</div>
        </div>
      </div>
    </div>);

}

function Workflow() {
  const steps = [
  { n: "01", title: "Connect", desc: "IBKR Flex Queries and DashFolioSync, auto-unified into clean round-trips.", viz: <WorkflowMiniA /> },
  { n: "02", title: "Sync", desc: "Background sync via DashFolioSync. New fills arrive every 15 minutes and close round-trips automatically.", viz: <WorkflowMiniB /> },
  { n: "03", title: "Analyze", desc: "Unified P&L, strategy attribution, audit trail, with every number traceable back to its source row.", viz: <WorkflowMiniC /> }];

  return (
    <Section id="workflow"
    eyebrow="Workflow"
    title="From broker to dashboard in three steps.">
      
      <div className="relative">
        <div className="absolute top-[64px] left-[12%] right-[12%] h-px bg-border1 hidden md:block" />
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {steps.map((s, i) =>
          <div key={s.n} className="relative reveal" style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="h-12 w-12 rounded-full border border-border1 bg-bg2 flex items-center justify-center font-mono text-sm font-semibold text-primary relative z-10">
                {s.n}
              </div>
              <div className="mt-5">
                <h3 className="text-xl font-semibold tracking-tight">{s.title}</h3>
                <p className="mt-1 text-[14px] text-mutedfg leading-relaxed">{s.desc}</p>
              </div>
              <div className="card1 p-3 mt-4">{s.viz}</div>
            </div>
          )}
        </div>
      </div>
    </Section>);

}

// === Comparison table ===========================================
const COMPARISON_SUMMARY = [
{
  section: "Core engine",
  rows: [
  ["Multi-strategy attribution", "Strategy-tagged on every round-trip", "full", "none", "none"],
  ["FIFO round-trip matching", "Automatic, split-adjusted, cross-account aware", "full", "none", "partial"],
  ["Multi-currency P&L", "USD · CAD · AUD and more, daily FX, unified base", "full", "none", "partial"],
  ["Corporate actions", "Splits, mergers, spinoffs, renames and delistings, with automatic symbol aliases", "full", "none", "partial"]]

},
{
  section: "Analytics & insights",
  rows: [
  ["Performance analytics", "TWR (Modified Dietz), MWR (XIRR), Sharpe and drawdowns, per strategy and per portfolio", "full", "none", "partial"],
  ["Dividend & interest tracking", "Auto-matched to positions, attributed to the strategy that held the shares", "full", "none", "partial"],
  ["Earnings calendar", "Filtered by open positions, EPS estimates", "full", "none", "partial"],
  ["Portfolio comparison", "Overlay charts, side-by-side metrics, monthly heatmap", "full", "none", "none"],
  ["Trade analysis", "Malformed round-trip heuristics, intraday anomalies, day-trade detection", "full", "none", "none"],
  ["Customizable dashboard", "Drag-to-reorder widgets, sector donut, best/worst trades", "full", "none", "partial"]]

},
{
  section: "Data & integrations",
  rows: [
  ["Cross-currency mergers", "Capital-displacement stepper with forex order pre-fill", "full", "none", "none"],
  ["RealTest + OrderClerk", "RT signals → upcoming orders · OC Sync auto-imports matched to IB executions", "full", "none", "none"],
  ["Automated data sync", "Flex Query scheduled imports (1×–3×/day), OC Sync agent", "full", "none", "partial"],
  ["Historical backfill", "CSV / XML import, overlap detection, duplicate keyed on tradeId", "full", "none", "none"],
  ["Multi-account support", "Cross-account matching for transfers and FIFO", "full", "none", "partial"],
  ["Time to onboard", "Minutes, with one Flex token and pre-defined queries", "full", "none", "none"]]

}];


function StatusGlyph({ kind }) {
  if (kind === "full") return <span className="font-mono font-bold text-[14px]" style={{ color: "#4ade80" }}>✓</span>;
  if (kind === "partial") return <span className="font-mono font-bold text-[14px]" style={{ color: "#E5B94E" }}>~</span>;
  return <span className="font-mono text-[14px]" style={{ color: "#5a5950" }}>✕</span>;
}

function ComparisonSummaryGrid() {
  const [expanded, setExpanded] = React.useState(false);

  const DF_BAND_BG = "#1a1827";
  const DF_BAND_BORDER = "#7d6ff230";
  const DF_TOP_ACCENT = "#7d6ff2";
  const TITLE_COLOR = "#ededf2";
  const SUB_COLOR = "#9799a6";
  const DEFAULT_VISIBLE = 9;

  // Build visible blocks: section headers are only kept if they contain at
  // least one visible row (otherwise an empty section header would dangle).
  let shown = 0;
  const blocks = [];
  for (const cat of COMPARISON_SUMMARY) {
    if (!expanded && shown >= DEFAULT_VISIBLE) break;
    const rowsToShow = [];
    for (const row of cat.rows) {
      if (!expanded && shown >= DEFAULT_VISIBLE) break;
      rowsToShow.push(row);
      shown++;
    }
    if (rowsToShow.length > 0) {
      blocks.push({ section: cat.section, rows: rowsToShow });
    }
  }

  return (
    <div className="mb-8 relative">
      <div className="overflow-hidden rounded-2xl border border-border1 bg-card">
        {/* Inner container holds the DF column band — band stops here, so the
        legend below sits on the plain card background (no purple band). */}
        <div className="relative">
          {/* Continuous DF column band — single uniform background spanning the data area */}
          <div
            className="absolute top-0 bottom-0 hidden md:block pointer-events-none"
            style={{
              left: "40%",
              width: "20%",
              background: DF_BAND_BG,
              borderLeft: `1px solid ${DF_BAND_BORDER}`,
              borderRight: `1px solid ${DF_BAND_BORDER}`
            }}
            aria-hidden="true" />

          {/* Header */}
          <div className="relative grid grid-cols-[2fr_1fr_1fr_1fr] text-[10.5px] uppercase tracking-wider font-semibold border-b border-border1">
            <div className="px-3 py-2.5 text-subtlefg">Feature</div>
            <div className="px-2 py-2.5 flex items-center justify-center gap-2.5 whitespace-nowrap"
            style={{ borderTop: `2px solid ${DF_TOP_ACCENT}` }}>
              <BrandLogo height={18} className="shrink-0" />
              <span className="inline-flex items-center rounded-full px-1.5 py-0.5 text-[8.5px] tracking-wider normal-case font-bold shrink-0"
              style={{ background: DF_TOP_ACCENT, color: "#eceafe" }}>BEST</span>
            </div>
            <div className="px-3 py-2.5 text-center text-subtlefg">Spreadsheet</div>
            <div className="px-3 py-2.5 text-center text-subtlefg">Broker</div>
          </div>

          {/* Sections */}
          {blocks.map((cat, ci) =>
          <React.Fragment key={ci}>
              <div className="relative grid grid-cols-[2fr_1fr_1fr_1fr] border-t border-border1">
                <div className="px-3 py-1.5 text-[10px] uppercase tracking-[0.15em] font-semibold text-primary">
                  {cat.section}
                </div>
                <div />
                <div />
                <div />
              </div>
              {cat.rows.map(([feat, sub, df, sh, br], i) =>
            <div key={i} className="relative grid grid-cols-[2fr_1fr_1fr_1fr] text-[12px] items-center"
            style={{ background: i % 2 === 0 ? "rgba(255,255,255,0.01)" : "transparent" }}>
                  <div className="px-3 py-1.5">
                    <div style={{ color: TITLE_COLOR }}>{feat}</div>
                    <div className="text-[11.5px]" style={{ color: SUB_COLOR, marginTop: "2px" }}>{sub}</div>
                  </div>
                  <div className="px-3 py-1.5 text-center">
                    <StatusGlyph kind={df} />
                  </div>
                  <div className="px-3 py-1.5 text-center"><StatusGlyph kind={sh} /></div>
                  <div className="px-3 py-1.5 text-center"><StatusGlyph kind={br} /></div>
                </div>
            )}
            </React.Fragment>
          )}

          {/* Show all / fewer toggle */}
          <button
            type="button"
            onClick={() => setExpanded(!expanded)}
            className="relative w-full border-t border-border1 px-4 py-2.5 flex items-center justify-center gap-1.5 text-[11.5px] font-medium text-primary hover:bg-card2/40 transition-colors">
            {expanded ? "Show fewer" : "Show all 16 features"}
            <IcoChevronDown size={12} style={{ transform: expanded ? "rotate(180deg)" : "none", transition: "transform .15s ease" }} />
          </button>
        </div>

        {/* Legend — sibling of the inner band container, so no purple band behind it */}
        <div className="border-t border-border1 px-4 py-2.5 flex items-center justify-center gap-5 text-[11px] text-mutedfg">
          <span className="inline-flex items-center gap-1.5"><span className="font-mono font-bold text-[13px]" style={{ color: "#4ade80" }}>✓</span> Full support</span>
          <span className="inline-flex items-center gap-1.5"><span className="font-mono font-bold text-[13px]" style={{ color: "#E5B94E" }}>~</span> Partial / limited</span>
          <span className="inline-flex items-center gap-1.5"><span className="font-mono text-[13px]" style={{ color: "#5a5950" }}>✕</span> Not available</span>
        </div>

        {/* Closing statement */}
        <div className="border-t border-border1 px-6 py-3.5 text-center relative overflow-hidden"
        style={{ background: "linear-gradient(180deg, hsl(var(--bg-2) / 0.4), hsl(var(--primary) / 0.04))" }}>
          <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" aria-hidden="true" />
          <div className="inline-flex items-center justify-center gap-3 flex-wrap">
            <span className="inline-flex items-center gap-1.5 text-[9.5px] font-mono font-semibold tracking-[0.2em] uppercase text-subtlefg shrink-0">
              <IcoSparkle size={10} className="text-primary" /> The bottom line
            </span>
            <span className="h-3 w-px bg-border1" />
            <p className="text-[13.5px] md:text-[14.5px] text-fg leading-tight font-medium whitespace-nowrap">
              <span className="text-primary font-semibold">DashFolio</span> combines all these tools into one platform:
              <span className="text-mutedfg"> no spreadsheets, no manual work.</span>
            </p>
          </div>
        </div>
      </div>
    </div>);

}

function Comparison() {
  return (
    <Section id="comparison"
    eyebrow="vs. the alternatives"
    title="How DashFolio stacks up."
    sub="Direct comparison against the two tools you're using today: a homebrew spreadsheet, and your broker's built-in dashboard.">

      <ComparisonSummaryGrid />
    </Section>);

}

// === Pillars ====================================================
function Pillars() {
  const cards = [
  {
    icon: <IcoDollar size={20} className="text-primary" />,
    title: "Multi-currency native",
    desc: "USD, CAD, AUD all first-class, FX converted on the fly. No static rates, no silent drift.",
    sub: "3 currencies, zero hacks."
  },
  {
    icon: <IcoBriefcase size={20} className="text-primary" />,
    title: "Multi-account aware",
    desc: "Individual, FA, partnerships, shared capital. Roll up or drill down whenever you need to.",
    sub: "Unlimited accounts per workspace."
  },
  {
    icon: <IcoTarget size={20} className="text-primary" />,
    title: "Built around your strategies",
    desc: "Momentum, Trend, Mean-reversion, ETF rotation, or bring your own. Tag, attribute, and analyze every fill.",
    sub: "Tag, attribute, analyze."
  }];

  return (
    <Section id="pillars"
    eyebrow="Built for serious traders"
    title="Three things we got right from day one.">
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {cards.map((c, i) =>
        <div key={i} className="card1 p-6 reveal" style={{ transitionDelay: `${i * 60}ms` }}>
            <div className="h-10 w-10 rounded-lg bg-primary/15 border border-primary/35 flex items-center justify-center">{c.icon}</div>
            <h3 className="mt-4 text-lg font-semibold tracking-tight">{c.title}</h3>
            <p className="mt-2 text-[13.5px] text-mutedfg leading-relaxed">{c.desc}</p>
            <div className="mt-4 pt-4 border-t border-border2 text-[12px] font-mono text-primary">{c.sub}</div>
          </div>
        )}
      </div>
    </Section>);

}

// === Testimonials ===============================================
function Testimonials() {
  const [idx, setIdx] = React.useState(0);
  const visible = 3; // cards visible at once on desktop
  const maxIdx = Math.max(0, TESTIMONIALS.length - visible);
  const goPrev = () => setIdx((i) => Math.max(0, i - 1));
  const goNext = () => setIdx((i) => Math.min(maxIdx, i + 1));
  const pages = maxIdx + 1;

  return (
    <Section id="testimonials"
    eyebrow="What traders say"
    title="Real reconciliation. Real time saved.">

      <div className="relative">
        {/* Prev arrow */}
        {pages > 1 &&
        <button onClick={goPrev}
        disabled={idx === 0}
        className="hidden md:flex absolute z-10 -left-3 lg:-left-5 top-1/2 -translate-y-1/2 rounded-full border border-border1 shadow-lg p-2.5 text-mutedfg hover:text-fg hover:border-primary/50 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
        style={{ background: "hsl(var(--card))" }}
        aria-label="Previous">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M15 18l-6-6 6-6" /></svg>
          </button>
        }
        {/* Next arrow */}
        {pages > 1 &&
        <button onClick={goNext}
        disabled={idx === maxIdx}
        className="hidden md:flex absolute z-10 -right-3 lg:-right-5 top-1/2 -translate-y-1/2 rounded-full border border-border1 shadow-lg p-2.5 text-mutedfg hover:text-fg hover:border-primary/50 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
        style={{ background: "hsl(var(--card))" }}
        aria-label="Next">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M9 18l6-6-6-6" /></svg>
          </button>
        }

        <div className="overflow-hidden">
          <div className="flex gap-4 transition-transform duration-500 ease-out"
          style={{ transform: `translateX(calc(-${idx} * (33.333% + 0px) - ${idx} * 1rem / 3))` }}>
            {TESTIMONIALS.map((t, i) =>
            <figure key={i} className="card1 p-6 shrink-0 w-full md:w-[calc(33.333%-0.667rem)]">
                <blockquote className="text-[13px] leading-relaxed text-fg">
                  <span className="text-primary mr-0.5">"</span>{t.quote}<span className="text-primary ml-0.5">"</span>
                </blockquote>
                <figcaption className="mt-5 pt-5 border-t border-border2 flex items-center gap-3">
                  <span className="h-9 w-9 rounded-full bg-primary/15 border border-primary/35 text-primary font-semibold text-[12px] flex items-center justify-center">{t.initials}</span>
                  <div>
                    <div className="text-[13px] font-medium">{t.name}</div>
                    <div className="text-[11px] text-subtlefg">{t.bio}</div>
                  </div>
                </figcaption>
              </figure>
            )}
          </div>
        </div>

        {/* Pagination dots */}
        {pages > 1 &&
        <div className="mt-6 flex items-center justify-center gap-1.5">
            {Array.from({ length: pages }).map((_, i) =>
          <button key={i} onClick={() => setIdx(i)}
          className={`h-1.5 rounded-full transition-all ${
          idx === i ? "w-6 bg-primary" : "w-1.5 bg-border1 hover:bg-mutedfg"}`
          }
          aria-label={`Go to page ${i + 1}`} />
          )}
          </div>
        }
      </div>
    </Section>);

}

// === Stat band ==================================================
function StatBand() {
  const stats = [
  { n: "8", l: "strategies tracked per trader on average" },
  { n: "12,000+", l: "round-trips reconciled per month across users" },
  { n: "99.7%", l: "match rate against IBKR's fifoPnlRealized" },
  { n: "0", l: "spreadsheet exports needed" }];

  return (
    <section className="border-y border-border1 bg-bg2/60">
      <div className="mx-auto max-w-7xl px-6 md:px-10 py-16">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-y-10 gap-x-6">
          {stats.map((s, i) =>
          <div key={i} className="reveal" style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="font-mono text-3xl md:text-5xl font-semibold tracking-tight text-fg">{s.n}</div>
              <div className="mt-2 text-[13px] text-mutedfg max-w-[200px] leading-snug">{s.l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// === Use cases ==================================================
function UseCases() {
  const cases = [
  {
    tag: "Solo",
    title: "The systematic solo trader",
    desc: "Runs 6 strategies across IBKR. Imports a fresh CSV Friday night and needs every round-trip FIFO-matched before Monday's open so the signal generator has clean realized P&L to feed back into position sizing.",
    bullet: ["6 strategies", "Nightly attribution", "Same-tier capital across all six"]
  },
  {
    tag: "Partnership",
    title: "The prop partnership",
    desc: "Two traders sharing a single IBKR FA account. Need per-trader attribution on shared capital, separate strategy stables, and a clean audit trail at quarter-end when distributions get computed.",
    bullet: ["2 traders, 1 FA account", "Per-trader strategy filters", "Quarter-end distribution audit"]
  },
  {
    tag: "Quant dev",
    title: "The RealTest developer",
    desc: "Backtests twenty ideas a year, ships maybe four to live. Wants real-money attribution lined up against backtest expectations (same monthly P&L bar chart, same Sharpe, same drawdown) without rebuilding the analytics layer.",
    bullet: ["20 backtests/year", "Real vs. expected attribution", "RealTest signal → IBKR pipeline"]
  }];

  return (
    <Section id="use-cases"
    eyebrow="Use cases"
    title="Three traders. Three workflows. One dashboard.">
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {cases.map((c, i) =>
        <div key={i} className="card1 p-6 reveal" style={{ transitionDelay: `${i * 60}ms` }}>
            <Badge tone="primary" className="!normal-case !tracking-normal">{c.tag}</Badge>
            <h3 className="mt-3 text-lg font-semibold tracking-tight">{c.title}</h3>
            <p className="mt-3 text-[13.5px] text-mutedfg leading-relaxed">{c.desc}</p>
            <ul className="mt-4 pt-4 border-t border-border2 space-y-1.5">
              {c.bullet.map((b, j) =>
            <li key={j} className="flex items-start gap-2 text-[12.5px] text-mutedfg">
                  <IcoCheck size={12} className="text-primary mt-1 shrink-0" />{b}
                </li>
            )}
            </ul>
          </div>
        )}
      </div>
    </Section>);

}

// === Security ===================================================
function Security() {
  const pillars = [
  { icon: <IcoBadge size={18} />, title: "No broker passwords stored, only a Flex Query token with read-only permissions, revocable anytime from your IBKR account." },
  { icon: <IcoLink size={18} />, title: "All API calls over HTTPS, with zero plaintext traffic between your browser and our servers." },
  { icon: <IcoLock size={18} />, title: "Read-only IBKR access via Flex Query, so we never trade on your behalf." },
  { icon: <IcoShield size={18} />, title: "AES-256-GCM encryption for broker tokens. All data transmitted over TLS and stored on encrypted infrastructure." },
  { icon: <IcoX size={18} />, title: "No third-party tracking, no ads, no data selling. Your portfolio data stays yours." },
  { icon: <IcoCalendarClock size={18} />, title: "Session-based auth with automatic expiry, so no permanent tokens are stored on your device." },
  { icon: <IcoMinus size={18} />, title: "Delete your account and all data permanently in one click, no questions asked." },
  { icon: <IcoLayers size={18} />, title: "Passwords hashed with scrypt, a memory-hard algorithm, never stored in plain text." }];

  return (
    <Section id="security"
    eyebrow="Security"
    title="Your data, your control.">
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {pillars.map((p, i) =>
        <div key={i} className="card1 px-5 py-3 flex items-center gap-4 reveal" style={{ transitionDelay: `${i * 50}ms` }}>
            <div className="h-9 w-9 rounded-lg bg-primary/15 border border-primary/35 flex items-center justify-center text-primary shrink-0">
              {p.icon}
            </div>
            <p className="text-[14px] leading-relaxed">{p.title}</p>
          </div>
        )}
      </div>
    </Section>);

}

// === Changelog teaser ===========================================
function Changelog() {
  return (
    <Section id="changelog"
    eyebrow="Changelog"
    title="Shipped this month.">
      
      <div className="card1 divide-y divide-border2">
        {CHANGELOG.map((c, i) =>
        <div key={i} className="px-5 py-4 flex items-start gap-4 hover:bg-card2/40">
            <div className="font-mono text-[11px] text-subtlefg w-[100px] shrink-0 pt-0.5">{c.ago}</div>
            <div className="flex-1">
              <div className="text-[14px] font-medium">{c.title}</div>
              <div className="text-[12.5px] text-mutedfg mt-0.5 leading-relaxed">{c.desc}</div>
            </div>
            <Badge tone="ghost" className="mt-0.5">Shipped</Badge>
          </div>
        )}
      </div>
      <div className="mt-5">
        <a href="#" className="inline-flex items-center gap-1.5 text-sm text-primary hover:underline">
          See full changelog <IcoArrowRight size={13} />
        </a>
      </div>
    </Section>);

}

// === Final CTA ==================================================
function FinalCTA() {
  return (
    <section id="cta-final" className="relative px-6 md:px-10 border-t border-border1 bg-spot overflow-hidden">
      <div className="absolute inset-0 bg-grid opacity-40 pointer-events-none" aria-hidden="true" />
      <div className="relative mx-auto max-w-4xl py-12 md:py-16 text-center">
        <Eyebrow className="justify-center">Ready when you are</Eyebrow>
        <h2 className="mt-5 text-3xl md:text-[52px] font-semibold tracking-tight leading-[1.06]">
          Every trade. Every strategy. <span className="text-primary">Every currency.</span>
        </h2>
        <p className="mt-4 text-base md:text-lg text-mutedfg max-w-2xl mx-auto">
          Connect your IBKR Flex token, drop in your historical CSVs, and watch every round-trip line up, in about ten minutes.
        </p>
        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
          <a href="/auth" className="btn-primary inline-flex items-center gap-2 rounded-md px-6 py-3 text-[15px] font-semibold">
            Create your account <IcoArrowRight size={15} />
          </a>
        </div>
        <div className="mt-4 text-[12.5px] text-subtlefg">
          No credit card required &nbsp;·&nbsp; 14-day trial &nbsp;·&nbsp; Cancel anytime
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  TrustStrip, IntegrationsMarquee, ProblemCards, Features,
  Workflow, Comparison, Pillars, Testimonials, StatBand, UseCases,
  Security, Changelog, FinalCTA
});