/* global React, ReactDOM, TopNav, Hero, Analyzer, Records, Schedule, News, CustomModel, Features, Cta, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#00E49B", "#3F5AF3"],
  "hero": "terminal",
  "density": "normal",
  "cards": "default"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  ["#00E49B", "#3F5AF3"],
  ["#7CFFB2", "#00C2FF"],
  ["#A78BFA", "#F472B6"],
  ["#FBBF24", "#F97316"],
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = useState("hero");

  useEffect(() => {
    const [a1, a2] = t.accent || ACCENT_OPTIONS[0];
    document.documentElement.style.setProperty("--accent", a1);
    document.documentElement.style.setProperty("--accent-2", a2);
    document.documentElement.style.setProperty("--accent-glow", a1 + "59");
  }, [t.accent]);
  useEffect(() => {
    document.body.dataset.density = t.density;
    document.body.dataset.cards = t.cards;
  }, [t.density, t.cards]);

  useEffect(() => {
    const ids = ["hero", "analyzer", "records", "schedule", "news", "custom", "why"];
    const handler = () => {
      const y = window.scrollY + 120;
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", handler, { passive: true });
    handler();
    return () => window.removeEventListener("scroll", handler);
  }, []);

  const handleNav = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 72;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  return (
    <>
      <TopNav active={active} onNav={handleNav} />
      <main className="app">
        <Hero variant={t.hero} onCta={handleNav} />
        <Analyzer />
        <Records />
        <Schedule />
        <News />
        <CustomModel />
        <Features />
        <Cta />
      </main>

      <TweaksPanel title="設計微調 · Tweaks">
        <TweakSection label="主色調" />
        <TweakColor
          label="漸層色票"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Hero 變體" />
        <TweakRadio
          label="樣式"
          value={t.hero}
          options={[
            { value: "terminal", label: "終端機" },
            { value: "marketing", label: "行銷" },
            { value: "ticker", label: "跑馬燈" },
          ]}
          onChange={(v) => setTweak("hero", v)}
        />
        <TweakSection label="排版" />
        <TweakRadio
          label="資料密度"
          value={t.density}
          options={[
            { value: "tight", label: "緊湊" },
            { value: "normal", label: "標準" },
            { value: "loose", label: "寬鬆" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakRadio
          label="卡片樣式"
          value={t.cards}
          options={[
            { value: "default", label: "邊框" },
            { value: "glass", label: "玻璃" },
            { value: "flat", label: "扁平" },
          ]}
          onChange={(v) => setTweak("cards", v)}
        />
      </TweaksPanel>
    </>
  );
}

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