/* global React, ReactDOM */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "lavender",
  "heroLayout": "blocks",
  "shadowStyle": "hard"
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  lavender: "var(--lavender)",
  mint: "var(--mint)",
  butter: "var(--butter)",
  rose: "var(--rose)",
  sky: "var(--sky)",
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = useState("home");
  const accent = ACCENT_MAP[t.accent] || "var(--lavender)";

  // smooth scroll on nav
  const onNav = (id) => {
    setActive(id);
    if (id === "home") {
      window.scrollTo({ top: 0, behavior: "smooth" });
    } else {
      const el = document.getElementById(id);
      if (el) {
        const y = el.getBoundingClientRect().top + window.scrollY - 70;
        window.scrollTo({ top: y, behavior: "smooth" });
      }
    }
  };

  // active section by scroll
  useEffect(() => {
    const onScroll = () => {
      const ids = ["home", "about", "curriculum", "apply", "contact"];
      const y = window.scrollY + 120;
      let cur = "home";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // shadow style apply
  useEffect(() => {
    const root = document.documentElement;
    if (t.shadowStyle === "soft") {
      root.style.setProperty("--shadow-pop", "0 8px 24px rgba(27,24,23,0.18)");
      root.style.setProperty("--shadow-pop-lg", "0 16px 48px rgba(27,24,23,0.2)");
    } else {
      root.style.setProperty("--shadow-pop", "4px 4px 0 var(--ink)");
      root.style.setProperty("--shadow-pop-lg", "8px 8px 0 var(--ink)");
    }
  }, [t.shadowStyle]);

  return (
    <div>
      <Header active={active} onNav={onNav} />
      <Hero onNav={onNav} accent={accent} />
      <About accent={accent} />
      <Curriculum accent={accent} />
      <Apply accent={accent} />
      <Contact />
      <Footer />

      <TweaksPanel>
        <TweakSection label="색상" />
        <TweakRadio label="포인트 색상"
          value={t.accent}
          options={["lavender", "mint", "butter", "rose", "sky"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="레이아웃" />
        <TweakRadio label="그림자 스타일"
          value={t.shadowStyle}
          options={["hard", "soft"]}
          onChange={(v) => setTweak("shadowStyle", v)} />
      </TweaksPanel>
    </div>
  );
}

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