/* global React, ReactDOM, Nav, Hero, ThreeThings, WhoItsFor, Compare, Retry, Pricing, FinalCTA, Footer, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "citations",
  "violetIntensity": "confident"
}/*EDITMODE-END*/;

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

  // Apply violet intensity by toggling a class on root
  useEffect(() => {
    const root = document.documentElement;
    root.dataset.violet = tweaks.violetIntensity;
  }, [tweaks.violetIntensity]);

  return (
    <>
      <Nav />
      <Hero headline={tweaks.headline} />
      <ThreeThings />
      <WhoItsFor />
      <Compare />
      <Retry />
      <Pricing />
      <FinalCTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero headline">
          <TweakRadio
            value={tweaks.headline}
            onChange={(v) => setTweak('headline', v)}
            options={[
              { value: 'default', label: 'Every answer, sourced.' },
              { value: 'citations', label: 'Citations first.' },
              { value: 'truth', label: 'Your sources. Your truth.' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Violet accent intensity">
          <TweakRadio
            value={tweaks.violetIntensity}
            onChange={(v) => setTweak('violetIntensity', v)}
            options={[
              { value: 'subtle', label: 'Subtle' },
              { value: 'confident', label: 'Confident' },
              { value: 'bold', label: 'Bold' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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