// app.jsx — Focused Plan A view (full-bleed standalone)

const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "palette": "rose",
  "headingFont": "shippori",
  "bodyFont": "sans",
  "showSideRail": true
}/*EDITMODE-END*/;

const PALETTES = {
  rose:   { '--pink-50':'#F1FAFB','--pink-100':'#E0F2F5','--pink-200':'#C7E8EE','--pink-300':'#9BD4DE','--pink-400':'#6BBBC9','--pink-500':'#3E9AAB' },
  blush:  { '--pink-50':'#EFF6FB','--pink-100':'#DCEAF4','--pink-200':'#BFD8EC','--pink-300':'#94B9DC','--pink-400':'#6E97C5','--pink-500':'#4A6FA5' },
  sand:   { '--pink-50':'#F0FAF6','--pink-100':'#DCF1E8','--pink-200':'#BCE3D4','--pink-300':'#8FCcB6','--pink-400':'#5FAE93','--pink-500':'#3C846B' },
  mauve:  { '--pink-50':'#F4F8FA','--pink-100':'#E4EDF1','--pink-200':'#C8D6DE','--pink-300':'#A3B6C1','--pink-400':'#7F94A1','--pink-500':'#5C7180' },
};

const PALETTE_OPTIONS = [
  ['#C7E8EE', '#E0F2F5', '#3E9AAB'],
  ['#BFD8EC', '#DCEAF4', '#4A6FA5'],
  ['#BCE3D4', '#DCF1E8', '#3C846B'],
  ['#C8D6DE', '#E4EDF1', '#5C7180'],
];
const PALETTE_KEYS = ['rose', 'blush', 'sand', 'mauve'];

const FONT_HEAD = {
  shippori:  '"Shippori Mincho", "Yu Mincho", serif',
  cormorant: '"Cormorant Garamond", "Times New Roman", serif',
  italiana:  '"Italiana", "Cormorant Garamond", serif',
  notoserif: '"Noto Serif JP", "Yu Mincho", serif',
};

const FONT_BODY = {
  sans:     '"Noto Sans JP", -apple-system, sans-serif',
  serif:    '"Shippori Mincho", "Yu Mincho", serif',
  notoserif:'"Noto Serif JP", "Yu Mincho", serif',
};

function applyTweaks(t) {
  const r = document.documentElement;
  const p = PALETTES[t.palette] || PALETTES.rose;
  Object.entries(p).forEach(([k, v]) => r.style.setProperty(k, v));
  r.style.setProperty('--serif-jp', FONT_HEAD[t.headingFont] || FONT_HEAD.shippori);
  r.style.setProperty('--sans-jp', FONT_BODY[t.bodyFont] || FONT_BODY.sans);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULS);

  React.useEffect(() => { applyTweaks(t); }, [t.palette, t.headingFont, t.bodyFont]);

  const currentSwatch = PALETTE_OPTIONS[PALETTE_KEYS.indexOf(t.palette)] || PALETTE_OPTIONS[0];

  return (
    <React.Fragment>
      <VariationA showSideRail={t.showSideRail !== false} />


      <TweaksPanel title="Tweaks">
        <TweakSection label="🎨 配色パレット">
          <TweakColor
            label="Palette"
            value={currentSwatch}
            options={PALETTE_OPTIONS}
            onChange={(swatch) => {
              const idx = PALETTE_OPTIONS.findIndex(p => p[0] === swatch[0]);
              setTweak('palette', PALETTE_KEYS[idx] || 'rose');
            }}
          />
        </TweakSection>
        <TweakSection label="📝 タイポグラフィ">
          <TweakSelect
            label="日本語見出し"
            value={t.headingFont}
            options={[
              { value: 'shippori',  label: 'Shippori Mincho（しっとり明朝）' },
              { value: 'notoserif', label: 'Noto Serif JP（モダン明朝）' },
              { value: 'cormorant', label: 'Cormorant（英セリフ風）' },
              { value: 'italiana',  label: 'Italiana（細身・優美）' },
            ]}
            onChange={(v) => setTweak('headingFont', v)}
          />
          <TweakSelect
            label="本文フォント"
            value={t.bodyFont}
            options={[
              { value: 'sans',      label: 'Noto Sans JP（可読性◎）' },
              { value: 'serif',     label: 'Shippori（統一感◎）' },
              { value: 'notoserif', label: 'Noto Serif JP' },
            ]}
            onChange={(v) => setTweak('bodyFont', v)}
          />
        </TweakSection>
        <TweakSection label="🔗 SNSサイドバー">
          <TweakToggle
            label="右側に固定表示"
            value={t.showSideRail !== false}
            onChange={(v) => setTweak('showSideRail', v)}
          />
        </TweakSection>
        <TweakSection label="ℹ️ ヒント">
          <div style={{ fontSize: 11, lineHeight: 1.7, color: 'rgba(255,255,255,0.6)', padding: '0 4px' }}>
            ・スクロールでフェードイン<br />
            ・120+セクションは画像が流れる（hover で停止）<br />
            ・写真は全てプレースホルダー
          </div>
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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