import type { Metadata, Viewport } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import Script from "next/script";
import "./globals.css";
import { ToastProvider } from "@/components/ui/toast";
import { SwRegister } from "@/components/app/sw-register";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: {
    default: "South Armz Global",
    template: "%s — South Armz Global",
  },
  description:
    "South Armz Global is the parent holding company for a portfolio of operating businesses across food and beverage, hemp, technology, media, and recreation — most headquartered in North Carolina.",
  manifest: "/manifest.json",
  openGraph: {
    title: "South Armz Global",
    description: "One family. Many ventures. Built in North Carolina.",
    type: "website",
  },
  icons: {
    icon: "/sag-logo.png",
    apple: "/sag-logo.png",
  },
};

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
    { media: "(prefers-color-scheme: dark)", color: "#0a0a0a" },
  ],
};

// Inline script runs before React hydrates so the theme is applied on the
// initial paint — no flash-of-wrong-theme.
const THEME_INIT = `
(function(){try{
  var stored=localStorage.getItem('sag.theme');
  var t = (stored==='light'||stored==='dark') ? stored
        : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  if (t==='dark') document.documentElement.classList.add('dark');
}catch(e){}})();
`;

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
      suppressHydrationWarning
    >
      <head>
        <Script id="theme-init" strategy="beforeInteractive">
          {THEME_INIT}
        </Script>
        {/* Figma html-to-design capture script — only fires when URL has #figmacapture=... */}
        <Script id="figma-capture" src="https://mcp.figma.com/mcp/html-to-design/capture.js" strategy="afterInteractive" />
      </head>
      <body className="min-h-full flex flex-col bg-background text-foreground">
        <ToastProvider>
          {children}
          <SwRegister />
        </ToastProvider>
      </body>
    </html>
  );
}
