import type { ReactNode } from "react";
import Link from "next/link";
import { Geist, Geist_Mono } from "next/font/google";
import { Nav } from "@/components/Nav";
import "./globals.css";

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

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

export const metadata = {
  title: "regional-insight",
  description: "Weekly fleet analysis for observability regions",
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={`${geistSans.variable} ${geistMono.variable} h-full`}>
      <body className="flex min-h-full flex-col antialiased">
        <header className="sticky top-0 z-30 border-b border-surface-2 bg-surface-0">
          <div className="flex h-14 items-center gap-6 px-6">
            <Link href="/" className="flex items-center gap-2.5">
              <span className="flex h-7 w-7 items-center justify-center rounded-md bg-accent">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  className="h-4 w-4 text-on-accent"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth={2.5}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <polyline points="2 12 6 12 9 4 13 20 16 12 22 12" />
                </svg>
              </span>
              <span className="text-sm font-semibold tracking-tight">regional-insight</span>
            </Link>
            <Nav />
          </div>
        </header>
        <main className="flex-1 p-6 lg:p-8">{children}</main>
      </body>
    </html>
  );
}
