/* global React, ReactDOM,
   RouterProvider, useRouter, Header, Footer, UtilityBar, StickyCall, FloatingBanner,
   HomePage, ServicesHub, ServiceDetail, GalleryPage, AboutPage, ContactPage, NotFound,
   TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e8d57a",
  "hero": "overlay",
  "ctaStyle": "button",
  "density": "regular"
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  "#e8d57a": { name: "Cream Yellow" }, // default pale cream yellow
  "#ead675": { name: "Buttercream" },  // slightly warmer
  "#d4a23a": { name: "Brass" },        // warm gold
  "#4a90d4": { name: "Steel Blue" },   // industrial blue
};

function applyAccent(hex) {
  document.documentElement.style.setProperty("--accent", hex);
}

function applyDensity(d) {
  document.body.classList.remove("density-compact", "density-regular", "density-airy");
  document.body.classList.add(`density-${d}`);
}

function applyHero(h) {
  document.body.classList.remove("hero-overlay", "hero-split", "hero-textured");
  document.body.classList.add(`hero-${h}`);
}

function applyCtaStyle(s) {
  document.body.classList.remove("cta-style-button", "cta-style-banner", "cta-style-sticky");
  document.body.classList.add(`cta-style-${s}`);
}

function Routes() {
  const { path } = useRouter();
  const svcMatch = path.match(/^\/services\/(.+)$/);
  if (path === "/" || path === "") return <HomePage />;
  if (path === "/services") return <ServicesHub />;
  if (svcMatch) return <ServiceDetail slug={svcMatch[1]} />;
  if (path === "/gallery") return <GalleryPage />;
  if (path === "/about") return <AboutPage />;
  if (path === "/contact") return <ContactPage />;
  return <NotFound />;
}

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

  useEffect(() => { applyAccent(t.accent); }, [t.accent]);
  useEffect(() => { applyDensity(t.density); }, [t.density]);
  useEffect(() => { applyHero(t.hero); }, [t.hero]);
  useEffect(() => { applyCtaStyle(t.ctaStyle); }, [t.ctaStyle]);

  return (
    <RouterProvider>
      <UtilityBar />
      <Header />
      <FloatingBanner />
      <Routes />
      <Footer />
      <StickyCall />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent color">
          <TweakColor
            label="Accent"
            value={t.accent}
            onChange={v => setTweak("accent", v)}
            options={Object.keys(ACCENT_PRESETS)}
          />
        </TweakSection>
        <TweakSection label="Hero treatment">
          <TweakRadio
            label="Style"
            value={t.hero}
            onChange={v => setTweak("hero", v)}
            options={[
              { value: "overlay", label: "Overlay" },
              { value: "split", label: "Split" },
              { value: "textured", label: "Textured" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Phone CTA">
          <TweakRadio
            label="Style"
            value={t.ctaStyle}
            onChange={v => setTweak("ctaStyle", v)}
            options={[
              { value: "button", label: "Button" },
              { value: "banner", label: "Banner" },
              { value: "sticky", label: "Sticky" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Density">
          <TweakRadio
            label="Spacing"
            value={t.density}
            onChange={v => setTweak("density", v)}
            options={[
              { value: "compact", label: "Compact" },
              { value: "regular", label: "Regular" },
              { value: "airy", label: "Airy" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </RouterProvider>
  );
}

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