/* Home Color — main app */
const { useState: useStateMain, useEffect: useEffectMain } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "preset": "warm",
  "primaryColor": "#B8753A",
  "deepColor": "#4A2C1A",
  "bgColor": "#F5EFE6",
  "fontScale": 1,
  "darkMode": false,
  "serif": "noto",
  "showMarquee": true,
  "rounded": 14
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  // Reset inline overrides first so preset CSS variables can take effect
  ["--hc-brand", "--hc-brand-d", "--hc-bg", "--hc-radius-lg", "--hc-serif"].forEach(k => root.style.removeProperty(k));

  root.dataset.preset = t.preset || "warm";
  root.dataset.theme = (t.preset === "lux" || t.darkMode) ? "dark" : "light";

  // Allow per-preset color customization (only when warm; modern/lux keep their preset palette unless user overrides)
  if (t.preset === "warm") {
    root.style.setProperty("--hc-brand", t.primaryColor);
    root.style.setProperty("--hc-brand-d", t.deepColor);
    root.style.setProperty("--hc-bg", t.bgColor);
    root.style.setProperty("--hc-radius-lg", t.rounded + "px");
    const serifMap = {
      noto: '"Noto Serif TC", serif',
      songti: '"Source Han Serif TC", "Noto Serif TC", serif',
      sans: '"Noto Sans TC", sans-serif',
    };
    root.style.setProperty("--hc-serif", serifMap[t.serif] || serifMap.noto);
  }
  root.style.setProperty("--hc-fs-base", (16 * t.fontScale) + "px");
}

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

  useEffectMain(() => { applyTweaks(tweaks); }, [tweaks]);

  // reveal on scroll
  useEffectMain(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add("in");
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    const observe = () => {
      document.querySelectorAll(".hc-reveal").forEach(el => io.observe(el));
    };
    const mo = new MutationObserver(observe);
    observe();
    mo.observe(document.getElementById("root"), { childList: true, subtree: true });
    return () => {
      io.disconnect();
      mo.disconnect();
    };
  }, []);

  return (
    <>
      <HCNav />
      <HCHero />
      {tweaks.showMarquee && <HCMarquee />}
      <HCAbout />
      <HCDrinks />
      <HCVisit />
      <HCNews />
      <HCFooter />
      <HCOnlineOrderFab />

      <TweaksPanel title="Tweaks · Home Color">
        <TweakSection title="版型風格">
          <TweakRadio
            label="Preset"
            value={tweaks.preset}
            onChange={v => setTweak("preset", v)}
            options={[
              { value: "warm", label: "居家暖" },
              { value: "modern", label: "現代極簡" },
              { value: "lux", label: "暗黑精品" },
            ]}
          />
        </TweakSection>

        <TweakSection title="色彩（暖色版型可調）">
          <TweakColor label="主色 / 橘棕" value={tweaks.primaryColor} onChange={v => setTweak("primaryColor", v)} />
          <TweakColor label="深色 / 屋頂棕" value={tweaks.deepColor} onChange={v => setTweak("deepColor", v)} />
          <TweakColor label="底色 / 米白" value={tweaks.bgColor} onChange={v => setTweak("bgColor", v)} />
        </TweakSection>

        <TweakSection title="字型 & 尺寸">
          <TweakSelect
            label="標題字體"
            value={tweaks.serif}
            onChange={v => setTweak("serif", v)}
            options={[
              { value: "noto", label: "Noto Serif TC（明體）" },
              { value: "songti", label: "思源宋體" },
              { value: "sans", label: "Noto Sans TC（黑體）" },
            ]}
          />
          <TweakSlider label="字級縮放" value={tweaks.fontScale} min={0.85} max={1.2} step={0.05} onChange={v => setTweak("fontScale", v)} />
          <TweakSlider label="圓角強度" value={tweaks.rounded} min={0} max={24} step={1} onChange={v => setTweak("rounded", v)} />
        </TweakSection>

        <TweakSection title="版型">
          <TweakToggle label="顯示跑馬燈" value={tweaks.showMarquee} onChange={v => setTweak("showMarquee", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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