/* Beursadvies WK Actie — App (v3) */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "scoreboard",
  "showCountdown": true,
  "showWhatsApp": true,
  "primaryCta": "Meld u nu aan",
  "deadline": "2026-06-28T18:00:00",
  "checkoutUrl": "https://beursadvies.nl/aanmelden",
  "appendPlanParam": true,
  "paymentEndpoint": "/api/create-payment"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [selectedPlan, setSelectedPlan] = useState('twee-jaar');

  // Apply theme classes
  useEffect(() => {
    const body = document.body;
    body.classList.remove('theme-scoreboard', 'theme-classic', 'theme-minimal');
    body.classList.add('theme-' + t.theme);
    body.classList.toggle('hide-countdown', !t.showCountdown);
  }, [t.theme, t.showCountdown]);

  // Terugkeer vanaf de mislukt-pagina: voorselecteer het gekozen plan en scroll
  // naar het aanmeldformulier, zodat opnieuw betalen één klik is.
  useEffect(() => {
    const q = new URLSearchParams(window.location.search);
    const plan = q.get('plan');
    if (plan === 'jaar' || plan === 'twee-jaar') setSelectedPlan(plan);
    if (q.get('retry') === '1' || window.location.hash === '#aanmelden') {
      setTimeout(() => {
        const el = document.getElementById('aanmelden');
        if (el) window.scrollTo({ top: el.offsetTop - 16, behavior: 'smooth' });
      }, 400);
    }
  }, []);

  // Professionele scroll-overgangen: elke sectie fadet soepel omhoog in beeld.
  // Secties die al zichtbaar zijn bij het laden tonen direct (geen flikker).
  useEffect(() => {
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const sections = Array.from(document.querySelectorAll('#root section'));
    if (!sections.length) return;
    const vh = window.innerHeight || document.documentElement.clientHeight;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    sections.forEach((el) => {
      el.classList.add('reveal');
      const rect = el.getBoundingClientRect();
      if (rect.top < vh * 0.9 && rect.bottom > 0) {
        el.classList.add('is-in'); // al in beeld -> direct tonen
      } else {
        io.observe(el);
      }
    });
    return () => io.disconnect();
  }, []);

  // Build checkout URL — optionally with ?plan=jaar / ?plan=twee-jaar so WordPress
  // can pre-select the right tier on the membership page.
  const checkoutFor = (planId) => {
    const base = t.checkoutUrl || 'https://beursadvies.nl/aanmelden';
    if (!planId || !t.appendPlanParam) return base;
    const sep = base.includes('?') ? '&' : '?';
    return `${base}${sep}plan=${planId}`;
  };

  // Option A: everything on one page. CTAs scroll to the in-page signup form
  // (and pre-select the chosen plan) instead of redirecting to another site.
  const scrollToForm = (planId) => {
    if (planId) setSelectedPlan(planId);
    const el = document.getElementById('aanmelden');
    if (el) window.scrollTo({ top: el.offsetTop - 16, behavior: 'smooth' });
  };

  return (
    <>
      {t.showCountdown && <TopBar deadline={t.deadline} />}
      <Nav onCta={() => scrollToForm()} primaryCta={t.primaryCta} />
      <Hero deadline={t.deadline} primaryCta={t.primaryCta} onCta={() => scrollToForm()} />
      <Stats />
      <TrustStrip />
      <Pricing onChoose={scrollToForm} primaryCta={t.primaryCta} />
      <Benefits />
      <PressStrip />
      <Testimonials />
      <Signup selectedPlan={selectedPlan} setSelectedPlan={setSelectedPlan} primaryCta={t.primaryCta} paymentEndpoint={t.paymentEndpoint} />
      <FAQ />
      <Contact />
      <FinalCTA onCta={() => scrollToForm()} primaryCta={t.primaryCta} />
      <Footer onCta={() => scrollToForm()} />

      {t.showWhatsApp && <ChatWidget />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Design-richting">
          <TweakRadio
            label="Thema"
            value={t.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'scoreboard', label: 'Scoreboard' },
              { value: 'classic', label: 'Klassiek' },
              { value: 'minimal', label: 'Minimal' },
            ]}
          />
          <TweakToggle
            label="Countdown-balk"
            value={t.showCountdown}
            onChange={(v) => setTweak('showCountdown', v)}
          />
          <TweakToggle
            label="AI-chatbot"
            value={t.showWhatsApp}
            onChange={(v) => setTweak('showWhatsApp', v)}
          />
        </TweakSection>

        <TweakSection label="WordPress-koppeling">
          <TweakText
            label="Aanmeld-URL"
            value={t.checkoutUrl}
            onChange={(v) => setTweak('checkoutUrl', v)}
          />
          <TweakToggle
            label="?plan= param meesturen"
            value={t.appendPlanParam}
            onChange={(v) => setTweak('appendPlanParam', v)}
          />
        </TweakSection>

        <TweakSection label="Inhoud">
          <TweakText
            label="Hoofd-CTA"
            value={t.primaryCta}
            onChange={(v) => setTweak('primaryCta', v)}
          />
          <TweakText
            label="Deadline (ISO)"
            value={t.deadline}
            onChange={(v) => setTweak('deadline', v)}
          />
        </TweakSection>

        <TweakSection label="Snel naar">
          <TweakButton
            label="→ Prijzen"
            onClick={() => {
              const el = document.getElementById('prijzen');
              if (el) window.scrollTo({ top: el.offsetTop - 20, behavior: 'smooth' });
            }}
          />
          <TweakButton
            label="→ FAQ"
            onClick={() => {
              const el = document.getElementById('vragen');
              if (el) window.scrollTo({ top: el.offsetTop - 20, behavior: 'smooth' });
            }}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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