/* global React, ReactDOM */
// Rayu — main app shell. Loads hero + sections, wires up Tweaks.

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "vibe": "editorial",
  "accent": "#94f4cb",
  "dark": true,
  "videoUrl": "assets/hero.mp4"
}/*EDITMODE-END*/;

const VIBES = [
  { value: "editorial", label: "Editorial" },
  { value: "wellness", label: "Wellness" },
  { value: "athletic", label: "Athletic" }
];

const ACCENTS = ["#94f4cb", "#b8a4f0", "#ff7a59", "#c8ff5c", "#f4f4f0"];

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

  useEffect(() => {
    document.documentElement.dataset.vibe = t.vibe;
    document.documentElement.dataset.mode = t.dark ? "dark" : "light";
    document.documentElement.style.setProperty("--accent", t.accent);
    // Accent foreground: dark text on light accents, light text on dark
    const isLight = ["#94f4cb", "#c8ff5c", "#f4f4f0", "#b8a4f0"].includes(t.accent);
    document.documentElement.style.setProperty(
      "--accent-fg",
      isLight ? "#0a0a0a" : "#fafaf7"
    );
  }, [t.vibe, t.dark, t.accent]);

  return (
    <>
      <Nav />
      <Hero videoUrl={t.videoUrl} />
      <RayuScrollFeature videoSrc="assets/rayu_scroll.mp4" />
      <DailyHealth />
      <Worn247 />
      <CompletePicture />
      <Membership />
      <WornBy />
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Direction">
          <TweakRadio
            label="Vibe"
            value={t.vibe}
            options={VIBES}
            onChange={(v) => setTweak("vibe", v)}
          />
          <TweakToggle
            label="Dark mode"
            value={t.dark}
            onChange={(v) => setTweak("dark", v)}
          />
        </TweakSection>
        <TweakSection label="Theme">
          <TweakColor
            label="Accent"
            value={t.accent}
            options={ACCENTS}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection label="Hero video">
          <TweakText
            label="Video URL"
            value={t.videoUrl}
            placeholder="https://..."
            onChange={(v) => setTweak("videoUrl", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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