// app.jsx — root component, router state, tweaks

const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "ru",
  "accent": "blush",
  "layout": "grid",
  "pattern": "subtle",
  "darkNav": false
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = {
  blush: 'var(--blush)',
  clay:  'var(--clay)',
  sage:  '#9FAA8E',
  ink:   'var(--ink)',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState(() => {
    const hash = window.location.hash.replace('#', '');
    return ['gallery','about','order'].includes(hash) ? hash : 'home';
  });

  const [tgOpen, setTgOpen]             = useState(false);
  const [tgProduct, setTgProduct]       = useState(null);
  const [scrolled, setScrolled]         = useState(false);

  // apply accent var globally
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', ACCENT_OPTIONS[t.accent] || 'var(--blush)');
  }, [t.accent]);

  // scroll listener for nav state
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // scroll to top on route change
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
  }, [route]);

  const lang = t.lang;
  const copy = COPY[lang];
  const accent = ACCENT_OPTIONS[t.accent] || 'var(--blush)';

  const openTelegram = (p) => {
    setTgProduct(p && p.title ? p.title[lang] : null);
    setTgOpen(true);
  };


  return (
    <div className="relative min-h-screen">
      <Nav route={route} setRoute={setRoute} copy={copy} onOpenTelegram={() => openTelegram(null)} scrolled={scrolled} />

      {route === 'home'    && <HomePage    lang={lang} setRoute={setRoute} onOpenProduct={() => {}} onOpenTelegram={() => openTelegram(null)} accent={accent} pattern={t.pattern} />}
      {route === 'gallery' && <GalleryPage lang={lang} onOpenProduct={() => {}} layout={t.layout} accent={accent} pattern={t.pattern} />}
      {route === 'about'   && <AboutPage   lang={lang} onOpenTelegram={() => openTelegram(null)} setRoute={setRoute} accent={accent} pattern={t.pattern} />}
      {route === 'order'   && <OrderPage   lang={lang} onOpenTelegram={() => openTelegram(null)} setRoute={setRoute} accent={accent} pattern={t.pattern} />}

      <Footer copy={copy} onOpenTelegram={() => openTelegram(null)} setRoute={setRoute} />

      <TelegramModal open={tgOpen} onClose={() => setTgOpen(false)} copy={copy} productTitle={tgProduct} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Язык / Language" />
        <TweakRadio label="Язык" value={t.lang}
                    options={[{ value: 'ru', label: 'RU' }, { value: 'en', label: 'EN' }]}
                    onChange={(v) => setTweak('lang', v)} />

        <TweakSection label="Акцент" />
        <TweakSelect label="Цвет акцента" value={t.accent}
                     options={[
                       { value: 'blush', label: 'Пудра' },
                       { value: 'clay',  label: 'Глина' },
                       { value: 'sage',  label: 'Шалфей' },
                       { value: 'ink',   label: 'Уголь' },
                     ]}
                     onChange={(v) => setTweak('accent', v)} />

        <TweakSection label="Каталог" />
        <TweakSelect label="Раскладка" value={t.layout}
                     options={[
                       { value: 'grid',      label: 'Регулярная сетка' },
                       { value: 'masonry',   label: 'Кладка' },
                       { value: 'editorial', label: 'Редакторская' },
                     ]}
                     onChange={(v) => setTweak('layout', v)} />

        <TweakSection label="Фон" />
        <TweakSelect label="Линии" value={t.pattern}
                     options={[
                       { value: 'off',     label: 'Нет' },
                       { value: 'subtle',  label: 'Тихо' },
                       { value: 'regular', label: 'Норм' },
                       { value: 'strong',  label: 'Громко' },
                     ]}
                     onChange={(v) => setTweak('pattern', v)} />

        <TweakSection label="Переход" />
        <TweakButton label="Главная"  onClick={() => { setRoute('home');    setProductId(null); }} />
        <TweakButton label="Каталог"  onClick={() => { setRoute('gallery'); setProductId(null); }} />
        <TweakButton label="О нас"    onClick={() => { setRoute('about');   setProductId(null); }} />
        <TweakButton label="Заказ"    onClick={() => { setRoute('order');   setProductId(null); }} />

      </TweaksPanel>
    </div>
  );
}

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