const TWEAK_DEFAULTS = {
  "theme": "dark",
  "accent": "#4ED69C",
  "showStickyCta": true
};

const accentToPalette = (hex) => {
  document.documentElement.style.setProperty("--bh-green", hex);
  document.documentElement.style.setProperty("--bh-green-deep", `color-mix(in oklab, ${hex} 70%, #000)`);
  document.documentElement.style.setProperty("--bh-green-glow", `color-mix(in oklab, ${hex} 65%, #fff)`);
  document.documentElement.style.setProperty("--bh-green-soft", `color-mix(in oklab, ${hex} 18%, #fff)`);
};

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
    accentToPalette(tweaks.accent);
  }, [tweaks.theme, tweaks.accent]);

  return (
    <React.Fragment>
      <Nav tweaks={tweaks}/>
      <main>
        <Hero tweaks={tweaks}/>
        <TrustStrip/>
        <About/>
        <Packages/>
        <PackageFinder/>
        <Portfolio/>
        <Testimonials/>
        <FAQ/>
        <Contact/>
      </main>
      <Footer/>

      {tweaks.showStickyCta && (
        <a href="#contact" className="btn btn-green sticky-cta">
          <span style={{
            width: 8, height: 8, borderRadius:"50%",
            background:"#08110d", display:"inline-block",
          }}/>
          Get a website
        </a>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio
            label="Mood"
            value={tweaks.theme}
            options={["warm", "sage", "dark"]}
            onChange={v => setTweak("theme", v)}
          />
          <TweakColor
            label="Accent"
            value={tweaks.accent}
            options={["#4ED69C", "#3d7d9c", "#c98d4c", "#a87878"]}
            onChange={v => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakToggle
            label='Sticky "Get a website" button'
            value={tweaks.showStickyCta}
            onChange={v => setTweak("showStickyCta", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
};

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