// app.jsx — root component, route state, Tweaks panel wiring

const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const [route, setRouteState] = useStateApp("home");

  // Persist route in URL hash (#/home, #/orglens, etc.)
  useEffectApp(() => {
    const fromHash = () => {
      const m = window.location.hash.match(/^#\/(\w+)/);
      if (m) setRouteState(m[1]);
    };
    fromHash();
    window.addEventListener("hashchange", fromHash);
    return () => window.removeEventListener("hashchange", fromHash);
  }, []);

  const setRoute = (next) => {
    setRouteState(next);
    if (window.location.hash !== `#/${next}`) {
      history.pushState(null, "", `#/${next}`);
    }
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  // Apply tweaks
  useEffectApp(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    // Recompute derived accent tokens
    const hex = t.accent.replace("#", "");
    const r = parseInt(hex.slice(0, 2), 16);
    const g = parseInt(hex.slice(2, 4), 16);
    const b = parseInt(hex.slice(4, 6), 16);
    document.documentElement.style.setProperty("--accent-dim", `rgba(${r},${g},${b},0.12)`);
    document.documentElement.style.setProperty("--accent-border", `rgba(${r},${g},${b},0.35)`);
    // Lighten for hover
    document.documentElement.style.setProperty(
      "--accent-hover",
      `rgb(${Math.min(255, r + 22)},${Math.min(255, g + 22)},${Math.min(255, b + 22)})`
    );
  }, [t.accent]);

  useEffectApp(() => {
    document.body.classList.toggle("a11y-508", !!t.a11y508);
  }, [t.a11y508]);

  // Per-route document title for SEO + browser history hygiene
  useEffectApp(() => {
    const titles = {
      home:         "CrestIron — Salesforce release management & deployment risk",
      orglens:      "OrgLens AI — Salesforce org health, technical debt & Agentforce readiness | CrestIron",
      releaseguard: "ReleaseGuard AI — Salesforce release management & deployment-risk copilot | CrestIron",
      pricing:      "Pricing — ReleaseGuard AI & OrgLens AI | CrestIron",
      customers:    "How teams use CrestIron — Salesforce DevOps case studies",
      about:        "About CrestIron — Salesforce delivery governance for the enterprise",
      resources:    "Resources — Salesforce DevOps, release management & change management | CrestIron",
      contact:      "Contact CrestIron — Book a Salesforce release-governance briefing",
    };
    document.title = titles[route] || titles.home;
  }, [route]);

  const pageProps = { setRoute, defaultDemo: t.defaultDemo };

  return (
    <div>
      <Nav route={route} setRoute={setRoute} />

      {route === "home" && <PageHome {...pageProps} />}
      {route === "orglens" && <PageOrgLens {...pageProps} />}
      {route === "releaseguard" && <PageReleaseGuard {...pageProps} />}
      {route === "pricing" && <PagePricing {...pageProps} />}
      {route === "customers" && <PageCustomers {...pageProps} />}
      {route === "about" && <PageAbout {...pageProps} />}
      {route === "resources" && <PageResources {...pageProps} />}
      {route === "contact" && <PageContact {...pageProps} />}

      <Footer setRoute={setRoute} />

      <TweaksPanel>
        <TweakSection label="Accessibility" />
        <TweakToggle
          label="Section 508 mode"
          value={t.a11y508}
          onChange={(v) => setTweak("a11y508", v)}
        />
        <TweakSection label="Theme" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#4a7fff", "#5fb086", "#d4a040", "#9a7dff"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Hero" />
        <TweakRadio
          label="Default demo"
          value={t.defaultDemo}
          options={[
            { value: "orglens", label: "OrgLens" },
            { value: "releaseguard", label: "ReleaseGuard" },
          ]}
          onChange={(v) => setTweak("defaultDemo", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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