// Root app + Tweaks panel
//

const { useEffect: __useEffect } = React;

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

  // Theme class + accent + font CSS vars on <html>
  __useEffect(() => {
    const html = document.documentElement;
    html.classList.toggle("light", t.theme === "light");
    html.style.setProperty("--accent", t.accent);
    html.style.setProperty("--display", `"${t.displayFont}", "Inter", ui-sans-serif, system-ui, sans-serif`);
  }, [t.theme, t.accent, t.displayFont]);

  useReveal();
  const scrollY = useScrollY();

  return (
    <>
      <ShapeStyles />
      <div className="ambient" aria-hidden="true" />
      {t.showParticles && <Particles count={30} />}

      <div className="shell">
        <Nav name={t.name} />
        <Hero name={t.name} role={t.role} tagline={t.tagline} />
        <SkillsBar speed={t.marqueeSpeed} />
        <Timeline />

        {/* Floating scroll-driven 3D accent between projects / timeline */}
        <FloatingShape scrollY={scrollY} />

        <Projects />
        <Testimonials />
        <Contact />
        <Footer name={t.name} />
      </div>

      <TweaksPanel>
        <TweakSection label="Identity" />
        <TweakText label="Name" value={t.name} onChange={(v) => setTweak('name', v)} />
        <TweakText label="Role"  value={t.role} onChange={(v) => setTweak('role', v)} />
        <TweakText label="Tagline" value={t.tagline} onChange={(v) => setTweak('tagline', v)} />

        <TweakSection label="Theme" />
        <TweakRadio  label="Mode" value={t.theme} options={['dark', 'light']} onChange={(v) => setTweak('theme', v)} />
        <TweakColor  label="Accent" value={t.accent}
          options={['#7CC4FF', '#8B5CF6', '#10D9A6', '#F472B6', '#F59E0B']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSelect label="Display font" value={t.displayFont}
          options={['Space Grotesk', 'Inter', 'Geist', 'Manrope', 'JetBrains Mono']}
          onChange={(v) => setTweak('displayFont', v)} />

        <TweakSection label="Motion" />
        <TweakToggle label="Particles"      value={t.showParticles}
                     onChange={(v) => setTweak('showParticles', v)} />
        <TweakSlider label="Marquee speed"  value={t.marqueeSpeed} min={10} max={55} step={5}
                     onChange={(v) => setTweak('marqueeSpeed', v)} />
      </TweaksPanel>
    </>
  );
}

/* A second scroll-driven 3D shape that floats between sections.
   Positioned absolutely to the right; rotates as you scroll. */
function FloatingShape({ scrollY }) {
  const rotX = 20 + scrollY * 0.12;
  const rotY = scrollY * 0.22;
  const rotZ = -10 + scrollY * 0.05;
  return (
    <div aria-hidden="true" style={{
      position: "relative",
      width: "100%",
      pointerEvents: "none",
    }}>
      <div style={{
        position: "absolute",
        left: "8%",
        top: -100,
        width: 200, height: 200,
        opacity: 0.85,
      }}>
        <div className="scene" style={{ width: "100%", height: "100%", display: "grid", placeItems: "center" }}>
          <Ring size={180} rotateX={rotX} rotateY={rotY} rotateZ={rotZ} />
        </div>
      </div>

      <div style={{
        position: "absolute",
        right: "6%",
        top: 120,
        width: 180, height: 180,
        opacity: 0.85,
      }}>
        <div className="scene" style={{ width: "100%", height: "100%", display: "grid", placeItems: "center" }}>
          <Octahedron size={150} rotateX={-rotX * 0.8} rotateY={-rotY * 0.9} rotateZ={rotZ * 0.5} />
        </div>
      </div>
    </div>
  );
}

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