/* global React, ReactDOM, window */
const { Hero, Work, WebWorks, Life, Footer } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "videoCropY": -50,
  "videoScale": 110,
  "glassIntensity": "medium",
  "showCornerMeta": true
}/*EDITMODE-END*/;

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

  // Apply tweaks via CSS variables on root
  React.useEffect(() => {
    document.documentElement.style.setProperty("--video-scale", (t.videoScale || 110) + "%");
    document.documentElement.style.setProperty("--video-y", (t.videoCropY || -50) + "%");
  }, [t.videoScale, t.videoCropY]);

  return (
    <div>
      <Hero />
      <window.MusicToggle />
      <Work />
      <WebWorks />
      <Life />
      <Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="首屏视频">
          <window.TweakSlider label="视频缩放" value={t.videoScale} min={100} max={140} step={1} unit="%"
            onChange={(v) => setTweak("videoScale", v)} />
          <window.TweakSlider label="纵向位置" value={t.videoCropY} min={-70} max={-30} step={1} unit="%"
            onChange={(v) => setTweak("videoCropY", v)} />
          <window.TweakToggle label="角落注释" value={t.showCornerMeta}
            onChange={(v) => setTweak("showCornerMeta", v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
}

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