/* global React, ReactDOM */
/* global Header, Hero, TrustStrip, ThreeTwoOne, Vorteile, Configurator, Packages, HowItWorks, Datacenter, Testimonial, FAQ, CTA, Footer */
/* global useTweaks, TweaksPanel, TweakSection, TweakColor, TweakToggle, TweakRadio */

const { useEffect: useEffectA } = React;

/* Curated palettes — 4its-derived navy default + alternates */
const PALETTES = {
  navy:    { brand: '#1F3A5F', deep: '#15294A', press: '#0E1F3A', soft: '#E8EDF4', line: '#B6C2D4' },
  emerald: { brand: 'oklch(58% 0.135 160)', deep: 'oklch(42% 0.110 160)', press: 'oklch(34% 0.090 160)', soft: 'oklch(94% 0.045 160)', line: 'oklch(80% 0.060 160)' },
  sand:    { brand: 'oklch(62% 0.115 70)',  deep: 'oklch(44% 0.100 70)',  press: 'oklch(36% 0.085 70)',  soft: 'oklch(95% 0.045 70)',  line: 'oklch(82% 0.060 70)' },
};

const PALETTE_SWATCHES = {
  navy:    ['#1F3A5F', '#E8954A', '#E8EDF4'],
  emerald: ['#1f7f5a', '#34a378', '#d8efe4'],
  sand:    ['#9b7728', '#c89640', '#f3e7cf'],
};

function App() {
  const [t, setTweak] = useTweaks(window.__DEFAULTS__);

  /* Apply accent palette as CSS variables */
  useEffectA(() => {
    const p = PALETTES[t.accent] || PALETTES.navy;
    const r = document.documentElement.style;
    r.setProperty('--brand', p.brand);
    r.setProperty('--brand-deep', p.deep);
    r.setProperty('--brand-press', p.press);
    r.setProperty('--brand-soft', p.soft);
    r.setProperty('--brand-line', p.line);
  }, [t.accent]);

  /* Density */
  useEffectA(() => {
    const r = document.documentElement.style;
    if (t.density === 'roomy') {
      r.setProperty('--gutter', '36px');
    } else if (t.density === 'compact') {
      r.setProperty('--gutter', '20px');
    } else {
      r.setProperty('--gutter', '28px');
    }
  }, [t.density]);

  /* Animations toggle */
  useEffectA(() => {
    document.documentElement.dataset.anim = t.showAnimations ? 'on' : 'off';
  }, [t.showAnimations]);

  /* Scroll reveal */
  useEffectA(() => {
    if (!t.showAnimations) return;
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [t.showAnimations]);

  return (
    <>
      <Header />
      <Hero />
      <TrustStrip />
      <ThreeTwoOne />
      <Vorteile />
      <Configurator />
      <Packages />
      <HowItWorks />
      <Datacenter />
      <Testimonial />
      <FAQ />
      <CTA />
      <Footer />

      {typeof window.CookieBanner === 'function' && <window.CookieBanner />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Akzentfarbe" />
        <TweakColor
          label="Palette"
          value={PALETTE_SWATCHES[t.accent] || PALETTE_SWATCHES.navy}
          options={[PALETTE_SWATCHES.navy, PALETTE_SWATCHES.emerald, PALETTE_SWATCHES.sand]}
          onChange={(v) => {
            const key = Object.keys(PALETTE_SWATCHES).find(
              (k) => JSON.stringify(PALETTE_SWATCHES[k]) === JSON.stringify(v)
            );
            if (key) setTweak('accent', key);
          }}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Dichte"
          value={t.density}
          options={['compact', 'comfortable', 'roomy']}
          onChange={(v) => setTweak('density', v)}
        />
        <TweakRadio
          label="Hero"
          value={t.heroVariant}
          options={['split', 'minimal']}
          onChange={(v) => setTweak('heroVariant', v)}
        />

        <TweakSection label="Verhalten" />
        <TweakToggle
          label="Animationen"
          value={t.showAnimations}
          onChange={(v) => setTweak('showAnimations', v)}
        />
        <TweakToggle
          label="MwSt. inkl. anzeigen"
          value={t.vatIncluded}
          onChange={(v) => setTweak('vatIncluded', v)}
        />
      </TweaksPanel>
    </>
  );
}

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