/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSlider, TweakToggle, TweakColor */
/* global ToastProvider, CartProvider, RouteProvider, useRoute, Header, Footer, CartDrawer */
/* global Home, Store, PDP, Checkout, Booking, About, Contact, Login */
/* global Services, ServiceDetail, Work, ProjectDetail */
/* global Intelligence, IntelligenceDetail, Panel, Membership, ViewsBoost, Desk */
/* global FAQPage, Shipping, Privacy, Terms, Accessibility, Sitemap, Press, Journal */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "bookingFlow": "stepped",
  "accent": "#ffcc53",
  "tone": "warm",
  "displayWeight": "light",
  "showHero": true,
  "headerStyle": "centered"
}/*EDITMODE-END*/;

function ApplyTweaks({ tweaks }) {
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--gold", tweaks.accent);
    // derive softer / deeper from accent
    root.style.setProperty("--gold-soft", tweaks.accent);
    // body class for tone shift
    document.body.dataset.tone = tweaks.tone;
    document.body.dataset.headerStyle = tweaks.headerStyle;
    document.body.dataset.displayWeight = tweaks.displayWeight;
  }, [tweaks]);
  return null;
}

function Router() {
  const { route } = useRoute();
  switch (route.name) {
    case "home":     return <Home />;
    case "services": return <Services />;
    case "service":  return <ServiceDetail />;
    case "work":     return <Work />;
    case "project":  return <ProjectDetail />;
    case "store":    return <Store />;
    case "pdp":      return <PDP />;
    case "checkout": return <Checkout />;
    case "desk":     return <Desk />;
    case "booking":  return <Booking variant={window.__bookingVariant || "stepped"} />;
    case "about":    return <About />;
    case "contact":  return <Contact />;
    case "intelligence":        return <Intelligence />;
    case "panel":               return <ViewsBoost />;
    case "membership":          return <ViewsBoost />;
    case "atelier":             return <Panel />;     /* legacy Atelier kept at /atelier */
    case "intelligence-detail": return <IntelligenceDetail />;
    case "portal":   { window.location.assign("https://portal.elevenviews.io"); return null; }
    case "login":    return <Login />;
    case "faq":      return <FAQPage />;
    case "shipping": return <Shipping />;
    case "privacy":  return <Privacy />;
    case "terms":    return <Terms />;
    case "accessibility": return <Accessibility />;
    case "sitemap":  return <Sitemap />;
    case "press":    return <Press />;
    case "journal":  return <Journal />;
    default:         return <Home />;
  }
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // expose booking variant globally so Router can read it without prop drilling
  window.__bookingVariant = t.bookingFlow;

  return (
    <RouteProvider>
      <CartProvider>
        <ToastProvider>
          <ApplyTweaks tweaks={t} />
          <Header />
          <Router />
          <Footer />
          <CartDrawer />

          <TweaksPanel title="Tweaks · Eleven Views">
            <TweakSection label="Booking flow" />
            <TweakRadio
              label="Layout"
              value={t.bookingFlow}
              options={[
                { value: "stepped", label: "Stepped" },
                { value: "editorial", label: "Editorial" },
              ]}
              onChange={(v) => setTweak("bookingFlow", v)}
            />
            <div style={{ fontSize: 10.5, color: "rgba(41,38,27,.55)", marginTop: -2, lineHeight: 1.5 }}>
              <b>Stepped</b> — sidebar wizard with live summary.<br/>
              <b>Editorial</b> — long-scroll, magazine-style form.
            </div>

            <TweakSection label="Tone" />
            <TweakColor
              label="Accent"
              value={t.accent}
              onChange={(v) => setTweak("accent", v)}
            />
          </TweaksPanel>
        </ToastProvider>
      </CartProvider>
    </RouteProvider>
  );
}

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