// App root
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "petals": true,
  "scanlines": true,
  "cursorRing": true,
  "accent": "magenta",
  "petalCount": 22
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  // Apply accent override
  useEffectA(() => {
    const map = {
      magenta: "oklch(0.72 0.28 340)",
      cyan:    "oklch(0.82 0.18 210)",
      rose:    "oklch(0.78 0.18 15)",
      gold:    "oklch(0.87 0.17 90)",
    };
    document.documentElement.style.setProperty("--magenta", map[tweaks.accent] || map.magenta);
  }, [tweaks.accent]);

  // Scanline toggle
  useEffectA(() => {
    document.body.style.setProperty("--scanline-op", tweaks.scanlines ? "0.02" : "0");
    const st = document.getElementById("scanline-style") || document.createElement("style");
    st.id = "scanline-style";
    st.textContent = tweaks.scanlines
      ? ""
      : "body::before{display:none!important}";
    if (!st.parentNode) document.head.appendChild(st);
  }, [tweaks.scanlines]);

  const handleNav = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
  };

  const {
    TopNav, SideRail, Ticker,
    Hero, Music, Club, Residencias, About, DataLinks, Footer,
    SakuraPetals, CursorRing, SoundWaveDivider,
    TweaksPanel, TweakSection, TweakToggle, TweakRadio, TweakSlider,
  } = window;

  return (
    <>
      {tweaks.petals && <SakuraPetals count={tweaks.petalCount} />}
      {tweaks.cursorRing && <CursorRing />}
      <SideRail />

      <TopNav onNav={handleNav} />
      <Ticker />

      <main className="page">
        <Hero />
      </main>

      <Music />

      <Club />

      <Residencias />

      <About />

      <DataLinks />

      <Footer />

      {TweaksPanel && (
        <TweaksPanel>
          <TweakSection label="Ambient FX" />
          <TweakToggle label="Sakura petals"  value={tweaks.petals}     onChange={v => setTweak("petals", v)} />
          <TweakToggle label="CRT scanlines"  value={tweaks.scanlines}  onChange={v => setTweak("scanlines", v)} />
          <TweakToggle label="Cursor ring"    value={tweaks.cursorRing} onChange={v => setTweak("cursorRing", v)} />
          <TweakSlider label="Petal density" value={tweaks.petalCount} min={0} max={60} step={2}
                       onChange={v => setTweak("petalCount", v)} />
          <TweakSection label="Accent" />
          <TweakRadio label="Primary hue" value={tweaks.accent}
                      options={[
                        {value: "magenta", label: "Magenta"},
                        {value: "cyan",    label: "Cyan"},
                        {value: "rose",    label: "Rose"},
                        {value: "gold",    label: "Gold"},
                      ]}
                      onChange={v => setTweak("accent", v)} />
        </TweaksPanel>
      )}
    </>
  );
}

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