// App root + Tweaks
const { useState: useStateA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C7BEAD",
  "showHeader": true,
  "coverImage": "pyramid-blue.jpg"
}/*EDITMODE-END*/;

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

  // Apply accent live
  React.useEffect(() => {
    document.documentElement.style.setProperty('--c-gold', t.accent);
  }, [t.accent]);

  // Apply cover image
  React.useEffect(() => {
    const el = document.querySelector('.cover');
    if (el) {
      el.style.backgroundImage =
        `linear-gradient(180deg, rgba(8,18,35,0.55) 0%, rgba(8,18,35,0.78) 100%), url('assets/imagery/${t.coverImage}')`;
    }
  }, [t.coverImage]);

  return (
    <div data-screen-label="Proposal" style={{ background: '#fff' }}>
      {t.showHeader && <DocHeader inverse />}
      <Cover />
      <NoteBand />
      <AtAGlance />
      <PlateBridge variant="city">
        A national investor audience already exists. What moves the needle is
        how cleanly it is <em>routed</em> to Anthem's specific economics.
      </PlateBridge>
      <DatabaseSection />
      <AcquisitionSection />
      <AlwaysOnSection />
      <Watermark />
      <AnthemSection />
      <EngagementSection />
      <PlateBridge variant="bridge">
        Investor conversations realistically begin inside four weeks.
        First close follows on a <em>compliance-paced</em> cadence beyond that.
      </PlateBridge>
      <NextSection />
      <Signoff />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand">
          <TweakColor
            label="Accent (gold)"
            value={t.accent}
            options={['#C7BEAD', '#C3A970', '#B58A4A', '#1F2E43', '#FFFFFF']}
            onChange={v => setTweak('accent', v)}
          />
        </TweakSection>
        <TweakSection label="Cover">
          <TweakRadio
            label="Cover photograph"
            value={t.coverImage}
            options={[
              { value: 'pyramid-blue.jpg', label: 'Pyramid' },
              { value: 'town-square-hero.jpg', label: 'Plaza' },
              { value: 'city-panoramic.jpg', label: 'City' },
            ]}
            onChange={v => setTweak('coverImage', v)}
          />
        </TweakSection>
        <TweakSection label="Document">
          <TweakToggle
            label="Show sticky nav"
            value={t.showHeader}
            onChange={v => setTweak('showHeader', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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