/* App entry */
const { Nav, Hero, LogoBar, ProblemSection, ProductSection, DiffSection, IntegSection, Testimonial, StatsSection, FAQ, Pricing, FinalCTA, Footer } = window.Sections;
const { TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, useTweaks } = window.Tweaks || {};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C8553D",
  "background": "warm",
  "headlineWeight": "light",
  "denseLogos": false
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = (useTweaks ? useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}]);

  React.useEffect(() => {
    const root = document.documentElement.style;
    root.setProperty('--accent', tweaks.accent);
    // Derive accent-2 darker
    root.setProperty('--accent-2', tweaks.accent);

    if (tweaks.background === 'warm') {
      root.setProperty('--bg', '#FAF9F6');
      root.setProperty('--bg-2', '#F3EFE6');
      root.setProperty('--hair', '#E5DFD0');
      root.setProperty('--hair-2', '#EDE8DB');
    } else if (tweaks.background === 'paper') {
      root.setProperty('--bg', '#F2EEE3');
      root.setProperty('--bg-2', '#E9E3D3');
      root.setProperty('--hair', '#D8D0BA');
      root.setProperty('--hair-2', '#DFD8C4');
    } else {
      root.setProperty('--bg', '#FBFBF9');
      root.setProperty('--bg-2', '#F1F1EE');
      root.setProperty('--hair', '#E4E4DF');
      root.setProperty('--hair-2', '#ECECE6');
    }
  }, [tweaks]);

  return (
    <React.Fragment>
      <Nav/>
      <Hero/>
      <ProblemSection/>
      <ProductSection/>
      <DiffSection/>
      <IntegSection/>
      <StatsSection/>
      {/* LogoBar (brand logos) and Testimonial (M. Reyes quote)
          removed — no real customers yet, those sections were
          presenting demo content as social proof. */}
      <FAQ/>
      <Pricing/>
      <FinalCTA/>
      <Footer/>

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Accent">
            <TweakColor label="Accent color" value={tweaks.accent} onChange={(v) => setTweak('accent', v)} />
            <TweakRadio
              label="Background tone"
              value={tweaks.background}
              onChange={(v) => setTweak('background', v)}
              options={[
                { value: 'warm', label: 'Warm' },
                { value: 'paper', label: 'Paper' },
                { value: 'cool', label: 'Cool' },
              ]}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </React.Fragment>
  );
}

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