/* ===== Growing Now — app root + tweaks ===== */
(function () {
  const { useState, useEffect } = React;
  const { useTweaks, TweaksPanel, TweakSection, TweakRadio } = window;

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "cards": "retrato",
    "bg": "blobs",
    "font": "redondeada"
  }/*EDITMODE-END*/;

  const FONTS = {
    redondeada: { d: "'Fredoka'", b: "'Nunito'" },
    suave: { d: "'Baloo 2'", b: "'Mulish'" },
    geometrica: { d: "'Quicksand'", b: "'Karla'" },
  };

  function App() {
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    const [lang, setLangState] = useState(window.I18N.detectLang());
    const setLang = (l) => { setLangState(l); window.I18N.setLang(l); };
    const L = window.I18N.STR[lang];

    const [agent, setAgent]       = useState(null);
    const [chatAgent, setChatAgent] = useState(null);
    const [contactOpen, setContactOpen] = useState(false);
    const [chatSignal, setChatSignal]   = useState(0);
    const openChat = () => setChatSignal(s => s + 1);
    const openAgentChat = (a) => { setAgent(null); setChatAgent(a); };

    useEffect(() => {
      const f = FONTS[t.font] || FONTS.redondeada;
      document.documentElement.style.setProperty('--font-display', f.d + ", system-ui, sans-serif");
      document.documentElement.style.setProperty('--font-body', f.b + ", system-ui, sans-serif");
    }, [t.font]);
    useEffect(() => { document.documentElement.lang = lang; }, [lang]);

    return (
      <>
        <window.AnimatedBackground variant={t.bg} />
        <window.Nav L={L} lang={lang} setLang={setLang} />
        <window.Hero L={L} lang={lang} onChat={openChat} onAgent={setAgent} />
        <window.Squad L={L} lang={lang} onOpen={setAgent} cardStyle={t.cards} />
        <window.Services L={L} lang={lang} onOpen={setAgent} />
        <window.Process L={L} lang={lang} />
        <window.About L={L} lang={lang} />
        <window.CTA L={L} lang={lang} onStart={() => setContactOpen(true)} onChat={openChat} />
        <window.Footer L={L} lang={lang} />

        {agent && <window.AgentModal a={agent} lang={lang} onClose={() => setAgent(null)} onChat={openChat} onAgentChat={openAgentChat} />}
        {chatAgent && <window.AgentChatPanel agent={chatAgent} lang={lang} onClose={() => setChatAgent(null)} />}
        {contactOpen && <window.ContactModal lang={lang} onClose={() => setContactOpen(false)} onChat={openChat} />}
        <window.ZukiLauncher lang={lang} openSignal={chatSignal} />

        <TweaksPanel>
          <TweakSection label={lang === 'es' ? 'Tarjetas de agentes' : 'Agent cards'} />
          <TweakRadio label={lang === 'es' ? 'Estilo' : 'Style'} value={t.cards}
            options={[{ value: 'retrato', label: lang === 'es' ? 'Retrato' : 'Portrait' }, { value: 'poster', label: 'Póster' }, { value: 'compacto', label: lang === 'es' ? 'Compacto' : 'Compact' }]}
            onChange={v => setTweak('cards', v)} />
          <TweakSection label={lang === 'es' ? 'Fondo animado' : 'Animated background'} />
          <TweakRadio label={lang === 'es' ? 'Estilo' : 'Style'} value={t.bg}
            options={[{ value: 'blobs', label: 'Blobs' }, { value: 'aurora', label: 'Aurora' }, { value: 'particles', label: lang === 'es' ? 'Partículas' : 'Particles' }]}
            onChange={v => setTweak('bg', v)} />
          <TweakSection label={lang === 'es' ? 'Tipografía' : 'Typography'} />
          <TweakRadio label={lang === 'es' ? 'Familia' : 'Family'} value={t.font}
            options={[{ value: 'redondeada', label: lang === 'es' ? 'Redondeada' : 'Rounded' }, { value: 'suave', label: lang === 'es' ? 'Suave' : 'Soft' }, { value: 'geometrica', label: lang === 'es' ? 'Geométrica' : 'Geometric' }]}
            onChange={v => setTweak('font', v)} />
        </TweaksPanel>
      </>
    );
  }
  window.GNApp = App;
})();