/* Core capabilities section — the "how" */

const Capabilities = () => {
  return (
    <section id="capabilities" style={{background: "var(--bg-sunken)"}}>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"/>Under the hood</div>
          <h2 className="section-title">
            Built to price the <em style={{fontFamily: "var(--font-display)", fontStyle: "italic", color: "var(--accent-ink)"}}>real</em>{"\u00A0 "}fill,<br/>
            based on onchain quote and the live orderbook
          </h2>
          <p className="lede">
            Most dashboards show mid-prices and call them opportunities.<br/>
            web3map walks the orderbook and the AMM curve for every route, and provides accurate prices that account for slippage.
          </p>
        </div>

        <div className="cap-grid">
          <div className="cap span-6">
            <div className="cap-eyebrow">Unified book</div>
            <h4>CEX · CEX-Perp · DEX, all priced the same way.</h4>
            <p>
              Every venue is quoted at a $1,000 buy and $1,000 sell, with
              realistic price-impact applied to both sides. Spot, perps,
              and AMMs live in the same table — you only see spreads a
              real fill actually keeps.
            </p>
            <div className="cap-visual">
              <BookVisual/>
            </div>
          </div>

          <div className="cap span-6">
            <div className="cap-eyebrow">Bridge-aware routing</div>
            <h4>Every cross-chain route comes with a live bridge quote.</h4>
            <p>
              When a route needs a bridge, web3map queries Across,
              Mayan, Wormhole, Stargate and others for the real fee and
              ETA at that moment — then folds both into the net spread.
              No guessing whether the edge survives the hop.
            </p>
            <div className="cap-visual">
              <BridgeVisual/>
            </div>
          </div>

          <div className="cap">
            <div className="cap-eyebrow">DEX fees</div>
            <h4>Pool fee · gas · routing.</h4>
            <p>
              LP fee tier, swap gas at current basefee, and any multi-hop
              routing cost — all subtracted before a spread is shown.
            </p>
          </div>

          <div className="cap">
            <div className="cap-eyebrow">Perp funding</div>
            <h4>Funding rate · OI · next payment.</h4>
            <p>
              For every perp leg we surface the 8-hour funding, open
              interest, and minutes to the next payment — the three
              numbers that turn a good spread into a good trade.
            </p>
          </div>

          <div className="cap">
            <div className="cap-eyebrow">Snapshot cadence</div>
            <h4>30-second rolling index.</h4>
            <p>
              Prices flow through a deduplicated snapshot store every
              30 seconds. Spikes are measured against the prior snapshot —
              no stale mids, no ghost signals.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---- small SVGs embedded in capability cards ---- */
const BookVisual = () => (
  <div style={{
    display: "grid",
    gridTemplateColumns: "repeat(3, 1fr)",
    gap: 10,
    marginTop: 4,
  }}>
    {[
      { tag: "CEX", px: "0.7412", size: "$1k buy", pill: "binance" },
      { tag: "PERP", px: "0.7418", size: "funding −0.0082%", pill: "bybit-p" },
      { tag: "DEX", px: "0.7644", size: "$1k sell · 0.3%", pill: "uni:arb" },
    ].map((x, i) => (
      <div key={i} style={{
        border: "1px solid var(--hairline)",
        borderRadius: 6,
        padding: "10px 12px",
        background: "var(--bg-elev)",
      }}>
        <div className="mono" style={{fontSize: 9.5, color: "var(--fg-4)", letterSpacing: "0.08em"}}>{x.tag}</div>
        <div className="mono" style={{fontSize: 15, fontWeight: 500, marginTop: 2, color: "var(--fg)"}}>${x.px}</div>
        <div className="mono" style={{fontSize: 10, color: "var(--fg-3)", marginTop: 4}}>{x.size}</div>
        <div className="mono" style={{fontSize: 9.5, color: "var(--fg-4)", marginTop: 6}}>{x.pill}</div>
      </div>
    ))}
  </div>
);

const BridgeVisual = () => (
  <div style={{
    border: "1px solid var(--hairline)",
    borderRadius: 6,
    padding: "14px 14px 12px",
    background: "var(--bg-elev)",
  }}>
    <div style={{
      display: "grid",
      gridTemplateColumns: "1fr auto 1fr",
      alignItems: "center",
      gap: 10,
    }}>
      <div className="mono" style={{fontSize: 10, color: "var(--fg-3)"}}>
        <div style={{color: "var(--fg)", fontSize: 12, fontWeight: 500}}>ethereum</div>
        <div style={{marginTop: 2}}>uniswap v3 · 0.05%</div>
      </div>
      <div className="mono" style={{fontSize: 10, color: "var(--fg-4)"}}>→</div>
      <div className="mono" style={{fontSize: 10, color: "var(--fg-3)", textAlign: "right"}}>
        <div style={{color: "var(--fg)", fontSize: 12, fontWeight: 500}}>arbitrum</div>
        <div style={{marginTop: 2}}>camelot v3 · 0.30%</div>
      </div>
    </div>
    <div style={{
      marginTop: 12,
      paddingTop: 12,
      borderTop: "1px dashed var(--hairline)",
      display: "flex",
      justifyContent: "space-between",
    }}>
      <span className="mono" style={{fontSize: 10.5, color: "var(--fg-2)"}}>
        across · <span style={{color: "var(--accent-ink)"}}>$0.82</span> · ~4m 12s
      </span>
      <span className="mono" style={{fontSize: 10.5, color: "var(--fg-3)"}}>
        net +3.12%
      </span>
    </div>
  </div>
);

Object.assign(window, { Capabilities });