// AI-X-LEADERS · design tokens (rebuilt from reference)
const TOKENS = {
  // Neutrals
  black:    '#0A0A0A',  // Jet Black
  white:    '#FAF7F2',  // Off-White
  ink:      '#0A0A0A',
  paper:    '#FAF7F2',
  line:     '#1A1A1A',  // hairline on light
  lineSoft: '#E5E2DD',
  textDim:  '#6B6B6B',

  // Brand palette
  electric: '#2F6BFF',  // Electric Blue
  hotpink:  '#FF4FD8',  // Hot Pink
  orange:   '#FF6A00',  // Vivid Orange
  yellow:   '#F4C542',  // Sun Yellow
  violet:   '#7B61FF',  // Violet

  // Tints (for pattern variation)
  pinkSoft:   '#FFB7E8',
  blueSoft:   '#A6BDFF',
  violetSoft: '#BBA8FF',
  orangeSoft: '#FFB07A',
};

// Pixel cascade · the signature motif. Dense at bottom, dissolving upward.
function makeCascade({
  width = 1000, height = 220, cell = 10,
  palette, seed = 1, intensity = 1,
}) {
  const pal = palette || [
    TOKENS.electric, TOKENS.hotpink, TOKENS.orange, TOKENS.yellow, TOKENS.violet,
    TOKENS.pinkSoft, TOKENS.blueSoft, TOKENS.violetSoft, TOKENS.orangeSoft,
  ];
  let s = seed * 9301 + 49297;
  const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
  const cols = Math.ceil(width / cell);
  const rows = Math.ceil(height / cell);
  const cells = [];
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      // density rises with y (bottom-heavy). yN=0 top, 1 bottom.
      const yN = y / rows;
      const p = Math.pow(yN, 2.4) * intensity;
      if (rand() < p) {
        cells.push({
          x: x * cell, y: y * cell,
          color: pal[Math.floor(rand() * pal.length)],
        });
      }
    }
  }
  return { cells, cell };
}

function PixelCascade({ width = 1000, height = 220, cell = 10, seed = 1, palette, intensity = 1, style, responsive = true }) {
  const { cells, cell: c } = React.useMemo(
    () => makeCascade({ width, height, cell, seed, palette, intensity }),
    [width, height, cell, seed, palette, intensity]
  );
  return (
    <svg
      width={responsive ? '100%' : width}
      height={responsive ? undefined : height}
      viewBox={`0 0 ${width} ${height}`}
      preserveAspectRatio={responsive ? 'xMidYMax slice' : 'xMidYMid meet'}
      style={{ display: 'block', ...(responsive ? { height: height + 'px' } : {}), ...style }}
      shapeRendering="crispEdges"
      aria-hidden="true"
    >
      {cells.map((p, i) => <rect key={i} x={p.x} y={p.y} width={c} height={c} fill={p.color} />)}
    </svg>
  );
}

// Density-mode pixel block (mostly filled grid)
function PixelBlock({ width = 280, height = 200, cell = 16, seed = 7, fill = 0.9, palette, style }) {
  const pal = palette || [TOKENS.electric, TOKENS.hotpink, TOKENS.orange, TOKENS.yellow, TOKENS.violet, TOKENS.pinkSoft, TOKENS.blueSoft, TOKENS.violetSoft];
  const cells = React.useMemo(() => {
    let s = seed * 9301 + 49297;
    const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
    const cols = Math.floor(width / cell), rows = Math.floor(height / cell);
    const arr = [];
    for (let y = 0; y < rows; y++)
      for (let x = 0; x < cols; x++)
        if (rand() < fill) arr.push({ x: x * cell, y: y * cell, color: pal[Math.floor(rand() * pal.length)] });
    return arr;
  }, [width, height, cell, seed, fill, palette]);
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: 'block', ...style }} shapeRendering="crispEdges">
      {cells.map((p, i) => <rect key={i} x={p.x} y={p.y} width={cell} height={cell} fill={p.color} />)}
    </svg>
  );
}

// Cascade from a corner (used for transitions)
function PixelCorner({ width = 280, height = 200, cell = 8, seed = 3, palette, origin = 'br', style }) {
  const pal = palette || [TOKENS.electric, TOKENS.hotpink, TOKENS.orange, TOKENS.yellow, TOKENS.violet, TOKENS.pinkSoft, TOKENS.violetSoft];
  const cells = React.useMemo(() => {
    let s = seed * 9301 + 49297;
    const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
    const cols = Math.floor(width / cell), rows = Math.floor(height / cell);
    const arr = [];
    for (let y = 0; y < rows; y++) {
      for (let x = 0; x < cols; x++) {
        const xN = x / cols, yN = y / rows;
        let dx = origin.includes('r') ? 1 - xN : xN;
        let dy = origin.includes('b') ? 1 - yN : yN;
        const d = Math.sqrt(dx * dx + dy * dy);
        const p = Math.pow(1 - Math.min(1, d / 0.95), 2.2);
        if (rand() < p) arr.push({ x: x * cell, y: y * cell, color: pal[Math.floor(rand() * pal.length)] });
      }
    }
    return arr;
  }, [width, height, cell, seed, palette, origin]);
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: 'block', ...style }} shapeRendering="crispEdges">
      {cells.map((p, i) => <rect key={i} x={p.x} y={p.y} width={cell} height={cell} fill={p.color} />)}
    </svg>
  );
}

// Sparse fragments
function PixelFragments({ width = 280, height = 200, cell = 12, seed = 5, count = 18, palette, style }) {
  const pal = palette || [TOKENS.electric, TOKENS.hotpink, TOKENS.orange, TOKENS.yellow, TOKENS.violet];
  const cells = React.useMemo(() => {
    let s = seed * 9301 + 49297;
    const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
    const cols = Math.floor(width / cell), rows = Math.floor(height / cell);
    const arr = [];
    for (let i = 0; i < count; i++) {
      arr.push({
        x: Math.floor(rand() * cols) * cell,
        y: Math.floor(rand() * rows) * cell,
        color: pal[Math.floor(rand() * pal.length)],
      });
    }
    return arr;
  }, [width, height, cell, seed, count, palette]);
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: 'block', ...style }} shapeRendering="crispEdges">
      {cells.map((p, i) => <rect key={i} x={p.x} y={p.y} width={cell} height={cell} fill={p.color} />)}
    </svg>
  );
}

Object.assign(window, { TOKENS, PixelCascade, PixelBlock, PixelCorner, PixelFragments });