// Strategy stack with live animated sparkline cards
const STRATS = [
  { tag: "High-Probability Yield", name: "Yield Capture Scanner", pnl: "+2.4%", base: 0.65, vol: 0.22, trend: 0.15 },
  { tag: "Wallet Mirroring", name: "APEX Wallet Mirror", meta: "35 wallets", pnl: "+1.8%", base: 0.55, vol: 0.28, trend: 0.08 },
  { tag: "Arbitrage", name: "Structured Product Arbitrage", pnl: "+0.9%", base: 0.5, vol: 0.18, trend: 0.05 },
  { tag: "Arbitrage", name: "Thematic Cluster Arbitrage", pnl: "+1.2%", base: 0.48, vol: 0.3, trend: 0.1 },
  { tag: "Bias Exploit", name: "Statistical Bias Detection", pnl: "+3.1%", base: 0.6, vol: 0.2, trend: 0.2 },
  { tag: "Market Making", name: "Market Maker", pnl: "+0.4%", base: 0.5, vol: 0.12, trend: 0.02 },
  { tag: "Event-Driven", name: "Injury Alpha Scanner", pnl: "+2.7%", base: 0.45, vol: 0.35, trend: 0.18 },
  { tag: "Statistical", name: "Mean-Reversion Signal Engine", pnl: "+1.4%", base: 0.55, vol: 0.22, trend: 0.06 },
  { tag: "Velocity", name: "Velocity Arbitrage Engine", pnl: "+2.1%", base: 0.5, vol: 0.26, trend: 0.12 },
];

function Sparkline({ base, vol, trend, idx }) {
  const [points, setPoints] = React.useState(() => {
    const arr = [];
    let v = base;
    for (let i = 0; i < 40; i++) {
      v += (Math.random() - 0.5 + trend * 0.04) * vol * 0.3;
      v = Math.max(0.1, Math.min(0.9, v));
      arr.push(v);
    }
    return arr;
  });

  React.useEffect(() => {
    const int = setInterval(() => {
      setPoints(prev => {
        const next = prev.slice(1);
        let last = prev[prev.length - 1];
        last += (Math.random() - 0.5 + trend * 0.04) * vol * 0.3;
        last = Math.max(0.1, Math.min(0.9, last));
        next.push(last);
        return next;
      });
    }, 500 + idx * 37);
    return () => clearInterval(int);
  }, [trend, vol, idx]);

  const W = 100, H = 40;
  const path = points.map((p, i) => {
    const x = (i / (points.length - 1)) * W;
    const y = H - p * H;
    return `${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`;
  }).join(' ');
  const fillPath = `${path} L ${W} ${H} L 0 ${H} Z`;
  const lastX = W;
  const lastY = H - points[points.length - 1] * H;

  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id={`sparkGrad-${idx}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.4" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={fillPath} fill={`url(#sparkGrad-${idx})`} />
      <path d={path} fill="none" stroke="var(--accent)" strokeWidth="0.6" vectorEffect="non-scaling-stroke" />
      <circle cx={lastX} cy={lastY} r="1.5" fill="var(--accent)" />
      <circle cx={lastX} cy={lastY} r="3" fill="var(--accent)" opacity="0.3">
        <animate attributeName="r" values="3;6;3" dur="1.5s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.3;0;0.3" dur="1.5s" repeatCount="indefinite" />
      </circle>
    </svg>
  );
}

function StrategyCard({ s, idx }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div className="strat-card" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div className="strat-top">
        <div className="strat-tag">{String(idx + 1).padStart(2, '0')} · {s.tag}</div>
        <div className="strat-status"><span className="dot" />LIVE</div>
      </div>
      <div style={{ flex: 1 }}>
        <div className="strat-name">{s.name}</div>
        {s.meta && <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-faint)', marginTop: -12, marginBottom: 16 }}>{s.meta}</div>}
      </div>
      <div className="strat-spark"><Sparkline base={s.base} vol={s.vol} trend={s.trend} idx={idx} /></div>
      <div className="strat-footer">
        <span>24h · {s.pnl !== undefined ? 'PnL' : ''}</span>
        <span className="pnl">{s.pnl}</span>
      </div>
    </div>
  );
}

