// Kevin Ortiz — Portfolio · App + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "white",
  "magnet": true,
  "reveal": true,
  "corners": true,
  "reelSpeed": 0.3,
  "glow": true,
  "glowSize": 240,
  "glowColor": "#FF2828",
  "glowFill": 0.28,
  "heroScan": "red",
  "heroBloom": 0.85,
  "heroOverlay": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Cursor-tracking spotlight — one rAF-throttled listener feeds every card.
  React.useEffect(() => {
    let x = -9999, y = -9999, raf = null;
    const flush = () => {
      document.documentElement.style.setProperty("--kx", x.toFixed(1));
      document.documentElement.style.setProperty("--ky", y.toFixed(1));
      raf = null;
    };
    const move = (e) => { x = e.clientX; y = e.clientY; if (!raf) raf = requestAnimationFrame(flush); };
    document.addEventListener("pointermove", move, { passive: true });
    return () => { document.removeEventListener("pointermove", move); if (raf) cancelAnimationFrame(raf); };
  }, []);

  React.useEffect(() => {
    document.body.dataset.glow = t.glow === false ? "off" : "on";
    document.documentElement.style.setProperty("--glow-size", String(t.glowSize != null ? t.glowSize : 240));
    const hex = (t.glowColor || "#FF2828").replace("#", "");
    const r = parseInt(hex.slice(0, 2), 16), g = parseInt(hex.slice(2, 4), 16), b = parseInt(hex.slice(4, 6), 16);
    document.documentElement.style.setProperty("--glow-rgb", `${r},${g},${b}`);
    document.documentElement.style.setProperty("--glow-fill", String(t.glowFill != null ? t.glowFill : 0.28));
  }, [t.glow, t.glowSize, t.glowColor, t.glowFill]);

  return (
    <KevCtx.Provider value={t}>
      <main style={{ overflowX: "clip" }}>
        <HeroSection />
        <ReelSection />
        <AboutSection />
        <FocusSection />
        <ProjectsSection />
        <FooterSection />
      </main>

      <TweaksPanel>
        <TweakSection label="Hero FX" />
        <TweakRadio label="Scan color" value={t.heroScan} options={["red", "white"]}
          onChange={(v) => setTweak("heroScan", v)} />
        <TweakSlider label="Bloom" value={t.heroBloom} min={0} max={2} step={0.05}
          onChange={(v) => setTweak("heroBloom", v)} />

        <TweakSection label="Headline" />
        <TweakRadio label="Fill" value={t.headline} options={["white", "bone", "outline"]}
          onChange={(v) => setTweak("headline", v)} />

        <TweakSection label="Spotlight" />
        <TweakToggle label="Cursor glow" value={t.glow} onChange={(v) => setTweak("glow", v)} />
        <TweakColor label="Glow color" value={t.glowColor}
          options={["#FF2828", "#FFFFFF", "#888888", "#F4F4F2"]}
          onChange={(v) => setTweak("glowColor", v)} />
        <TweakSlider label="Glow radius" value={t.glowSize} min={120} max={380} step={10} unit="px"
          onChange={(v) => setTweak("glowSize", v)} />
        <TweakSlider label="Fill intensity" value={t.glowFill} min={0} max={0.6} step={0.02}
          onChange={(v) => setTweak("glowFill", v)} />

        <TweakSection label="Motion" />
        <TweakToggle label="Scroll reveals" value={t.reveal} onChange={(v) => setTweak("reveal", v)} />
        <TweakToggle label="Magnetic portrait" value={t.magnet} onChange={(v) => setTweak("magnet", v)} />
        <TweakSlider label="Reel drift speed" value={t.reelSpeed} min={0.1} max={0.6} step={0.05}
          onChange={(v) => setTweak("reelSpeed", v)} />

        <TweakSection label="Blueprint" />
        <TweakToggle label="Corner ticks" value={t.corners} onChange={(v) => setTweak("corners", v)} />
      </TweaksPanel>
    </KevCtx.Provider>
  );
}

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