/* global React, ReactDOM */
const { useState: useAppState, useEffect: useAppEffect } = React;

function App() {
  const [route, setRoute] = useAppState('home');
  const [wiping, setWiping] = useAppState(false);
  const [tweaks, setTweak] = useTweaks(window.CS_TWEAK_DEFAULTS);

  // Hash routing
  useAppEffect(() => {
    const apply = () => {
      const h = window.location.hash.slice(1) || 'home';
      const validRoutes = ['home', 'about', 'youth', 'pro', 'faq', 'contact'];
      setRoute(validRoutes.includes(h) ? h : 'home');
    };
    apply();
    window.addEventListener('hashchange', apply);
    return () => window.removeEventListener('hashchange', apply);
  }, []);

  const navigate = (r) => {
    if (r === route) {
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
    setWiping(true);
    setTimeout(() => setWiping(false), 420);
    setRoute(r);
    window.location.hash = r;
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  let screen;
  switch (route) {
    case 'about':   screen = <AboutScreen   navigate={navigate} />; break;
    case 'youth':   screen = <YouthScreen   navigate={navigate} warmth={tweaks.youthWarmth} />; break;
    case 'pro':     screen = <ProScreen     navigate={navigate} />; break;
    case 'faq':     screen = <FAQScreen     navigate={navigate} />; break;
    case 'contact': screen = <ContactScreen navigate={navigate} />; break;
    default:        screen = <HomeScreen    navigate={navigate} tweaks={tweaks} />;
  }

  return (
    <div data-screen-label={`CentreStage · ${route}`}>
      <div className={'cs-wipe' + (wiping ? ' active' : '')} />
      <Nav route={route} navigate={navigate} />
      <div key={route}>
        {screen}
      </div>
      <Footer navigate={navigate} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Homepage hero" />
        <TweakRadio
          label="Variant" value={tweaks.heroVariant}
          options={['statement', 'marquee', 'split']}
          onChange={(v) => setTweak('heroVariant', v)}
        />
        <TweakToggle
          label="Accent highlight" value={tweaks.showAccent}
          onChange={(v) => setTweak('showAccent', v)}
        />

        <TweakSection label="Youth sign-up tone" />
        <TweakRadio
          label="Warmth" value={tweaks.youthWarmth}
          options={['warm', 'austere']}
          onChange={(v) => setTweak('youthWarmth', v)}
        />
      </TweaksPanel>

      <AccessibilityPanel />
    </div>
  );
}

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