/* Primitives.jsx
 * ------------------------------------------------------------
 * Atomic visual elements used across the site:
 *   - useRaf      : continuous-time hook (drives animations)
 *   - MountainMark: SVG ridge (logo)
 *   - Wordmark    : "zonda.markets" with terracotta period
 *   - WindStreaks : animated horizontal lines
 *   - Vortex      : slow-rotating spiral
 */

const { useState, useEffect, useRef } = React;

// Continuous time (seconds elapsed × speed)
function useRaf(speed = 1) {
  const [t, setT] = useState(0);
  useEffect(() => {
    let raf, last = performance.now();
    const tick = (now) => {
      const dt = (now - last) / 1000; last = now;
      setT((x) => x + dt * speed);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [speed]);
  return t;
}

// Zonda logo mark image.
function MountainMark({ size = 64 }) {
  return (
    <img
      src="logos/zonda_logo_black.png"
      alt="Zonda logo"
      style={{ width: size, height: "auto", display: "block" }}
    />
  );
}

// "zonda.markets" wordmark with terracotta period accent.
function Wordmark({ size = 36, color = "var(--ink)", accent = "var(--terracotta)" }) {
  return (
    <div style={{ fontFamily: "var(--title)", fontWeight: 500, fontSize: size,
                  letterSpacing: "0.01em", color, lineHeight: 1 }}>
      zonda<span style={{ color: accent }}>.</span>markets
    </div>
  );
}

// Animated horizontal streaks (wind-band).
function WindStreaks({ count = 38, color = "var(--terracotta)", area = [0, 0, 1280, 800], opacity = 1 }) {
  const t = useRaf(1);
  const seedsRef = useRef(null);
  if (!seedsRef.current) {
    seedsRef.current = Array.from({ length: count }, () => ({
      y: Math.random(),
      len: 60 + Math.random() * 280,
      speed: 140 + Math.random() * 220,
      delay: Math.random() * 8,
      thickness: 1 + Math.random() * 2.4,
      alpha: 0.35 + Math.random() * 0.55,
    }));
  }
  const [x0, y0, w, h] = area;
  return (
    <svg viewBox={`${x0} ${y0} ${w} ${h}`} preserveAspectRatio="none"
         style={{ position: "absolute", left: x0, top: y0, width: w, height: h, opacity, pointerEvents: "none" }}>
      {seedsRef.current.map((s, i) => {
        const period = (w + s.len + 200) / s.speed;
        const phase = ((t + s.delay) % period) / period;
        const x = x0 - s.len + phase * (w + s.len + 200);
        const y = y0 + s.y * h;
        return <line key={i} x1={x} y1={y} x2={x + s.len} y2={y}
                     stroke={color} strokeWidth={s.thickness}
                     strokeLinecap="round" opacity={s.alpha} />;
      })}
    </svg>
  );
}

// Slow rotating spiral (manifesto backdrop).
function Vortex({ cx, cy, maxR = 80, turns = 6, color = "var(--terracotta)",
                  strokeWidth = 1, speed = 0.4, opacity = 1 }) {
  const t = useRaf(speed);
  const samples = 200, totalA = turns * Math.PI * 2;
  let d = "";
  for (let i = 0; i <= samples; i++) {
    const a = (i / samples) * totalA + t * Math.PI * 2;
    const r = (i / samples) * maxR;
    d += (i === 0 ? "M" : "L") + ` ${(cx + Math.cos(a) * r).toFixed(1)} ${(cy + Math.sin(a) * r).toFixed(1)} `;
  }
  return <path d={d} fill="none" stroke={color} strokeWidth={strokeWidth} opacity={opacity}
               strokeLinecap="round" strokeLinejoin="round" />;
}

Object.assign(window, { useRaf, MountainMark, Wordmark, WindStreaks, Vortex });