// landing-app.jsx — root component, ColorBends wiring, full tweaks panel

const { useState, useEffect, useRef, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentPalette": "hynite",
  "heroLayout": "split",
  "ambientOn": true,
  "showGrain": false,
  "speed": 0.2,
  "scale": 1.2,
  "frequency": 1.1,
  "warpStrength": 1.1,
  "mouseInfluence": 0,
  "parallax": 0,
  "noise": 0.15,
  "iterations": 3,
  "intensity": 1.2,
  "bandWidth": 7,
  "rotation": 90,
  "autoRotate": 1,
  "alpha": 1.0
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  hynite:    { name: "Hynite",    colors: ["#e74dff", "#7a3df0", "#3a1880", "#0a0418"], glow: "#c44eff" },
  aurora:    { name: "Aurora",    colors: ["#5fe1f0", "#2cc6d8", "#0d3a4f", "#06121a"], glow: "#5fe1f0" },
  ember:     { name: "Ember",     colors: ["#ff7050", "#e8243e", "#5a0a18", "#190303"], glow: "#ff7050" },
  citrine:   { name: "Citrine",   colors: ["#ffcd6a", "#f29a1f", "#5a2d04", "#150a02"], glow: "#ffb84a" },
  forest:    { name: "Forest",    colors: ["#8af0c0", "#2ce0a8", "#0a3a26", "#04100a"], glow: "#2ce0a8" },
};

