// ============================================================
//  Sea Next Home — App entry
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "seabreeze",
  "heroVariant": "fade",
  "showFlowDetail": true
}/*EDITMODE-END*/;

function App() {
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  const tweaks = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : { values: TWEAK_DEFAULTS, setTweak: () => {} };
  const t = tweaks.values;

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme || "seabreeze");
  }, [t.theme]);

  // close drawer on resize-to-desktop
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 980 && drawerOpen) setDrawerOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [drawerOpen]);

  return (
    <React.Fragment>
      <Header onMenuClick={() => setDrawerOpen(true)} />
      <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} />
      <div className="header-spacer" />

      <main>
        <Hero />
        <Services />
        <Flow />
        <Strengths />
        <BeforeAfter />
        <Reviews />
        <InstagramGallery />
        <Faq />
        <Message />
        <Company />
        <Contact />
      </main>

      <Footer />

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="テーマカラー">
            <window.TweakRadio
              label="カラーパレット"
              value={t.theme}
              onChange={v => tweaks.setTweak("theme", v)}
              options={[
                { value: "seabreeze", label: "海風（標準）" },
                { value: "navy", label: "ネイビー" },
                { value: "ocean", label: "オーシャン" },
              ]}
            />
          </window.TweakSection>
          <window.TweakSection title="セクション表示">
            <window.TweakToggle
              label="詳細17ステップを表示"
              value={t.showFlowDetail}
              onChange={v => tweaks.setTweak("showFlowDetail", v)}
            />
          </window.TweakSection>
          <window.TweakSection title="ナビゲーション">
            <window.TweakButton onClick={() => document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" })}>
              お問い合わせへ移動
            </window.TweakButton>
            <window.TweakButton onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>
              トップへ戻る
            </window.TweakButton>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </React.Fragment>
  );
}

// react to showFlowDetail tweak
const observer = new MutationObserver(() => {
  const root = document.documentElement;
  // visibility is wired separately by direct DOM
});
// simple wire: hide flow-detail via CSS when tweak off
const style = document.createElement("style");
style.textContent = `
  [data-hide-flow-detail] #flow-detail { display: none; }
`;
document.head.appendChild(style);

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