/* ============================================================
   PETRI GAMES — App shell, routing, i18n, tweaks
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#CCFF00",
  "glow": 100,
  "headingFont": "Bricolage",
  "lightMode": false,
  "heroVariant": "centered"
}/*EDITMODE-END*/;

const FONT_MAP = {
  Bricolage: "'Bricolage Grotesque', system-ui, sans-serif",
  Montserrat: "'Montserrat', system-ui, sans-serif",
  Grotesk: "'Space Grotesk', system-ui, sans-serif",
};

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState('home');
  const [lang, setLang] = React.useState(() => {
    try { return localStorage.getItem('petri-lang') || 'en'; } catch (e) { return 'en'; }
  });

  React.useEffect(() => { try { localStorage.setItem('petri-lang', lang); } catch (e) {} }, [lang]);

  // apply tweaks to :root
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', tw.accent);
    r.style.setProperty('--glow', (tw.glow / 100).toFixed(2));
    r.style.setProperty('--font-head', FONT_MAP[tw.headingFont] || FONT_MAP.Bricolage);
    document.body.classList.toggle('theme-light', !!tw.lightMode);
  }, [tw]);

  const t = PETRI_I18N[lang];

  const PageComp = {
    home: HomePage,
    projects: ProjectsPage,
    services: ServicesPage,
    about: AboutPage,
    contact: ContactPage,
  }[route] || HomePage;

  return (
    <div className="app-wrap">
      <InfinityField seed={7} />
      <Nav route={route} setRoute={setRoute} lang={lang} setLang={setLang} t={t} />
      <main key={route + lang}>
        <PageComp t={t} lang={lang} heroVariant={tw.heroVariant}
                  setRoute={setRoute} projects={PETRI_PROJECTS} />
      </main>
      <Footer t={t} setRoute={setRoute} />

      <TweaksPanel title="Tweaks">
        <TweakSection label={lang === 'ru' ? 'Бренд' : 'Brand'} />
        <TweakColor label={lang === 'ru' ? 'Акцент' : 'Accent'} value={tw.accent}
                    options={['#CCFF00', '#FF6B2B', '#FFD60A']}
                    onChange={(v) => setTweak('accent', v)} />
        <TweakSlider label={lang === 'ru' ? 'Свечение' : 'Glow'} value={tw.glow}
                     min={0} max={170} unit="%" onChange={(v) => setTweak('glow', v)} />
        <TweakRadio label={lang === 'ru' ? 'Шрифт' : 'Headings'} value={tw.headingFont}
                    options={[{ value: 'Bricolage', label: 'Bricolage' }, { value: 'Montserrat', label: 'Montser.' }, { value: 'Grotesk', label: 'Grotesk' }]}
                    onChange={(v) => setTweak('headingFont', v)} />

        <TweakSection label={lang === 'ru' ? 'Тема и макет' : 'Theme & layout'} />
        <TweakToggle label={lang === 'ru' ? 'Светлая тема' : 'Light mode'} value={tw.lightMode}
                     onChange={(v) => setTweak('lightMode', v)} />
        <TweakRadio label={lang === 'ru' ? 'Герой' : 'Hero'} value={tw.heroVariant}
                    options={[{ value: 'split', label: lang === 'ru' ? 'Сплит' : 'Split' }, { value: 'centered', label: lang === 'ru' ? 'Центр' : 'Center' }, { value: 'stack', label: lang === 'ru' ? 'Стек' : 'Stack' }]}
                    onChange={(v) => setTweak('heroVariant', v)} />
      </TweaksPanel>
    </div>
  );
}

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