// Root app: composes sections and wires Tweaks.
const { useState } = React;

function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS || {
    heroVariant: 'Aurora',
    showVoiceComparison: true,
    showLogoStrip: true,
    pricingHighlight: 'Pro',
    accent: 'Brand',
  });

  const onDownload = () => {
    document.getElementById('pricing')?.scrollIntoView({ behavior:'smooth', block:'start' });
  };

  return (
    <div>
      <NavComponent onDownload={onDownload} />
      <Hero variant={tweaks.heroVariant} />
      {tweaks.showVoiceComparison && <VoiceSection />}
      <ProvidersSection />
      <PrivacySection />
      <FeatureGrid />
      <Comparison />
      <Pricing highlight={tweaks.pricingHighlight} />
      <FAQ />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakRadio label="Aurora style" value={tweaks.heroVariant} options={['Aurora','Sunset','Mono']} onChange={v => setTweak('heroVariant', v)} />
        </TweakSection>
        <TweakSection title="Sections">
          <TweakToggle label="Show voice comparison" value={tweaks.showVoiceComparison} onChange={v => setTweak('showVoiceComparison', v)} />
        </TweakSection>
        <TweakSection title="Pricing">
          <TweakRadio label="Highlighted plan" value={tweaks.pricingHighlight} options={['Single','5-pack']} onChange={v => setTweak('pricingHighlight', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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