/* Portfolio app — language state + assembly */
function App() {
  const [lang, setLang] = React.useState('en');
  const dir = lang === 'ar' ? 'rtl' : 'ltr';
  const t = (obj) => (obj && typeof obj === 'object' && ('en' in obj) ? obj[lang] : obj);

  React.useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = dir;
    document.body.style.fontFamily = lang === 'ar' ? 'var(--font-body-ar)' : 'var(--font-body)';
  }, [lang, dir]);

  const shared = { t, lang, setLang, dir };
  return (
    <React.Fragment>
      <window.Nav {...shared} />
      <main>
        <window.Hero {...shared} />
        <window.About {...shared} />
        <window.Fesfori {...shared} />
        <window.Watch {...shared} />
        <window.Courses {...shared} />
        <window.Impact {...shared} />
        <window.Testimonials {...shared} />
        <window.Gallery {...shared} />
        <window.Contact {...shared} />
      </main>
      <window.Footer {...shared} />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);