// Six-Figure Venue Engine — App composition + Tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": 0,
  "density": "regular",
  "showProof": true,
  "accent": "#7CD7A8"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.body.classList.remove('density-regular', 'density-compact', 'density-comfy');
    document.body.classList.add('density-' + t.density);
  }, [t.density]);

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

  const onApply = React.useCallback(() => {
    // All CTAs scroll to the inline booking calendar (#book) — no separate page.
    document.getElementById('book')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }, []);

  return (
    <React.Fragment>
      <Header onApply={onApply}/>
      <Hero variant={t.headline} onApply={onApply}/>
      <ProofGallery show={t.showProof}/>
      <PatternInterrupt/>
      <FuturePacing/>
      <WhyStuck/>
      <Mechanism/>
      <Differentiators/>
      <ValueStack onApply={onApply}/>
      <Pricing onApply={onApply}/>
      <Bonuses/>
      <Guarantees onApply={onApply}/>
      <CtaTrio onApply={onApply}/>
      <MegaCta onApply={onApply}/>
      <BookSection/>
      <Faq/>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero headline">
          <TweakSelect
            label="Variant"
            value={t.headline}
            options={HEADLINES.map((h, i) => ({ label: `${i + 1}. ${h.eyebrow}`, value: i }))}
            onChange={(v) => setTweak('headline', v)}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakRadio
            label="Density"
            value={t.density}
            options={['compact', 'regular', 'comfy']}
            onChange={(v) => setTweak('density', v)}
          />
          <TweakToggle
            label="Proof gallery"
            value={t.showProof}
            onChange={(v) => setTweak('showProof', v)}
          />
        </TweakSection>
        <TweakSection label="Accent">
          <TweakColor
            label="Highlight"
            value={t.accent}
            options={['#7CD7A8', '#2EC27E', '#A8E6C8', '#F4FFF8']}
            onChange={(v) => setTweak('accent', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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