// Animated seismic waveform — irregular amplitude, like real seismograph output.
// Uses a few stacked sine + decay components with seeded noise to look natural,
// scrolls horizontally on a slow loop, and has a brighter trace overlay on top.

function SeismicWaveform({ height = 460, mode = 'panel' }) {
  // mode 'panel' = sized to fit hero right column; 'bg' = full-bleed background
  const W = 1200;
  const H = height;
  const midY = H / 2;
  const [t, setT] = React.useState(0);

  React.useEffect(() => {
    let raf;
    let last = performance.now();
    const tick = (now) => {
      const dt = (now - last) / 1000;
      last = now;
      setT((p) => p + dt);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  // Build a long irregular trace by composing several sines with noise.
  // Sampling 280 points keeps the path smooth without overwhelming the GPU.
  const path = React.useMemo(() => {
    const N = 280;
    const points = [];
    // Seeded pseudo-random for stable irregularity
    let seed = 7;
    const rand = () => {
      seed = (seed * 9301 + 49297) % 233280;
      return seed / 233280;
    };
    // Pre-compute amplitude envelope — a few bursts along the wave
    const bursts = [];
    for (let i = 0; i < 8; i++) {
      bursts.push({ x: rand() * W, w: 80 + rand() * 160, amp: 30 + rand() * 90 });
    }
    for (let i = 0; i <= N; i++) {
      const x = (i / N) * W;
      let env = 12;
      for (const b of bursts) {
        const d = Math.abs(x - b.x);
        if (d < b.w) env += b.amp * Math.pow(1 - d / b.w, 2);
      }
      // Multiple frequencies + tiny noise
      const yOff =
        env *
        (Math.sin(x * 0.05) * 0.6 +
          Math.sin(x * 0.13 + 1.7) * 0.3 +
          Math.sin(x * 0.31 + 3.1) * 0.18) +
        (rand() - 0.5) * 4;
      points.push([x, midY + yOff * 0.55]);
    }
    return points.map((p, i) => (i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`)).join(' ');
  }, [H]);

  // Slow horizontal scroll — translate the entire group
  const scroll = (-t * 22) % W;

  return (
    <svg
      viewBox={`0 0 ${W} ${H}`}
      width="100%"
      height="100%"
      preserveAspectRatio={mode === 'bg' ? 'xMidYMid slice' : 'xMidYMid meet'}
      aria-hidden="true"
      style={{ display: 'block' }}
    >
      <defs>
        <linearGradient id="wf-fade" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="var(--waveform-color, #E8C547)" stopOpacity="0" />
          <stop offset="0.15" stopColor="var(--waveform-color, #E8C547)" stopOpacity="1" />
          <stop offset="0.85" stopColor="var(--waveform-color, #E8C547)" stopOpacity="1" />
          <stop offset="1" stopColor="var(--waveform-color, #E8C547)" stopOpacity="0" />
        </linearGradient>
        <mask id="wf-mask">
          <rect x="0" y="0" width={W} height={H} fill="url(#wf-fade)" />
        </mask>
      </defs>

      {/* Horizontal grid (seismograph baseline lines) */}
      <g stroke="currentColor" strokeWidth="0.5" opacity="0.18">
        {Array.from({ length: 6 }).map((_, i) => {
          const y = (H / 7) * (i + 1);
          return <line key={i} x1="0" y1={y} x2={W} y2={y} strokeDasharray="2 6" />;
        })}
      </g>
      {/* Vertical tick marks */}
      <g stroke="currentColor" strokeWidth="0.5" opacity="0.12">
        {Array.from({ length: 24 }).map((_, i) => {
          const x = (W / 24) * i;
          return <line key={i} x1={x} y1={H * 0.45} x2={x} y2={H * 0.55} />;
        })}
      </g>

      <g mask="url(#wf-mask)">
        {/* Two stacked copies so the scrolling loops seamlessly */}
        <g transform={`translate(${scroll}, 0)`}>
          <path d={path} fill="none" stroke="var(--waveform-color, #E8C547)" strokeOpacity="0.35" strokeWidth="1.2" />
          <path d={path} fill="none" stroke="var(--waveform-color, #E8C547)" strokeWidth="1.6" />
        </g>
        <g transform={`translate(${scroll + W}, 0)`}>
          <path d={path} fill="none" stroke="var(--waveform-color, #E8C547)" strokeOpacity="0.35" strokeWidth="1.2" />
          <path d={path} fill="none" stroke="var(--waveform-color, #E8C547)" strokeWidth="1.6" />
        </g>
      </g>

      {/* Readout marker — animated pulse */}
      <g>
        <circle
          cx={W * 0.5}
          cy={midY}
          r={4 + Math.sin(t * 2.5) * 1.5}
          fill="var(--waveform-color, #E8C547)"
          opacity="0.9"
        />
        <circle
          cx={W * 0.5}
          cy={midY}
          r={14 + Math.sin(t * 2.5) * 6}
          fill="none"
          stroke="var(--waveform-color, #E8C547)"
          strokeWidth="1"
          opacity={0.4 - Math.sin(t * 2.5) * 0.2}
        />
      </g>
    </svg>
  );
}

window.SeismicWaveform = SeismicWaveform;