// Tweaks panel app wrapper

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#14224a",
  "accent": "#2a4691",
  "fontJp": "noto",
  "dark": false,
  "heroLayout": "split",
  "btnRadius": 10,
  "cardRadius": 16,
  "density": "regular"
}/*EDITMODE-END*/;

const FONT_OPTIONS = {
  noto:    `"Noto Sans JP", system-ui, sans-serif`,
  zen:     `"Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif`,
  mplus:   `"M PLUS 1p", "Noto Sans JP", system-ui, sans-serif`,
  shippori:`"Shippori Mincho", "Yu Mincho", serif`,
  klee:    `"Klee One", "Noto Sans JP", system-ui, sans-serif`,
};

function applyTweaks(t) {
  const root = document.documentElement;
  // Build derived primary scale from a single hex
  const primary = t.primaryColor;
  root.style.setProperty("--primary",     primary);
  root.style.setProperty("--primary-700", `color-mix(in oklab, ${primary} 80%, black)`);
  root.style.setProperty("--primary-600", primary);
  root.style.setProperty("--primary-500", t.accent);
  root.style.setProperty("--primary-100", `color-mix(in oklab, ${primary} 12%, white)`);
  root.style.setProperty("--primary-50",  `color-mix(in oklab, ${primary} 6%, white)`);
  root.style.setProperty("--btn-radius",  `${t.btnRadius}px`);
  root.style.setProperty("--card-radius", `${t.cardRadius}px`);
  root.style.setProperty("--font-jp", FONT_OPTIONS[t.fontJp] || FONT_OPTIONS.noto);
  root.dataset.theme = t.dark ? "dark" : "light";
  root.dataset.density = t.density;
}

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

  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  // 他ページから /#contact 等でアクセスされたとき、React レンダリング後にスクロール
  React.useEffect(() => {
    const hash = window.location.hash;
    if (!hash) return;
    const scrollToHash = () => {
      const el = document.querySelector(hash);
      if (el) {
        el.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    };
    // 少し待ってから実行（Reveal アニメーションの初期化も考慮）
    const timer = setTimeout(scrollToHash, 300);
    return () => clearTimeout(timer);
  }, []);

  return (
    <>
      <Header tweaks={tweaks} setTweak={setTweak} />
      <main>
        <Hero tweaks={tweaks} />
        <Pains />
        <Reasons />
        <Philosophy />
        <Services />
        <Works />
        <Pricing />
        <Flow />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakToggle label="ダークモード" value={tweaks.dark}
                     onChange={(v) => setTweak("dark", v)} />
        <TweakColor label="メインカラー" value={tweaks.primaryColor}
                    onChange={(v) => setTweak("primaryColor", v)} />
        <TweakColor label="アクセント" value={tweaks.accent}
                    onChange={(v) => setTweak("accent", v)} />

        <TweakSection label="Typography" />
        <TweakSelect label="日本語フォント" value={tweaks.fontJp}
                     onChange={(v) => setTweak("fontJp", v)}
                     options={[
                       { value: "noto",     label: "Noto Sans JP（標準）" },
                       { value: "zen",      label: "Zen Kaku Gothic New" },
                       { value: "mplus",    label: "M PLUS 1p" },
                       { value: "shippori", label: "Shippori Mincho（明朝）" },
                       { value: "klee",     label: "Klee One（手書き）" },
                     ]} />

        <TweakSection label="Layout" />
        <TweakRadio label="ヒーロー" value={tweaks.heroLayout}
                    options={[
                      { value: "split",    label: "Split" },
                      { value: "centered", label: "Center" },
                    ]}
                    onChange={(v) => setTweak("heroLayout", v)} />
        <TweakRadio label="密度" value={tweaks.density}
                    options={[
                      { value: "compact", label: "詰め" },
                      { value: "regular", label: "標準" },
                      { value: "comfy",   label: "ゆったり" },
                    ]}
                    onChange={(v) => setTweak("density", v)} />
        <TweakSlider label="ボタン角丸" value={tweaks.btnRadius} min={0} max={24} unit="px"
                     onChange={(v) => setTweak("btnRadius", v)} />
        <TweakSlider label="カード角丸" value={tweaks.cardRadius} min={0} max={24} unit="px"
                     onChange={(v) => setTweak("cardRadius", v)} />

        <TweakSection label="Presets" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          <TweakButton label="紺・青" secondary onClick={() => setTweak({ primaryColor: "#1e3a8a", accent: "#3b62c9" })} />
          <TweakButton label="ティール" secondary onClick={() => setTweak({ primaryColor: "#0f766e", accent: "#2dd4bf" })} />
          <TweakButton label="ネイビー＋橙" secondary onClick={() => setTweak({ primaryColor: "#0b2447", accent: "#ff8a3d" })} />
          <TweakButton label="モノトーン" secondary onClick={() => setTweak({ primaryColor: "#111827", accent: "#475569" })} />
        </div>
      </TweaksPanel>
    </>
  );
}

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