// Root app — composes sections + tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "heroIntensity": "medium",
  "showCountdown": true
}/*EDITMODE-END*/;

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

  // Apply accent theme
  React.useEffect(() => {
    const map = {
      gold:   '#F5C518',
      green:  '#009C3B',
      orange: '#F59E0B',
    };
    document.documentElement.style.setProperty('--c-gold', map[tweaks.accent] || '#F5C518');
  }, [tweaks.accent]);

  return (
    <>
      <TickerBar />
      <Hero tweaks={tweaks} />
      <Pain />
      <SocialProof />
      <PilotVideo />
      <Producer />
      <HowItWorks />
      <Deliverables />
      <FanFests />
      <Dates />
      <FAQ />
      <Packages />
      {tweaks.showCountdown && <Scarcity />}
      <FinalCTA />

      <StickyCTA />

      <TweaksPanel title="Tweaks · Sua marca na Copa">
        <TweakSection title="Cor de acento">
          <TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={[
              { value: 'gold',   label: 'Ouro Copa' },
              { value: 'green',  label: 'Verde BR' },
              { value: 'orange', label: 'Âmbar' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Conteúdo">
          <TweakToggle
            label="Mostrar contador de urgência"
            checked={tweaks.showCountdown}
            onChange={(v) => setTweak('showCountdown', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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