// Main app — mounts all sections, handles language switch, hero variant tweak
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "v1",
  "accentBlue": "#3B6EF5",
  "accentGreen": "#ffffff"
}/*EDITMODE-END*/;

const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor } = window;
const { LangProvider, useI18n } = window;

function LangSwitchWiring() {
  const { lang, setLang } = useI18n();
  React.useEffect(() => {
    const buttons = document.querySelectorAll('.lang-switch button');
    buttons.forEach(btn => {
      btn.setAttribute('aria-pressed', btn.dataset.lang === lang ? 'true' : 'false');
    });
    // sync data-i18n in static markup (nav/footer)
    document.querySelectorAll('[data-i18n]').forEach(el => {
      const key = el.getAttribute('data-i18n');
      const t = (window.I18N[lang] && window.I18N[lang][key]) || window.I18N.es[key];
      if (t) el.textContent = t;
    });
  }, [lang]);
  React.useEffect(() => {
    const handler = (e) => {
      const btn = e.target.closest('.lang-switch button');
      if (btn) setLang(btn.dataset.lang);
    };
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, [setLang]);
  return null;
}

function NavScroll() {
  React.useEffect(() => {
    const onScroll = () => {
      document.querySelector('nav').classList.toggle('scrolled', window.scrollY > 20);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return null;
}

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

  React.useEffect(() => {
    document.documentElement.style.setProperty('--blue', t.accentBlue);
    document.documentElement.style.setProperty('--green', t.accentGreen);
  }, [t.accentBlue, t.accentGreen]);

  const Hero = t.heroVariant === 'v2' ? window.HeroV2 :
               t.heroVariant === 'v3' ? window.HeroV3 : window.HeroV1;

  return (
    <LangProvider>
      <LangSwitchWiring/>
      <NavScroll/>
      <Hero/>
      <window.Ticker/>
      <window.Manifesto/>
      <window.AdsAnim/>
      <window.Diff/>
      <window.Growth/>
      <window.Method/>
      <window.AISection/>
      <window.Process/>
      <window.FitCheck/>
      <window.Guarantee/>
      <window.FAQ/>
      <window.FinalCTA/>

      <TweaksPanel>
        <TweakSection label="Hero variant"/>
        <TweakRadio
          label="Layout"
          value={t.heroVariant}
          options={[
            {value:'v1', label:'Editorial + Dashboard'},
            {value:'v2', label:'Big Statement'},
            {value:'v3', label:'Split + Live Ads'}
          ]}
          onChange={v => setTweak('heroVariant', v)}
        />
        <TweakSection label="Accent colors"/>
        <TweakColor label="Brand blue" value={t.accentBlue} onChange={v => setTweak('accentBlue', v)}/>
        <TweakColor label="Profit green" value={t.accentGreen} onChange={v => setTweak('accentGreen', v)}/>
      </TweaksPanel>
    </LangProvider>
  );
}

const root = ReactDOM.createRoot(document.body.appendChild(document.createElement('div')));
// We want to mount inside the existing structure: render App into a portal-ish setup.
// Simpler: render a single component that mounts each section into its placeholder via ReactDOM portals.
// But cleaner: render App into a hidden container, and use createRoot per mount.
// Actually simplest: replace body main with React-rendered structure. We'll mount per slot.

// Unmount the temp div we just created
root.unmount();
document.body.removeChild(document.body.lastChild);

// Per-slot mount approach
function MountAll() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--blue', t.accentBlue);
    document.documentElement.style.setProperty('--green', t.accentGreen);
  }, [t.accentBlue, t.accentGreen]);

  const Hero = t.heroVariant === 'v2' ? window.HeroV2 :
               t.heroVariant === 'v3' ? window.HeroV3 : window.HeroV1;

  return (
    <LangProvider>
      <LangSwitchWiring/>
      <NavScroll/>
      {ReactDOM.createPortal(<Hero/>, document.getElementById('hero-mount'))}
      {ReactDOM.createPortal(<window.Ticker/>, document.getElementById('ticker-mount'))}
      {ReactDOM.createPortal(<window.Manifesto/>, document.getElementById('manifesto-mount'))}
      {ReactDOM.createPortal(<window.Diff/>, document.getElementById('diff-mount'))}
      {ReactDOM.createPortal(<window.AdsAnim/>, document.getElementById('ads-anim-mount'))}
      {ReactDOM.createPortal(<window.Method/>, document.getElementById('method-mount'))}
      {ReactDOM.createPortal(<window.Growth/>, document.getElementById('growth-mount'))}
      {ReactDOM.createPortal(<window.AISection/>, document.getElementById('ai-mount'))}
      {ReactDOM.createPortal(<window.Process/>, document.getElementById('process-mount'))}
      {ReactDOM.createPortal(<window.FitCheck/>, document.getElementById('fit-mount'))}
      {ReactDOM.createPortal(<window.Guarantee/>, document.getElementById('guarantee-mount'))}
      {ReactDOM.createPortal(<window.FAQ/>, document.getElementById('faq-mount'))}
      {ReactDOM.createPortal(<window.FinalCTA/>, document.getElementById('finalcta-mount'))}
      {ReactDOM.createPortal(
        <TweaksPanel>
          <TweakSection label="Hero variant"/>
          <TweakRadio
            label="Layout"
            value={t.heroVariant}
            options={[
              {value:'v1', label:'Editorial · Dashboard'},
              {value:'v2', label:'Big Statement'},
              {value:'v3', label:'Split · Live Ads'}
            ]}
            onChange={v => setTweak('heroVariant', v)}
          />
          <TweakSection label="Accent colors"/>
          <TweakColor label="Brand blue" value={t.accentBlue} onChange={v => setTweak('accentBlue', v)}/>
          <TweakColor label="Profit green" value={t.accentGreen} onChange={v => setTweak('accentGreen', v)}/>
        </TweaksPanel>,
        document.getElementById('tweaks-mount')
      )}
    </LangProvider>
  );
}

ReactDOM.createRoot(document.getElementById('main').appendChild(document.createElement('div'))).render(<MountAll/>);