// app.jsx — main App with state-based routing + tweaks
const { useState: __aS, useEffect: __aE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "homeLayout": "slider",
  "hoverMode": "crossfade",
  "titleFont": "bodoni",
  "cursor": true,
  "pageFade": "warm",
  "splash": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // Start on splash unless user disabled it
  const [route, setRoute] = __aS(() => (t.splash ? { name: 'splash' } : { name: 'index' }));
  const [lang, setLang] = __aS('fr');

  // Apply title font selection at root
  __aE(() => {
    const FAMILIES = {
      bodoni:     `'Bodoni Moda', 'Bodoni 72', 'Didot', 'Times New Roman', serif`,
      dmserif:    `'DM Serif Display', 'Times New Roman', serif`,
      italiana:   `'Italiana', 'Bodoni Moda', 'Times New Roman', serif`,
      newsreader: `'Newsreader', 'Times New Roman', serif`,
      fraunces:   `'Fraunces', 'Times New Roman', serif`,
    };
    document.documentElement.style.setProperty(
      '--font-serif',
      FAMILIES[t.titleFont] || FAMILIES.bodoni
    );
    // Bodoni & Italiana have higher x-height contrast — tighten optical sizing.
    const isDidone = t.titleFont === 'bodoni' || t.titleFont === 'italiana' || t.titleFont === 'dmserif';
    document.documentElement.style.setProperty(
      '--serif-tracking',
      isDidone ? '-0.025em' : '-0.015em'
    );
    document.documentElement.classList.toggle('serif-didone', isDidone);
  }, [t.titleFont]);

  // Apply veil color
  __aE(() => {
    document.documentElement.style.setProperty(
      '--veil-color',
      t.pageFade === 'noir' ? 'var(--ink)' : 'var(--bg)'
    );
  }, [t.pageFade]);

  // If user toggles splash on while not on splash, jump back to splash.
  // If user toggles splash off while on splash, jump to index.
  __aE(() => {
    if (!t.splash && route.name === 'splash') setRoute({ name: 'index' });
  }, [t.splash, route.name]);

  const i18n = window.JP_DATA.i18n;
  const tr = i18n[lang];
  const series = window.JP_DATA.series;

  __aE(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [route.name, route.id, route.filter]);

  const navigate = (next) => {
    setRoute((prev) => {
      if (prev.name === next.name && prev.id === next.id && (prev.filter || null) === (next.filter || null)) {
        return prev;
      }
      // Special: brand click goes to splash if enabled, otherwise index
      if (next.name === 'splash' && !t.splash) return { name: 'index' };
      return next;
    });
  };

  const routeKey = `${route.name}:${route.id || ''}:${route.filter || ''}`;
  const onSplash = route.name === 'splash';
  const onSlider = route.name === 'index' && t.homeLayout === 'slider';

  let screen = null;
  if (route.name === 'splash') {
    screen = <SplashScreen t={tr} lang={lang} navigate={navigate} series={series} />;
  } else if (route.name === 'index') {
    if (t.homeLayout === 'slider') {
      screen = <SliderScreen t={tr} lang={lang} route={route} navigate={navigate} tweaks={t} />;
    } else {
      screen = (
        <IndexScreen t={tr} lang={lang} route={route} navigate={navigate} tweaks={t} />
      );
    }
  } else if (route.name === 'series') {
    screen = <SeriesScreen t={tr} lang={lang} route={route} navigate={navigate} />;
  } else if (route.name === 'information') {
    screen = <InformationScreen t={tr} lang={lang} navigate={navigate} />;
  } else if (route.name === 'contact') {
    screen = <ContactScreen t={tr} lang={lang} />;
  }

  return (
    <React.Fragment>
      <Cursor enabled={!!t.cursor} />
      <Header
        route={route}
        navigate={navigate}
        lang={lang}
        setLang={setLang}
        t={tr}
        onSplash={onSplash}
      />
      <div key={routeKey} className={`route-mount ${onSplash ? 'is-splash' : ''} ${onSlider ? 'is-slider' : ''}`}>
        {screen}
      </div>
      {!onSplash && !onSlider ? <Footer t={tr} navigate={navigate} /> : null}
      <PageVeil routeKey={routeKey} />
    </React.Fragment>
  );
}

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