// tweaks-app.jsx
// All tweak controls for the Cafe Mock homepage.
// Requires tweaks-panel.jsx to be loaded first (exports useTweaks, TweaksPanel, etc. to window).

const { useEffect } = React;

const PALETTES = {
  Classic: { bg:"#FBF7F0", text:"#222222", heading:"#3A2A1A", accent:"#D9C5A3", border:"#E8DCCB", footerBg:"#3A2A1A" },
  Cream:   { bg:"#FFFBF2", text:"#2E2418", heading:"#6B4C2A", accent:"#E8C98A", border:"#F0DEB8", footerBg:"#6B4C2A" },
  Mist:    { bg:"#F2F4F6", text:"#2C3036", heading:"#374151", accent:"#9DAEBE", border:"#CBD5DE", footerBg:"#374151" },
  Moss:    { bg:"#F1F3EF", text:"#1F2B1A", heading:"#2D4A20", accent:"#7A9B6A", border:"#B5C9A8", footerBg:"#2D4A20" },
  Dark:    { bg:"#181614", text:"#E0D8CC", heading:"#F2E8D8", accent:"#8B7355", border:"#3A3028", footerBg:"#0D0B09" },
};

const FONT_PAIRS = {
  serifSans: ["'Fraunces', Georgia, serif",         "'Inter', system-ui, sans-serif"],
  serif:     ["'Fraunces', Georgia, serif",         "'Fraunces', Georgia, serif"],
  sans:      ["'Inter', system-ui, sans-serif",     "'Inter', system-ui, sans-serif"],
  mincho:    ["'Shippori Mincho', 'Yu Mincho', serif", "'Shippori Mincho', 'Yu Mincho', serif"],
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Classic",
  "bg": "#FBF7F0",
  "text": "#222222",
  "heading": "#3A2A1A",
  "accent": "#D9C5A3",
  "border": "#E8DCCB",
  "footerBg": "#3A2A1A",
  "fontPair": "serifSans",
  "fontSize": 16,
  "headingWeight": 400,
  "headingTracking": 0,
  "logoTracking": 15,
  "contentWidth": 960,
  "sectionGap": 7,
  "radius": 8,
  "heroHeight": 580,
  "heroGrayscale": 0,
  "heroDarkness": 42,
  "heroAlign": "center",
  "heroKicker": "コーヒーと、静かな時間を。",
  "heroTitle": "A place to\npause.",
  "heroSub": "毎日をすこし、豊かにするカフェ",
  "menuBorder": "dotted",
  "menuLineH": 1.9,
  "cardOpacity": 1
}/*EDITMODE-END*/;

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

  useEffect(() => {
    const R = document.documentElement;
    const s = (k, v) => R.style.setProperty(k, v);

    // Colors
    s('--bg',        tweaks.bg);
    s('--text',      tweaks.text);
    s('--heading',   tweaks.heading);
    s('--accent',    tweaks.accent);
    s('--border',    tweaks.border);
    s('--footer-bg', tweaks.footerBg);

    // Override !important on html/body via injected style tag
    let over = document.getElementById('tweak-color-override');
    if (!over) {
      over = document.createElement('style');
      over.id = 'tweak-color-override';
      document.head.appendChild(over);
    }
    over.textContent = `html,body{background-color:${tweaks.bg}!important;color:${tweaks.text}!important;}`;

    // Typography
    const [fh, fb] = FONT_PAIRS[tweaks.fontPair] || FONT_PAIRS.serifSans;
    s('--font-heading',      fh);
    s('--font-body',         fb);
    s('--font-size',         tweaks.fontSize + 'px');
    s('--heading-weight',    tweaks.headingWeight);
    s('--heading-tracking',  (tweaks.headingTracking / 100) + 'em');
    s('--logo-tracking',     (tweaks.logoTracking / 100) + 'em');

    // Layout
    s('--content-width', tweaks.contentWidth + 'px');
    s('--section-gap',   tweaks.sectionGap + 'rem');
    s('--radius',        tweaks.radius + 'px');

    // Hero
    s('--hero-height',     tweaks.heroHeight + 'px');
    s('--hero-grayscale',  tweaks.heroGrayscale + '%');
    const brightness = Math.max(0.2, 1 - tweaks.heroDarkness / 120).toFixed(3);
    s('--hero-brightness', brightness);
    const overlay = (tweaks.heroDarkness / 100 * 0.8).toFixed(3);
    s('--hero-overlay',    overlay);
    const alignMap = { top: 'flex-start', center: 'center', bottom: 'flex-end' };
    s('--hero-align', alignMap[tweaks.heroAlign] || 'center');

    // Menu
    s('--menu-border',      tweaks.menuBorder === 'none' ? 'none' : tweaks.menuBorder);
    s('--menu-line-height', tweaks.menuLineH);
    s('--card-opacity',     tweaks.cardOpacity);

    // Hero DOM text
    const kicker = document.querySelector('.hero-kicker');
    const title  = document.querySelector('.hero-title');
    const sub    = document.querySelector('.hero-sub');
    if (kicker) kicker.textContent = tweaks.heroKicker;
    if (title)  title.innerHTML    = tweaks.heroTitle.replace(/\n/g, '<br>');
    if (sub)    sub.textContent    = tweaks.heroSub;
  }, [tweaks]);

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

  return (
    React.createElement(TweaksPanel, { title: 'Tweaks' },

      React.createElement(TweakSection, { label: 'カラー' },
        React.createElement(TweakSelect, {
          label: 'プリセット', value: tweaks.palette,
          options: Object.keys(PALETTES),
          onChange: v => applyPalette(v)
        }),
        React.createElement(TweakColor, { label: '背景',       value: tweaks.bg,        onChange: v => setTweak({ bg: v,        palette: 'custom' }) }),
        React.createElement(TweakColor, { label: '本文',       value: tweaks.text,      onChange: v => setTweak({ text: v,      palette: 'custom' }) }),
        React.createElement(TweakColor, { label: '見出し',     value: tweaks.heading,   onChange: v => setTweak({ heading: v,   palette: 'custom' }) }),
        React.createElement(TweakColor, { label: 'アクセント', value: tweaks.accent,    onChange: v => setTweak({ accent: v,    palette: 'custom' }) }),
        React.createElement(TweakColor, { label: '罫線',       value: tweaks.border,    onChange: v => setTweak({ border: v,    palette: 'custom' }) }),
        React.createElement(TweakColor, { label: 'フッター背景', value: tweaks.footerBg, onChange: v => setTweak({ footerBg: v, palette: 'custom' }) }),
      ),

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

      React.createElement(TweakSection, { label: 'レイアウト' },
        React.createElement(TweakSlider, { label: 'コンテンツ幅 px', value: tweaks.contentWidth, min: 720, max: 1280, step: 10, onChange: v => setTweak('contentWidth', v) }),
        React.createElement(TweakSlider, { label: 'セクション余白 rem', value: tweaks.sectionGap, min: 3, max: 12, step: 0.5, onChange: v => setTweak('sectionGap', v) }),
        React.createElement(TweakSlider, { label: '角丸 px', value: tweaks.radius, min: 0, max: 28, step: 1, onChange: v => setTweak('radius', v) }),
      ),

      React.createElement(TweakSection, { label: 'ヒーロー' },
        React.createElement(TweakSlider, { label: '高さ px',      value: tweaks.heroHeight,    min: 320, max: 820, step: 10, onChange: v => setTweak('heroHeight', v) }),
        React.createElement(TweakSlider, { label: 'モノクロ度 %', value: tweaks.heroGrayscale, min: 0,   max: 100, step: 1,  onChange: v => setTweak('heroGrayscale', v) }),
        React.createElement(TweakSlider, { label: '暗さ %',       value: tweaks.heroDarkness,  min: 0,   max: 75,  step: 1,  onChange: v => setTweak('heroDarkness', v) }),
        React.createElement(TweakRadio, {
          label: 'コピー位置', value: tweaks.heroAlign,
          options: [
            { value: 'top',    label: '上' },
            { value: 'center', label: '中' },
            { value: 'bottom', label: '下' },
          ],
          onChange: v => setTweak('heroAlign', v)
        }),
        React.createElement(TweakText, { label: 'kicker',            value: tweaks.heroKicker, onChange: v => setTweak('heroKicker', v) }),
        React.createElement(TweakText, { label: 'タイトル（\\nで改行）', value: tweaks.heroTitle,  onChange: v => setTweak('heroTitle', v) }),
        React.createElement(TweakText, { label: 'サブコピー',          value: tweaks.heroSub,    onChange: v => setTweak('heroSub', v) }),
      ),

      React.createElement(TweakSection, { label: 'メニュー表示' },
        React.createElement(TweakRadio, {
          label: '区切り線', value: tweaks.menuBorder,
          options: [
            { value: 'dotted', label: '点線' },
            { value: 'dashed', label: '破線' },
            { value: 'solid',  label: '実線' },
            { value: 'none',   label: 'なし' },
          ],
          onChange: v => setTweak('menuBorder', v)
        }),
        React.createElement(TweakSlider, { label: '行の高さ',    value: tweaks.menuLineH,   min: 1.4, max: 2.8, step: 0.1,  onChange: v => setTweak('menuLineH', v) }),
        React.createElement(TweakSlider, { label: 'カード透過度', value: tweaks.cardOpacity, min: 0.5, max: 1,   step: 0.05, onChange: v => setTweak('cardOpacity', v) }),
      )
    )
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(
  React.createElement(TweaksApp)
);