/* global React, ReactDOM, Nav, Hero, TrustRow, Problem, Platform, Enterprise, SupportedModels, HowItWorks, Upstream, UseCases, CaseStudies, Specs, CTA, Footer, Tweaks, LeadModal */
const { useState, useEffect } = React;

function App() {
  const [tweaks, setTweaks] = useState(window.__TWEAKS || { heroVariant: 'blueprint', accent: 'purple', showGrid: true });
  const [leadIntent, setLeadIntent] = useState(null);

  useEffect(() => {
    document.documentElement.setAttribute('data-accent', tweaks.accent);
    document.documentElement.setAttribute('data-show-grid', tweaks.showGrid ? 'true' : 'false');
  }, [tweaks]);

  useEffect(() => {
    // Global opener so any button in the tree can request the modal.
    window.__openLeadModal = (intent) => setLeadIntent(intent);
  }, []);

  return (
    <div className="page">
      <Nav />
      <Hero variant={tweaks.heroVariant} />
      <TrustRow />
      <Problem />
      <Platform />
      <Enterprise />
      <SupportedModels />
      <HowItWorks />
      <Upstream />
      <UseCases />
      <CaseStudies />
      <CTA />
      <Footer />
      <Tweaks tweaks={tweaks} setTweaks={setTweaks} />
      {leadIntent && <LeadModal intent={leadIntent} onClose={() => setLeadIntent(null)} />}
    </div>
  );
}

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