/* Hero section */
const Hero = () => {
  return (
    <section className="hero noise">
      <div className="hero-grid-bg" />
      <div className="hero-gradient-bg" aria-hidden="true" />
      <div className="container hero-inner">
        <div className="hero-network" aria-hidden="true" />
        <div className="hero-tag">
          <b>LIVE</b>
          <span>Realtime CEX · CEX-Perp · DEX · Cross-chain</span>
        </div>
        <h1 className="display">
          Find <em>arbitrages</em> and<br/>
          <em>exploits</em> in under a minute.
        </h1>
        <p className="hero-sub">
          <b>CEX spot</b>, <b>CEX perp</b>, and <b>DEX pools</b> — indexed in <b>realtime</b>.<br/>
          Every opportunity priced at a <b>$1,000 fill</b>,<br/>
          net of <b>slippage</b>, <b>DEX pool fees</b>, <b>bridge fees</b>, and <b>perp funding</b>.
        </p>
        <div className="hero-cta">
          <a className="btn btn-primary" href="/arbitrage">
            Start for free
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 7h8m0 0L7 3m4 4L7 11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
          <a className="btn btn-ghost" href="#product">See how it works</a>
        </div>

        <div className="hero-stats">
          <div className="hero-stat">
            <div className="k">Price sources</div>
            <div className="v">10,000+</div>
          </div>
          <div className="hero-stat">
            <div className="k">Chains</div>
            <div className="v">200+</div>
          </div>
          <div className="hero-stat">
            <div className="k">DEXs</div>
            <div className="v">50+</div>
          </div>
          <div className="hero-stat">
            <div className="k">CEXs</div>
            <div className="v">8</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Marquee = () => {
  const items = [
    { tk: "DOT", pct: -100.00, src: "uniswap:eth" },
    { tk: "MANTA", pct: -44.66, src: "uniswap:eth" },
    { tk: "ARB", pct: 3.12, src: "binance → base" },
    { tk: "SUI", pct: -2.48, src: "bybit → sui" },
    { tk: "JTO", pct: 1.85, src: "okx → solana" },
    { tk: "WBTC", pct: 0.42, src: "arbitrum → eth" },
    { tk: "PENDLE", pct: 2.17, src: "raydium → hyperliquid" },
    { tk: "TIA", pct: -1.22, src: "celestia → binance" },
    { tk: "EIGEN", pct: 0.88, src: "uniswap:eth" },
    { tk: "ENA", pct: 4.05, src: "bybit-perp → eth" },
  ];
  const render = (list, key) => list.map((it, i) => (
    <span className="item" key={`${key}-${i}`}>
      <span className="tk">{it.tk}</span>
      <span className={`pct ${it.pct >= 0 ? "up" : "down"}`}>
        {it.pct >= 0 ? "+" : ""}{it.pct.toFixed(2)}%
      </span>
      <span>{it.src}</span>
    </span>
  ));
  return (
    <div className="marquee">
      <div className="marquee-track">
        {render(items, "a")}
        {render(items, "b")}
      </div>
    </div>
  );
};

Object.assign(window, { Hero, Marquee });