/* global React */
/* Hero backdrop — hallucinating patterns. Pure shape + color, no words.
   Each scene animates on its own; the reel cross-fades through them. */

const { useState: hbUseState, useEffect: hbUseEffect } = React;

/* SCENE 1 — Logarithmic spiral, slowly rotating */
function SceneSpiral() {
  // Pre-compute a spiral path
  const points = [];
  for (let t = 0; t < 36; t += 0.05) {
    const r = 6 * Math.exp(0.16 * t);
    const x = 500 + Math.cos(t) * r;
    const y = 500 + Math.sin(t) * r;
    points.push(`${x.toFixed(1)},${y.toFixed(1)}`);
  }
  const d = "M" + points.join(" L");
  return (
    <div className="bgs bgs--spiral">
      <svg viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice">
        <g className="bgs-spin-slow">
          <path d={d} fill="none" stroke="#F4EFE6" strokeWidth="6" strokeLinecap="round" opacity="0.9" />
          <path d={d} fill="none" stroke="#E8FF00" strokeWidth="3" strokeLinecap="round" transform="rotate(180 500 500)" opacity="0.9" />
          <path d={d} fill="none" stroke="#0E0E0C" strokeWidth="2" strokeDasharray="6 14" strokeLinecap="round" transform="rotate(90 500 500)" opacity="0.45" />
        </g>
      </svg>
    </div>
  );
}

/* SCENE 2 — Grid that breathes & skews like perspective tilting */
function SceneGrid() {
  return (
    <div className="bgs bgs--grid">
      <div className="bgs-grid-plane"></div>
      <div className="bgs-grid-plane bgs-grid-plane--2"></div>
    </div>
  );
}

/* SCENE 3 — Concentric rings pulsing outward */
function SceneRings() {
  return (
    <div className="bgs bgs--rings">
      {Array.from({ length: 14 }).map((_, i) => (
        <span key={i} className="bgs-ring" style={{ animationDelay: `${i * 0.18}s` }} />
      ))}
    </div>
  );
}

/* SCENE 4 — Dot field that pulses and shifts */
function SceneDots() {
  return (
    <div className="bgs bgs--dots">
      <div className="bgs-dots-layer"></div>
      <div className="bgs-dots-layer bgs-dots-layer--2"></div>
    </div>
  );
}

/* SCENE 5 — Diagonal scrolling stripes */
function SceneStripes() {
  return (
    <div className="bgs bgs--stripes">
      <div className="bgs-stripes-a"></div>
      <div className="bgs-stripes-b"></div>
    </div>
  );
}

/* SCENE 6 — Sunray conic rotating */
function SceneRays() {
  return (
    <div className="bgs bgs--rays">
      <div className="bgs-rays-cone"></div>
      <div className="bgs-rays-cone bgs-rays-cone--inner"></div>
    </div>
  );
}

/* SCENE 7 — Moiré of two rotating grids */
function SceneMoire() {
  return (
    <div className="bgs bgs--moire">
      <div className="bgs-moire-layer"></div>
      <div className="bgs-moire-layer bgs-moire-layer--2"></div>
    </div>
  );
}

/* SCENE 8 — Sine wave field stacking */
function SceneWaves() {
  return (
    <div className="bgs bgs--waves">
      <svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
        {Array.from({ length: 14 }).map((_, i) => {
          const y = 80 + i * 70;
          const phase = i * 0.3;
          return (
            <path
              key={i}
              className="bgs-wave"
              style={{ animationDelay: `${-i * 0.7}s` }}
              d={`M -100 ${y} C 200 ${y - 80}, 500 ${y + 80}, 800 ${y - 80} S 1300 ${y + 80}, 1500 ${y}`}
              fill="none"
              stroke="currentColor"
              strokeWidth="3"
              strokeLinecap="round"
              opacity={1 - i * 0.05}
            />
          );
        })}
      </svg>
    </div>
  );
}

const SCENES = [SceneSpiral, SceneGrid, SceneRings, SceneDots, SceneStripes, SceneRays, SceneMoire, SceneWaves];

function HeroBackdrop() {
  const [i, setI] = hbUseState(0);
  const [flicker, setFlicker] = hbUseState(false);

  hbUseEffect(() => {
    const id = setInterval(() => {
      setFlicker(true);
      setTimeout(() => setI((x) => (x + 1) % SCENES.length), 90);
      setTimeout(() => setFlicker(false), 220);
    }, 4200);
    return () => clearInterval(id);
  }, []);

  return (
    <div className={`hero-backdrop ${flicker ? "is-flicker" : ""}`} aria-hidden="true">
      {SCENES.map((Scene, idx) => (
        <div key={idx} className={`scene-wrap ${idx === i ? "is-on" : ""}`}>
          <Scene />
        </div>
      ))}
      <div className="hero-backdrop__scan"></div>
      <div className="hero-backdrop__vignette"></div>
    </div>
  );
}

Object.assign(window, { HeroBackdrop });