/* global React, ReactDOM, Nav, Hero, Marquee, Concept, Services, Voice, Profile, FAQ, Contact, Footer */
/* global TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakSelect */

const RAINBOW_OPTION = ["#ff3b3b", "#ffd400", "#4cc35a", "#4a7bff", "#a14cff"];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": ["#ff3b3b", "#ffd400", "#4cc35a", "#4a7bff", "#a14cff"],
  "displayFont": "zen"
}/*EDITMODE-END*/;

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

  // Apply tweaks
  React.useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.dataset.font = tweaks.displayFont;

    const a = tweaks.accent;
    if (Array.isArray(a)) {
      // Rainbow palette = default — clear overrides
      document.documentElement.style.removeProperty("--rainbow");
      document.documentElement.style.removeProperty("--rainbow-vert");
    } else {
      // Use a solid color in place of the rainbow
      document.documentElement.style.setProperty("--rainbow", `linear-gradient(90deg, ${a}, ${a})`);
      document.documentElement.style.setProperty("--rainbow-vert", `linear-gradient(180deg, ${a}, ${a})`);
    }
  }, [tweaks]);

  const scrollToForm = () => {
    const el = document.getElementById("contact");
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <>
      <Nav onContactClick={scrollToForm} />
      <Hero />
      <Marquee />
      <Concept />
      <Services />
      <Voice />
      <Profile />
      <FAQ />
      <Contact />
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="テーマ">
          <TweakRadio
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "light", label: "Light" },
              { value: "dark", label: "Dark" },
            ]}
          />
        </TweakSection>
        <TweakSection label="アクセント">
          <TweakColor
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              RAINBOW_OPTION,
              "#000000",
              "#06C755",
              "#4a7bff",
            ]}
          />
        </TweakSection>
        <TweakSection label="見出しの字体">
          <TweakRadio
            value={tweaks.displayFont}
            onChange={(v) => setTweak("displayFont", v)}
            options={[
              { value: "zen", label: "Zen" },
              { value: "noto", label: "Noto" },
              { value: "mplus", label: "M+" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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