// Variation 1 — SIGNAL
// Refined version of the pasted hero. Ambient animated waveform background,
// scrolling signal ticker, cursor-reactive glow (ambient layer is global).
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS, useMemo: useMemoS } = React;

function AnimatedWaveform({ intensity = 'full' }) {
  const canvasRef = useRefS(null);
  const rafRef = useRefS(0);
  const startRef = useRefS(performance.now());

  useEffectS(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    let w = 0, h = 0;

    const resize = () => {
      w = canvas.clientWidth;
      h = canvas.clientHeight;
      canvas.width = w * dpr;
      canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);

    const speed = intensity === 'off' ? 0 : intensity === 'subtle' ? 0.0003 : 0.0008;

    const draw = (t) => {
      const dt = (t - startRef.current);
      ctx.clearRect(0, 0, w, h);

      // Multiple layered waves
      const layers = [
        { amp: 18, freq: 0.006, phase: dt * speed, opacity: 0.10, width: 1 },
        { amp: 12, freq: 0.011, phase: -dt * speed * 0.6, opacity: 0.07, width: 1 },
        { amp: 28, freq: 0.003, phase: dt * speed * 0.3, opacity: 0.05, width: 1 },
      ];

      layers.forEach((L) => {
        ctx.beginPath();
        ctx.strokeStyle = `rgba(232, 168, 85, ${L.opacity})`;
        ctx.lineWidth = L.width;
        const cy = h * 0.58;
        for (let x = 0; x <= w; x += 2) {
          const y = cy + Math.sin(x * L.freq + L.phase) * L.amp
                       + Math.sin(x * L.freq * 2.1 + L.phase * 1.3) * L.amp * 0.35;
          if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
        }
        ctx.stroke();
      });

      // Flatline dot marker traveling along baseline
      const markerX = ((dt * (intensity === 'off' ? 0 : 0.06)) % (w + 40)) - 20;
      const markerY = h * 0.58 + Math.sin(markerX * 0.006 + dt * speed) * 18;
      ctx.fillStyle = 'rgba(232, 168, 85, 0.8)';
      ctx.beginPath();
      ctx.arc(markerX, markerY, 2, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = 'rgba(232, 168, 85, 0.2)';
      ctx.beginPath();
      ctx.arc(markerX, markerY, 6, 0, Math.PI * 2);
      ctx.fill();

      rafRef.current = requestAnimationFrame(draw);
    };
    rafRef.current = requestAnimationFrame(draw);
    return () => {
      cancelAnimationFrame(rafRef.current);
      ro.disconnect();
    };
  }, [intensity]);

  return (
    <canvas
      ref={canvasRef}
      style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%',
        pointerEvents: 'none',
        opacity: 0.9,
      }}
    />
  );
}

// Scrolling ticker of "unreached signal events"
function SignalTicker() {
  const items = useMemoS(() => [
    'ANON_8841 · visited /shop/boots · 2 sessions · no ID',
    'ANON_2304 · cart abandon · $218 · no email capture',
    'ANON_9912 · PDP × 4 · device fingerprint only',
    'ANON_6677 · returning · 7d dormant · unreachable',
    'ANON_1045 · cart abandon · $412 · no email capture',
    'ANON_3521 · category browse · high intent · no ID',
    'ANON_7788 · checkout bounce · stripe failed · no email',
    'ANON_4413 · 3 sessions · add-to-cart · ghost',
  ], []);
  const strip = [...items, ...items];
  return (
    <div style={{
      position: 'absolute',
      bottom: 28,
      left: 0, right: 0,
      overflow: 'hidden',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      padding: '14px 0',
      maskImage: 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)',
      WebkitMaskImage: 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)',
    }}>
      <div style={{
        display: 'inline-flex', gap: 48,
        animation: 'ticker 60s linear infinite',
        whiteSpace: 'nowrap',
      }}>
        {strip.map((s, i) => (
          <span key={i} style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 11,
            letterSpacing: '0.04em',
            color: 'var(--fg-dim)',
          }}>
            <span style={{ color: 'var(--accent)', marginRight: 10 }}>◦</span>
            {s}
          </span>
        ))}
      </div>
      <style>{`
        @keyframes ticker {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
      `}</style>
    </div>
  );
}

