// app.jsx — composes the Gasless Wallet landing page.
// COPY + HEADLINES come from copy.jsx (window.COPY / window.HEADLINES).
//
// The interactive "Tweaks" panel from the design prototype (audience / theme /
// headline tone / corner radius) was a design-time control. The configuration
// the team landed on is hardcoded below.
const CONFIG = {
  audience: 'beginner',  // 'beginner' | 'pro'
  theme: 'mint',         // 'mint' | 'cobalt' | 'violet'
  headline: 'direct',    // 'direct' | 'friendly' | 'bold'
  corners: 'Soft',       // 'Sharp' | 'Soft' | 'Rounded'
};

const CORNER_R = { Sharp: 0.45, Soft: 1, Rounded: 1.5 };

function useReveal() {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll('.reveal'));
    const show = (el) => el.classList.add('in');
    const inView = (el) => {
      const r = el.getBoundingClientRect();
      return r.top < (window.innerHeight || 800) * 0.92 && r.bottom > 0;
    };
    // 1) reveal anything already on screen immediately
    els.forEach(el => { if (inView(el)) show(el); });

    // 2) IntersectionObserver for the rest
    let io;
    try {
      io = new IntersectionObserver((entries) => {
        entries.forEach(e => { if (e.isIntersecting) { show(e.target); io.unobserve(e.target); } });
      }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
      els.forEach(el => { if (!el.classList.contains('in')) io.observe(el); });
    } catch (_) { /* no IO support */ }

    // 3) scroll fallback in case the observer never fires
    const onScroll = () => els.forEach(el => { if (!el.classList.contains('in') && inView(el)) show(el); });
    window.addEventListener('scroll', onScroll, { passive: true });

    // 4) safety net: never leave content hidden
    const safety = setTimeout(() => els.forEach(show), 1200);

    return () => { io && io.disconnect(); window.removeEventListener('scroll', onScroll); clearTimeout(safety); };
  }, []);
}

function App() {
  useReveal();

  const audience = COPY[CONFIG.audience] ? CONFIG.audience : 'beginner';
  const c = COPY[audience];
  const headline = (HEADLINES[audience] && HEADLINES[audience][CONFIG.headline]) || HEADLINES[audience].direct;

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', CONFIG.theme);
    document.documentElement.style.setProperty('--r', String(CORNER_R[CONFIG.corners] ?? 1));
  }, []);

  return (
    <>
      <Nav />
      <Hero headline={headline} c={c} />
      <Stats />
      <HowItWorks c={c} />
      <Comparison c={c} />
      <Referral />
      <FinalCTA />
      <Footer />
    </>
  );
}

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