/* DockHub — app root with Tweaks panel */
const { useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#67c9c4",
  "showTicker": true,
  "headlineStyle": "italic-emphasis"
}/*EDITMODE-END*/;

function applyAccent(hex) {
  const root = document.documentElement;
  root.style.setProperty("--accent", hex);
  root.style.setProperty("--accent-soft", `color-mix(in oklch, ${hex} 14%, transparent)`);
  root.style.setProperty("--accent-line", `color-mix(in oklch, ${hex} 35%, transparent)`);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectApp(() => { applyAccent(t.accent); }, [t.accent]);

  return (
    <>
      <Nav />
      <Hero />
      {t.showTicker && <Ticker />}
      <Problem />
      <HowItWorks />
      <WhatWeBuild />
      <Why />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakColor
          label="Color"
          value={t.accent}
          options={["#67c9c4", "#7aa8ef", "#dab070", "#e09494"]}
          onChange={(v) => setTweak("accent", v)}
        />

        <TweakSection label="Headline" />
        <TweakRadio
          label="Style"
          value={t.headlineStyle}
          options={[
            { value: "italic-emphasis", label: "Serif" },
            { value: "plain", label: "Sans" },
          ]}
          onChange={(v) => setTweak("headlineStyle", v)}
        />

        <TweakSection label="Hero" />
        <TweakToggle
          label="Ticker band"
          value={t.showTicker}
          onChange={(v) => setTweak("showTicker", v)}
        />
      </TweaksPanel>

      <style>{`
        ${t.headlineStyle === "plain" ? `
          .hero__title em, .cta__title em, .why__lede .em, .leak-prose .mark, .section__title em {
            font-family: var(--sans) !important;
            font-style: normal !important;
            color: var(--accent) !important;
            font-weight: 500 !important;
          }
        ` : ``}
      `}</style>
    </>
  );
}

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