// Per-variation wrapper that owns the page state and renders Home + inner pages.
// Each artboard hosts ONE variation, navigable in-place.

function VariationApp({ variant, pal: palOverride }) {
  const [page, setPage] = React.useState("Home");

  const config = {
    A: { Home: VariantA_Home, pal: PalEditorial, f: A_FONTS },
    B: { Home: VariantB_Home, pal: PalConverse,  f: B_FONTS },
  }[variant];

  const { Home, f } = config;
  const pal = palOverride || config.pal;
  const onNav = setPage;

  return (
    <div style={{ height: "100%", overflow: "auto", background: pal.bg }}>
      {page === "Home" && <Home onNav={onNav} pal={pal} />}
      {page === "About" && <AboutPage pal={pal} f={f} onNav={onNav} variant={variant} />}
      {page === "Services" && <ServicesPage pal={pal} f={f} onNav={onNav} />}
      {page === "Contact" && <ContactPage pal={pal} f={f} onNav={onNav} />}
    </div>
  );
}

window.VariationApp = VariationApp;