function HyniteLanding() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const canvasRef = useRef(null);
  const bendsRef = useRef(null);

  // Boot ColorBends once
  useEffect(() => {
    if (!canvasRef.current || bendsRef.current) return;
    const accent = ACCENT_PALETTES[t.accentPalette] || ACCENT_PALETTES.hynite;
    bendsRef.current = new window.HyniteColorBends(canvasRef.current, {
      colors: accent.colors,
      speed: t.speed, scale: t.scale, frequency: t.frequency, warpStrength: t.warpStrength,
      mouseInfluence: 0, parallax: 0, noise: t.noise,
      iterations: t.iterations, intensity: t.intensity, bandWidth: t.bandWidth,
      rotation: t.rotation, autoRotate: t.autoRotate, alpha: t.alpha,
    });
    document.documentElement.style.setProperty("--bp-glow", accent.glow);
    document.documentElement.style.setProperty("--bp-bg-base", "#08080b");
    return () => { bendsRef.current && bendsRef.current.destroy(); bendsRef.current = null; };
  }, []);

  // Apply tweak updates live
  useEffect(() => {
    if (!bendsRef.current) return;
    const accent = ACCENT_PALETTES[t.accentPalette] || ACCENT_PALETTES.hynite;
    bendsRef.current.setColors(accent.colors, 700);
    const o = bendsRef.current.opts;
    o.speed = t.speed; o.scale = t.scale; o.frequency = t.frequency;
    o.warpStrength = t.warpStrength; o.mouseInfluence = 0;
    o.parallax = 0; o.noise = t.noise; o.iterations = t.iterations;
    o.intensity = t.intensity; o.bandWidth = t.bandWidth;
    o.rotation = t.rotation; o.autoRotate = t.autoRotate;
    o.alpha = t.ambientOn ? t.alpha : 0.0;
    document.documentElement.style.setProperty("--bp-glow", accent.glow);
    document.documentElement.classList.toggle("no-grain", !t.showGrain);
  }, [t.accentPalette, t.speed, t.scale, t.frequency, t.warpStrength, t.mouseInfluence,
      t.parallax, t.noise, t.iterations, t.intensity, t.bandWidth,
      t.rotation, t.autoRotate, t.alpha, t.ambientOn, t.showGrain]);

  // Cover hovers use app-style local effects only. The background never reads
  // pointer position and does not change on mouse movement.
  const onHoverGame = useCallback((game) => {
    document.documentElement.style.setProperty("--cover-hover-glow", game.glow);
  }, []);

  const onLeaveGame = useCallback(() => {
    const accent = ACCENT_PALETTES[t.accentPalette] || ACCENT_PALETTES.hynite;
    document.documentElement.style.setProperty("--bp-glow", accent.glow);
    document.documentElement.style.removeProperty("--accent-text");
    document.documentElement.style.removeProperty("--cover-hover-glow");
  }, [t.accentPalette]);

  const onMoveGame = useCallback((game, xRatio) => {
    void game;
    void xRatio;
  }, []);

  const onPaletteShift = useCallback((game) => {
    document.documentElement.style.setProperty("--cover-hover-glow", game.glow);
  }, []);

  const scrollDown = () => {
    const el = document.getElementById("library");
    if (el) window.scrollTo({ top: el.offsetTop - 40, behavior: "smooth" });
  };

  return (
    <div className="page">
      <div className="bg-stack" aria-hidden="true">
        <div className="bg-base" />
        <canvas ref={canvasRef} className={`bg-bends ${t.ambientOn ? "" : "off"}`} />
        <div className="bg-vignette" />
        <div className="bg-grid" />
        {t.showGrain && <div className="bg-grain" />}
      </div>

      <div className="dark-zone">
        <Hero layout={t.heroLayout} onScroll={scrollDown} />
        <LibrarySection
          onHoverGame={onHoverGame}
          onLeaveGame={onLeaveGame}
          onMoveGame={onMoveGame}
        />
        <SpotlightSection onPaletteShift={onPaletteShift} />
        <SourcesSection />
      </div>
      <InstallFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakColor
          label="Accent"
          value={ACCENT_PALETTES[t.accentPalette].colors}
          options={Object.keys(ACCENT_PALETTES).map(k => ACCENT_PALETTES[k].colors)}
          onChange={(v) => {
            const key = Object.keys(ACCENT_PALETTES).find(k =>
              JSON.stringify(ACCENT_PALETTES[k].colors) === JSON.stringify(v)
            );
            if (key) setTweak("accentPalette", key);
          }}
        />

        <TweakSection label="Hero" />
        <TweakRadio
          label="Layout"
          value={t.heroLayout}
          options={["split", "centered"]}
          onChange={(v) => setTweak("heroLayout", v)}
        />

        <TweakSection label="ColorBends — flow" />
        <TweakSlider label="speed"           value={t.speed}          min={0}    max={1.0}  step={0.01} onChange={(v) => setTweak("speed", v)} />
        <TweakSlider label="scale"           value={t.scale}          min={0.3}  max={3.0}  step={0.05} onChange={(v) => setTweak("scale", v)} />
        <TweakSlider label="frequency"       value={t.frequency}      min={0.3}  max={3.0}  step={0.05} onChange={(v) => setTweak("frequency", v)} />
        <TweakSlider label="band width"      value={t.bandWidth}      min={1}    max={20}   step={0.5}  onChange={(v) => setTweak("bandWidth", v)} />
        <TweakSlider label="rotation"        value={t.rotation}       min={0}    max={360}  step={5}    onChange={(v) => setTweak("rotation", v)} />
        <TweakSlider label="auto rotate"     value={t.autoRotate}     min={0}    max={5}    step={0.1}  onChange={(v) => setTweak("autoRotate", v)} />

        <TweakSection label="ColorBends — warp" />
        <TweakSlider label="warp strength"   value={t.warpStrength}   min={0}    max={3.0}  step={0.05} onChange={(v) => setTweak("warpStrength", v)} />
        <TweakSlider label="iterations"      value={t.iterations}     min={1}    max={5}    step={1}    onChange={(v) => setTweak("iterations", v)} />
        <TweakSlider label="grain (noise)"   value={t.noise}          min={0}    max={1.0}  step={0.01} onChange={(v) => setTweak("noise", v)} />

        <TweakSection label="ColorBends — render" />
        <TweakSlider label="intensity"       value={t.intensity}      min={0.3}  max={2.0}  step={0.05} onChange={(v) => setTweak("intensity", v)} />
        <TweakSlider label="alpha"           value={t.alpha}          min={0}    max={1}    step={0.02} onChange={(v) => setTweak("alpha", v)} />
        <TweakToggle label="bends on"        value={t.ambientOn}                              onChange={(v) => setTweak("ambientOn", v)} />
        <TweakToggle label="film grain (css)" value={t.showGrain}                             onChange={(v) => setTweak("showGrain", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HyniteLanding />);