// tweaks-app.jsx — Cafe Mock Tweaks
// TWEAK_DEFAULTS must stay in this file wrapped in EDITMODE markers for host persistence.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "classic",
  "bgColor": "#FBF7F0",
  "textColor": "#222222",
  "headingColor": "#3A2A1A",
  "accentColor": "#C8A97A",
  "borderColor": "#E0D5C5",
  "footerBg": "#3A2A1A",
  "fontPair": "serif-sans",
  "baseFontSize": 16,
  "headingWeight": 400,
  "headingLetterSpacing": 0,
  "logoLetterSpacing": 25,
  "contentWidth": 960,
  "sectionPadding": 6,
  "borderRadius": 8,
  "heroHeight": 560,
  "heroGrayscale": 20,
  "heroDarkness": 45,
  "heroPosition": "center",
  "heroKicker": "ようこそ、日々のひとときへ",
  "heroTitle": "静かな時間と\nおいしいコーヒーを",
  "heroSub": "こだわりの豆と丁寧な抽出で、特別な一杯をお届けします。",
  "menuDivider": "dotted",
  "menuLineHeight": 2.2,
  "menuCardOpacity": 100
}/*EDITMODE-END*/;

const PALETTES = {
  classic: { bgColor:'#FBF7F0', textColor:'#222222', headingColor:'#3A2A1A', accentColor:'#C8A97A', borderColor:'#E0D5C5', footerBg:'#3A2A1A' },
  cream:   { bgColor:'#FFFDF5', textColor:'#2C2418', headingColor:'#4A3520', accentColor:'#D4AA70', borderColor:'#EDE0C8', footerBg:'#4A3520' },
  mist:    { bgColor:'#F3F4F6', textColor:'#1F2937', headingColor:'#111827', accentColor:'#9CA3AF', borderColor:'#D1D5DB', footerBg:'#374151' },
  moss:    { bgColor:'#F1F4EF', textColor:'#1C2B1A', headingColor:'#2D4A2B', accentColor:'#6B9E5E', borderColor:'#C8D9C4', footerBg:'#2D4A2B' },
  dark:    { bgColor:'#1A1714', textColor:'#E8E0D5', headingColor:'#F5EDD8', accentColor:'#C8A97A', borderColor:'#3A3530', footerBg:'#0D0B09' },
};

const FONT_PAIRS = {
  'serif-sans': { heading:"'Fraunces', Georgia, serif",        body:"'Inter', 'Shippori Mincho', sans-serif" },
  'serif':      { heading:"'Fraunces', Georgia, serif",        body:"'Shippori Mincho', 'Hiragino Mincho ProN', serif" },
  'sans':       { heading:"'Inter', sans-serif",               body:"'Inter', sans-serif" },
  'mincho':     { heading:"'Shippori Mincho', 'Hiragino Mincho ProN', serif", body:"'Shippori Mincho', 'Hiragino Mincho ProN', serif" },
};

