// app.jsx — Saju MCP landing app shell + Tweaks
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "ko",
  "theme": "light",
  "accent": "#A26F3E",
  "density": "regular"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useStateApp(t.lang);

  useEffectApp(() => { setLang(t.lang); }, [t.lang]);
  const setLangBoth = (v) => { setLang(v); setTweak('lang', v); };

  useEffectApp(() => {
    document.documentElement.dataset.theme = t.theme === 'dark' ? 'dark' : 'light';
    document.documentElement.lang = t.lang;
  }, [t.theme, t.lang]);

  useEffectApp(() => {
    document.documentElement.style.setProperty('--amethyst', t.accent);
    document.documentElement.style.setProperty('--amethyst-deep',
      `color-mix(in oklab, ${t.accent} 65%, black)`);
  }, [t.accent]);

  useEffectApp(() => {
    const px = t.density === 'compact' ? 60 : t.density === 'comfy' ? 130 : 100;
    document.documentElement.style.setProperty('--block-pad', px + 'px');
  }, [t.density]);

  return (
    <React.Fragment>
      <Nav lang={lang} setLang={setLangBoth} />
      <main>
        <Hero lang={lang} />
        <Problem lang={lang} />
        <Solution lang={lang} />
        <Demo lang={lang} />
        <Personas lang={lang} />
        <Social lang={lang} />
        <PricingSection lang={lang} />
        <FAQ lang={lang} />
        <DevSection lang={lang} />
      </main>
      <Footer lang={lang} setLang={setLangBoth} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="언어 · Language" />
        <TweakRadio
          label="Locale"
          value={lang}
          options={[{ value: 'ko', label: '한국어' }, { value: 'en', label: 'English' }]}
          onChange={(v) => setLangBoth(v)}
        />
        <TweakSection label="테마 · Theme" />
        <TweakRadio
          label="Mode"
          value={t.theme}
          options={[{ value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }]}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={[
            '#A26F3E', // 황토 (default)
            '#B8462C', // 단청 적
            '#4A6B5C', // 대나무 청록
            '#3F4F7B', // 청람 (cool)
            '#1F1B16', // 먹
          ]}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSection label="여백 · Spacing" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            { value: 'compact', label: '좁게' },
            { value: 'regular', label: '보통' },
            { value: 'comfy',   label: '넓게' },
          ]}
          onChange={(v) => setTweak('density', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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