// App entry — composes everything, hosts Tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "brand",
  "density": "comfy",
  "showTicker": true
}/*EDITMODE-END*/;

function App() {
  const [lang, setLangState] = React.useState(detectLang());
  const [theme, setThemeState] = React.useState(detectTheme());
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const setLang = (l) => { setLangState(l); try { localStorage.setItem('init9_lang', l); } catch(e){} document.documentElement.lang = l; };
  const setTheme = (th) => { setThemeState(th); try { localStorage.setItem('init9_theme', th); } catch(e){} };

  React.useEffect(() => {
    document.documentElement.dataset.theme = theme;
    const root = document.documentElement;
    root.style.setProperty('--bg-rgb', theme === 'dark' ? '22 21 19' : '247 246 241');
  }, [theme]);

  React.useEffect(() => { document.documentElement.lang = lang; }, [lang]);

  React.useEffect(() => {
    const accentMap = { brand: 'var(--brand)', media: 'var(--media)', cloud: 'var(--cloud)', tools: 'var(--tools)' };
    document.documentElement.style.setProperty('--accent', accentMap[tweaks.accent] || 'var(--brand)');
  }, [tweaks.accent]);

  const t = I18N[lang];

  const tickerItems = lang === 'de'
    ? ['Cloud-Migration', 'Atlassian-Beratung', 'Bewegtbild', 'Managed Services', 'UniFi-Setup', 'Webentwicklung', 'Confluence-Strukturierung', 'Live-Streaming', 'M365', 'Backup & Monitoring']
    : ['Cloud migration', 'Atlassian consulting', 'Film & video', 'Managed services', 'UniFi setup', 'Web development', 'Confluence IA', 'Live streaming', 'M365', 'Backup & monitoring'];

  return (
    <>
      <Header lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />
      <main id="main">
        <Hero t={t} density={tweaks.density} />
        {tweaks.showTicker && <TickerLine items={tickerItems} />}
        <OSStrip t={t} />
        <Why t={t} />
        <Divisions t={t} />
        <Partners t={t} />
        <CTA t={t} />
      </main>
      <Footer t={t} lang={lang} />

      <TweaksPanel title="Tweaks" defaultPosition={{ right: 24, bottom: 24 }}>
        <TweakSection title="Accent">
          <TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={[{ value: 'brand', label: 'Brand' }, { value: 'media', label: 'Orange' }, { value: 'cloud', label: 'Cyan' }, { value: 'tools', label: 'Violett' }]}
          />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio
            value={tweaks.density}
            onChange={(v) => setTweak('density', v)}
            options={[{ value: 'comfy', label: 'Comfy' }, { value: 'compact', label: 'Compact' }]}
          />
        </TweakSection>
        <TweakSection title="Marquee Ticker">
          <TweakToggle value={tweaks.showTicker} onChange={(v) => setTweak('showTicker', v)} label="Show keyword ticker" />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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