function LiveActivityFeed() {
  const templates = [
    { v: "APEX", act: "wallet sync", detail: "35/35 tracked", side: null },
    { v: "YIELD", act: "entered position", detail: "scanner trigger +2σ", side: "BUY" },
    { v: "MM", act: "quote refresh", detail: "spread 4bps", side: null },
    { v: "VEL", act: "arbitrage closed", detail: "realized +0.18%", side: "SELL" },
    { v: "INJURY", act: "signal ingested", detail: "confidence 0.91", side: null },
    { v: "MEAN-REV", act: "z-score threshold", detail: "z=−2.3, entry", side: "BUY" },
    { v: "BIAS", act: "mispricing flagged", detail: "edge 2.4%", side: null },
    { v: "STRUCT", act: "legs reconciled", detail: "Δ-neutral", side: null },
    { v: "CLUSTER", act: "thematic drift", detail: "rotating basket", side: null },
    { v: "APEX", act: "follow trade", detail: "wallet 0x8f..c1", side: "BUY" },
    { v: "MM", act: "inventory balanced", detail: "0.02 skew", side: null },
    { v: "YIELD", act: "resolved market", detail: "parameters updated", side: null },
  ];
  const [items, setItems] = React.useState(() => {
    const arr = [];
    for (let i = 0; i < 6; i++) {
      arr.push({ ...templates[Math.floor(Math.random() * templates.length)], id: i, ts: Date.now() - i * 2400 });
    }
    return arr;
  });
  React.useEffect(() => {
    let id = items.length;
    const int = setInterval(() => {
      setItems(prev => {
        const next = [{ ...templates[Math.floor(Math.random() * templates.length)], id: id++, ts: Date.now() }, ...prev];
        return next.slice(0, 6);
      });
    }, 2100);
    return () => clearInterval(int);
  }, []);
  const fmtTime = (ts) => {
    const d = new Date(ts);
    return `${String(d.getUTCHours()).padStart(2,'0')}:${String(d.getUTCMinutes()).padStart(2,'0')}:${String(d.getUTCSeconds()).padStart(2,'0')}`;
  };
  return (
    <div className="activity-feed">
      <div className="activity-head">
        <div className="activity-title">
          <span className="activity-dot" />
          LIVE · AGENT ACTIVITY
        </div>
        <div className="activity-meta">STREAM · /dev/obsidian/trace · UTC</div>
      </div>
      <div className="activity-rows">
        {items.map((it, i) => (
          <div key={it.id} className="activity-row" style={{ opacity: 1 - i * 0.12 }}>
            <span className="activity-ts">{fmtTime(it.ts)}</span>
            <span className="activity-agent">{it.v}</span>
            <span className="activity-act">{it.act}</span>
            <span className="activity-detail">{it.detail}</span>
            {it.side && <span className={`activity-side ${it.side.toLowerCase()}`}>{it.side}</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

function StrategyStack() {
  return (
    <section id="strategies" className="strategies">
      <div className="section-head" style={{ padding: '80px 0 48px', borderTop: 'none' }}>
        <div>
          <div className="label" style={{ marginBottom: 24 }}>Strategy Stack</div>
          <h2><span className="italic">Fifteen</span> agents,<br/>running now.</h2>
        </div>
        <div className="section-head-meta">
          EACH STRATEGY OPERATES<br/>
          INDEPENDENTLY · 24/7 · MULTI-VENUE<br/>
          PARAMETERS SELF-TUNE ON RESOLUTION
        </div>
      </div>
      <LiveActivityFeed />
      <div className="strat-grid">
        {STRATS.map((s, i) => <StrategyCard key={i} s={s} idx={i} />)}
      </div>
    </section>
  );
}

Object.assign(window, { StrategyStack });