// LitStage v3 — App entry

const { useEffect, useState } = React;

function TweaksPanelMount() {
  const [tweaks, setTweak] = window.useTweaks(window.TWEAK_DEFAULTS);
  window.__tweaks = tweaks;
  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Hero copy">
        <window.TweakText label="Headline" value={tweaks.headline} onChange={v => setTweak('headline', v)}/>
        <window.TweakText label="Headline (italic)" value={tweaks.headlineEm} onChange={v => setTweak('headlineEm', v)}/>
        <window.TweakText label="Subhead" value={tweaks.subhead} onChange={v => setTweak('subhead', v)} multiline/>
        <window.TweakToggle label="Show hero bento" value={tweaks.showHeroBento} onChange={v => setTweak('showHeroBento', v)}/>
      </window.TweakSection>
      <window.TweakSection title="Cohort">
        <window.TweakToggle label="Show cohort section" value={tweaks.showCohort} onChange={v => setTweak('showCohort', v)}/>
        <window.TweakSlider label="Seats claimed" value={tweaks.seatsClaimed} min={0} max={5} step={1} onChange={v => setTweak('seatsClaimed', v)}/>
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

function App() {
  const [tweaks, setTweaks] = useState(window.TWEAK_DEFAULTS);

  useEffect(() => {
    const id = setInterval(() => {
      if (window.__tweaks && JSON.stringify(window.__tweaks) !== JSON.stringify(tweaks)) {
        setTweaks({ ...window.__tweaks });
      }
    }, 250);
    return () => clearInterval(id);
  }, [tweaks]);

  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.08 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <window.TopNav/>
      <window.Hero tweaks={tweaks}/>
      <window.PartnerStrip/>
      <window.Features/>
      <window.Simulation/>
      <window.Cascade/>
      <window.CustomSims/>
      <window.PricingFAQ/>
      <window.About/>
      <window.EndCTA/>
      <window.Footer/>
      <TweaksPanelMount/>
    </>
  );
}

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