/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakText, TweakColor, TweakSlider, Results */
const { useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "brand": "Ad Scaling",
  "tagline": "We fill your calendar, follow up with every lead, and only get paid when you win. Built for clinics, home services, and coaches.",
  "accent": "#9b6bff"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty("--violet", tweaks.accent);
    document.documentElement.style.setProperty("--v-400", tweaks.accent);
  }, [tweaks.accent]);

  return (
    <>
      <div className="world-bg" />
      <div className="world-grid" />
      <Nav brand={tweaks.brand} />
      <Hero tagline={tweaks.tagline} />
      <Dashboard />
      <Journey />
      <Results />
      <Calculator />
      <Comparison />
      <MeetMoi />
      <FAQ />
      <FinalCTA />
      <Footer brand={tweaks.brand} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakText label="Studio name" value={tweaks.brand} onChange={v => setTweak("brand", v)} />
          <TweakText label="Hero tagline" value={tweaks.tagline} onChange={v => setTweak("tagline", v)} multiline />
          <TweakColor label="Accent" value={tweaks.accent} onChange={v => setTweak("accent", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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