// app.jsx — Mount, route to pages, wire tweaks.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "redIntensity": 1
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply red intensity to CSS custom property
  React.useEffect(() => {
    document.documentElement.style.setProperty('--red-intensity', String(t.redIntensity));
  }, [t.redIntensity]);

  return (
    <RouterProvider>
      <RouteSwitch />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakSlider
          label="Red intensity"
          value={t.redIntensity}
          min={0}
          max={1.6}
          step={0.05}
          format={(v) => v.toFixed(2) + '×'}
          onChange={(v) => setTweak('redIntensity', v)}
        />
        <div style={{ fontSize: 11, color: 'rgba(41,38,27,0.55)', lineHeight: 1.5, padding: '4px 0 0' }}>
          The terracotta accent. Contained at 1.00×, brighter as you push it up,
          fades to green-only near zero.
        </div>
      </TweaksPanel>
    </RouterProvider>
  );
}

function RouteSwitch() {
  const { path } = useRouter();
  switch (path) {
    case '/':                       return <HomePage />;
    case '/voor-jou-persoonlijk':   return <VoorJouPage />;
    case '/in-de-sport':            return <SportPage />;
    case '/voor-bedrijven':         return <BedrijvenPage />;
    case '/wat-is-coaching':        return <WatIsCoachingPage />;
    case '/over':                   return <OverPage />;
    case '/contact':                return <ContactPage />;
    default:                        return <NotFound />;
  }
}

function NotFound() {
  const { go } = useRouter();
  return (
    <div className="page">
      <SiteNav />
      <div className="container" style={{ padding: '120px 80px', textAlign: 'left' }}>
        <Label red>404 — Pagina niet gevonden</Label>
        <h1 className="display display-1" style={{ marginTop: 24, maxWidth: '14ch' }}>
          Deze pagina bestaat <span className="italic" style={{ color: 'var(--green)' }}>(nog) niet.</span>
        </h1>
        <p className="lead" style={{ marginTop: 24 }}>
          De pagina die u zocht is verplaatst, hernoemd of bestaat nog niet.
          Werner bouwt nog graag verder — voor nu, terug naar de home.
        </p>
        <div style={{ marginTop: 40 }}>
          <CTA to="/">Terug naar home</CTA>
        </div>
      </div>
      <SiteFooter />
    </div>
  );
}

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