/* global React, ReactDOM */
/* global Nav, Hero, Marquee, ProblemSection, SolutionSection, FeaturesSection */
/* global BenefitsSection, ReferralSection, ScreenshotsSection */
/* global TestimonialsSection, FAQSection, FinalCTASection, Footer, StickyCTA */
/* global useReveal */

const { useState, useEffect } = React;

// =====================================================
// PIQUEL Landing — App
// =====================================================
const PQ_ACCENT = '#C8FF00';
const PQ_HERO_OVERLAY = 70;

function App() {
  // Language toggle — Spanish default per brand voice
  const [lang, setLang] = useState(() => {
    try { return localStorage.getItem('pq_lang') || 'es'; } catch (e) { return 'es'; }
  });
  useEffect(() => { try { localStorage.setItem('pq_lang', lang); } catch (e) {} }, [lang]);

  // Scroll progress
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const onS = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setProgress(max > 0 ? (h.scrollTop / max) * 100 : 0);
    };
    onS();
    window.addEventListener('scroll', onS, { passive: true });
    return () => window.removeEventListener('scroll', onS);
  }, []);

  // Live signups counter (fake +1 every 4–8s for that "real-time" feel)
  const [signups, setSignups] = useState(2847);
  useEffect(() => {
    const tick = () => {
      setSignups(s => s + 1);
    };
    let timeout;
    const schedule = () => {
      timeout = setTimeout(() => { tick(); schedule(); }, 4000 + Math.random() * 4000);
    };
    schedule();
    return () => clearTimeout(timeout);
  }, []);

  useReveal();

  // Push brand accent + hero overlay into CSS custom properties
  useEffect(() => {
    document.documentElement.style.setProperty('--pq-lime', PQ_ACCENT);
    document.documentElement.style.setProperty('--pq-lime-dim', PQ_ACCENT + '1f');
    document.documentElement.style.setProperty('--pq-lime-glow', PQ_ACCENT + '40');
    document.documentElement.style.setProperty('--pq-lime-ring', PQ_ACCENT + '66');
    document.documentElement.style.setProperty('--accent', PQ_ACCENT);
    document.documentElement.style.setProperty('--pq-overlay', PQ_HERO_OVERLAY / 100);
  }, []);

  return (
    <div className="pq-page">
      <div className="pq-progress" style={{ width: `${progress}%` }} aria-hidden="true"/>
      <Nav lang={lang} setLang={setLang} onJoin={() => document.getElementById('join').scrollIntoView({ behavior: 'smooth' })}/>
      <main>
        <Hero lang={lang} totalSignups={signups}/>
        <Marquee lang={lang}/>
        <ProblemSection lang={lang}/>
        <SolutionSection lang={lang}/>
        <FeaturesSection lang={lang}/>
        <BenefitsSection lang={lang}/>
        <ReferralSection lang={lang}/>
        <FAQSection lang={lang}/>
        <FinalCTASection lang={lang}/>
      </main>
      <Footer lang={lang}/>
      <StickyCTA lang={lang}/>
    </div>
  );
}

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