// App.jsx — assembles the page; Tweaks toggle each UX enhancement on/off for comparison.
const { useState: useAppState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "enhancedHero": true,
  "trustLayer": true,
  "scaleStepper": true,
  "diagnosticQuiz": true,
  "pricingCompare": true,
  "accent": "#22C55E"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [offer, setOffer] = useAppState('Operational Diagnostic (€2,500)');
  React.useEffect(() => {
    document.documentElement.style.setProperty('--green', t.accent);
  }, [t.accent]);

  React.useEffect(() => {
    const timer = setTimeout(() => { if (window.showOpsModal) window.showOpsModal(); }, 5000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="wrap">
      <Nav />
      <Hero enhanced={t.enhancedHero} />
      {t.trustLayer && <TrustLayer />}
      <Problem />
      <div className="divider" />
      {t.scaleStepper ? <ScaleStepper /> : <ScaleModel />}
      <div className="divider" />
      <BeforeAfter />
      <div className="divider" />
      <Pricing onSelectOffer={setOffer} enhanced={t.pricingCompare} />
      <div className="divider" />
      <IdealFit />
      <div className="divider" />
      {t.diagnosticQuiz && <React.Fragment><DiagnosticQuiz onComplete={setOffer} /><div className="divider" /></React.Fragment>}
      <CtaBanner />
      <ContactForm offer={offer} setOffer={setOffer} />
      <Footer />

      <TweaksPanel>
        <TweakSection label="UX enhancements" />
        <TweakToggle label="Live hero (count-up + KPI tile)" value={t.enhancedHero} onChange={(v) => setTweak('enhancedHero', v)} />
        <TweakToggle label="Credentials / trust band" value={t.trustLayer} onChange={(v) => setTweak('trustLayer', v)} />
        <TweakToggle label="Interactive SCALE™ stepper" value={t.scaleStepper} onChange={(v) => setTweak('scaleStepper', v)} />
        <TweakToggle label="60-second diagnostic quiz" value={t.diagnosticQuiz} onChange={(v) => setTweak('diagnosticQuiz', v)} />
        <TweakToggle label="Pricing comparison + credit" value={t.pricingCompare} onChange={(v) => setTweak('pricingCompare', v)} />
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent} options={['#22C55E', '#16A34A', '#10B981', '#3B82F6']} onChange={(v) => setTweak('accent', v)} />
      </TweaksPanel>
    </div>
  );
}

(function mount() {
  // Improvements.jsx and ContactForm.jsx may still be loading from the server
  // (cache-busted files are fetched async by Babel). Poll until every window
  // global that <App /> needs is defined, then render once.
  var needed = [
    window.Nav, window.SectionHeader,
    window.Hero,
    window.TrustLayer, window.AnimatedStat, window.HeroKpiTile,
    window.ScaleStepper, window.ScaleModel, window.DiagnosticQuiz, window.PricingCompare,
    window.Problem, window.BeforeAfter, window.IdealFit, window.CtaBanner, window.Footer,
    window.Pricing,
    window.ContactForm,
  ];
  if (needed.every(Boolean)) {
    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  } else {
    requestAnimationFrame(mount);
  }
}());