/* App: design canvas with all pages */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "koshian",
  "fontset": "mincho",
  "density": "comfortable",
  "heroVariant": "split"
}/*EDITMODE-END*/;

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

  // Apply theme/font/density to root
  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", tweaks.theme);
    root.setAttribute("data-fontset", tweaks.fontset);
    root.setAttribute("data-density", tweaks.density);
  }, [tweaks.theme, tweaks.fontset, tweaks.density]);

  return (
    <>
      <DesignCanvas title="たっぷり庵 ホームページ・リデザイン" subtitle="温かみのある和モダン構成 ／ 創業2001年">
        <DCSection id="home" title="トップページ">
          <DCArtboard id="home-desktop" label="Home — Desktop (1440)" width={1440} height={3600}>
            <div className="page" data-screen-label="01 Home Desktop">
              <HomePage isMobile={false} heroVariant={tweaks.heroVariant} />
            </div>
          </DCArtboard>
          <DCArtboard id="home-mobile" label="Home — Mobile (390)" width={390} height={2400}>
            <div className="page page--mobile" data-screen-label="02 Home Mobile">
              <HomePage isMobile={true} heroVariant={tweaks.heroVariant === "tategaki" ? "tategaki" : "center"} />
            </div>
          </DCArtboard>
        </DCSection>

        <DCSection id="menu" title="メニュー">
          <DCArtboard id="menu-desktop" label="Menu — Desktop (1440)" width={1440} height={3000}>
            <div className="page" data-screen-label="03 Menu Desktop">
              <MenuPage isMobile={false} />
            </div>
          </DCArtboard>
          <DCArtboard id="menu-mobile" label="Menu — Mobile (390)" width={390} height={2400}>
            <div className="page page--mobile" data-screen-label="04 Menu Mobile">
              <MenuPage isMobile={true} />
            </div>
          </DCArtboard>
        </DCSection>

        <DCSection id="stores" title="店舗情報">
          <DCArtboard id="stores-desktop" label="Stores — Desktop (1440)" width={1440} height={2600}>
            <div className="page" data-screen-label="05 Stores Desktop">
              <StoresPage isMobile={false} />
            </div>
          </DCArtboard>
          <DCArtboard id="stores-mobile" label="Stores — Mobile (390)" width={390} height={2400}>
            <div className="page page--mobile" data-screen-label="06 Stores Mobile">
              <StoresPage isMobile={true} />
            </div>
          </DCArtboard>
        </DCSection>

        <DCSection id="recruit" title="採用情報">
          <DCArtboard id="recruit-desktop" label="Recruit — Desktop (1440)" width={1440} height={2400}>
            <div className="page" data-screen-label="07 Recruit Desktop">
              <RecruitPage isMobile={false} />
            </div>
          </DCArtboard>
          <DCArtboard id="recruit-mobile" label="Recruit — Mobile (390)" width={390} height={2200}>
            <div className="page page--mobile" data-screen-label="08 Recruit Mobile">
              <RecruitPage isMobile={true} />
            </div>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks">
        <TweakSection title="カラーテーマ">
          <TweakRadio
            label="あんこの種類"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "koshian", label: "こしあん" },
              { value: "kuriann", label: "くりあん" },
              { value: "matcha", label: "抹茶" },
            ]}
          />
        </TweakSection>
        <TweakSection title="フォント">
          <TweakRadio
            label="書体"
            value={tweaks.fontset}
            onChange={(v) => setTweak("fontset", v)}
            options={[
              { value: "mincho", label: "明朝" },
              { value: "gothic", label: "ゴシック" },
              { value: "hand", label: "手書き" },
            ]}
          />
        </TweakSection>
        <TweakSection title="レイアウト">
          <TweakRadio
            label="密度"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "comfortable", label: "ゆったり" },
              { value: "compact", label: "コンパクト" },
            ]}
          />
          <TweakSelect
            label="ヒーロー構成"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { value: "split", label: "左右分割（写真+テキスト）" },
              { value: "center", label: "中央揃え（シンプル）" },
              { value: "tategaki", label: "縦書き和風" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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