// Hyper · ambient floating + horizontal metric streams in background
const { useEffect: _ae, useState: _as, useRef: _ar, useMemo: _am } = React;

function Ambient() {
  const [tick, setTick] = _as(0);
  _ae(() => {
    const id = setInterval(() => setTick((t) => t + 1), 800);
    return () => clearInterval(id);
  }, []);

  // ── horizontal streams: long string of KPIs that scrolls left, with live recompute
  const streams = _am(() => [
    { y: 12, dur: 110, dir: 'l', seed: 7,  size: 11 },
    { y: 28, dur: 160, dir: 'r', seed: 13, size: 10 },
    { y: 46, dur: 130, dir: 'l', seed: 21, size: 11 },
    { y: 64, dur: 180, dir: 'r', seed: 31, size: 10 },
    { y: 82, dur: 140, dir: 'l', seed: 41, size: 11 },
  ], []);

  const kpiTemplates = [
    { l: 'CPL',   base: 2580, drift: 90,  suf: ' ₽' },
    { l: 'ROAS',  base: 5.1,  drift: 0.5, fixed: 2, pre: '×' },
    { l: 'CTR',   base: 4.2,  drift: 0.8, fixed: 2, suf: '%' },
    { l: 'CR',    base: 6.8,  drift: 0.6, fixed: 2, suf: '%' },
    { l: 'LTV',   base: 384,  drift: 22,  suf: 'K ₽' },
    { l: 'CAC',   base: 4200, drift: 180, suf: ' ₽' },
    { l: 'AOV',   base: 7900, drift: 200, suf: ' ₽' },
    { l: 'REACH', base: 1.7,  drift: 0.2, fixed: 2, suf: 'M' },
    { l: 'CPM',   base: 420,  drift: 18,  suf: ' ₽' },
    { l: 'ENG.',  base: 12.4, drift: 1.2, fixed: 1, suf: '%' },
    { l: 'BOUNCE',base: 32,   drift: 2,   suf: '%' },
    { l: 'SAVE',  base: 18,   drift: 3,   pre: '+', suf: '%' },
    { l: 'SHARE', base: 9,    drift: 1.5, fixed: 1, suf: '%' },
    { l: 'IMPR.', base: 248,  drift: 9,   suf: 'K' },
  ];

  const formatKpi = (m, phase) => {
    const w1 = Math.sin(phase * 0.7);
    const w2 = Math.cos(phase * 0.3);
    const val = m.base + w1 * m.drift * 0.6 + w2 * m.drift * 0.4;
    const num = m.fixed != null
      ? val.toFixed(m.fixed)
      : Math.round(val).toLocaleString('ru-RU');
    return `${m.pre || ''}${num}${m.suf || ''}`;
  };

  const buildLine = (seed, count = 22) => {
    const arr = [];
    for (let i = 0; i < count; i++) {
      const m = kpiTemplates[(seed + i * 3) % kpiTemplates.length];
      const phase = tick / 4 + seed + i * 1.3;
      arr.push({ l: m.l, v: formatKpi(m, phase) });
    }
    return arr;
  };

  return (
    <div className="ambient" aria-hidden="true">
      {streams.map((s, si) => {
        const line = buildLine(s.seed);
        // duplicate for seamless loop
        return (
          <div
            key={si}
            className={`ambient-stream ${s.dir === 'r' ? 'reverse' : ''}`}
            style={{
              top: s.y + 'vh',
              animationDuration: s.dur + 's',
              fontSize: s.size + 'px',
            }}
          >
            <div className="ambient-stream-track">
              {[0, 1].map((dup) => (
                <span key={dup} className="ambient-stream-inner">
                  {line.map((m, i) => (
                    <span key={i} className="ambient-stream-item">
                      <span className="ambient-stream-tag">{m.l}</span>
                      <span className="ambient-stream-val">{m.v}</span>
                      <span className="ambient-stream-sep">·</span>
                    </span>
                  ))}
                </span>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

window.Ambient = Ambient;