const HERO_ALIGN = { top:'flex-start', center:'center', bottom:'flex-end' };

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const root = document.documentElement;

  // Apply all tweaks → CSS custom properties
  React.useEffect(() => {
    const s = (k, v) => root.style.setProperty(k, v);

    // Colors
    s('--bg',        t.bgColor);
    s('--text',      t.textColor);
    s('--heading',   t.headingColor);
    s('--accent',    t.accentColor);
    s('--border',    t.borderColor);
    s('--footer-bg', t.footerBg);

    // Typography
    const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS['serif-sans'];
    s('--font-heading',  fp.heading);
    s('--font-body',     fp.body);
    s('--font-base',     t.baseFontSize + 'px');
    s('--heading-weight', String(t.headingWeight));
    s('--heading-ls',    (t.headingLetterSpacing / 100) + 'em');
    s('--logo-ls',       (t.logoLetterSpacing / 100) + 'em');

    // Layout
    s('--max-w',    t.contentWidth + 'px');
    s('--sec-pad',  t.sectionPadding + 'rem');
    s('--radius',   t.borderRadius + 'px');

    // Hero
    s('--hero-h',     t.heroHeight + 'px');
    s('--hero-gray',  t.heroGrayscale + '%');
    s('--hero-dark',  (t.heroDarkness / 100).toFixed(2));
    s('--hero-align', HERO_ALIGN[t.heroPosition] || 'center');

    // Hero text (DOM update)
    const kicker = document.getElementById('hero-kicker');
    const title  = document.getElementById('hero-title');
    const sub    = document.getElementById('hero-sub');
    if (kicker) kicker.textContent = t.heroKicker;
    if (title)  title.innerHTML    = t.heroTitle.replace(/\n/g, '<br>');
    if (sub)    sub.textContent    = t.heroSub;

    // Menu
    s('--menu-divider', t.menuDivider === 'none' ? 'none' : t.menuDivider);
    s('--menu-lh',      String(t.menuLineHeight));
    s('--menu-opacity', (t.menuCardOpacity / 100).toFixed(2));
  }, [t]);

  const applyPalette = (name) => {
    const p = PALETTES[name];
    if (p) setTweak({ palette: name, ...p });
  };

  return (
    <TweaksPanel title="Tweaks">

      <TweakSection label="カラー — プリセット" />
      <TweakSelect
        label="パレット"
        value={t.palette}
        options={[
          {value:'classic', label:'Classic（温かみ）'},
          {value:'cream',   label:'Cream（クリーム）'},
          {value:'mist',    label:'Mist（霧グレー）'},
          {value:'moss',    label:'Moss（苔グリーン）'},
          {value:'dark',    label:'Dark（ダーク）'},
        ]}
        onChange={applyPalette}
      />

      <TweakSection label="個別カラー" />
      <TweakColor label="背景"        value={t.bgColor}     onChange={v => setTweak('bgColor', v)} />
      <TweakColor label="本文"        value={t.textColor}   onChange={v => setTweak('textColor', v)} />
      <TweakColor label="見出し"      value={t.headingColor} onChange={v => setTweak('headingColor', v)} />
      <TweakColor label="アクセント"  value={t.accentColor}  onChange={v => setTweak('accentColor', v)} />
      <TweakColor label="罫線"        value={t.borderColor}  onChange={v => setTweak('borderColor', v)} />
      <TweakColor label="フッター背景" value={t.footerBg}    onChange={v => setTweak('footerBg', v)} />

      <TweakSection label="タイポグラフィ" />
      <TweakRadio
        label="字形ペア"
        value={t.fontPair}
        options={[
          {value:'serif-sans', label:'Serif+Sans'},
          {value:'serif',      label:'Serif'},
          {value:'sans',       label:'Sans'},
          {value:'mincho',     label:'明朝'},
        ]}
        onChange={v => setTweak('fontPair', v)}
      />
      <TweakSlider label="基準サイズ"    value={t.baseFontSize}        min={13} max={20} step={1}   unit="px"     onChange={v => setTweak('baseFontSize', v)} />
      <TweakSlider label="見出しウェイト" value={t.headingWeight}       min={300} max={700} step={100}             onChange={v => setTweak('headingWeight', v)} />
      <TweakSlider label="見出し字間"    value={t.headingLetterSpacing} min={-3} max={15}  step={1}  unit="/100em" onChange={v => setTweak('headingLetterSpacing', v)} />
      <TweakSlider label="ロゴ字間"      value={t.logoLetterSpacing}    min={0}  max={80}  step={1}  unit="/100em" onChange={v => setTweak('logoLetterSpacing', v)} />

      <TweakSection label="レイアウト" />
      <TweakSlider label="コンテンツ幅"   value={t.contentWidth}   min={720} max={1280} step={40} unit="px"  onChange={v => setTweak('contentWidth', v)} />
      <TweakSlider label="セクション余白" value={t.sectionPadding} min={3}   max={12}   step={1}  unit="rem" onChange={v => setTweak('sectionPadding', v)} />
      <TweakSlider label="角丸"          value={t.borderRadius}   min={0}   max={28}   step={1}  unit="px"  onChange={v => setTweak('borderRadius', v)} />

      <TweakSection label="ヒーロー" />
      <TweakSlider label="高さ"      value={t.heroHeight}    min={320} max={820} step={10} unit="px" onChange={v => setTweak('heroHeight', v)} />
      <TweakSlider label="モノクロ度" value={t.heroGrayscale} min={0}   max={100} step={5}  unit="%"  onChange={v => setTweak('heroGrayscale', v)} />
      <TweakSlider label="暗さ"      value={t.heroDarkness}  min={0}   max={75}  step={5}  unit="%"  onChange={v => setTweak('heroDarkness', v)} />
      <TweakRadio  label="コピー位置" value={t.heroPosition}
        options={[{value:'top',label:'上'},{value:'center',label:'中'},{value:'bottom',label:'下'}]}
        onChange={v => setTweak('heroPosition', v)} />
      <TweakText label="Kicker"   value={t.heroKicker} onChange={v => setTweak('heroKicker', v)} />
      <TweakText label="タイトル" value={t.heroTitle}  onChange={v => setTweak('heroTitle', v)} />
      <TweakText label="サブコピー" value={t.heroSub}  onChange={v => setTweak('heroSub', v)} />

      <TweakSection label="メニュー表示" />
      <TweakRadio label="区切り線" value={t.menuDivider}
        options={[
          {value:'dotted', label:'点線'},
          {value:'dashed', label:'破線'},
          {value:'solid',  label:'実線'},
          {value:'none',   label:'なし'},
        ]}
        onChange={v => setTweak('menuDivider', v)} />
      <TweakSlider label="行の高さ"    value={t.menuLineHeight}   min={1.0} max={3.5} step={0.1}        onChange={v => setTweak('menuLineHeight', v)} />
      <TweakSlider label="カード透過度" value={t.menuCardOpacity}  min={0}   max={100} step={5}  unit="%" onChange={v => setTweak('menuCardOpacity', v)} />

    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<TweaksApp />);