/* GNG PULSE - the heartbeat band */

function Pulse() {
  const canvasRef = useRef(null);

  // Animated waveform
  useEffect(() => {
    const c = canvasRef.current;
    if (!c) return;
    const ctx = c.getContext('2d');
    let raf, t = 0;
    const resize = () => {
      const dpr = devicePixelRatio || 1;
      const r = c.getBoundingClientRect();
      c.width = r.width * dpr;
      c.height = r.height * dpr;
      ctx.setTransform(dpr,0,0,dpr,0,0);
    };
    resize();
    addEventListener('resize', resize);

    const draw = () => {
      const r = c.getBoundingClientRect();
      ctx.clearRect(0, 0, r.width, r.height);
      const cy = r.height / 2;

      // Layered waves
      const drawWave = (amp, freq, phase, color, width) => {
        ctx.beginPath();
        for (let x = 0; x <= r.width; x += 2) {
          // heartbeat bump every "period" px
          const px = (x + phase) % 400;
          let beat = 0;
          if (px > 180 && px < 240) {
            const local = (px - 180) / 60;
            beat = Math.sin(local * Math.PI) * amp * 3 * (Math.sin(local * Math.PI * 2));
          }
          const y = cy + Math.sin(x * freq + t) * amp + beat;
          if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
        }
        ctx.strokeStyle = color;
        ctx.lineWidth = width;
        ctx.shadowColor = color;
        ctx.shadowBlur = 16;
        ctx.stroke();
      };

      drawWave(6, 0.018, t * 60, 'rgba(22,224,122,.85)', 1.5);
      drawWave(4, 0.022, t * 80 + 200, 'rgba(139,92,246,.6)', 1.2);
      drawWave(2, 0.04, t * 90 + 600, 'rgba(255,199,0,.5)', 1);

      t += 0.025;
      raf = requestAnimationFrame(draw);
    };
    draw();

    return () => {
      cancelAnimationFrame(raf);
      removeEventListener('resize', resize);
    };
  }, []);

  const tickerItems = [
    { who: '@webesgng', what: 'inner-circle call ran $7 → $78 (8x)', tag: 'tuff win', color: 'green' },
    { who: '@webesgng', what: 'crossed 300 in the gang', tag: 'motionorr', color: 'purple' },
    { who: '@0xileri', what: 'dropped 2 GTD WL spots to the gang', tag: 'we eating', color: 'yellow' },
    { who: '@blexy_cryptt', what: 'keeping the chat warm', tag: 'e pos', color: 'green' },
    { who: '@vikktorrrre', what: 'shared 33 creator agencies to know', tag: 'big motion', color: 'purple' },
    { who: '@oxunify', what: 'shipping for the gang', tag: 'tuff win', color: 'yellow' },
    { who: '@IdaraAkpabio882', what: 'first to the community tasks', tag: 'yktv', color: 'green' },
    { who: '@subomiscott', what: 'keeping the signal high', tag: 'motionorr', color: 'purple' },
  ];

  return (
    <section className="pulse" id="pulse">
      <div className="container">
        <Reveal className="pulse-head">
          <span className="eyebrow">- gng pulse · live</span>
          <h2 className="pulse-title">
            <span className="dot"></span>
            The heartbeat - <em>right now</em>
          </h2>
        </Reveal>

        <Reveal delay={1} className="pulse-band">
          <canvas ref={canvasRef} className="pulse-wave"/>
          <div className="pulse-stats">
            <div className="pstat">
              <div className="pstat-n"><CountUp to={300} />+</div>
              <div className="pstat-l">in the gang</div>
            </div>
            <div className="pstat">
              <div className="pstat-n"><CountUp to={8} />×</div>
              <div className="pstat-l">top call (ATH)</div>
            </div>
            <div className="pstat">
              <div className="pstat-n"><CountUp to={2} /></div>
              <div className="pstat-l">WL drops to gang</div>
            </div>
            <div className="pstat">
              <div className="pstat-n">24/7</div>
              <div className="pstat-l">motion in the chat</div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={2} className="pulse-ticker-wrap">
          <div className="eyebrow ticker-label">- gang in the wild</div>
          <div className="marquee">
            <div className="marquee-track">
              {[...tickerItems, ...tickerItems].map((it, i) => (
                <div className="ticker-item" key={i}>
                  <span className="t-who">{it.who}</span>
                  <span className="t-what">{it.what}</span>
                  <span className={`stamp ${it.color}`}>{it.tag}</span>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        .pulse {
          padding: 60px 0 80px;
          position: relative;
        }
        .pulse-head {
          display: flex; flex-direction: column; gap: 8px;
          margin-bottom: 28px;
        }
        .pulse-title {
          font-size: clamp(28px, 3vw, 42px);
          font-weight: 600;
          letter-spacing: -.02em;
          display: flex; align-items: center; gap: 16px;
          color: var(--text);
        }
        .pulse-title em {
          font-style: italic;
          background: var(--grad);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        .pulse-title .dot {
          width: 12px; height: 12px; border-radius: 50%;
          background: var(--green);
          box-shadow: 0 0 14px var(--green);
          animation: heroDot 1.6s ease-in-out infinite;
        }

        .pulse-band {
          position: relative;
          background: linear-gradient(180deg, rgba(22,224,122,.04), rgba(139,92,246,.04));
          border: 1px solid var(--ln-06);
          border-radius: var(--r-xl);
          padding: 28px 32px;
          overflow: hidden;
        }
        .pulse-band::before {
          content: "";
          position: absolute; inset: 0;
          background: radial-gradient(60% 100% at 50% 0%, rgba(22,224,122,.08), transparent 70%);
          pointer-events: none;
        }
        .pulse-wave {
          width: 100%; height: 110px;
          display: block;
        }
        .pulse-stats {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
          padding-top: 24px;
          border-top: 1px solid var(--ln-06);
          margin-top: 12px;
        }
        @media (max-width: 720px) {
          .pulse-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
          .pulse-band { padding: 20px; }
        }
        .pstat-n {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: clamp(28px, 3.4vw, 44px);
          letter-spacing: -.02em;
          font-variant-numeric: tabular-nums;
          color: var(--text);
        }
        .pstat-l {
          font-size: 11px;
          letter-spacing: .18em;
          text-transform: uppercase;
          color: var(--muted);
          margin-top: 4px;
        }

        .pulse-ticker-wrap {
          margin-top: 36px;
        }
        .ticker-label { margin-bottom: 14px; }
        .ticker-item {
          display: inline-flex; align-items: center; gap: 14px;
          padding: 10px 18px;
          background: var(--w-025);
          border: 1px solid var(--ln-06);
          border-radius: 999px;
          white-space: nowrap;
        }
        .t-who { font-weight: 700; color: var(--text); font-size: 14px; }
        .t-what { color: var(--muted); font-size: 13px; }
      `}</style>
    </section>
  );
}

window.Pulse = Pulse;