import type { Metadata } from "next";
import {
  IBM_Plex_Mono,
  Instrument_Sans,
} from "next/font/google";
import Script from "next/script";
import { Suspense } from "react";
import "./globals.css";
import { Analytics } from "@/components/Analytics";
import { AmbientCanvas } from "@/components/layout/AmbientCanvas";
import { Footer } from "@/components/layout/Footer";
import { Navbar } from "@/components/layout/Navbar";

const instrumentSans = Instrument_Sans({
  variable: "--font-instrument-sans",
  subsets: ["latin"],
  display: "swap",
  weight: ["400", "500", "600", "700"],
});

const ibmPlexMono = IBM_Plex_Mono({
  variable: "--font-ibm-plex-mono",
  subsets: ["latin"],
  display: "swap",
  weight: ["400", "500"],
});

export const metadata: Metadata = {
  metadataBase: new URL("https://akkolli.net"),
  title: {
    default: "Akshay Kolli",
    template: "%s | Akshay Kolli",
  },
  description: "Akshay Kolli is a CS PhD student at UMass Lowell working on world models for RL, ML hardware, GPUs, and deep learning systems.",
  openGraph: {
    title: "Akshay Kolli",
    description: "CS PhD student at UMass Lowell working on world models for RL, ML hardware, GPUs, and deep learning systems.",
    siteName: "Akshay Kolli",
    type: "website",
  },
  twitter: {
    card: "summary",
    creator: "@thekolliakshay",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body
        className={`${instrumentSans.variable} ${ibmPlexMono.variable} min-h-screen bg-paper font-sans text-ink antialiased`}
      >
        <Script src="/theme-init.js" strategy="beforeInteractive" />
        <a
          href="#main-content"
          className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[100] focus:rounded-full focus:bg-paper-strong focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-ink focus:shadow-[0_12px_30px_rgba(23,28,24,0.08)]"
        >
          Skip to content
        </a>
        <AmbientCanvas />
        <div className="site-shell flex min-h-screen flex-col">
          <Navbar />
          <main id="main-content" className="flex-grow">
            {children}
          </main>
          <Footer />
          <Suspense fallback={null}>
            <Analytics />
          </Suspense>
        </div>
      </body>
    </html>
  );
}