function SignalVariation({ headline, tweaks, openWaitlist }) {
  return (
    <section style={{
      position: 'relative',
      minHeight: '100vh',
      width: '100%',
      overflow: 'hidden',
    }}>
      {/* Animated background waveform */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
        <AnimatedWaveform intensity={tweaks.motionIntensity} />
      </div>

      {/* Soft vertical gradient */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'radial-gradient(ellipse at 30% 20%, rgba(232, 168, 85, 0.04), transparent 60%), linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.6) 100%)',
        pointerEvents: 'none',
      }} />

      <Navbar onJoin={openWaitlist} />

      <main style={{
        position: 'relative', zIndex: 20,
        display: 'flex', flexDirection: 'column',
        justifyContent: 'center',
        minHeight: '100vh',
        padding: 'clamp(96px, 12vh, 140px) clamp(24px, 6vw, 96px) 140px',
      }}>
        <div style={{ maxWidth: 920 }}>
          <FadeUp delay={0}>
            <div className="eyebrow" style={{ marginBottom: 28 }}>
              ◦ &nbsp;&nbsp;{headline.eyebrow}
            </div>
          </FadeUp>

          <FadeUp delay={0.1} as="h1" style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 500,
            fontSize: 'clamp(44px, 7.2vw, 104px)',
            lineHeight: 1.02,
            letterSpacing: '-0.035em',
            margin: 0,
            color: 'var(--fg)',
            textWrap: 'balance',
            whiteSpace: 'pre-line',
          }}>
            {headline.h1}
          </FadeUp>

          <FadeUp delay={0.3} as="p" style={{
            marginTop: 36,
            maxWidth: 640,
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(16px, 1.3vw, 20px)',
            lineHeight: 1.55,
            color: 'var(--fg-mute)',
            textWrap: 'pretty',
            fontWeight: 400,
          }}>
            {headline.sub}
          </FadeUp>

          <FadeUp delay={0.5} style={{
            marginTop: 52,
            display: 'flex', flexDirection: 'column', gap: 26,
          }}>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
              <button className="btn-primary" onClick={openWaitlist}>
                Apply for Beta
                <span className="arrow">→</span>
              </button>
              <a href="#shape" style={{
                fontFamily: 'var(--font-display)',
                fontSize: 14, color: 'var(--fg-mute)',
                textDecoration: 'none',
                padding: '16px 8px',
              }}>
                How it works
              </a>
            </div>
            <StatusPill>Currently accepting operators into the beta</StatusPill>
          </FadeUp>
        </div>

        {/* Side stat callouts */}
        <FadeUp delay={0.7} style={{
          position: 'absolute',
          right: 'clamp(24px, 6vw, 96px)',
          top: '50%',
          transform: 'translateY(-50%)',
          display: 'flex', flexDirection: 'column', gap: 28,
          textAlign: 'right',
        }} className="sig-stats">
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>
              Avg. traffic converted
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 48, letterSpacing: '-0.03em', marginTop: 6, color: 'var(--fg)' }}>
              3<span style={{ color: 'var(--fg-dim)' }}>%</span>
            </div>
          </div>
          <div style={{ width: 60, height: 1, background: 'var(--line-strong)', alignSelf: 'flex-end' }} />
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>
              Reached by Attora
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 48, letterSpacing: '-0.03em', marginTop: 6, color: 'var(--accent)' }}>
              97<span style={{ opacity: 0.5 }}>%</span>
            </div>
          </div>
        </FadeUp>
      </main>

      <SignalTicker />

      <style>{`
        @media (max-width: 900px) {
          .sig-stats { display: none !important; }
        }
      `}</style>
    </section>
  );
}

window.SignalVariation = SignalVariation;