// app.jsx — main app: design canvas with desktop + mobile artboards, tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "casual",
  "fonts": "rounded",
  "hero": "editorial",
  "layout": "two-col",
  "cardStyle": "bordered",
  "dark": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const vars = getThemeVars(t);

  return (
    <div style={{ ...vars }}>
      <DesignCanvas>
        <DCSection id="desktop" title="デスクトップ" subtitle="1280px グリッド · 信頼感重視レイアウト">
          <DCArtboard id="top-d" label="トップページ" width={1280} height={2400}>
            <TopPage t={t} mobile={false} />
          </DCArtboard>
          <DCArtboard id="rank-d" label="ランキング詳細" width={1280} height={2100}>
            <RankingPage t={t} mobile={false} />
          </DCArtboard>
          <DCArtboard id="art-d" label="記事ページ" width={1280} height={2000}>
            <ArticlePage t={t} mobile={false} />
          </DCArtboard>
        </DCSection>

        <DCSection id="mobile" title="モバイル" subtitle="iPhone 14 Pro 幅 (390px)">
          <DCArtboard id="top-m" label="トップ" width={390} height={2200}>
            <TopPage t={t} mobile={true} />
          </DCArtboard>
          <DCArtboard id="rank-m" label="ランキング" width={390} height={2100}>
            <RankingPage t={t} mobile={true} />
          </DCArtboard>
          <DCArtboard id="art-m" label="記事" width={390} height={2000}>
            <ArticlePage t={t} mobile={true} />
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel>
        <TweakSection label="テーマ" />
        <TweakSelect
          label="カラーテーマ"
          value={t.theme}
          options={[
            { value: 'casual',  label: 'カジュアル (コーラル)' },
            { value: 'peach',   label: 'ピーチ (柔らか)' },
            { value: 'mint',    label: 'ミント (さわやか)' },
            { value: 'luxe',    label: 'リュクス (シャンパンゴールド)' },
            { value: 'noir',    label: 'ノワール (黒×金)' },
            { value: 'navy',    label: 'ネイビー (信頼)' },
            { value: 'forest',  label: 'フォレスト (落ち着き)' },
            { value: 'crimson', label: 'クリムゾン (情熱)' },
            { value: 'ink',     label: 'インク (シック)' },
          ]}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakToggle label="ダークモード" value={t.dark} onChange={(v) => setTweak('dark', v)} />

        <TweakSection label="タイポグラフィ" />
        <TweakSelect
          label="フォント"
          value={t.fonts}
          options={[
            { value: 'rounded', label: '丸ゴシック (カジュアル)' },
            { value: 'hybrid', label: '明朝見出し × ゴシック本文' },
            { value: 'serif',  label: '明朝統一 (高級感)' },
            { value: 'sans',   label: 'ゴシック統一' },
          ]}
          onChange={(v) => setTweak('fonts', v)}
        />

        <TweakSection label="レイアウト" />
        <TweakRadio
          label="ヒーロー"
          value={t.hero}
          options={[
            { value: 'editorial', label: '編集型' },
            { value: 'minimal',   label: 'ミニマル' },
            { value: 'ticker',    label: 'ティッカー' },
          ]}
          onChange={(v) => setTweak('hero', v)}
        />
        <TweakRadio
          label="カラム"
          value={t.layout}
          options={[
            { value: 'two-col', label: '2カラム' },
            { value: 'one-col', label: '1カラム' },
          ]}
          onChange={(v) => setTweak('layout', v)}
        />
        <TweakRadio
          label="カードデザイン"
          value={t.cardStyle}
          options={[
            { value: 'bordered', label: '罫線' },
            { value: 'flat',     label: 'フラット' },
            { value: 'elevated', label: '浮き出し' },
          ]}
          onChange={(v) => setTweak('cardStyle', v)}
        />
      </TweaksPanel>
    </div>
  );
}

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