// ============= APP =============
const { useState: useStateApp, useEffect: useEffectApp, useCallback: useCallbackApp } = React;

function App() {
  const [theme, setThemeState] = useStateApp(() => localStorage.getItem('of_theme') || 'dark');
  const [lang, setLangState] = useStateApp(() => localStorage.getItem('of_lang') || 'ru');
  const [toolsOpen, setToolsOpen] = useStateApp(null);
  const [reviewsOpen, setReviewsOpen] = useStateApp(false);
  const [blogOpen, setBlogOpen] = useStateApp(false);
  const [featuresOpen, setFeaturesOpen] = useStateApp(false);
  const [referralOpen, setReferralOpen] = useStateApp(false);
  const [isAuthed, setIsAuthed] = useStateApp(false);

  useEffectApp(() => {
    document.documentElement.dataset.theme = theme;
    localStorage.setItem('of_theme', theme);
  }, [theme]);
  useEffectApp(() => { localStorage.setItem('of_lang', lang); }, [lang]);

  // Check auth state once on mount to personalise CTA label
  useEffectApp(() => {
    fetch('/api/auth/check', { credentials: 'include' })
      .then(r => r.json())
      .then(d => { if (d.authenticated) setIsAuthed(true); })
      .catch(() => {});
  }, []);

  const setTheme = (t) => setThemeState(t);
  const setLang = (l) => setLangState(l);

  // t() with dot-path support
  const t = useCallbackApp((path) => {
    const v = A.tpath(window.I18N[lang] || window.I18N.ru, path);
    return v == null ? path : v;
  }, [lang]);

  // CTA → /dashboard (middleware redirects to /login if not authenticated)
  const handleCta = useCallbackApp(() => {
    window.location.href = '/dashboard';
  }, []);

  const ctx = { theme, setTheme, lang, setLang, t, handleCta, isAuthed, toolsOpen, setToolsOpen, reviewsOpen, setReviewsOpen, blogOpen, setBlogOpen, featuresOpen, setFeaturesOpen, referralOpen, setReferralOpen };

  return (
    <A.AppCtx.Provider value={ctx}>
      <div className="ambient" aria-hidden="true"></div>
      <div className="grain" aria-hidden="true"></div>
      <div className="shell">
        <Nav />
        <main>
          <Hero />
          <LogoStrip />
          <HowItWorks />
          <Features />
          <Platform />
          <VideoSection />
          <Pricing />
          <WhyUs />
          <Testimonials />
          <Stories />
          <Faq />
          <FinalCta />
        </main>
        <Footer />
      </div>
      {toolsOpen !== null && <ToolsModal />}
      {reviewsOpen && <ReviewsPage />}
      {blogOpen && <BlogPage />}
      {featuresOpen && <FeaturesPage />}
      {referralOpen && <ReferralPage />}
    </A.AppCtx.Provider>
  );
}

// ============= CTA burst effect =============
function burst(x, y) {
  const root = document.createElement('div');
  root.className = 'cta-burst';
  root.style.left = x + 'px';
  root.style.top = y + 'px';
  for (let i = 0; i < 18; i++) {
    const s = document.createElement('span');
    const ang = (Math.PI * 2 * i) / 18 + Math.random() * 0.4;
    const dist = 60 + Math.random() * 100;
    s.style.setProperty('--dx', Math.cos(ang) * dist + 'px');
    s.style.setProperty('--dy', Math.sin(ang) * dist + 'px');
    s.style.setProperty('--d', (Math.random() * 0.15) + 's');
    s.style.background = ['#ffb347','#ff7a18','#ff5a00','#ffe1c5'][i % 4];
    root.appendChild(s);
  }
  document.body.appendChild(root);
  setTimeout(() => root.remove(), 1400);
}

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