// site/app.jsx — main App: language state, tweaks integration, section composition.

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "centered",
  "channelsLayout": "grid",
  "pricingLayout": "table",
  "palette": "mix",
  "showAppNote": true
}/*EDITMODE-END*/;

function App() {
  // Language state — start from detection, persist on change.
  const [lang, setLangState] = useStateApp(() => detectLang());
  useEffectApp(() => {
    document.documentElement.lang = lang;
    try { localStorage.setItem('showtime-lang', lang); } catch (e) {}
  }, [lang]);
  const setLang = (v) => setLangState(v);

  // Tweaks state via the starter hook.
  // A/B test override: if the experiment assigned variant B (split), use it
  // as the initial value instead of the EDITMODE default. The tweaks panel
  // can still override at runtime.
  const effectiveDefaults = React.useMemo(() => {
    const d = Object.assign({}, TWEAK_DEFAULTS);
    const exp = (typeof window !== 'undefined') && window.__experiment_hero_v1;
    if (exp === 'B') d.heroVariant = 'split';
    else if (exp === 'A') d.heroVariant = 'centered';
    return d;
  }, []);
  const [t, setTweak] = useTweaks(effectiveDefaults);

  // Fire the experiment impression once per session (the variant choice is
  // already sticky in localStorage; this only signals GA that the user saw it).
  useEffectApp(() => {
    const exp = (typeof window !== 'undefined') && window.__experiment_hero_v1;
    if (!exp) return;
    if (typeof window.trackEvent === 'function') {
      window.trackEvent('experiment_impression', {
        experiment_id: 'hero_v1',
        variant: exp,
      });
    }
  }, []);

  // Apply palette class on body so section selectors can react.
  useEffectApp(() => {
    document.body.classList.remove('sw-palette--mix', 'sw-palette--yellow', 'sw-palette--calm');
    document.body.classList.add('sw-palette--' + (t.palette || 'mix'));
  }, [t.palette]);

  return (
    <LangContext.Provider value={{ lang, setLang }}>
      <WordmarkDefs />
      <SiteNav />
      <main>
        <HeroSection variant={t.heroVariant} />
        <MarqueeStrip />
        <PainSection />
        <ChannelsSection layout={t.channelsLayout} />
        <StatsSection />
        <CustomersSection />
        <PricingSection layout={t.pricingLayout} />
        <FaqSection />
        <FinalCta />
      </main>
      <SiteFooter />
      <CookieBanner />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio
          label="Layout"
          value={t.heroVariant}
          options={['centered', 'split', 'stacked']}
          onChange={v => setTweak('heroVariant', v)}
        />

        <TweakSection label="Channels section" />
        <TweakRadio
          label="Layout"
          value={t.channelsLayout}
          options={['grid', 'row', 'stack']}
          onChange={v => setTweak('channelsLayout', v)}
        />

        <TweakSection label="Pricing" />
        <TweakRadio
          label="Layout"
          value={t.pricingLayout}
          options={['cards', 'table']}
          onChange={v => setTweak('pricingLayout', v)}
        />

        <TweakSection label="Palette" />
        <TweakRadio
          label="Mode"
          value={t.palette}
          options={['mix', 'yellow', 'calm']}
          onChange={v => setTweak('palette', v)}
        />

        <TweakSection label="Language" />
        <TweakRadio
          label="Locale"
          value={lang}
          options={['it', 'en']}
          onChange={v => setLang(v)}
        />
      </TweaksPanel>
    </LangContext.Provider>
  );
}

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