// Formal proposal, app root + tweaks
const { useState: useStateFA } = React;

const TWEAK_DEFAULTS_FORMAL = /*EDITMODE-BEGIN*/{
  "coverImage": "architecture-classical.jpg",
  "showHeader": true,
  "accent": "#C7BEAD"
}/*EDITMODE-END*/;

function FormalApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS_FORMAL);

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

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

  return (
    <div data-screen-label="Formal Proposal" style={{ background: '#fff' }}>
      {t.showHeader && <FormalHeader inverse />}
      <FormalCover />
      <FormalNote />
      <AsksBand />
      <MandateSection />
      <DistributionChannelsSection />
      <RegulatorySection />
      <Watermark />
      <SPVGovernanceSection />
      <DataExitSection />
      <PlateBridge variant="bridge">
        The framework, the vehicle, and what Anthem keeps are set.
        What follows is the schedule.
      </PlateBridge>
      <FeesSection />
      <ProjectionSection />
      <FormalEngagementSection />
      <PlateBridge variant="city">
        Counsel alignment, an engagement letter, and a Phase 1 build.
        First close lands inside <em>roughly three to four months.</em>
      </PlateBridge>
      <FormalNextSection />
      <FormalSignoff />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand">
          <TweakColor
            label="Accent"
            value={t.accent}
            options={['#C7BEAD', '#C3A970', '#B58A4A', '#1F2E43']}
            onChange={v => setTweak('accent', v)}
          />
        </TweakSection>
        <TweakSection label="Cover">
          <TweakRadio
            label="Cover photograph"
            value={t.coverImage}
            options={[
              { value: 'architecture-classical.jpg', label: 'Classical' },
              { value: 'pyramid-blue.jpg', label: 'Pyramid' },
              { value: 'lille-bourse.jpg', label: 'Bourse' },
              { value: 'architectural-vertical.jpg', label: 'Vertical' },
            ]}
            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(<FormalApp />);