// Unique animated visuals — one per page archetype
// Every export is a self-contained animated component using SVG/CSS keyframes.

// ─────────────────────────────────────────────────────────────
// FX / CFD — Animated multi-symbol command bridge
// ─────────────────────────────────────────────────────────────
function FXBridgeVisual() {
  const symbols = [
    { s: "EUR/USD", p: "1.08642", d: "+0.21%", up: true },
    { s: "GBP/USD", p: "1.27418", d: "−0.08%", up: false },
    { s: "XAU/USD", p: "2,041.30", d: "+0.74%", up: true },
    { s: "BTC/USD", p: "67,290", d: "+2.41%", up: true },
    { s: "USD/JPY", p: "149.81", d: "−0.32%", up: false },
    { s: "WTI", p: "78.22", d: "+1.18%", up: true },
  ];
  return (
    <div className="fx-bridge card" style={{ padding: 0, overflow: "hidden", position: "relative" }}>
      <div className="fx-head">
        <div className="row" style={{ gap: 8 }}>
          <span className="tag"><span className="dot"/>FX command bridge</span>
        </div>
        <div className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>LP ROUTING · 12ms</div>
      </div>
      <div className="fx-grid">
        {symbols.map((sym, i) => (
          <div key={sym.s} className="fx-cell" style={{ animationDelay: `${i * 0.1}s` }}>
            <div className="fx-row">
              <span className="mono fx-sym">{sym.s}</span>
              <span className={`fx-arrow ${sym.up ? "up" : "down"}`}>{sym.up ? "▲" : "▼"}</span>
            </div>
            <div className="fx-price mono">{sym.p}</div>
            <div className={`fx-delta ${sym.up ? "up" : "down"}`}>{sym.d}</div>
            <svg viewBox="0 0 100 24" className="fx-spark" preserveAspectRatio="none">
              <path
                d={generateSparkPath(sym.up, i)}
                fill="none"
                stroke={sym.up ? "#2BD974" : "#FF6B6B"}
                strokeWidth="1.4"
              />
            </svg>
          </div>
        ))}
      </div>
      <div className="fx-bottom">
        <div className="fx-route">
          <span className="fx-rdot"/>
          <span className="mono">CLIENT</span>
          <span className="fx-line">━━━━━━━</span>
          <span className="mono">BRIDGE</span>
          <span className="fx-line">━━━━━━━</span>
          <span className="mono">LP-A · LP-B · LP-C</span>
          <span className="fx-rdot pulse"/>
        </div>
      </div>
      <style>{`
        .fx-bridge { background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
        .fx-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
        .fx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
        .fx-cell {
          padding: 14px 16px; background: var(--ink-2); position: relative;
          animation: fx-fade-in .6s ease both;
        }
        @keyframes fx-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        .fx-row { display: flex; justify-content: space-between; align-items: center; }
        .fx-sym { font-size: 11px; color: var(--text-dim); font-weight: 600; letter-spacing: 0.04em; }
        .fx-arrow { font-size: 9px; }
        .fx-arrow.up { color: #2BD974; }
        .fx-arrow.down { color: #FF6B6B; }
        .fx-price { font-size: 19px; font-weight: 700; color: var(--text); margin-top: 6px; letter-spacing: -0.01em; animation: fx-tick 3s infinite; }
        @keyframes fx-tick { 0%, 95%, 100% { color: var(--text); } 96%, 99% { color: var(--purple-2); } }
        .fx-delta { font-size: 10.5px; margin-top: 2px; font-weight: 500; }
        .fx-delta.up { color: #2BD974; }
        .fx-delta.down { color: #FF6B6B; }
        .fx-spark { width: 100%; height: 24px; margin-top: 6px; opacity: 0.7; }
        .fx-bottom { padding: 14px 18px; border-top: 1px solid var(--line); }
        .fx-route { display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: var(--text-dim); justify-content: center; flex-wrap: wrap; }
        .fx-rdot { width: 6px; height: 6px; border-radius: 999px; background: var(--purple-2); }
        .fx-rdot.pulse { background: var(--green); animation: pulse-dot 1.4s infinite; }
        @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(43,217,116,0.6); } 50% { box-shadow: 0 0 0 6px rgba(43,217,116,0); } }
        .fx-line { color: var(--purple-2); letter-spacing: -1px; opacity: 0.5; }
      `}</style>
    </div>
  );
}

function generateSparkPath(up, seed) {
  const points = [];
  for (let i = 0; i <= 20; i++) {
    const x = (i / 20) * 100;
    const noise = Math.sin(i * 0.7 + seed) * 4 + Math.random() * 2;
    const trend = up ? 18 - i * 0.5 : 6 + i * 0.5;
    points.push(`${i === 0 ? "M" : "L"}${x.toFixed(1)} ${(trend + noise).toFixed(1)}`);
  }
  return points.join(" ");
}

