import type { Metadata } from "next";
import { IBM_Plex_Mono, Manrope } from "next/font/google";

import { SupportButton } from "@/components/trade-in/v2/SupportButton";
import { SupportChatProvider } from "@/components/trade-in/v2/SupportChatContext";
import { pageBg } from "@/components/trade-in/v2/tokens";

// Manrope — primary sans typeface of the МЕРА HUD. next/font is bundled
// (no package.json change). Cyrillic + latin so RU labels render correctly.
const manrope = Manrope({
  subsets: ["latin", "cyrillic"],
  weight: ["200", "300", "400", "500", "600", "700"],
  variable: "--font-manrope",
  display: "swap",
});

// IBM Plex Mono — cockpit numerals / mono labels.
const plexMono = IBM_Plex_Mono({
  subsets: ["latin", "cyrillic"],
  weight: ["300", "400", "500"],
  variable: "--font-plex-mono",
  display: "swap",
});

export const metadata: Metadata = {
  title: "МЕРА · Оценка v2",
};

export default function TradeInV2Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div
      className={`${manrope.variable} ${plexMono.variable}`}
      style={{
        minHeight: "100vh",
        background: pageBg,
        display: "flex",
        justifyContent: "center",
        alignItems: "flex-start",
      }}
    >
      {/* SupportChatProvider wraps both {children} (TopNav's "Помощь" item
          lives deep inside it, in page.tsx) and <SupportButton /> (mounted
          here as a sibling, portaled to document.body) — they share one
          open/closed chat state via context, see SupportChatContext.tsx. */}
      <SupportChatProvider>
        {children}
        {/* Mounted here (not the global app/layout.tsx) — that layout also
            covers the admin `/scrapers/**` area and `/sale-share`, unrelated
            products without the МЕРА brand that don't need a support link. */}
        <SupportButton />
      </SupportChatProvider>
    </div>
  );
}