// ui-bits.jsx — shared tiny components for noise, dividers, marquees, graphs

function Noise({ opacity = 0.08 }) {
  return <div style={{
    position:'absolute', inset:0, pointerEvents:'none', opacity,
    backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")`,
    mixBlendMode:'overlay',
  }}/>;
}

function Marquee({ children, speed = 40, reverse=false, style }) {
  return (
    <div style={{ overflow:'hidden', whiteSpace:'nowrap', position:'relative', ...style }}>
      <div style={{
        display:'inline-block',
        animation:`mqu ${speed}s linear infinite ${reverse?'reverse':''}`,
        paddingLeft:'100%',
      }}>
        {children}{children}
      </div>
      <style>{`@keyframes mqu{from{transform:translateX(0)}to{transform:translateX(-50%)}}`}</style>
    </div>
  );
}

// Animated attention-style heatmap matrix — quietly says "ML / AI" without shouting.
// Cells pulse in a flowing diagonal wave; rare "hot" cells flash in vermillion.
function Scatter({ w=300, h=150, color='#111', hot='#FF3D14' }) {
  const cols = 14, rows = 7;
  const cellW = w / cols, cellH = h / rows;
  const padding = 1.5;
  const cells = React.useMemo(() => {
    let seed = 0x6a4f;
    const rand = () => { seed = (seed * 1664525 + 1013904223) % 4294967296; return seed / 4294967296; };
    const out = [];
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        // Base brightness biased along the diagonal (top-right strongest)
        const diag = (c / cols + (rows - 1 - r) / rows) / 2;
        const base = 0.10 + Math.pow(diag, 1.7) * 0.65;
        // Sparse hot cells — recolored
        const isHot = rand() < 0.09;
        const peak = isHot ? 0.95 : Math.min(0.85, base + 0.18);
        const dur = 3.4 + rand() * 2.8;
        const phase = (c * 0.18 + r * 0.32 + rand() * 0.4) % 1;
        const delay = -phase * dur;
        out.push({ r, c, base, peak, dur, delay, isHot });
      }
    }
    return out;
  }, [cols, rows]);

  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{display:'block', overflow:'visible'}}>
      <line x1="0" y1={h+1} x2={w} y2={h+1} stroke={color} strokeOpacity="0.18" strokeWidth="1"/>
      <line x1="-1" y1="0" x2="-1" y2={h} stroke={color} strokeOpacity="0.18" strokeWidth="1"/>

      {cells.map((cell, i) => {
        const x = cell.c * cellW + padding;
        const y = cell.r * cellH + padding;
        const cw = cellW - padding * 2;
        const ch = cellH - padding * 2;
        const fill = cell.isHot ? hot : color;
        return (
          <rect key={i} x={x} y={y} width={cw} height={ch}
            fill={fill} fillOpacity={cell.base} rx="0.5">
            <animate attributeName="fill-opacity"
              values={`${cell.base * 0.55};${cell.peak};${cell.base * 0.7};${cell.base * 0.55}`}
              keyTimes="0;0.4;0.8;1"
              dur={`${cell.dur}s`} begin={`${cell.delay}s`} repeatCount="indefinite"/>
          </rect>
        );
      })}
    </svg>
  );
}

// LA street-grid-ish lines behind hero
function Grid({ color='currentColor', opacity=0.08 }) {
  return <svg style={{position:'absolute',inset:0,width:'100%',height:'100%',pointerEvents:'none'}} preserveAspectRatio="none">
    <defs>
      <pattern id="gd" width="40" height="40" patternUnits="userSpaceOnUse">
        <path d="M40 0H0V40" stroke={color} strokeOpacity={opacity} fill="none"/>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#gd)"/>
  </svg>;
}

Object.assign(window, { Noise, Marquee, Scatter, Grid });