// tweaks-app.jsx — Tweaks パネル本体。値は :root の CSS 変数 / data 属性に反映する。
// 本文は素の HTML のまま（直接編集しやすい）、ここでは見た目トークンだけを差し替える。

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C9A75A",
  "headingFont": "zen",
  "headingScale": 1,
  "animations": true,
  "heroLine1": "礼から、",
  "heroLine2": "つよさ",
  "heroLine3": "は",
  "heroLine4": "はじまる。"
}/*EDITMODE-END*/;

// アクセント色ごとの「上に乗る文字色」
const ACCENT_INK = {
  "#C9A75A": "#1A1408", // 真鍮ゴールド
  "#3FB8A0": "#04211C", // 藍緑（ジェイド）
  "#6E8BFF": "#0A1030"  // 群青ブルー
};

const HEADING_FONTS = {
  zen:      '"Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif',
  shippori: '"Shippori Gothic", "Noto Sans JP", serif',
  noto:     '"Noto Sans JP", system-ui, sans-serif'
};

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', t.accent);
    r.style.setProperty('--accent-ink', ACCENT_INK[t.accent] || '#10131a');
    r.style.setProperty('--hfont', HEADING_FONTS[t.headingFont] || HEADING_FONTS.zen);
    r.style.setProperty('--hscale', t.headingScale);
    document.body.setAttribute('data-anim', t.animations ? '1' : '0');
  }, [t.accent, t.headingFont, t.headingScale, t.animations]);

  // ヒーロー見出しのライブ書き換え
  React.useEffect(() => {
    const h = document.querySelector('.hero .display');
    if (!h) return;
    h.innerHTML = `${escapeHtml(t.heroLine1)}<br><span class="accent">${escapeHtml(t.heroLine2)}</span>${escapeHtml(t.heroLine3)}<br>${escapeHtml(t.heroLine4)}`;
  }, [t.heroLine1, t.heroLine2, t.heroLine3, t.heroLine4]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="アクセント（1色）" />
      <TweakColor label="アクセント色" value={t.accent}
        options={["#C9A75A", "#3FB8A0", "#6E8BFF"]}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="タイポグラフィ" />
      <TweakSelect label="見出しフォント" value={t.headingFont}
        options={[
          { value: 'zen', label: 'Zen Kaku Gothic（既定）' },
          { value: 'shippori', label: 'Shippori Gothic' },
          { value: 'noto', label: 'Noto Sans JP' }
        ]}
        onChange={(v) => setTweak('headingFont', v)} />
      <TweakSlider label="見出しサイズ" value={t.headingScale} min={0.8} max={1.25} step={0.01}
        unit="×" onChange={(v) => setTweak('headingScale', v)} />

      <TweakSection label="ヒーロー見出し" />
      <TweakText label="1行目" value={t.heroLine1} onChange={(v) => setTweak('heroLine1', v)} />
      <TweakText label="2行目（強調）" value={t.heroLine2} onChange={(v) => setTweak('heroLine2', v)} />
      <TweakText label="2行目（続き）" value={t.heroLine3} onChange={(v) => setTweak('heroLine3', v)} />
      <TweakText label="3行目" value={t.heroLine4} onChange={(v) => setTweak('heroLine4', v)} />

      <TweakSection label="演出" />
      <TweakToggle label="スクロール演出" value={t.animations}
        onChange={(v) => setTweak('animations', v)} />
    </TweaksPanel>
  );
}

function escapeHtml(s) {
  return String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
}

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