// App root — orchestrates everything + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showLightning": true,
  "redIntensity": 1.0,
  "heroVideo": "ll-hero",
  "scrollSnap": false
}/*EDITMODE-END*/;

function App(){
  const [quote,setQuote] = useState(null); // { type, prefill }
  const tweaks = (window.useTweaks||((d)=>[d,()=>{}]))(TWEAK_DEFAULTS);
  const [tw, setTweak] = Array.isArray(tweaks) ? tweaks : [TWEAK_DEFAULTS,()=>{}];

  // Apply red intensity
  useEffect(()=>{
    if (tw.redIntensity != null){
      const root = document.documentElement;
      const i = tw.redIntensity;
      const r = Math.round(200*i + 30);
      const g = Math.round(16*i);
      const b = Math.round(46*i + 10);
      root.style.setProperty('--thraxel-red', `rgb(${r},${g},${b})`);
    }
  },[tw.redIntensity]);

  const openQuote = (type, prefill) => setQuote({ type, prefill });
  const exploreCase = () => {
    const el = document.getElementById('gun-case-demo');
    if (el) window.scrollTo({top: el.offsetTop - 60, behavior:'smooth'});
  };

  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakToggle = window.TweakToggle;
  const TweakSlider = window.TweakSlider;
  const TweakSelect = window.TweakSelect;

  return (
    <>
      <Nav onQuote={openQuote}/>
      <Hero onQuote={openQuote} onExplore={exploreCase}/>
      <ConfiguratorSection onQuote={openQuote}/>
      <NumbersSection/>
      <ResUseCases/>
      <WorkGallery/>
      <ResCaseStudies/>
      <GunCaseSection/>
      <DiscreetSection/>
      <SmartHome/>
      <CommercialHero onQuote={openQuote}/>
      <CommUseCases/>
      <CommCaseStudy/>
      <RailbikeTeaser/>
      <HowItWorks onQuote={openQuote}/>
      <OwnersSection/>
      <ServiceAreas/>
      <FAQ/>
      <FinalCTA onQuote={openQuote}/>
      <HolidayStrip onQuote={openQuote}/>
      <Footer/>

      <NewsletterPopup/>

      <ResidentialQuote open={quote?.type==='residential'} onClose={()=>setQuote(null)} prefill={quote?.prefill}/>
      <CommercialQuote open={quote?.type==='commercial'} onClose={()=>setQuote(null)}/>
      <RandyChat/>

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Visual">
            <TweakToggle label="Lightning arcs" value={tw.showLightning} onChange={v=>setTweak('showLightning',v)}/>
            <TweakSlider label="Red intensity" value={tw.redIntensity} min={0.5} max={1.4} step={0.05} onChange={v=>setTweak('redIntensity',v)}/>
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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