/* app.jsx — Main App with Language Context, UTM tracking, Tweaks */

/* ---- Read UTM params on load ---- */
(function() {
  var params = new URLSearchParams(window.location.search);
  window.__cbrUtm = {
    utm_source: params.get('utm_source') || null,
    utm_medium: params.get('utm_medium') || null,
    utm_campaign: params.get('utm_campaign') || null,
    utm_content: params.get('utm_content') || null,
    utm_term: params.get('utm_term') || null
  };
})();

/* ---- Language Context ---- */
window.LangCtx = React.createContext('nl');
window.SetLangCtx = React.createContext(function(){});

function detectLang() {
  var saved = localStorage.getItem('cbrmaster_lang');
  if (saved === 'nl' || saved === 'en') return saved;
  if (typeof navigator !== 'undefined' && navigator.language && navigator.language.toLowerCase().startsWith('nl')) return 'nl';
  return 'en';
}

/* ---- Theme config ---- */
var THEMES = {
  blue: { accent: '#2563EB', accentHover: '#1D4ED8', accentLight: '#EFF6FF', accentSubtle: '#DBEAFE', accentText: '#1E40AF' },
  indigo: { accent: '#4F46E5', accentHover: '#4338CA', accentLight: '#EEF2FF', accentSubtle: '#E0E7FF', accentText: '#3730A3' },
  teal: { accent: '#0D9488', accentHover: '#0F766E', accentLight: '#F0FDFA', accentSubtle: '#CCFBF1', accentText: '#115E59' },
  stone: { accent: '#78716C', accentHover: '#57534E', accentLight: '#FAFAF9', accentSubtle: '#F5F5F4', accentText: '#44403C' }
};
var FONT_OPTIONS = {
  'Plus Jakarta Sans': "'Plus Jakarta Sans', -apple-system, sans-serif",
  'DM Sans': "'DM Sans', -apple-system, sans-serif",
  'Manrope': "'Manrope', -apple-system, sans-serif"
};

function App() {
  var langState = React.useState(detectLang);
  var lang = langState[0]; var setLangRaw = langState[1];

  var setLang = React.useCallback(function(l) {
    setLangRaw(l);
    localStorage.setItem('cbrmaster_lang', l);
    var el = document.getElementById('root');
    el.classList.remove('lang-fade');
    void el.offsetWidth;
    el.classList.add('lang-fade');
  }, []);

  var tweaksState = useTweaks({ theme: 'blue', font: 'Plus Jakarta Sans', warmBg: true });
  var t = tweaksState[0]; var setTweak = tweaksState[1];

  var theme = THEMES[t.theme] || THEMES.blue;
  var fontStack = FONT_OPTIONS[t.font] || FONT_OPTIONS['Plus Jakarta Sans'];

  React.useEffect(function() {
    var r = document.documentElement.style;
    r.setProperty('--accent', theme.accent);
    r.setProperty('--accent-hover', theme.accentHover);
    r.setProperty('--accent-light', theme.accentLight);
    r.setProperty('--accent-subtle', theme.accentSubtle);
    r.setProperty('--accent-text', theme.accentText);
    r.setProperty('--font-sans', fontStack);
    r.setProperty('--font-display', fontStack);
    r.setProperty('--bg', t.warmBg ? '#FAFAF9' : '#FAFAFA');
    r.setProperty('--surface-raised', t.warmBg ? '#F5F5F4' : '#F5F5F5');
    document.body.style.fontFamily = fontStack;
  }, [t]);

  /* Scroll reveal observer */
  React.useEffect(function() {
    var observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('revealed');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });

    var timer = setTimeout(function() {
      document.querySelectorAll('.section-header, .exam-exp__content, .exam-exp__mockup, .progress-sec__content, .mobile-sec__content, .faq-list, .final-cta, .value-bar__inner, .exam-exp__pass').forEach(function(el) {
        el.classList.add('reveal');
        observer.observe(el);
      });
      document.querySelectorAll('.browser-frame, .phone-frame').forEach(function(el) {
        el.classList.add('reveal');
        observer.observe(el);
      });
      document.querySelectorAll('.features-grid, .qtypes-grid, .pricing-grid--3').forEach(function(el) {
        el.classList.add('reveal-stagger');
        observer.observe(el);
      });
    }, 100);

    return function() { clearTimeout(timer); observer.disconnect(); };
  }, []);

  var signup = useSignupModal();

  return React.createElement(window.LangCtx.Provider, { value: lang },
    React.createElement(window.SetLangCtx.Provider, { value: setLang },
      React.createElement(SignupModal, { isOpen: signup.isOpen, onClose: signup.close, presetCategory: signup.category, presetPlan: signup.plan }),
      React.createElement(Nav, null),
      React.createElement(Hero, null),
      React.createElement(ValueBar, null),
      React.createElement(Features, null),
      React.createElement(ExamExperience, null),
      React.createElement(QuestionTypes, null),
      React.createElement(ProgressTracking, null),
      React.createElement(MobileExperience, null),
      React.createElement(Pricing, null),
      React.createElement(FAQ, null),
      React.createElement(FinalCTA, null),
      React.createElement(Footer, null),
      React.createElement(TweaksPanel, null,
        React.createElement(TweakSection, { label: "Appearance" },
          React.createElement(TweakRadio, {
            label: "Accent Color", value: t.theme,
            options: ['blue', 'indigo', 'teal', 'stone'],
            onChange: function(v) { setTweak('theme', v); }
          }),
          React.createElement(TweakSelect, {
            label: "Font Family", value: t.font,
            options: Object.keys(FONT_OPTIONS),
            onChange: function(v) { setTweak('font', v); }
          }),
          React.createElement(TweakToggle, {
            label: "Warm background", value: t.warmBg,
            onChange: function(v) { setTweak('warmBg', v); }
          })
        )
      )
    )
  );
}

var root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App, null));