// App composition

window.PillsVariantContext = React.createContext('glass');

function App(){
  const tweaks = useTweaks();
  const heroVariant = tweaks.state.heroVariant || 'reference';
  const pillsVariant = tweaks.state.pillsVariant || 'cards';

  // Hotkey: Enter → scroll to #modules (only when not typing in input)
  React.useEffect(()=>{
    const onKey = (e)=>{
      if (e.key !== 'Enter') return;
      const t = e.target;
      if (t && (t.tagName==='INPUT' || t.tagName==='TEXTAREA' || t.isContentEditable)) return;
      const el = document.getElementById('modules');
      if (el) {
        e.preventDefault();
        const y = el.getBoundingClientRect().top + window.pageYOffset - 60;
        window.scrollTo({top:y, behavior:'smooth'});
      }
    };
    window.addEventListener('keydown', onKey);
    return ()=>window.removeEventListener('keydown', onKey);
  },[]);

  const Hero = heroVariant==='classic' ? window.HeroClassic
             : heroVariant==='bold' ? window.HeroBold
             : window.HeroReference;
  // Use NavBar (with mobile burger) for all variants
  const Nav = window.NavBar;
  return (
    <window.PillsVariantContext.Provider value={pillsVariant}>
    <div data-screen-label="01 Landing — INTGRTR 2.0" style={{position:'relative'}}>
      <window.CodeRainBg/>
      <div style={{position:'relative', zIndex:1}}>
        <Nav/>
        <Hero/>
        <Modules/>
        <window.Testimonials/>
        <Pricing/>
        <FAQSection/>
        <FinalCTA/>
        <Footer/>
        <div style={{height:26}}/>
        <StatusBar/>
      </div>
      <TweaksPanel {...tweaks}/>
    </div>
    </window.PillsVariantContext.Provider>
  );
}

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