/* global React, ReactDOM */
/* Pulls in components defined in sections.jsx and scorer.jsx */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#185c5c",
  "displayFont": "Instrument Serif",
  "showCitations": true
}/*EDITMODE-END*/;

const ACCENTS = ['#185c5c', '#14467a', '#7a2a2a', '#3b3458'];
const DISPLAY_FONTS = ['Instrument Serif', 'Newsreader', 'Inter Tight'];

function fontStack(name) {
  if (name === 'Inter Tight') return '"Inter Tight", -apple-system, sans-serif';
  if (name === 'Newsreader')  return '"Newsreader", Georgia, serif';
  return '"Instrument Serif", "Newsreader", Georgia, serif';
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [introDone, setIntroDone] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--accent-soft', t.accent + '1a');
    document.documentElement.style.setProperty('--serif', fontStack(t.displayFont));
    document.body.classList.toggle('hide-citations', !t.showCitations);
  }, [t.accent, t.displayFont, t.showCitations]);

  return (
    <>
      {!introDone && <IntroTerminal onDone={() => setIntroDone(true)} />}
      <Nav />
      <Hero />
      <ProblemSection />
      <EvidenceSection />
      <DemoSection />
      <SolutionSection />
      <SourcesSection />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent color">
          <TweakColor
            label="Accent"
            value={t.accent}
            options={ACCENTS}
            onChange={(v) => setTweak('accent', v)}
          />
        </TweakSection>

        <TweakSection label="Display typeface">
          <TweakRadio
            label="Font"
            value={t.displayFont}
            options={DISPLAY_FONTS}
            onChange={(v) => setTweak('displayFont', v)}
          />
        </TweakSection>

        <TweakSection label="Sourcing">
          <TweakToggle
            label="Show [E1] markers in body text"
            value={t.showCitations}
            onChange={(v) => setTweak('showCitations', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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