const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "C",
  "accent": "#1F5BFF"
}/*EDITMODE-END*/;

function useReveal(dep) {
  React.useEffect(() => {
    let cancelled = false;
    const scan = () => {
      const els = document.querySelectorAll('.reveal:not(.in)');
      els.forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.96) el.classList.add('in');
      });
    };
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { rootMargin: '0px 0px -6% 0px', threshold: 0.06 });
    const observe = () => document.querySelectorAll('.reveal:not(.in)').forEach((el) => io.observe(el));
    // mark already-visible immediately, observe the rest, plus a safety net
    requestAnimationFrame(() => { if (!cancelled) { scan(); observe(); } });
    const safety = setTimeout(() => { if (!cancelled) document.querySelectorAll('.reveal').forEach((el) => el.classList.add('in')); }, 1600);
    return () => { cancelled = true; clearTimeout(safety); io.disconnect(); };
  }, [dep]);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const Hero = { A: HeroA, B: HeroB, C: HeroC }[t.hero] || HeroA;

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    // derive darker hover + tints
    const a = t.accent;
    document.documentElement.style.setProperty('--accent-ink', shade(a, -0.22));
    document.documentElement.style.setProperty('--accent-tint', mix(a, '#ffffff', 0.90));
    document.documentElement.style.setProperty('--accent-tint-2', mix(a, '#ffffff', 0.80));
  }, [t.accent]);

  useReveal(t.hero);

  return (
    <React.Fragment>
      <Nav />
      <main key={t.hero}>
        <Hero />
        <Problem />
        <Features />
        <Steps />
        <Benefits />
        <Audience />
        <Pricing />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero-Layout" />
        <TweakRadio label="Variante" value={t.hero}
          options={[{label:'A · Split', value:'A'}, {label:'B · Zentriert', value:'B'}, {label:'C · Vollbild', value:'C'}]}
          onChange={(v) => setTweak('hero', v)} />
        <TweakSection label="Marke" />
        <TweakColor label="Akzentfarbe" value={t.accent}
          options={['#1F5BFF', '#2D7FF9', '#0E9F6E', '#7C3AED', '#111418']}
          onChange={(v) => setTweak('accent', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

/* tiny color helpers */
function hexToRgb(h){ h=h.replace('#',''); if(h.length===3)h=h.split('').map(c=>c+c).join(''); const n=parseInt(h,16); return [n>>16&255,n>>8&255,n&255]; }
function rgbToHex(r,g,b){ return '#'+[r,g,b].map(x=>Math.max(0,Math.min(255,Math.round(x))).toString(16).padStart(2,'0')).join(''); }
function shade(hex,amt){ const [r,g,b]=hexToRgb(hex); const f=amt<0?0:255; const p=Math.abs(amt); return rgbToHex(r+(f-r)*p,g+(f-g)*p,b+(f-b)*p); }
function mix(hex,with_,amt){ const [r,g,b]=hexToRgb(hex); const [r2,g2,b2]=hexToRgb(with_); return rgbToHex(r+(r2-r)*amt,g+(g2-g)*amt,b+(b2-b)*amt); }

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