/* global React, ReactDOM, Nav, PageBackground, ParticleField,
   Hero, Features, Flow, Tools, Integrations, Pricing, Testimonials, FAQ, Contact, Footer,
   NewNote, Analyzing, Analysis, Raw,
   ProductPage, SolutionsPage, SecurityPage, BlogPage, ContactPage,
   useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakToggle, TweakRadio */
const { useState:useAppS, useEffect:useAppE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "motion": 1,
  "particles": true,
  "ambient": "on"
}/*EDITMODE-END*/;

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useAppS(()=>{
    const v = localStorage.getItem("mc_view") || "home";
    return v === "analyzing" ? "new" : v;
  });

  // motion intensity -> CSS var
  useAppE(()=>{
    document.documentElement.style.setProperty("--motion", String(t.motion));
  },[t.motion]);

  useAppE(()=>{
    if(view !== "analyzing") localStorage.setItem("mc_view", view);
  },[view]);

  const go = (target)=>{
    if(target === "flow"){
      if(view !== "home"){ setView("home"); }
      setTimeout(()=>{ const el=document.getElementById("flow");
        if(el) window.scrollTo({ top: el.offsetTop - 70, behavior:"smooth" }); }, view==="home"?0:80);
      return;
    }
    setView(target);
    window.scrollTo({ top:0, behavior: view===target ? "smooth" : "auto" });
  };
  const runAnalysis = ()=>{ setView("analyzing"); window.scrollTo(0,0); };

  return (
    React.createElement(React.Fragment,null,
      React.createElement(PageBackground,{ orbs: t.ambient!=="off" }),
      t.particles && React.createElement(ParticleField,null),
      React.createElement(Nav,{ view: view==="analyzing"?"new":view, go }),
      React.createElement("main",{ className:"shell" },
        view==="home" && React.createElement(React.Fragment,null,
          React.createElement(Hero,{ go }),
          React.createElement(Features,null),
          React.createElement(Flow,null),
          React.createElement(Tools,null),
          React.createElement(Integrations,null),
          React.createElement(Pricing,{ go }),
          React.createElement(Testimonials,null),
          React.createElement(FAQ,null),
          React.createElement(Contact,null),
          React.createElement(Footer,{ go })),
        view==="new"       && React.createElement(NewNote,{ go, runAnalysis }),
        view==="analyzing" && React.createElement(Analyzing,{ onDone:()=>{ setView("analysis"); window.scrollTo(0,0); } }),
        view==="analysis"  && React.createElement(Analysis,{ go }),
        view==="raw"       && React.createElement(Raw,{ go }),
        view==="product"   && React.createElement(React.Fragment,null, React.createElement(ProductPage,{ go }), React.createElement(Footer,{ go })),
        view==="solutions" && React.createElement(React.Fragment,null, React.createElement(SolutionsPage,{ go }), React.createElement(Footer,{ go })),
        view==="security"  && React.createElement(React.Fragment,null, React.createElement(SecurityPage,{ go }), React.createElement(Footer,{ go })),
        view==="blog"      && React.createElement(React.Fragment,null, React.createElement(BlogPage,{ go }), React.createElement(Footer,{ go })),
        view==="contact"   && React.createElement(React.Fragment,null, React.createElement(ContactPage,{ go }), React.createElement(Footer,{ go }))
      ),

      React.createElement(TweaksPanel,null,
        React.createElement(TweakSection,{ label:"Motion" }),
        React.createElement(TweakSlider,{ label:"Intensity", value:t.motion, min:0, max:1, step:0.05,
          onChange:v=>setTweak("motion", v) }),
        React.createElement("div",{ style:{ display:"flex", justifyContent:"space-between", fontSize:11, color:"#8a8fa8", marginTop:-6 } },
          React.createElement("span",null,"Calm"), React.createElement("span",null,"Cinematic")),
        React.createElement(TweakSection,{ label:"Background" }),
        React.createElement(TweakToggle,{ label:"Particle field", value:t.particles, onChange:v=>setTweak("particles", v) }),
        React.createElement(TweakRadio,{ label:"Ambient orbs", value:t.ambient, options:["on","off"], onChange:v=>setTweak("ambient", v) })
      )
    )
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));