// App entry — router, language state, tweaks.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "poster",
  "accent": "ember",
  "density": "standard",
  "defaultLang": "ko"
}/*EDITMODE-END*/;

const ACCENTS = {
  ember:  { color: '#cc4a1c', tone: 'ember',  label: 'Ember' },
  forest: { color: '#3d6b3a', tone: 'forest', label: 'Forest' },
  dusk:   { color: '#445d7e', tone: 'dusk',   label: 'Dusk Blue' },
  mono:   { color: '#191712', tone: 'mono',   label: 'Monochrome' },
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState(() => {
    const h = (location.hash || '').replace('#', '');
    const ids = ['home','about','sermons','events','welcome','gallery','contact'];
    return ids.includes(h) ? h : 'home';
  });
  const [lang, setLang] = React.useState(tweaks.defaultLang || 'ko');

  React.useEffect(() => {
    history.replaceState(null, '', `#${route}`);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [route]);

  React.useEffect(() => {
    document.body.dataset.density = tweaks.density;
    const a = ACCENTS[tweaks.accent] || ACCENTS.ember;
    document.documentElement.style.setProperty('--accent', a.color);
  }, [tweaks.density, tweaks.accent]);

  React.useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  const t = CONTENT[lang];
  const accentObj = ACCENTS[tweaks.accent] || ACCENTS.ember;
  const accent = accentObj.color;
  const accentTone = accentObj.tone;

  const pageProps = { lang, t, setRoute, accent, accentTone };

  return (
    <>
      <Nav lang={lang} setLang={setLang} route={route} setRoute={setRoute} t={t} accent={accent} />
      {route === 'home'    && <HomePage    {...pageProps} layout={tweaks.heroLayout} />}
      {route === 'about'   && <AboutPage   {...pageProps} />}
      {route === 'sermons' && <SermonsPage {...pageProps} />}
      {route === 'events'  && <EventsPage  {...pageProps} />}
      {route === 'welcome' && <WelcomePage {...pageProps} />}
      {route === 'gallery' && <GalleryPage {...pageProps} />}
      {route === 'contact' && <ContactPage {...pageProps} />}
      {route !== 'contact' && route !== 'welcome' && (
        <CTABand lang={lang} t={t} setRoute={setRoute} accent={accent} />
      )}
      <Footer lang={lang} t={t} setRoute={setRoute} accent={accent} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakRadio
            label="Layout"
            value={tweaks.heroLayout}
            onChange={v => setTweak('heroLayout', v)}
            options={[
              { value: 'poster',    label: 'Poster' },
              { value: 'fullbleed', label: 'Full bleed' },
              { value: 'split',     label: 'Split' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Accent">
          <TweakRadio
            label="Color"
            value={tweaks.accent}
            onChange={v => setTweak('accent', v)}
            options={Object.entries(ACCENTS).map(([k, a]) => ({ value: k, label: a.label }))}
          />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio
            label="Spacing"
            value={tweaks.density}
            onChange={v => setTweak('density', v)}
            options={[
              { value: 'airy',     label: 'Airy' },
              { value: 'standard', label: 'Standard' },
              { value: 'compact',  label: 'Compact' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Language">
          <TweakRadio
            label="Default"
            value={tweaks.defaultLang}
            onChange={v => { setTweak('defaultLang', v); setLang(v); }}
            options={[
              { value: 'ko', label: '한국어' },
              { value: 'en', label: 'English' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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