// =====================================================
// App root — routing, language, theme, density
// =====================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "theme": "light",
  "density": "normal"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState(() => (location.hash.replace('#/', '') || 'home'));

  useEffect(() => {
    const onHash = () => setRoute(location.hash.replace('#/', '') || 'home');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  useEffect(() => {
    document.documentElement.setAttribute('data-lang', tweaks.lang);
    document.documentElement.setAttribute('data-theme', tweaks.theme);
    document.documentElement.setAttribute('data-density', tweaks.density);
    document.documentElement.setAttribute('dir', tweaks.lang === 'ar' ? 'rtl' : 'ltr');
    document.documentElement.setAttribute('lang', tweaks.lang);
  }, [tweaks.lang, tweaks.theme, tweaks.density]);

  const t = window.VH_I18N[tweaks.lang];
  const lang = tweaks.lang;

  const navigate = (key) => {
    location.hash = '#/' + key;
    setRoute(key);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  let Page = HomePage;
  switch (route) {
    case 'about': Page = AboutPage; break;
    case 'services': Page = ServicesPage; break;
    case 'experience': Page = ExperiencePage; break;
    case 'insights': Page = InsightsPage; break;
    case 'contact': Page = ContactPage; break;
    default: Page = HomePage;
  }

  return (
    <React.Fragment>
      <Header current={route} lang={lang} t={t} onNavigate={navigate}/>
      <main key={route + lang}>
        <Page t={t} lang={lang} onNavigate={navigate}/>
      </main>
      <Footer t={t} lang={lang} onNavigate={navigate}/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Language">
          <TweakRadio
            value={tweaks.lang}
            onChange={v => setTweak('lang', v)}
            options={[{ value: 'en', label: 'English' }, { value: 'ar', label: 'العربية' }]}
          />
        </TweakSection>
        <TweakSection title="Theme">
          <TweakRadio
            value={tweaks.theme}
            onChange={v => setTweak('theme', v)}
            options={[{ value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }]}
          />
        </TweakSection>
        <TweakSection title="Content density">
          <TweakRadio
            value={tweaks.density}
            onChange={v => setTweak('density', v)}
            options={[
              { value: 'compact', label: 'Compact' },
              { value: 'normal', label: 'Normal' },
              { value: 'spacious', label: 'Spacious' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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