/* Pilgrim Wright — App shell, router, and Tweaks integration */

var { useState, useEffect, useRef, useMemo } = React;

const TweaksContext = React.createContext({});
window.TweaksContext = TweaksContext;

function App() {
  const [page, setPage] = useState(() => {
    const hash = window.location.hash.replace("#", "");
    return ["home", "services", "audiences", "about", "contact"].includes(hash) ? hash : "home";
  });

  const navigate = (next) => {
    setPage(next);
    window.history.replaceState(null, "", `#${next}`);
    requestAnimationFrame(() => window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" }));
  };

  useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace("#", "");
      if (["home", "services", "audiences", "about", "contact"].includes(h)) {
        setPage(h);
      }
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Tweaks
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "navy",
    "motif": true,
    "density": "comfortable",
    "headline": "frontier"
  }/*EDITMODE-END*/;
  const [tweaks, setTweaks] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks to DOM
  useEffect(() => {
    document.documentElement.setAttribute("data-palette", tweaks.palette);
    document.documentElement.setAttribute("data-motif", tweaks.motif ? "on" : "off");
    document.documentElement.setAttribute("data-density", tweaks.density);
  }, [tweaks]);

  // Provide tweaks via context-y window global so HomeHero can read headline
  window.__tweaks = tweaks;

  let Page = HomePage;
  if (page === "services") Page = ServicesPage;
  else if (page === "audiences") Page = AudiencesPage;
  else if (page === "about") Page = AboutPage;
  else if (page === "contact") Page = ContactPage;

  return (
    <TweaksContext.Provider value={tweaks}>
      <Nav page={page} navigate={navigate} />
      <main>
        <Page key={page} navigate={navigate} />
      </main>
      <Footer navigate={navigate} />
      <PWTweaks tweaks={tweaks} setTweak={setTweaks} />
    </TweaksContext.Provider>
  );
}

/* ---------- Tweaks panel ---------- */
function PWTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks · Pilgrim Wright">
      <TweakSection label="Palette">
        <TweakRadio
          label="Primary"
          value={tweaks.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "navy", label: "Navy" },
            { value: "forest", label: "Forest" },
            { value: "charcoal", label: "Char" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Motif">
        <TweakToggle
          label="Compass & topo marks"
          value={tweaks.motif}
          onChange={(v) => setTweak("motif", v)}
        />
      </TweakSection>

      <TweakSection label="Density">
        <TweakRadio
          label="Rhythm"
          value={tweaks.density}
          onChange={(v) => setTweak("density", v)}
          options={[
            { value: "comfortable", label: "Airy" },
            { value: "compact", label: "Compact" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Headline copy">
        <TweakSelect
          label="Hero headline"
          value={tweaks.headline}
          onChange={(v) => setTweak("headline", v)}
          options={[
            { value: "frontier", label: "Chart your path to the AI frontier." },
            { value: "guide", label: "A trusted guide for the journey ahead." },
            { value: "progress", label: "Purposeful progress, into the unfamiliar." },
            { value: "ground", label: "For organizations stepping into new ground." },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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