/* tweaks-app.jsx — RE:START tweak controls
   Mounts the Tweaks panel and applies live changes to the page:
   - hero variant (a/b/c)
   - accent palette (logo gradient stops)
   Persists to localStorage('restart.tweaks.v2') so the choice survives reloads
   and carries across pages (index ↔ company). */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "b",
  "accent": ["#0b3d6b", "#0f8a9e", "#26c4b8"],
  "headingScale": 100
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  ["#0b3d6b", "#0f8a9e", "#26c4b8"], // ティール（青緑）【標準】
  ["#1d4ea0", "#2682cf", "#37c4f2"], // ロゴ blue→cyan
  ["#213368", "#155dab", "#0da7e2"], // ディープブルー
  ["#15224e", "#3a4f86", "#7d8fc4"]  // ネイビーモノ
];

function applyTweaks(t){
  const root = document.documentElement;
  if (t.hero) root.setAttribute('data-hero', t.hero);
  if (Array.isArray(t.accent)) {
    root.style.setProperty('--acc-1', t.accent[0]);
    root.style.setProperty('--acc-2', t.accent[1]);
    root.style.setProperty('--acc-3', t.accent[2]);
  }
  if (t.headingScale) {
    root.style.setProperty('--heading-scale', (t.headingScale/100).toString());
  }
  try { localStorage.setItem('restart.tweaks.v2', JSON.stringify(t)); } catch(e){}
}

function loadSaved(){
  try {
    const s = JSON.parse(localStorage.getItem('restart.tweaks.v2') || '{}');
    return { ...TWEAK_DEFAULTS, ...s };
  } catch(e){ return { ...TWEAK_DEFAULTS }; }
}

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

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero（ヒーロー案）" />
      <TweakRadio
        label="レイアウト"
        value={t.hero}
        options={[
          { value: "b", label: "没入" },
          { value: "a", label: "分割" },
          { value: "c", label: "明るい" }
        ]}
        onChange={(v) => setTweak('hero', v)} />
      <p style={{margin:'2px 0 0',fontSize:'10.5px',lineHeight:1.5,color:'rgba(41,38,27,.5)'}}>
        没入＝ダーク全面 / 分割＝写真2分割 / 明るい＝ホワイト基調
      </p>

      <TweakSection label="アクセントカラー" />
      <TweakColor
        label="グラデーション"
        value={t.accent}
        options={ACCENT_OPTIONS}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="タイポグラフィ" />
      <TweakSlider
        label="見出しの大きさ"
        value={t.headingScale}
        min={85} max={120} step={5} unit="%"
        onChange={(v) => setTweak('headingScale', v)} />
    </TweaksPanel>
  );
}

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