// ─────────────────────────────────────────────────────────────
// Crypto — On-chain orbit / wallet flow
// ─────────────────────────────────────────────────────────────
function CryptoOrbitVisual() {
  const tokens = [
    { sym: "USDT", color: "#26A17B", angle: 0 },
    { sym: "BTC", color: "#F7931A", angle: 60 },
    { sym: "ETH", color: "#627EEA", angle: 120 },
    { sym: "SOL", color: "#14F195", angle: 180 },
    { sym: "TRX", color: "#FF060A", angle: 240 },
    { sym: "BNB", color: "#F3BA2F", angle: 300 },
  ];
  return (
    <div className="crypto-orbit card" style={{ padding: 22, overflow: "hidden", position: "relative" }}>
      <div className="row between" style={{ marginBottom: 16 }}>
        <span className="tag"><span className="dot"/>Live on-chain</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>KYT · ALL CLEAN</span>
      </div>
      <div className="orbit-stage">
        <svg viewBox="-150 -150 300 300" className="orbit-svg">
          <defs>
            <radialGradient id="orbit-bg" cx="0" cy="0" r="120">
              <stop offset="0" stopColor="var(--purple-2)" stopOpacity="0.18"/>
              <stop offset="1" stopColor="var(--purple-2)" stopOpacity="0"/>
            </radialGradient>
            <linearGradient id="orbit-line" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stopColor="var(--purple-2)" stopOpacity="0.6"/>
              <stop offset="1" stopColor="var(--pink)" stopOpacity="0.2"/>
            </linearGradient>
          </defs>
          <circle r="120" fill="url(#orbit-bg)"/>
          <circle r="100" fill="none" stroke="var(--line-2)" strokeDasharray="2 4" opacity="0.6"/>
          <circle r="70" fill="none" stroke="var(--line-2)" strokeDasharray="2 4" opacity="0.6"/>
          {tokens.map((t, i) => (
            <g key={t.sym}>
              <line
                x1="0" y1="0"
                x2={Math.cos((t.angle * Math.PI) / 180) * 100}
                y2={Math.sin((t.angle * Math.PI) / 180) * 100}
                stroke="url(#orbit-line)"
                strokeWidth="1"
                opacity="0.5"
              >
                <animate attributeName="opacity" values="0.2;0.8;0.2" dur={`${3 + i * 0.4}s`} repeatCount="indefinite"/>
              </line>
              <g style={{ transformOrigin: "0 0", animation: `orbit-rotate ${30 + i * 4}s linear infinite` }}>
                <circle
                  cx={Math.cos((t.angle * Math.PI) / 180) * 100}
                  cy={Math.sin((t.angle * Math.PI) / 180) * 100}
                  r="18" fill={t.color} opacity="0.9"
                />
                <text
                  x={Math.cos((t.angle * Math.PI) / 180) * 100}
                  y={Math.sin((t.angle * Math.PI) / 180) * 100 + 4}
                  fontSize="9" fill="#fff" textAnchor="middle" fontWeight="700"
                >{t.sym}</text>
              </g>
            </g>
          ))}
          <g>
            <circle r="34" fill="var(--ink)" stroke="var(--purple-2)" strokeWidth="2"/>
            <circle r="34" fill="none" stroke="var(--purple-2)" opacity="0.4">
              <animate attributeName="r" values="34;46;34" dur="2.4s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.5;0;0.5" dur="2.4s" repeatCount="indefinite"/>
            </circle>
            <text y="-2" fontSize="9" fill="var(--text-dim)" textAnchor="middle" letterSpacing="1">VAULT</text>
            <text y="10" fontSize="11" fill="var(--text)" textAnchor="middle" fontWeight="700">$24.8M</text>
          </g>
        </svg>
      </div>
      <div className="orbit-stats">
        {[
          { l: "Deposits 24h", v: "$1.2M", c: "#2BD974" },
          { l: "Withdrawals", v: "$890K", c: "#7A52FF" },
          { l: "KYT alerts", v: "0", c: "#2BD974" },
        ].map((s) => (
          <div key={s.l} className="orbit-stat">
            <div className="orbit-stat-l">{s.l}</div>
            <div className="orbit-stat-v" style={{ color: s.c }}>{s.v}</div>
          </div>
        ))}
      </div>
      <style>{`
        @keyframes orbit-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
        .orbit-stage { display: flex; justify-content: center; padding: 8px 0; }
        .orbit-svg { width: 100%; max-width: 360px; height: 280px; }
        .orbit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
        .orbit-stat { text-align: center; }
        .orbit-stat-l { font-size: 10px; color: var(--text-mute); letter-spacing: 0.06em; text-transform: uppercase; }
        .orbit-stat-v { font-size: 16px; font-weight: 700; margin-top: 4px; letter-spacing: -0.01em; }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Prop Firms — Challenge progress + payouts terminal
// ─────────────────────────────────────────────────────────────
function PropChallengeVisual() {
  const challenges = [
    { id: "C-2841", trader: "L. Rivera", phase: "Phase 2", progress: 72, profit: "+$4,820", status: "active" },
    { id: "C-2807", trader: "M. Okafor", phase: "Funded", progress: 100, profit: "+$12,150", status: "payout" },
    { id: "C-2766", trader: "S. Yamada", phase: "Phase 1", progress: 91, profit: "+$2,840", status: "active" },
    { id: "C-2719", trader: "A. Petrov", phase: "Phase 1", progress: 34, profit: "+$1,120", status: "active" },
  ];
  return (
    <div className="prop-term card" style={{ padding: 0, overflow: "hidden" }}>
      <div className="prop-head">
        <div className="row" style={{ gap: 12 }}>
          <span className="prop-light red"/>
          <span className="prop-light yellow"/>
          <span className="prop-light green"/>
        </div>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>PROP-DESK · LIVE</span>
        <span className="tag" style={{ marginLeft: "auto" }}>
          <span className="dot"/>4,287 active
        </span>
      </div>
      <div className="prop-body">
        <div className="prop-stats-bar">
          <div className="prop-stat">
            <div className="prop-stat-l">Pass rate</div>
            <div className="prop-stat-v">11.4%</div>
          </div>
          <div className="prop-stat">
            <div className="prop-stat-l">Today's payouts</div>
            <div className="prop-stat-v">$184K</div>
          </div>
          <div className="prop-stat">
            <div className="prop-stat-l">Violations 24h</div>
            <div className="prop-stat-v" style={{ color: "#FF7A45" }}>62</div>
          </div>
          <div className="prop-stat">
            <div className="prop-stat-l">Revenue MTD</div>
            <div className="prop-stat-v">$2.41M</div>
          </div>
        </div>
        <div className="prop-rows">
          {challenges.map((c, i) => (
            <div key={c.id} className="prop-row" style={{ animationDelay: `${i * 0.12}s` }}>
              <div className="prop-id mono">{c.id}</div>
              <div>
                <div className="prop-trader">{c.trader}</div>
                <div className="prop-phase">{c.phase}</div>
              </div>
              <div className="prop-bar-wrap">
                <div className="prop-bar">
                  <div
                    className="prop-bar-fill"
                    style={{
                      width: `${c.progress}%`,
                      background: c.status === "payout"
                        ? "linear-gradient(90deg, #2BD974, #14F195)"
                        : "linear-gradient(90deg, var(--purple-2), var(--pink))",
                    }}
                  />
                </div>
                <div className="prop-bar-l mono">{c.progress}%</div>
              </div>
              <div className="prop-profit mono">{c.profit}</div>
              <div className={`prop-status ${c.status}`}>
                {c.status === "payout" ? "→ PAYOUT" : "ACTIVE"}
              </div>
            </div>
          ))}
        </div>
        <div className="prop-tape">
          <div className="prop-tape-content">
            <span>● PAYOUT · C-2807 · M. Okafor · $12,150 → USDT/TRC20</span>
            <span>● VIOLATION · C-2705 · daily-loss · auto-suspend</span>
            <span>● PROMOTION · C-2641 · Phase 2 → Funded</span>
            <span>● PAYOUT · C-2807 · M. Okafor · $12,150 → USDT/TRC20</span>
            <span>● VIOLATION · C-2705 · daily-loss · auto-suspend</span>
            <span>● PROMOTION · C-2641 · Phase 2 → Funded</span>
          </div>
        </div>
      </div>
      <style>{`
        .prop-term { background: linear-gradient(180deg, #0B0B18 0%, #11111F 100%); border-color: rgba(122,82,255,0.25); }
        .prop-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.3); }
        .prop-light { width: 10px; height: 10px; border-radius: 999px; }
        .prop-light.red { background: #FF6B6B; }
        .prop-light.yellow { background: #FFB000; }
        .prop-light.green { background: #2BD974; }
        .prop-body { padding: 16px; }
        .prop-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
        .prop-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
        .prop-stat-l { font-size: 10px; color: var(--text-mute); letter-spacing: 0.06em; text-transform: uppercase; }
        .prop-stat-v { font-size: 16px; font-weight: 700; margin-top: 4px; color: var(--text); letter-spacing: -0.01em; }
        .prop-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
        .prop-row {
          display: grid; grid-template-columns: 60px 90px 1fr 70px 70px;
          gap: 12px; align-items: center;
          padding: 10px 12px; background: var(--surface-2);
          border: 1px solid var(--line); border-radius: 10px;
          animation: fx-fade-in .6s ease both;
        }
        .prop-id { font-size: 10.5px; color: var(--text-mute); }
        .prop-trader { font-size: 12px; font-weight: 600; color: var(--text); }
        .prop-phase { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
        .prop-bar-wrap { display: flex; align-items: center; gap: 8px; }
        .prop-bar { flex: 1; height: 6px; background: var(--ink-3); border-radius: 999px; overflow: hidden; }
        .prop-bar-fill { height: 100%; transition: width 1s ease; }
        .prop-bar-l { font-size: 10px; color: var(--text-dim); width: 28px; }
        .prop-profit { font-size: 12px; color: #2BD974; font-weight: 600; text-align: right; }
        .prop-status { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-align: right; }
        .prop-status.active { color: var(--purple-2); }
        .prop-status.payout { color: #2BD974; animation: pulse-payout 1.4s infinite; }
        @keyframes pulse-payout { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
        .prop-tape { background: rgba(0,0,0,0.4); border-radius: 8px; overflow: hidden; padding: 8px 0; border: 1px solid var(--line); }
        .prop-tape-content { display: flex; gap: 30px; white-space: nowrap; animation: marquee 30s linear infinite; font-size: 10.5px; color: var(--text-dim); padding-left: 20px; }
        .prop-tape-content span { color: var(--purple-2); font-family: var(--font-mono); }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Trading Platform — Order book / DOM mock
// ─────────────────────────────────────────────────────────────
function OrderBookVisual() {
  const asks = [
    { p: "1.08648", v: "2.4M", d: 90 },
    { p: "1.08646", v: "1.8M", d: 65 },
    { p: "1.08644", v: "920K", d: 35 },
    { p: "1.08643", v: "412K", d: 18 },
  ];
  const bids = [
    { p: "1.08642", v: "684K", d: 28 },
    { p: "1.08641", v: "1.2M", d: 50 },
    { p: "1.08639", v: "2.1M", d: 80 },
    { p: "1.08637", v: "3.4M", d: 100 },
  ];
  return (
    <div className="ob card" style={{ padding: 0, overflow: "hidden" }}>
      <div className="ob-head">
        <div>
          <span className="mono" style={{ fontSize: 13, fontWeight: 700 }}>EUR/USD</span>
          <span style={{ fontSize: 10, color: "var(--text-mute)", marginLeft: 8, letterSpacing: 0.05 }}>L1 DOM · 12 LPs</span>
        </div>
        <span className="tag"><span className="dot"/>0.6 pip</span>
      </div>
      <div className="ob-grid">
        <div className="ob-asks">
          {asks.map((a, i) => (
            <div key={i} className="ob-row" style={{ animationDelay: `${i * 0.08}s` }}>
              <div className="ob-bar ask" style={{ width: `${a.d}%` }}/>
              <span className="mono ob-vol">{a.v}</span>
              <span className="mono ob-price ask">{a.p}</span>
            </div>
          ))}
        </div>
        <div className="ob-spread">
          <span className="mono ob-mid">1.08642</span>
          <span className="ob-mid-l">SPREAD 0.6</span>
        </div>
        <div className="ob-bids">
          {bids.map((b, i) => (
            <div key={i} className="ob-row" style={{ animationDelay: `${(i + 4) * 0.08}s` }}>
              <div className="ob-bar bid" style={{ width: `${b.d}%` }}/>
              <span className="mono ob-vol">{b.v}</span>
              <span className="mono ob-price bid">{b.p}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="ob-foot">
        <div className="ob-foot-cell"><span>LP-A</span><span style={{ color: "#2BD974" }}>● 12ms</span></div>
        <div className="ob-foot-cell"><span>LP-B</span><span style={{ color: "#2BD974" }}>● 14ms</span></div>
        <div className="ob-foot-cell"><span>LP-C</span><span style={{ color: "#FFB000" }}>● 28ms</span></div>
        <div className="ob-foot-cell"><span>LP-D</span><span style={{ color: "#2BD974" }}>● 9ms</span></div>
      </div>
      <style>{`
        .ob { background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
        .ob-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
        .ob-grid { padding: 12px 16px; }
        .ob-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 6px 0; position: relative; align-items: center; animation: ob-in .5s ease both; }
        @keyframes ob-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
        .ob-bar { position: absolute; top: 4px; bottom: 4px; right: 50%; opacity: 0.18; border-radius: 3px; }
        .ob-bar.ask { background: #FF6B6B; }
        .ob-bar.bid { background: #2BD974; }
        .ob-asks .ob-bar { left: auto; right: 50%; }
        .ob-bids .ob-bar { right: 50%; }
        .ob-vol { font-size: 11px; color: var(--text-dim); text-align: right; z-index: 1; }
        .ob-price { font-size: 12px; font-weight: 600; z-index: 1; }
        .ob-price.ask { color: #FF6B6B; }
        .ob-price.bid { color: #2BD974; }
        .ob-spread { display: flex; flex-direction: column; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0; }
        .ob-mid { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
        .ob-mid-l { font-size: 9.5px; color: var(--text-mute); letter-spacing: 0.1em; margin-top: 2px; }
        .ob-foot { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
        .ob-foot-cell { padding: 10px; border-right: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-dim); font-family: var(--font-mono); }
        .ob-foot-cell:last-child { border-right: 0; }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Web Trader — Browser frame
// ─────────────────────────────────────────────────────────────
function BrowserMockVisual() {
  return (
    <div className="bm card" style={{ padding: 0, overflow: "hidden" }}>
      <div className="bm-chrome">
        <div className="row" style={{ gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: "#FF6B6B" }}/>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: "#FFB000" }}/>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: "#2BD974" }}/>
        </div>
        <div className="bm-url mono">trader.yourbroker.com</div>
        <div style={{ width: 30 }}/>
      </div>
      <div className="bm-app">
        <div className="bm-side">
          <div className="bm-logo">⬡</div>
          <div className="bm-icon active">⬚</div>
          <div className="bm-icon">⌗</div>
          <div className="bm-icon">⊕</div>
          <div className="bm-icon">⌬</div>
          <div className="bm-icon">⚙</div>
        </div>
        <div className="bm-main">
          <div className="bm-watch">
            {["EUR/USD", "GBP/USD", "BTC/USD", "XAU"].map((s, i) => (
              <div key={s} className={`bm-watch-cell ${i === 0 ? "active" : ""}`}>
                <span>{s}</span>
                <span className={i % 2 ? "down" : "up"}>{i % 2 ? "−0.21%" : "+0.42%"}</span>
              </div>
            ))}
          </div>
          <div className="bm-chart">
            <svg viewBox="0 0 400 180" preserveAspectRatio="none" width="100%" height="100%">
              <defs>
                <linearGradient id="bm-grad" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="var(--purple-2)" stopOpacity="0.4"/>
                  <stop offset="1" stopColor="var(--purple-2)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <g stroke="var(--line)" strokeDasharray="2 4">
                <line x1="0" y1="60" x2="400" y2="60"/>
                <line x1="0" y1="120" x2="400" y2="120"/>
              </g>
              <path d="M0 100 Q50 80, 80 90 T 160 60 T 240 75 T 320 50 T 400 35 L400 180 L0 180 Z" fill="url(#bm-grad)"/>
              <path d="M0 100 Q50 80, 80 90 T 160 60 T 240 75 T 320 50 T 400 35" stroke="var(--purple-2)" fill="none" strokeWidth="2"/>
              {Array.from({ length: 24 }).map((_, i) => {
                const x = 14 + i * 16;
                const h = 28 + Math.sin(i * 0.7) * 18 + Math.random() * 10;
                const open = 60 + h;
                const close = open + (Math.random() > 0.5 ? -8 : 8);
                const up = close < open;
                return (
                  <g key={i}>
                    <line x1={x} y1={open - 8} x2={x} y2={close + 8} stroke={up ? "#2BD974" : "#FF6B6B"} strokeWidth="1"/>
                    <rect x={x - 3} y={Math.min(open, close)} width="6" height={Math.abs(close - open) || 2} fill={up ? "#2BD974" : "#FF6B6B"}/>
                  </g>
                );
              })}
            </svg>
          </div>
          <div className="bm-orderbar">
            <button className="bm-btn buy">BUY 1.08644</button>
            <button className="bm-btn sell">SELL 1.08642</button>
            <span className="mono bm-vol">VOL 0.10</span>
            <span className="mono bm-pl">+ $48.20</span>
          </div>
        </div>
      </div>
      <style>{`
        .bm-chrome { display: flex; align-items: center; padding: 10px 14px; background: var(--ink-2); border-bottom: 1px solid var(--line); gap: 12px; }
        .bm-url { flex: 1; padding: 6px 12px; background: var(--surface-2); border-radius: 999px; font-size: 11px; color: var(--text-dim); text-align: center; }
        .bm-app { display: grid; grid-template-columns: 56px 1fr; min-height: 360px; }
        .bm-side { background: var(--ink-2); border-right: 1px solid var(--line); padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
        .bm-logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--purple-2), var(--pink)); display: grid; place-items: center; color: #fff; font-size: 16px; }
        .bm-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-mute); font-size: 14px; }
        .bm-icon.active { background: var(--surface-2); color: var(--text); }
        .bm-main { padding: 12px 14px; }
        .bm-watch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
        .bm-watch-cell { padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); }
        .bm-watch-cell.active { border-color: var(--purple-2); color: var(--text); }
        .bm-watch-cell .up { color: #2BD974; }
        .bm-watch-cell .down { color: #FF6B6B; }
        .bm-chart { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; height: 200px; overflow: hidden; margin-bottom: 10px; }
        .bm-orderbar { display: flex; gap: 8px; align-items: center; }
        .bm-btn { padding: 9px 14px; border-radius: 8px; border: 0; font-size: 12px; font-weight: 600; }
        .bm-btn.buy { background: rgba(43,217,116,0.18); color: #2BD974; }
        .bm-btn.sell { background: rgba(255,107,107,0.18); color: #FF6B6B; }
        .bm-vol { font-size: 11px; color: var(--text-dim); margin-left: auto; }
        .bm-pl { font-size: 12px; color: #2BD974; font-weight: 600; }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Mobile Trader — Animated phone
// ─────────────────────────────────────────────────────────────
function PhoneStackVisual() {
  return (
    <div className="ph-stack" style={{ position: "relative", height: 540, display: "flex", justifyContent: "center", alignItems: "center" }}>
      {/* Back phone */}
      <div className="ph-back">
        <div className="ph-back-content">
          <div style={{ fontSize: 11, color: "var(--text-dim)" }}>Markets</div>
          {["BTC", "ETH", "SOL"].map((s, i) => (
            <div key={s} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: "1px solid var(--line)" }}>
              <span style={{ fontSize: 12, fontWeight: 500 }}>{s}/USD</span>
              <span style={{ fontSize: 12, color: i % 2 ? "#FF6B6B" : "#2BD974" }}>{i % 2 ? "−0.4%" : "+1.8%"}</span>
            </div>
          ))}
        </div>
      </div>
      {/* Front phone */}
      <div className="ph-front">
        <div className="ph-notch"/>
        <div className="ph-screen">
          <div className="ph-statusbar mono">9:41</div>
          <div className="ph-greeting">
            <div style={{ fontSize: 11, color: "var(--text-dim)" }}>Welcome back</div>
            <div style={{ fontSize: 16, fontWeight: 600 }}>Olivia</div>
          </div>
          <div className="ph-balance">
            <div style={{ fontSize: 10.5, color: "rgba(255,255,255,0.7)", letterSpacing: "0.06em", textTransform: "uppercase" }}>Equity</div>
            <div style={{ fontSize: 30, fontWeight: 700, marginTop: 4, letterSpacing: "-0.02em" }}>$ 24,830</div>
            <div style={{ fontSize: 11, color: "rgba(255,255,255,0.85)", marginTop: 4 }}>+ $814 today (+3.4%)</div>
            <svg viewBox="0 0 200 40" width="100%" height="36" style={{ marginTop: 8 }}>
              <path d="M0 30 Q 30 24, 60 22 T 120 14 T 200 6" stroke="rgba(255,255,255,0.95)" fill="none" strokeWidth="1.6"/>
              <path d="M0 30 Q 30 24, 60 22 T 120 14 T 200 6 L200 40 L0 40 Z" fill="rgba(255,255,255,0.18)"/>
            </svg>
          </div>
          <div className="ph-quickrow">
            <button className="ph-quick">↓ Deposit</button>
            <button className="ph-quick">↑ Withdraw</button>
            <button className="ph-quick">⇄ Trade</button>
          </div>
          <div className="ph-section-l">Watchlist</div>
          {[
            { s: "EUR/USD", p: "1.08642", d: "+0.21%", up: true },
            { s: "BTC/USD", p: "67,290", d: "+2.41%", up: true },
            { s: "Gold", p: "2,041", d: "+0.74%", up: true },
            { s: "AAPL", p: "182.41", d: "−0.42%", up: false },
          ].map((sym, i) => (
            <div key={sym.s} className="ph-row" style={{ animationDelay: `${i * 0.1}s` }}>
              <div>
                <div style={{ fontSize: 12, fontWeight: 600 }}>{sym.s}</div>
                <div style={{ fontSize: 10, color: "var(--text-dim)" }}>Live · MT5</div>
              </div>
              <svg viewBox="0 0 60 24" width="60" height="20">
                <path d="M0 18 Q 15 14, 30 10 T 60 4" stroke={sym.up ? "#2BD974" : "#FF6B6B"} fill="none" strokeWidth="1.4"/>
              </svg>
              <div style={{ textAlign: "right" }}>
                <div className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{sym.p}</div>
                <div style={{ fontSize: 10, color: sym.up ? "#2BD974" : "#FF6B6B" }}>{sym.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      {/* Floating notification */}
      <div className="ph-notif">
        <div style={{ width: 28, height: 28, borderRadius: 8, background: "linear-gradient(135deg, #2BD974, #14F195)", display: "grid", placeItems: "center", color: "#fff", fontSize: 14 }}>↑</div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600 }}>BTC just hit $67,290</div>
          <div style={{ fontSize: 10, color: "var(--text-dim)" }}>Watchlist alert · tap to trade</div>
        </div>
      </div>
      <style>{`
        .ph-back, .ph-front {
          width: 240px; border-radius: 32px; background: var(--ink-2); border: 8px solid #1a1a2e;
          box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
          overflow: hidden;
        }
        .ph-back { position: absolute; left: 50%; transform: translate(-90%, 0) rotate(-8deg); height: 460px; opacity: 0.55; padding: 18px; }
        .ph-back-content { padding-top: 30px; }
        .ph-front { position: relative; height: 500px; transform: translateX(20%); animation: ph-float 5s ease-in-out infinite; }
        @keyframes ph-float { 0%, 100% { transform: translate(20%, 0); } 50% { transform: translate(20%, -8px); } }
        .ph-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 16px; background: #1a1a2e; border-radius: 0 0 12px 12px; z-index: 2; }
        .ph-screen { padding: 20px 16px 16px; }
        .ph-statusbar { font-size: 11px; text-align: center; margin-bottom: 8px; color: var(--text); }
        .ph-greeting { margin-bottom: 12px; }
        .ph-balance { background: linear-gradient(135deg, var(--purple-2) 0%, var(--purple) 60%, #2A1080 100%); border-radius: 16px; padding: 16px; color: #fff; margin-bottom: 12px; }
        .ph-quickrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
        .ph-quick { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-size: 11px; color: var(--text); font-weight: 500; }
        .ph-section-l { font-size: 10.5px; color: var(--text-mute); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
        .ph-row { display: grid; grid-template-columns: 1fr 60px 70px; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: center; animation: fx-fade-in .5s ease both; }
        .ph-notif { position: absolute; top: 30px; right: 0; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 12px 30px -10px rgba(0,0,0,0.5); animation: ph-pop 3s ease-in-out infinite; max-width: 220px; }
        @keyframes ph-pop { 0%, 30%, 100% { opacity: 1; transform: translateY(0); } 60%, 90% { opacity: 0.5; transform: translateY(-4px); } }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// BI & AI — Multi-chart dashboard
// ─────────────────────────────────────────────────────────────
function BIDashboardAdvancedVisual() {
  return (
    <div className="bia card" style={{ padding: 18 }}>
      <div className="row between" style={{ marginBottom: 12 }}>
        <span className="tag"><span className="dot"/>BI · Live</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>OPS / EXEC DASH</span>
      </div>
      <div className="bia-grid">
        <div className="bia-cell main">
          <div className="bia-l">Net deposits 30D</div>
          <div className="bia-v">$ 8.42M</div>
          <div style={{ fontSize: 11, color: "#2BD974", marginTop: 2 }}>+18.4% vs prev</div>
          <svg viewBox="0 0 300 80" preserveAspectRatio="none" style={{ width: "100%", height: 80, marginTop: 10 }}>
            <defs>
              <linearGradient id="bia-area" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="var(--purple-2)" stopOpacity="0.5"/>
                <stop offset="1" stopColor="var(--purple-2)" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d="M0 60 Q 30 55, 60 45 T 120 30 T 180 35 T 240 18 T 300 10 L 300 80 L 0 80 Z" fill="url(#bia-area)"/>
            <path d="M0 60 Q 30 55, 60 45 T 120 30 T 180 35 T 240 18 T 300 10" stroke="var(--purple-2)" fill="none" strokeWidth="2"/>
          </svg>
        </div>
        <div className="bia-cell">
          <div className="bia-l">Conversion</div>
          <div className="bia-v small">11.4%</div>
          <div style={{ display: "flex", gap: 2, marginTop: 8 }}>
            {Array.from({ length: 14 }).map((_, i) => (
              <div key={i} style={{ flex: 1, height: 28, background: `var(--purple-2)`, opacity: 0.3 + (i / 28), borderRadius: 2 }}/>
            ))}
          </div>
        </div>
        <div className="bia-cell">
          <div className="bia-l">Retention 90D</div>
          <div className="bia-v small">68%</div>
          <svg viewBox="0 0 60 60" width="60" height="60" style={{ display: "block", margin: "8px auto 0" }}>
            <circle cx="30" cy="30" r="22" stroke="var(--ink-3)" strokeWidth="6" fill="none"/>
            <circle cx="30" cy="30" r="22" stroke="var(--pink)" strokeWidth="6" fill="none"
              strokeDasharray={`${0.68 * 138.2} ${138.2}`} transform="rotate(-90 30 30)"/>
          </svg>
        </div>
        <div className="bia-cell wide">
          <div className="bia-l">Funnel · last 7d</div>
          <div className="bia-funnel">
            {[
              { l: "Visit", v: 12480, p: 100 },
              { l: "Sign-up", v: 1842, p: 14.8 },
              { l: "KYC pass", v: 1284, p: 10.3 },
              { l: "FTD", v: 287, p: 2.3 },
            ].map((s) => (
              <div key={s.l} className="bia-funnel-row">
                <span className="bia-funnel-l">{s.l}</span>
                <div className="bia-funnel-bar" style={{ width: `${s.p}%` }}/>
                <span className="bia-funnel-v">{s.v.toLocaleString()}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="bia-cell">
          <div className="bia-l">AI alerts</div>
          <div className="bia-alerts">
            <div className="bia-alert">⚠ Drop in PSP-A approval</div>
            <div className="bia-alert pos">↑ Geo X conv +14%</div>
            <div className="bia-alert">⚠ 3 high-risk withdrawals</div>
          </div>
        </div>
      </div>
      <style>{`
        .bia-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: min-content; gap: 8px; }
        .bia-cell { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
        .bia-cell.main { grid-row: span 2; }
        .bia-cell.wide { grid-column: span 2; }
        .bia-l { font-size: 10.5px; color: var(--text-mute); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
        .bia-v { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
        .bia-v.small { font-size: 22px; }
        .bia-funnel { display: flex; flex-direction: column; gap: 6px; }
        .bia-funnel-row { display: grid; grid-template-columns: 70px 1fr 70px; gap: 8px; align-items: center; }
        .bia-funnel-l { font-size: 10.5px; color: var(--text-dim); }
        .bia-funnel-bar { height: 12px; background: linear-gradient(90deg, var(--purple-2), var(--pink)); border-radius: 4px; min-width: 6px; transition: width 1s ease; }
        .bia-funnel-v { font-size: 11px; color: var(--text); text-align: right; font-family: var(--font-mono); }
        .bia-alerts { display: flex; flex-direction: column; gap: 5px; }
        .bia-alert { font-size: 10.5px; color: var(--text-dim); padding: 6px 8px; background: rgba(255,176,0,0.08); border: 1px solid rgba(255,176,0,0.2); border-radius: 6px; }
        .bia-alert.pos { background: rgba(43,217,116,0.08); border-color: rgba(43,217,116,0.2); color: #2BD974; }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// IB tree (improved animated)
// ─────────────────────────────────────────────────────────────
function IBTreeAnimatedVisual() {
  return (
    <div className="ibt card" style={{ padding: 22 }}>
      <div className="row between" style={{ marginBottom: 14 }}>
        <span className="tag"><span className="dot"/>Partner network</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>312 PARTNERS · 4 LEVELS</span>
      </div>
      <svg viewBox="0 0 400 240" width="100%" height="240">
        <defs>
          <linearGradient id="ibt-edge" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="var(--purple-2)" stopOpacity="0.6"/>
            <stop offset="1" stopColor="var(--pink)" stopOpacity="0.2"/>
          </linearGradient>
        </defs>
        <g stroke="url(#ibt-edge)" fill="none" strokeWidth="1.4">
          <path d="M200 35 L100 95"/>
          <path d="M200 35 L200 95"/>
          <path d="M200 35 L300 95"/>
          <path d="M100 115 L60 175"/>
          <path d="M100 115 L140 175"/>
          <path d="M200 115 L200 175"/>
          <path d="M300 115 L260 175"/>
          <path d="M300 115 L340 175"/>
        </g>
        {/* Particles */}
        {[
          { d: "M200 35 L100 95" },
          { d: "M200 35 L300 95" },
          { d: "M100 115 L60 175" },
          { d: "M300 115 L340 175" },
        ].map((p, i) => (
          <circle key={i} r="3" fill="var(--green)">
            <animateMotion dur={`${3 + i * 0.6}s`} repeatCount="indefinite" path={p.d}/>
            <animate attributeName="opacity" values="0;1;0" dur={`${3 + i * 0.6}s`} repeatCount="indefinite"/>
          </circle>
        ))}
        <g>
          <Node x={200} y={40} label="Master IB · $48K" big/>
          <Node x={100} y={105} label="L2 · A · $14K"/>
          <Node x={200} y={105} label="L2 · B · $19K"/>
          <Node x={300} y={105} label="L2 · C · $11K"/>
          <Node x={60} y={185} label="C-127" small/>
          <Node x={140} y={185} label="C-291" small/>
          <Node x={200} y={185} label="C-308" small/>
          <Node x={260} y={185} label="C-412" small/>
          <Node x={340} y={185} label="C-518" small/>
        </g>
      </svg>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 8, marginTop: 14 }}>
        {[
          { l: "Commission MTD", v: "$48,210" },
          { l: "Sub-IBs", v: "127" },
          { l: "Volume routed", v: "$8.2M" },
        ].map((s) => (
          <div key={s.l} style={{ background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: 10, padding: 10, textAlign: "center" }}>
            <div style={{ fontSize: 10.5, color: "var(--text-mute)", letterSpacing: "0.06em" }}>{s.l.toUpperCase()}</div>
            <div className="mono" style={{ fontSize: 14, fontWeight: 600, marginTop: 4 }}>{s.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Affiliate — funnel + paid traffic flow
// ─────────────────────────────────────────────────────────────
function AffiliateFunnelVisual() {
  const stages = [
    { l: "Click", v: "48,210", w: "100%", c: "#7A52FF" },
    { l: "Sign-up", v: "12,840", w: "75%", c: "#9D80FF" },
    { l: "KYC pass", v: "8,920", w: "55%", c: "#F89BD6" },
    { l: "FTD", v: "1,287", w: "30%", c: "#F118B2" },
    { l: "Retained 90D", v: "874", w: "18%", c: "#FF7A45" },
  ];
  return (
    <div className="aff card" style={{ padding: 22 }}>
      <div className="row between" style={{ marginBottom: 18 }}>
        <span className="tag"><span className="dot"/>Click → FTD</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>30D · ALL SOURCES</span>
      </div>
      <div className="aff-funnel">
        {stages.map((s, i) => (
          <div key={s.l} className="aff-stage">
            <div className="aff-trapez" style={{ width: s.w, background: s.c, animationDelay: `${i * 0.15}s` }}>
              <span>{s.l}</span>
              <span className="mono">{s.v}</span>
            </div>
            {i < stages.length - 1 && <div className="aff-arrow">↓</div>}
          </div>
        ))}
      </div>
      <div className="aff-sources">
        <div style={{ fontSize: 10.5, color: "var(--text-mute)", letterSpacing: "0.06em", marginBottom: 8 }}>TOP SOURCES</div>
        {[
          { l: "Google Ads", v: "$48K", p: 80 },
          { l: "Meta", v: "$32K", p: 60 },
          { l: "IB · A. Petrov", v: "$24K", p: 45 },
          { l: "Telegram", v: "$12K", p: 22 },
        ].map((s) => (
          <div key={s.l} style={{ display: "grid", gridTemplateColumns: "100px 1fr 60px", gap: 8, alignItems: "center", marginBottom: 6 }}>
            <span style={{ fontSize: 11, color: "var(--text-dim)" }}>{s.l}</span>
            <div style={{ height: 6, background: "var(--ink-3)", borderRadius: 999, overflow: "hidden" }}>
              <div style={{ width: `${s.p}%`, height: "100%", background: "linear-gradient(90deg, var(--purple-2), var(--pink))" }}/>
            </div>
            <span className="mono" style={{ fontSize: 11, color: "var(--text)", textAlign: "right", fontWeight: 600 }}>{s.v}</span>
          </div>
        ))}
      </div>
      <style>{`
        .aff-funnel { margin-bottom: 18px; }
        .aff-stage { display: flex; flex-direction: column; align-items: center; }
        .aff-trapez {
          padding: 10px 16px; border-radius: 8px; color: #fff;
          display: flex; justify-content: space-between; gap: 16px;
          font-size: 12px; font-weight: 600;
          margin-bottom: 4px;
          animation: aff-grow .8s cubic-bezier(.2,.7,.2,1) both;
        }
        @keyframes aff-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
        .aff-arrow { color: var(--text-mute); font-size: 14px; margin: 2px 0; }
        .aff-sources { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Stock & investment — portfolio donut
// ─────────────────────────────────────────────────────────────
function PortfolioVisual() {
  const holdings = [
    { sym: "AAPL", v: 28, c: "#7A52FF" },
    { sym: "MSFT", v: 22, c: "#F118B2" },
    { sym: "VOO", v: 18, c: "#FFB000" },
    { sym: "NVDA", v: 14, c: "#2BD974" },
    { sym: "BND", v: 10, c: "#24A1DE" },
    { sym: "Other", v: 8, c: "#FF7A45" },
  ];
  let cumulative = 0;
  return (
    <div className="pv card" style={{ padding: 22 }}>
      <div className="row between" style={{ marginBottom: 14 }}>
        <span className="tag"><span className="dot"/>Investor portfolio</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>BALANCED · 3M</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 24, alignItems: "center" }}>
        <div style={{ position: "relative" }}>
          <svg viewBox="0 0 200 200" width="200" height="200">
            {holdings.map((h, i) => {
              const start = cumulative;
              cumulative += h.v;
              const end = cumulative;
              const startAngle = (start / 100) * 360 - 90;
              const endAngle = (end / 100) * 360 - 90;
              const large = h.v > 50 ? 1 : 0;
              const x1 = 100 + 80 * Math.cos((startAngle * Math.PI) / 180);
              const y1 = 100 + 80 * Math.sin((startAngle * Math.PI) / 180);
              const x2 = 100 + 80 * Math.cos((endAngle * Math.PI) / 180);
              const y2 = 100 + 80 * Math.sin((endAngle * Math.PI) / 180);
              return (
                <path
                  key={h.sym}
                  d={`M 100 100 L ${x1} ${y1} A 80 80 0 ${large} 1 ${x2} ${y2} Z`}
                  fill={h.c}
                  opacity={0.85}
                  style={{ transformOrigin: "100px 100px", animation: `pv-pop .8s ease both ${i * 0.08}s` }}
                />
              );
            })}
            <circle cx="100" cy="100" r="48" fill="var(--ink-2)"/>
            <text x="100" y="92" textAnchor="middle" fontSize="9" fill="var(--text-dim)" letterSpacing="1">EQUITY</text>
            <text x="100" y="108" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--text)">$182,408</text>
          </svg>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {holdings.map((h) => (
            <div key={h.sym} style={{ display: "grid", gridTemplateColumns: "12px 60px 1fr 40px", gap: 10, alignItems: "center" }}>
              <span style={{ width: 10, height: 10, borderRadius: 3, background: h.c }}/>
              <span style={{ fontSize: 12, fontWeight: 600 }}>{h.sym}</span>
              <div style={{ height: 5, background: "var(--ink-3)", borderRadius: 999, overflow: "hidden" }}>
                <div style={{ width: `${h.v * 3}%`, height: "100%", background: h.c }}/>
              </div>
              <span className="mono" style={{ fontSize: 11, color: "var(--text-dim)", textAlign: "right" }}>{h.v}%</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ marginTop: 16, padding: 12, background: "var(--surface-2)", borderRadius: 10, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        {[
          { l: "1Y return", v: "+18.4%", c: "#2BD974" },
          { l: "Dividend yield", v: "2.1%" },
          { l: "Beta", v: "0.94" },
          { l: "Sharpe", v: "1.82" },
        ].map((s) => (
          <div key={s.l}>
            <div style={{ fontSize: 10, color: "var(--text-mute)", letterSpacing: "0.06em", textTransform: "uppercase" }}>{s.l}</div>
            <div className="mono" style={{ fontSize: 13, fontWeight: 600, color: s.c || "var(--text)", marginTop: 2 }}>{s.v}</div>
          </div>
        ))}
      </div>
      <style>{`
        @keyframes pv-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 0.85; } }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Multi-license — group entities map
// ─────────────────────────────────────────────────────────────
function MultiEntityVisual() {
  const entities = [
    { name: "EU · CySEC", v: "$2.1M", c: "#7A52FF", x: 30, y: 25 },
    { name: "UK · FCA", v: "$1.4M", c: "#F118B2", x: 25, y: 18 },
    { name: "AU · ASIC", v: "$890K", c: "#FFB000", x: 80, y: 60 },
    { name: "ZA · FSCA", v: "$420K", c: "#2BD974", x: 55, y: 65 },
    { name: "BVI", v: "$310K", c: "#24A1DE", x: 18, y: 50 },
    { name: "MA · FSC", v: "$180K", c: "#FF7A45", x: 65, y: 42 },
  ];
  return (
    <div className="me card" style={{ padding: 22 }}>
      <div className="row between" style={{ marginBottom: 14 }}>
        <span className="tag"><span className="dot"/>Group entities</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>6 LICENSES · GROUP P&L</span>
      </div>
      <div className="me-map">
        <svg viewBox="0 0 100 75" preserveAspectRatio="none" className="me-map-svg">
          <defs>
            <pattern id="me-dots" x="0" y="0" width="2" height="2" patternUnits="userSpaceOnUse">
              <circle cx="1" cy="1" r="0.3" fill="var(--text-mute)" opacity="0.3"/>
            </pattern>
          </defs>
          <rect width="100" height="75" fill="url(#me-dots)"/>
        </svg>
        {entities.map((e, i) => (
          <div key={e.name} className="me-pin" style={{ left: `${e.x}%`, top: `${e.y}%`, animationDelay: `${i * 0.15}s` }}>
            <div className="me-pin-dot" style={{ background: e.c }}/>
            <div className="me-pin-pulse" style={{ background: e.c }}/>
            <div className="me-pin-label">
              <div style={{ fontSize: 10, fontWeight: 600 }}>{e.name}</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--text-dim)" }}>{e.v}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="me-stats">
        {[
          { l: "Group AUM", v: "$5.3M" },
          { l: "Active entities", v: "6" },
          { l: "Group MRR", v: "$840K" },
        ].map((s) => (
          <div key={s.l} className="me-stat">
            <div className="me-stat-l">{s.l}</div>
            <div className="me-stat-v">{s.v}</div>
          </div>
        ))}
      </div>
      <style>{`
        .me-map { position: relative; height: 280px; background: linear-gradient(180deg, var(--surface-2), var(--ink-3)); border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
        .me-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
        .me-pin { position: absolute; transform: translate(-50%, -50%); animation: fx-fade-in .6s ease both; }
        .me-pin-dot { width: 14px; height: 14px; border-radius: 999px; box-shadow: 0 0 0 3px rgba(0,0,0,0.4); position: relative; z-index: 2; }
        .me-pin-pulse { position: absolute; inset: -4px; border-radius: 999px; opacity: 0.3; animation: pulse-pin 2s infinite; }
        @keyframes pulse-pin { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(2.4); opacity: 0; } }
        .me-pin-label { position: absolute; top: 18px; left: -30px; min-width: 90px; padding: 5px 8px; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 8px; text-align: center; }
        .me-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
        .me-stat { padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; text-align: center; }
        .me-stat-l { font-size: 10.5px; color: var(--text-mute); }
        .me-stat-v { font-size: 18px; font-weight: 700; margin-top: 4px; letter-spacing: -0.01em; }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Call Centers — Live dialer / call stack
// ─────────────────────────────────────────────────────────────
function CallCenterVisual() {
  const calls = [
    { rep: "M. Chen", lead: "Olivia R.", t: "02:14", st: "active", v: 80 },
    { rep: "T. Adeyemi", lead: "Marcus W.", t: "00:48", st: "ringing", v: 30 },
    { rep: "L. Bianchi", lead: "Aria P.", t: "07:21", st: "active", v: 95 },
    { rep: "K. Tanaka", lead: "Ben S.", t: "00:00", st: "wrap", v: 0 },
  ];
  return (
    <div className="cc card" style={{ padding: 22 }}>
      <div className="row between" style={{ marginBottom: 14 }}>
        <span className="tag"><span className="dot"/>Live floor</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>32 ON-CALL · QUEUE 14</span>
      </div>
      <div className="cc-stats">
        <div className="cc-stat"><div className="cc-stat-l">Calls/hr</div><div className="cc-stat-v">187</div></div>
        <div className="cc-stat"><div className="cc-stat-l">Talk ratio</div><div className="cc-stat-v">62%</div></div>
        <div className="cc-stat"><div className="cc-stat-l">Conv today</div><div className="cc-stat-v">9.4%</div></div>
        <div className="cc-stat"><div className="cc-stat-l">FTD count</div><div className="cc-stat-v">14</div></div>
      </div>
      <div className="cc-rows">
        {calls.map((c, i) => (
          <div key={i} className="cc-row" style={{ animationDelay: `${i * 0.1}s` }}>
            <div className="cc-avatar">{c.rep.split(" ").map((p) => p[0]).join("")}</div>
            <div>
              <div className="cc-rep">{c.rep}</div>
              <div className="cc-lead">→ {c.lead}</div>
            </div>
            <div className="cc-wave">
              {Array.from({ length: 16 }).map((_, j) => {
                const h = c.st === "active" ? 6 + Math.sin(j + i) * 8 + Math.random() * 6 : c.st === "ringing" ? 4 + Math.random() * 3 : 2;
                return <div key={j} style={{ width: 2, height: h, background: c.st === "active" ? "var(--green)" : c.st === "ringing" ? "var(--purple-2)" : "var(--text-mute)", borderRadius: 1, animation: c.st === "active" ? `cc-wave-${j} 0.8s ease-in-out infinite alternate` : "none" }}/>;
              })}
            </div>
            <div className="mono cc-time">{c.t}</div>
            <div className={`cc-st ${c.st}`}>{c.st.toUpperCase()}</div>
          </div>
        ))}
      </div>
      <style>{`
        .cc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
        .cc-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
        .cc-stat-l { font-size: 10px; color: var(--text-mute); letter-spacing: 0.06em; text-transform: uppercase; }
        .cc-stat-v { font-size: 18px; font-weight: 700; margin-top: 4px; letter-spacing: -0.01em; }
        .cc-rows { display: flex; flex-direction: column; gap: 6px; }
        .cc-row {
          display: grid; grid-template-columns: 32px 1fr 80px 50px 60px;
          gap: 12px; align-items: center;
          padding: 10px 12px; background: var(--surface-2);
          border: 1px solid var(--line); border-radius: 10px;
          animation: fx-fade-in .5s ease both;
        }
        .cc-avatar { width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, var(--purple-2), var(--pink)); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
        .cc-rep { font-size: 12px; font-weight: 600; }
        .cc-lead { font-size: 10.5px; color: var(--text-dim); }
        .cc-wave { display: flex; gap: 2px; align-items: center; height: 24px; }
        .cc-time { font-size: 11px; color: var(--text-dim); text-align: right; }
        .cc-st { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-align: right; }
        .cc-st.active { color: var(--green); }
        .cc-st.ringing { color: var(--purple-2); }
        .cc-st.wrap { color: var(--text-mute); }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Academies — Course / signal feed
// ─────────────────────────────────────────────────────────────
function AcademyVisual() {
  return (
    <div className="ac card" style={{ padding: 22 }}>
      <div className="row between" style={{ marginBottom: 14 }}>
        <span className="tag"><span className="dot"/>Academy live feed</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>4,287 ACTIVE</span>
      </div>
      <div className="ac-grid">
        <div className="ac-course">
          <div className="ac-thumb" style={{ background: "linear-gradient(135deg, var(--purple-2), var(--pink))" }}>
            <span style={{ fontSize: 24 }}>▶</span>
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>Lesson 14 · Risk Management</div>
            <div style={{ fontSize: 11, color: "var(--text-dim)", marginBottom: 8 }}>Premium tier · 18 min</div>
            <div style={{ height: 4, background: "var(--ink-3)", borderRadius: 999 }}>
              <div style={{ width: "62%", height: "100%", background: "linear-gradient(90deg, var(--purple-2), var(--pink))", borderRadius: 999 }}/>
            </div>
            <div style={{ fontSize: 10, color: "var(--text-mute)", marginTop: 4 }}>62% complete</div>
          </div>
        </div>
        <div className="ac-signals">
          <div style={{ fontSize: 10.5, color: "var(--text-mute)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 8 }}>Today's signals</div>
          {[
            { s: "EUR/USD long", e: "1.0860", t: "1.0920", st: "1.0840", c: "#2BD974" },
            { s: "BTC/USD short", e: "67.2K", t: "65.4K", st: "68.1K", c: "#FF7A45" },
            { s: "GBP/JPY long", e: "189.40", t: "190.80", st: "188.20", c: "#7A52FF" },
          ].map((sig, i) => (
            <div key={i} className="ac-sig" style={{ animationDelay: `${i * 0.1}s` }}>
              <div className="ac-sig-name" style={{ color: sig.c }}>{sig.s}</div>
              <div className="ac-sig-meta mono">→ TP {sig.t} · SL {sig.st}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="ac-bottom">
        <div className="ac-bottom-cell"><div className="ac-l">Subs</div><div className="ac-v">$184K MRR</div></div>
        <div className="ac-bottom-cell"><div className="ac-l">Completion</div><div className="ac-v">71%</div></div>
        <div className="ac-bottom-cell"><div className="ac-l">Signal win-rate</div><div className="ac-v">64%</div></div>
        <div className="ac-bottom-cell"><div className="ac-l">→ Broker FTDs</div><div className="ac-v">28</div></div>
      </div>
      <style>{`
        .ac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
        .ac-course { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
        .ac-thumb { width: 80px; height: 80px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
        .ac-signals { padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
        .ac-sig { padding: 8px 0; border-bottom: 1px solid var(--line); animation: fx-fade-in .5s ease both; }
        .ac-sig:last-child { border: 0; }
        .ac-sig-name { font-size: 12px; font-weight: 600; }
        .ac-sig-meta { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
        .ac-bottom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
        .ac-bottom-cell { padding: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; text-align: center; }
        .ac-l { font-size: 10px; color: var(--text-mute); letter-spacing: 0.06em; text-transform: uppercase; }
        .ac-v { font-size: 14px; font-weight: 700; margin-top: 4px; letter-spacing: -0.01em; }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Why Antelope — comparison radar
// ─────────────────────────────────────────────────────────────
function WhyRadarVisual() {
  const axes = ["Speed", "Compliance", "Ops", "Trading", "BI", "Mobile"];
  // Antelope vs generic
  const antelope = [88, 95, 92, 90, 88, 85];
  const generic = [55, 35, 40, 30, 60, 25];
  const cx = 150, cy = 150, r = 110;
  const points = (vals) => vals.map((v, i) => {
    const angle = (i / axes.length) * Math.PI * 2 - Math.PI / 2;
    return `${cx + (r * v / 100) * Math.cos(angle)},${cy + (r * v / 100) * Math.sin(angle)}`;
  }).join(" ");
  return (
    <div className="wr card" style={{ padding: 22 }}>
      <div className="row between" style={{ marginBottom: 14 }}>
        <span className="tag"><span className="dot"/>Antelope vs Patchwork</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>OPERATOR SCORE</span>
      </div>
      <svg viewBox="0 0 300 300" width="100%" height="280">
        <defs>
          <radialGradient id="wr-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0" stopColor="var(--purple-2)" stopOpacity="0.4"/>
            <stop offset="1" stopColor="var(--purple-2)" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <circle cx={cx} cy={cy} r={r} fill="url(#wr-glow)"/>
        {[0.25, 0.5, 0.75, 1].map((s) => (
          <polygon key={s} points={axes.map((_, i) => {
            const angle = (i / axes.length) * Math.PI * 2 - Math.PI / 2;
            return `${cx + r * s * Math.cos(angle)},${cy + r * s * Math.sin(angle)}`;
          }).join(" ")} fill="none" stroke="var(--line)" strokeDasharray="2 2"/>
        ))}
        {axes.map((a, i) => {
          const angle = (i / axes.length) * Math.PI * 2 - Math.PI / 2;
          const x = cx + (r + 16) * Math.cos(angle);
          const y = cy + (r + 16) * Math.sin(angle);
          return <text key={a} x={x} y={y + 4} fontSize="11" fill="var(--text-dim)" textAnchor="middle" fontWeight="600">{a}</text>;
        })}
        <polygon points={points(generic)} fill="rgba(120,120,150,0.18)" stroke="var(--text-mute)" strokeWidth="1.4" strokeDasharray="3 3"/>
        <polygon points={points(antelope)} fill="rgba(122,82,255,0.28)" stroke="var(--purple-2)" strokeWidth="2"/>
        {axes.map((a, i) => {
          const angle = (i / axes.length) * Math.PI * 2 - Math.PI / 2;
          const v = antelope[i];
          const x = cx + (r * v / 100) * Math.cos(angle);
          const y = cy + (r * v / 100) * Math.sin(angle);
          return <circle key={i} cx={x} cy={y} r="4" fill="var(--purple-2)" stroke="#fff" strokeWidth="1.5"/>;
        })}
      </svg>
      <div style={{ display: "flex", justifyContent: "center", gap: 24, marginTop: 8 }}>
        <div className="row" style={{ gap: 6, fontSize: 11 }}>
          <span style={{ width: 10, height: 10, background: "var(--purple-2)", borderRadius: 2 }}/>Antelope
        </div>
        <div className="row" style={{ gap: 6, fontSize: 11, color: "var(--text-mute)" }}>
          <span style={{ width: 10, height: 10, background: "rgba(120,120,150,0.6)", borderRadius: 2 }}/>Generic patchwork
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Company / About — Animated "build log" with timeline + live
// commit feed + team mosaic. No map.
// ─────────────────────────────────────────────────────────────
function GlobeTeamVisual() {
  const milestones = [
    { y: "2016", t: "Antelope founded", c: "var(--text-mute)" },
    { y: "2018", t: "First broker live · Cyprus", c: "var(--purple-2)" },
    { y: "2020", t: "BI & AI engine ships", c: "var(--purple-2)" },
    { y: "2022", t: "Prop firm OS launches", c: "var(--pink)" },
    { y: "2024", t: "Crypto operations + KYT", c: "var(--pink)" },
    { y: "2025", t: "60+ companies on platform", c: "var(--orange)" },
  ];
  const commits = [
    { h: "9b3a14e", who: "iris.k", msg: "feat(client-area): wallet-connect login", c: "var(--green)" },
    { h: "5f72c08", who: "marko.d", msg: "perf(bi): cube refresh -42% on FX schema", c: "var(--purple-2)" },
    { h: "a1ce902", who: "sara.n", msg: "fix(payouts): retry on 429 from PSP-7", c: "var(--orange)" },
    { h: "33e8b1d", who: "tomas.r", msg: "feat(prop): scaling plan +25/+50/+100", c: "var(--green)" },
    { h: "cc40f7b", who: "lina.p", msg: "chore(kyc): vendor-K v2.4 cutover", c: "var(--purple-2)" },
    { h: "7d2a6e5", who: "elias.v", msg: "feat(crypto): TRM screen on withdraw", c: "var(--pink)" },
  ];
  const team = [
    { r: "Engineering", n: 92, c: "var(--purple-2)" },
    { r: "Product & Design", n: 18, c: "var(--pink)" },
    { r: "Customer success", n: 28, c: "var(--orange)" },
    { r: "Compliance & Risk", n: 14, c: "var(--green)" },
    { r: "Sales & Partnerships", n: 16, c: "var(--teal)" },
    { r: "G&A", n: 12, c: "var(--text-dim)" },
  ];
  return (
    <div className="gt2 card" style={{ padding: 0, overflow: "hidden", position: "relative" }}>
      <div className="gt2-head">
        <div className="row" style={{ gap: 8 }}>
          <span className="tag"><span className="dot"/>antelope · build log</span>
          <span className="tag mono" style={{ fontSize: 10.5 }}>main · 9 yrs</span>
        </div>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>180 people · shipping daily</span>
      </div>

      <div className="gt2-grid">
        {/* Left — vertical timeline */}
        <div className="gt2-tl">
          <div className="gt2-tl-rail"/>
          {milestones.map((m, i) => (
            <div key={m.y} className="gt2-ms" style={{ animationDelay: `${i * 0.12}s` }}>
              <div className="gt2-ms-dot" style={{ background: m.c, boxShadow: `0 0 0 3px var(--ink-2), 0 0 14px ${m.c}` }}/>
              <div className="gt2-ms-y mono">{m.y}</div>
              <div className="gt2-ms-t">{m.t}</div>
            </div>
          ))}
        </div>

        {/* Right — commit stream + team breakdown */}
        <div className="gt2-side">
          <div className="gt2-card">
            <div className="gt2-card-head">
              <span className="mono" style={{ fontSize: 10.5, letterSpacing: "0.08em", color: "var(--text-mute)" }}>LIVE COMMITS</span>
              <span className="gt2-pulse"/>
            </div>
            <div className="gt2-feed">
              {commits.map((c, i) => (
                <div key={c.h} className="gt2-row mono" style={{ animationDelay: `${i * 0.16}s` }}>
                  <span style={{ color: c.c, fontWeight: 600 }}>{c.h}</span>
                  <span style={{ color: "var(--text-dim)" }}>{c.who}</span>
                  <span style={{ color: "var(--text)" }}>{c.msg}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="gt2-card">
            <div className="gt2-card-head">
              <span className="mono" style={{ fontSize: 10.5, letterSpacing: "0.08em", color: "var(--text-mute)" }}>HEADCOUNT · 180</span>
              <span className="mono" style={{ fontSize: 10.5, color: "var(--text-mute)" }}>HQ · Limassol</span>
            </div>
            <div className="gt2-bars">
              {team.map((t, i) => (
                <div key={t.r} className="gt2-bar-row" style={{ animationDelay: `${i * 0.08}s` }}>
                  <div className="gt2-bar-l">{t.r}</div>
                  <div className="gt2-bar-track">
                    <div className="gt2-bar-fill" style={{ width: `${(t.n / 92) * 100}%`, background: t.c }}/>
                  </div>
                  <div className="gt2-bar-n mono">{t.n}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .gt2-head { padding: 14px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
        .gt2-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; }
        .gt2-tl { padding: 24px 24px 24px 36px; border-right: 1px solid var(--line); position: relative; min-height: 360px; }
        .gt2-tl-rail { position: absolute; left: 22px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(180deg, var(--purple-2), var(--pink), var(--orange)); border-radius: 999px; opacity: 0.55; }
        .gt2-ms { position: relative; padding: 8px 0 18px; animation: fx-fade-in .6s ease both; }
        .gt2-ms-dot { position: absolute; left: -22px; top: 12px; width: 10px; height: 10px; border-radius: 999px; }
        .gt2-ms-y { font-size: 11px; color: var(--text-mute); letter-spacing: 0.08em; }
        .gt2-ms-t { font-size: 14px; font-weight: 600; line-height: 1.4; margin-top: 3px; letter-spacing: -0.01em; }
        .gt2-side { display: flex; flex-direction: column; gap: 0; }
        .gt2-card { padding: 18px 22px; border-bottom: 1px solid var(--line); }
        .gt2-card:last-child { border-bottom: 0; }
        .gt2-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .gt2-pulse { width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 0 rgba(43,217,116,0.6); animation: gt2-pulse 1.6s infinite; }
        @keyframes gt2-pulse { 0% { box-shadow: 0 0 0 0 rgba(43,217,116,0.6); } 70% { box-shadow: 0 0 0 8px rgba(43,217,116,0); } 100% { box-shadow: 0 0 0 0 rgba(43,217,116,0); } }
        .gt2-feed { display: flex; flex-direction: column; gap: 6px; }
        .gt2-row { display: grid; grid-template-columns: 64px 60px 1fr; gap: 10px; align-items: center; font-size: 11px; padding: 5px 0; border-bottom: 1px solid var(--line); animation: fx-fade-in .5s ease both; }
        .gt2-row:last-child { border-bottom: 0; }
        .gt2-bars { display: flex; flex-direction: column; gap: 9px; }
        .gt2-bar-row { display: grid; grid-template-columns: 130px 1fr 32px; gap: 12px; align-items: center; animation: fx-fade-in .6s ease both; }
        .gt2-bar-l { font-size: 12px; color: var(--text-dim); }
        .gt2-bar-track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
        .gt2-bar-fill { height: 100%; border-radius: 999px; transform-origin: left; animation: gt2-grow 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
        @keyframes gt2-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        .gt2-bar-n { font-size: 11px; color: var(--text); text-align: right; }
        @media (max-width: 900px) {
          .gt2-grid { grid-template-columns: 1fr; }
          .gt2-tl { border-right: 0; border-bottom: 1px solid var(--line); }
        }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Security — Layered shield + audit log
// ─────────────────────────────────────────────────────────────
function SecurityShieldVisual() {
  return (
    <div className="ss card" style={{ padding: 22 }}>
      <div className="row between" style={{ marginBottom: 14 }}>
        <span className="tag"><span className="dot"/>Defense in depth</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>SOC 2 · ISO 27001 · GDPR</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 24, alignItems: "center" }}>
        <div style={{ position: "relative", height: 200 }}>
          <svg viewBox="0 0 200 200" width="200" height="200">
            <defs>
              <linearGradient id="ss-shield" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="var(--purple-2)" stopOpacity="0.6"/>
                <stop offset="1" stopColor="var(--purple)" stopOpacity="0.3"/>
              </linearGradient>
            </defs>
            {[80, 65, 50, 35].map((r, i) => (
              <circle key={i} cx="100" cy="100" r={r} fill="none" stroke="var(--purple-2)" strokeWidth="1.4" opacity={0.2 + i * 0.15} strokeDasharray="4 4">
                <animateTransform attributeName="transform" type="rotate" from="0 100 100" to={i % 2 ? "360 100 100" : "-360 100 100"} dur={`${20 + i * 5}s`} repeatCount="indefinite"/>
              </circle>
            ))}
            <path d="M100 50 L130 65 L130 95 Q 130 130 100 145 Q 70 130 70 95 L 70 65 Z" fill="url(#ss-shield)" stroke="var(--purple-2)" strokeWidth="2"/>
            <path d="M88 100 L98 110 L114 90" stroke="#fff" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div className="ss-list">
          {[
            { l: "TLS 1.3 · AES-256", c: "#2BD974" },
            { l: "SSO · MFA enforced", c: "#7A52FF" },
            { l: "Customer-managed keys", c: "#F118B2" },
            { l: "Data residency: EU/UK/US/APAC", c: "#FFB000" },
            { l: "Annual SOC 2 + pen test", c: "#24A1DE" },
            { l: "24h breach notification", c: "#FF7A45" },
          ].map((s, i) => (
            <div key={s.l} className="ss-item" style={{ animationDelay: `${i * 0.1}s` }}>
              <span className="ss-dot" style={{ background: s.c }}/>
              <span style={{ fontSize: 12.5 }}>{s.l}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="ss-log">
        <div style={{ fontSize: 10.5, color: "var(--text-mute)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 8 }}>Live audit stream</div>
        <div className="ss-tape mono">
          <div className="ss-tape-content">
            <span>● 14:02 · login · SSO · admin@broker.eu · 192.168.x.x</span>
            <span>● 14:03 · withdrawal_approve · OP-2914 · $4,200 · USDT</span>
            <span>● 14:05 · key_rotate · KMS · vault-prod · OK</span>
            <span>● 14:06 · access · client_pii · audit-trail · masked</span>
            <span>● 14:02 · login · SSO · admin@broker.eu · 192.168.x.x</span>
            <span>● 14:03 · withdrawal_approve · OP-2914 · $4,200 · USDT</span>
            <span>● 14:05 · key_rotate · KMS · vault-prod · OK</span>
            <span>● 14:06 · access · client_pii · audit-trail · masked</span>
          </div>
        </div>
      </div>
      <style>{`
        .ss-list { display: flex; flex-direction: column; gap: 8px; }
        .ss-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; animation: fx-fade-in .5s ease both; }
        .ss-dot { width: 8px; height: 8px; border-radius: 999px; }
        .ss-log { margin-top: 14px; }
        .ss-tape { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; padding: 10px 0; }
        .ss-tape-content { display: flex; gap: 36px; white-space: nowrap; animation: marquee 30s linear infinite; font-size: 11px; color: var(--text-dim); padding-left: 20px; }
        .ss-tape-content span { color: var(--purple-2); }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Integrations — Logo cloud / connector grid
// ─────────────────────────────────────────────────────────────
function ConnectorGridVisual() {
  const cells = [
    { l: "MT5", c: "#2196F3" }, { l: "MT4", c: "#1976D2" }, { l: "cTr", c: "#7A52FF" },
    { l: "DX", c: "#F118B2" }, { l: "Sumsub", c: "#FFB000" }, { l: "Onfido", c: "#FF7A45" },
    { l: "Chai…", c: "#2BD974" }, { l: "Stripe", c: "#635BFF" }, { l: "Twilio", c: "#F22F46" },
    { l: "FB", c: "#0086FF" }, { l: "BitGo", c: "#0052FF" }, { l: "Slack", c: "#611f69" },
  ];
  return (
    <div className="ig card" style={{ padding: 22 }}>
      <div className="row between" style={{ marginBottom: 14 }}>
        <span className="tag"><span className="dot"/>200+ connectors</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>LIVE · NOT THEORETICAL</span>
      </div>
      <div className="ig-grid">
        {cells.map((c, i) => (
          <div key={i} className="ig-cell" style={{ animationDelay: `${i * 0.05}s`, background: `color-mix(in oklab, ${c.c} 15%, transparent)`, borderColor: `color-mix(in oklab, ${c.c} 30%, transparent)` }}>
            <span style={{ fontSize: 11, fontWeight: 700, color: c.c }}>{c.l}</span>
          </div>
        ))}
      </div>
      <div className="ig-stream">
        <div className="ig-stream-row">
          {Array.from({ length: 12 }).map((_, i) => (
            <span key={i} className="mono" style={{ fontSize: 9.5, color: "var(--text-mute)", opacity: 0.5 + (i / 24) }}>
              [{["TRADE", "DEPOSIT", "KYC", "WITHDRAW", "CALL", "EVENT"][i % 6]}]
            </span>
          ))}
        </div>
      </div>
      <style>{`
        .ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; }
        .ig-cell {
          aspect-ratio: 1; border-radius: 12px; border: 1px solid;
          display: grid; place-items: center;
          animation: fx-fade-in .5s ease both;
          transition: transform .2s ease;
        }
        .ig-cell:hover { transform: translateY(-2px); }
        .ig-stream { padding: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
        .ig-stream-row { display: flex; gap: 18px; justify-content: space-between; }
      `}</style>
    </div>
  );
}

// Export everything
window.FXBridgeVisual = FXBridgeVisual;
window.CryptoOrbitVisual = CryptoOrbitVisual;
window.PropChallengeVisual = PropChallengeVisual;
window.OrderBookVisual = OrderBookVisual;
window.BrowserMockVisual = BrowserMockVisual;
window.PhoneStackVisual = PhoneStackVisual;
window.BIDashboardAdvancedVisual = BIDashboardAdvancedVisual;
window.IBTreeAnimatedVisual = IBTreeAnimatedVisual;
window.AffiliateFunnelVisual = AffiliateFunnelVisual;
window.PortfolioVisual = PortfolioVisual;
window.MultiEntityVisual = MultiEntityVisual;
window.CallCenterVisual = CallCenterVisual;
window.AcademyVisual = AcademyVisual;
window.WhyRadarVisual = WhyRadarVisual;
window.GlobeTeamVisual = GlobeTeamVisual;
window.SecurityShieldVisual = SecurityShieldVisual;
window.ConnectorGridVisual = ConnectorGridVisual;

// ─────────────────────────────────────────────────────────────
// AI — Live conversation analyzer + neural pulse
// ─────────────────────────────────────────────────────────────
function AIBrainVisual() {
  return (
    <div className="aibv card" style={{ padding: 0, overflow: "hidden", position: "relative" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
        {/* Left — Live call transcript with AI annotations */}
        <div style={{ padding: 18, borderRight: "1px solid var(--line)", background: "var(--surface)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-mute)", fontWeight: 600 }}>Live · Operator #214</div>
              <div style={{ fontSize: 13, color: "var(--text)", fontWeight: 600, marginTop: 2 }}>Inbound · L. Garcia</div>
            </div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "3px 8px", borderRadius: 999, background: "rgba(43,217,116,0.12)", border: "1px solid rgba(43,217,116,0.3)" }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "#2BD974", boxShadow: "0 0 6px #2BD974", animation: "pulse-dot 1.4s ease-in-out infinite" }}/>
              <span style={{ fontSize: 10, color: "#2BD974", fontWeight: 600, letterSpacing: "0.04em" }}>02:14</span>
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <Bubble who="lead" text="I'm not sure if now is the right time to fund."/>
            <AIChip kind="objection" label="OBJECTION · Hesitation"/>
            <Bubble who="op" text="Totally — what would make this feel like the right time for you?"/>
            <AIChip kind="suggest" label="REBUTTAL · Open question ✓"/>
            <Bubble who="lead" text="Maybe smaller amount to start."/>
            <AIChip kind="action" label="NEXT · Offer $500 starter, mention guided demo"/>
          </div>

          <div style={{ marginTop: 14, padding: 10, borderRadius: 10, background: "linear-gradient(110deg, rgba(90,45,244,0.08), rgba(241,24,178,0.06))", border: "1px solid rgba(122,82,255,0.25)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
              <span style={{ fontSize: 10, color: "#7A52FF", fontWeight: 700, letterSpacing: "0.06em" }}>● COACH</span>
              <span style={{ fontSize: 10, color: "var(--text-mute)" }}>Sentiment ↑ neutral</span>
            </div>
            <div style={{ fontSize: 11.5, color: "var(--text)", lineHeight: 1.5 }}>"Lead is warming. Suggest $500 entry + free 1:1 onboarding. Avoid pressure language."</div>
          </div>
        </div>

        {/* Right — Neural / metrics */}
        <div style={{ padding: 18, position: "relative", overflow: "hidden", background: "linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%)" }}>
          <div style={{ fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-mute)", fontWeight: 600, marginBottom: 14 }}>AI Models · Active</div>

          <Neural/>

          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 14 }}>
            {[
              { l: "Lead score", v: "82 / 100", w: 82, c: "#7A52FF" },
              { l: "Churn risk", v: "Low", w: 22, c: "#2BD974" },
              { l: "Conversion likelihood", v: "High", w: 76, c: "#F118B2" },
              { l: "Compliance", v: "Pass", w: 100, c: "#FF7A45" },
            ].map((m, i) => (
              <div key={m.l}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 3 }}>
                  <span style={{ fontSize: 10.5, color: "var(--text-dim)" }}>{m.l}</span>
                  <span className="mono" style={{ fontSize: 10.5, color: "var(--text)", fontWeight: 600 }}>{m.v}</span>
                </div>
                <div style={{ height: 4, background: "var(--surface-hover)", borderRadius: 999, overflow: "hidden" }}>
                  <div style={{ height: "100%", width: m.w + "%", background: m.c, borderRadius: 999, animation: `bar-fill 2s ease-out ${0.2 * i}s both` }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .aibv { min-height: 460px; }
        @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
        @keyframes bar-fill { from { width: 0; } }
        @keyframes neural-pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
      `}</style>
    </div>
  );
}

function Bubble({ who, text }) {
  const isLead = who === "lead";
  return (
    <div style={{ display: "flex", justifyContent: isLead ? "flex-start" : "flex-end" }}>
      <div style={{
        maxWidth: "82%", padding: "8px 11px", borderRadius: 12,
        fontSize: 11.5, lineHeight: 1.45,
        background: isLead ? "var(--surface-hover)" : "linear-gradient(135deg, #5A2DF4, #7A52FF)",
        color: isLead ? "var(--text)" : "#fff",
        border: isLead ? "1px solid var(--line)" : "none",
      }}>{text}</div>
    </div>
  );
}

function AIChip({ kind, label }) {
  const colors = { objection: "#FF7A45", suggest: "#2BD974", action: "#F118B2" };
  const c = colors[kind] || "#7A52FF";
  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <span className="mono" style={{
        fontSize: 9, fontWeight: 700, letterSpacing: "0.08em",
        padding: "3px 8px", borderRadius: 999,
        background: c + "1f", color: c, border: "1px solid " + c + "44",
      }}>✦ {label}</span>
    </div>
  );
}

function Neural() {
  // 5x4 grid of nodes pulsing
  const nodes = [];
  for (let r = 0; r < 4; r++) {
    for (let c = 0; c < 5; c++) {
      nodes.push({ r, c, delay: (r * 5 + c) * 0.13 });
    }
  }
  return (
    <div style={{ position: "relative", height: 110, marginBottom: 4 }}>
      <svg viewBox="0 0 200 110" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        {/* connections */}
        {nodes.filter(n => n.c < 4).map((n, i) => (
          <line key={"l" + i}
            x1={20 + n.c * 40} y1={15 + n.r * 26}
            x2={20 + (n.c + 1) * 40} y2={15 + ((n.r + (i % 3 - 1) + 4) % 4) * 26}
            stroke="url(#neuGrad)" strokeWidth="0.6" opacity="0.4"/>
        ))}
        <defs>
          <linearGradient id="neuGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#5A2DF4"/>
            <stop offset="1" stopColor="#F118B2"/>
          </linearGradient>
        </defs>
        {nodes.map((n, i) => (
          <circle key={"n" + i}
            cx={20 + n.c * 40} cy={15 + n.r * 26} r="3"
            fill={i % 3 === 0 ? "#7A52FF" : i % 3 === 1 ? "#F118B2" : "#FF7A45"}
            style={{ animation: `neural-pulse 1.8s ease-in-out ${n.delay}s infinite` }}/>
        ))}
      </svg>
    </div>
  );
}

window.AIBrainVisual = AIBrainVisual;