import type { Metadata, Viewport } from "next";
import { Inter, JetBrains_Mono } from "next/font/google";
import type { ReactNode } from "react";
import { CommandPalette } from "@/components/command-palette";
import { Header } from "@/components/header";
import { MobileNav } from "@/components/mobile-nav";
import { Providers } from "@/components/theme";
import { SITE_URL } from "@/lib/routes";
import "./globals.css";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
const mono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains", display: "swap", weight: ["400", "500"] });

const TITLE = "DataCenterIndex — The global index of data center infrastructure";
const DESCRIPTION = "Facilities, operators, cloud regions, markets, countries, projects, power and connectivity — every figure sourced, versioned and tracked in a live change feed.";

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  title: { default: TITLE, template: "%s · DataCenterIndex" },
  description: DESCRIPTION,
  applicationName: "DataCenterIndex",
  authors: [{ name: "Simon-Pierre Boucher", url: "mailto:contact@spboucher.ai" }],
  creator: "Simon-Pierre Boucher",
  keywords: ["data centers", "data center map", "hyperscale", "colocation", "cloud regions", "MW capacity", "construction pipeline", "digital infrastructure index"],
  alternates: { canonical: "/" },
  openGraph: { type: "website", siteName: "DataCenterIndex", url: SITE_URL, title: TITLE, description: DESCRIPTION, locale: "en_US" },
  twitter: { card: "summary_large_image", title: TITLE, description: DESCRIPTION },
  robots: { index: true, follow: true },
  category: "technology",
};

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: dark)", color: "#0b0f14" },
    { media: "(prefers-color-scheme: light)", color: "#f5f4f1" },
  ],
  width: "device-width",
  initialScale: 1,
  viewportFit: "cover",
};

const jsonLd = {
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": `${SITE_URL}/#org`,
      name: "DataCenterIndex",
      url: SITE_URL,
      logo: `${SITE_URL}/brand/logo-mark.svg`,
      email: "contact@spboucher.ai",
      founder: { "@type": "Person", name: "Simon-Pierre Boucher", email: "contact@spboucher.ai" },
      contactPoint: [{ "@type": "ContactPoint", email: "contact@spboucher.ai", contactType: "customer support", availableLanguage: ["en", "fr"] }],
    },
    {
      "@type": "WebSite",
      "@id": `${SITE_URL}/#website`,
      url: SITE_URL,
      name: "DataCenterIndex",
      description: DESCRIPTION,
      publisher: { "@id": `${SITE_URL}/#org` },
      potentialAction: { "@type": "SearchAction", target: { "@type": "EntryPoint", urlTemplate: `${SITE_URL}/search?q={search_term_string}` }, "query-input": "required name=search_term_string" },
    },
  ],
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={`${inter.variable} ${mono.variable}`} suppressHydrationWarning>
      <body className="min-h-dvh">
        <Providers>
          <a href="#main" className="sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-[110] focus:rounded-sm focus:border focus:border-hair-2 focus:bg-surface focus:px-3 focus:py-2">
            Skip to content
          </a>
          <Header />
          {children}
          <MobileNav />
          <CommandPalette />
        </Providers>
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      </body>
    </html>
  );
}