/* Nexpersona - Top-level app */

const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [theme, toggleTheme] = window.useTheme();
  const [lang, setLang] = window.useLang();
  const [bannerDismissed, setBannerDismissed] = useStateApp(() => localStorage.getItem('nx_lang_banner_dismissed') === '1');
  const [tweaks, setTweak] = useTweaks(TWEAKS);
  window.useReveal();

  const scrollToStart = () => {
    const el = document.getElementById('start');
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 60;
    window.scrollTo({ top, behavior: 'smooth' });
  };

  const onAcceptLang = (code) => {
    setLang(code);
    setBannerDismissed(true);
    localStorage.setItem('nx_lang_banner_dismissed', '1');
  };
  const onDismissBanner = () => {
    setBannerDismissed(true);
    localStorage.setItem('nx_lang_banner_dismissed', '1');
  };

  return (
    <>
      <window.NXCursorAccent />
      <window.NXNav
        theme={theme}
        onToggleTheme={toggleTheme}
        lang={lang}
        onLang={setLang}
        onCTA={scrollToStart}
      />
      <window.NXHero variant={tweaks.heroVariant} onCTA={scrollToStart} />
      <window.NXProblem />
      <window.NXWho />
      <window.NXServices />
      <window.NXProcess />
      <window.NXWork />
      <window.NXWhy />
      <window.NXForm />
      <window.NXFooter theme={theme} onToggleTheme={toggleTheme} lang={lang} onLang={setLang} />

      {!bannerDismissed && <window.NXLangBanner lang={lang} onAccept={onAcceptLang} onDismiss={onDismissBanner} />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakRadio
            label="Hero variant"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={[
              { value: 'editorial', label: 'Editorial' },
              { value: 'typeonly', label: 'Type-only' },
              { value: 'glow', label: 'Glow' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Theme">
          <TweakRadio
            label="Mode"
            value={theme}
            onChange={(v) => { if (v !== theme) toggleTheme(); }}
            options={[{value:'light', label:'Light'}, {value:'dark', label:'Dark'}]}
          />
          <TweakColor
            label="Accent (sparing)"
            value={tweaks.accentAlt}
            onChange={(v) => {
              setTweak('accentAlt', v);
              document.documentElement.style.setProperty('--accent-alt', v);
            }}
            options={['#16264F', '#0A0A0B', '#C26A2A', '#1F6E4A']}
          />
        </TweakSection>
        <TweakSection label="Motion">
          <TweakToggle
            label="Cursor accent"
            value={tweaks.cursor}
            onChange={(v) => {
              setTweak('cursor', v);
              document.documentElement.style.setProperty('--cursor-on', v ? '1' : '0');
              const el = document.querySelector('.cursor-accent');
              if (el) el.style.display = v ? '' : 'none';
            }}
          />
          <TweakToggle
            label="Grain texture"
            value={tweaks.grain}
            onChange={(v) => {
              setTweak('grain', v);
              document.documentElement.style.setProperty('--grain', v ? (theme === 'dark' ? '0.06' : '0.04') : '0');
            }}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

  const TWEAKS = /*EDITMODE-BEGIN*/{
  "heroVariant": "editorial",
  "accentAlt": "#16264F",
  "cursor": true,
  "grain": true
}/*EDITMODE-END*/;

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