// App root — wires language context, palette overrides, and composes sections
const { createRoot } = ReactDOM;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "hanyang",
  "primary": "#003876",
  "accent":  "#cf9417",
  "heroStyle": "grid",
  "density": 1.0,
  "showStats": true
}/*EDITMODE-END*/;

function App() {
  const [lang, setLangState] = useState(() => localStorage.getItem('hy_lang') || 'ko');
  // 中文 변형: 'cn' 简体(기본 · 1차 타깃 = 중국 대륙) | 'tw' 繁體
  const [zhVariant, setZhVariantState] = useState(() => localStorage.getItem('hy_zh_variant') || 'cn');
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);

  const setLang = (l) => {
    setLangState(l);
    localStorage.setItem('hy_lang', l);
  };
  const setZhVariant = (v) => {
    setZhVariantState(v);
    localStorage.setItem('hy_zh_variant', v);
  };

  // reflect language on body (changes default font)
  useEffect(() => {
    document.body.setAttribute('data-lang', lang);
    document.documentElement.lang =
      lang === 'zh' ? (zhVariant === 'cn' ? 'zh-Hans' : 'zh-Hant')
      : lang === 'en' ? 'en' : 'ko';
  }, [lang, zhVariant]);

  // palette override via CSS vars
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--hy-primary', tweaks.primary);
    root.style.setProperty('--hy-accent',  tweaks.accent);
  }, [tweaks.primary, tweaks.accent]);

  // 中文은 zhVariant에 따라 간체(zhCN)/번체(zhTW) 본문을 스왑
  const i18nKey = lang === 'zh' ? (zhVariant === 'cn' ? 'zhCN' : 'zhTW') : lang;
  const t = I18N[i18nKey];
  const fontClass = lang === 'zh' ? (zhVariant === 'cn' ? 'font-sc' : 'font-tc') : LANG_FONT[lang];

  return (
    <LangCtx.Provider value={{ lang, t, setLang, zhVariant, setZhVariant }}>
      <div className={cx(fontClass, 'min-h-screen bg-white')}
           style={{ fontSize: `${tweaks.density * 16}px` }}>
        <Nav/>
        <main>
          <Hero/>
          <Features/>
          <Compare/>
          <Community/>
          <Rewards/>
          <AILoop/>
          <SocialProof/>
          <Pricing/>
          <GetApp/>
          <MobilePreview/>
        </main>
        <Footer/>
        <Tweaks tweaks={tweaks} setTweaks={setTweaks}/>
      </div>
    </LangCtx.Provider>
  );
}

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