/**
 * Hero visual: an order-book depth ladder filling up, pure SVG animation.
 * Bids in mint grow from the right, asks in white grow from the left,
 * meeting around the spread line.
 */
const BIDS = [86, 64, 74, 52, 60, 42, 30];
const ASKS = [80, 58, 68, 48, 54, 38, 26];

export function DepthLadder() {
  return (
    <svg viewBox="0 0 420 380" className="h-full w-full" aria-hidden>
      <defs>
        <linearGradient id="dl-bid" x1="1" y1="0" x2="0" y2="0">
          <stop offset="0%" stopColor="#c8ff00" stopOpacity="0.9" />
          <stop offset="100%" stopColor="#c8ff00" stopOpacity="0.15" />
        </linearGradient>
        <linearGradient id="dl-ask" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#f2f2f2" stopOpacity="0.55" />
          <stop offset="100%" stopColor="#f2f2f2" stopOpacity="0.08" />
        </linearGradient>
      </defs>

      {/* spread line */}
      <line x1="210" y1="10" x2="210" y2="370" stroke="#3d3d3d" strokeWidth="1" strokeDasharray="3 6" />

      {BIDS.map((w, i) => {
        const y = 24 + i * 50;
        const bid = w * 2;
        const ask = ASKS[i] * 2;
        return (
          <g key={i}>
            <rect x={210 - bid} y={y} width={bid} height="22" fill="url(#dl-bid)">
              <animate
                attributeName="width"
                values={`${bid * 0.55};${bid};${bid * 0.75};${bid}`}
                dur={`${5 + i * 0.9}s`}
                repeatCount="indefinite"
                calcMode="spline"
                keySplines="0.4 0 0.2 1;0.4 0 0.2 1;0.4 0 0.2 1"
              />
              <animate
                attributeName="x"
                values={`${210 - bid * 0.55};${210 - bid};${210 - bid * 0.75};${210 - bid}`}
                dur={`${5 + i * 0.9}s`}
                repeatCount="indefinite"
                calcMode="spline"
                keySplines="0.4 0 0.2 1;0.4 0 0.2 1;0.4 0 0.2 1"
              />
            </rect>
            <rect x="212" y={y + 26} width={ask} height="22" fill="url(#dl-ask)">
              <animate
                attributeName="width"
                values={`${ask};${ask * 0.6};${ask * 0.85};${ask}`}
                dur={`${6 + i * 0.7}s`}
                repeatCount="indefinite"
                calcMode="spline"
                keySplines="0.4 0 0.2 1;0.4 0 0.2 1;0.4 0 0.2 1"
              />
            </rect>
          </g>
        );
      })}

      {/* price tick riding the spread */}
      <circle cx="210" cy="190" r="4" fill="#e9ffb3">
        <animate attributeName="cy" values="60;320;140;260;60" dur="14s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="1;0.5;1;0.6;1" dur="14s" repeatCount="indefinite" />
      </circle>
    </svg>
  );
}