import type { Metadata } from "next";
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: Metadata = {
  title: "ACS Bumper",
  description: "Agent Control Server version bump tool",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col">
        <header className="bg-surface-0 border-b border-surface-2 px-6 h-14 flex items-center justify-between sticky top-0 z-30">
          <div className="flex items-center gap-6">
            <div className="flex items-center gap-2.5">
              <div className="w-7 h-7 rounded-md bg-accent flex items-center justify-center">
                <svg
                  className="w-4 h-4 text-white"
                  viewBox="0 0 16 16"
                  fill="currentColor"
                >
                  <path d="M8 1L14.5 5.5L8 10L1.5 5.5L8 1Z" />
                  <path d="M8 11L14.5 15L8 15L1.5 11L8 11Z" opacity="0.6" />
                </svg>
              </div>
              <h1 className="text-base font-bold tracking-tight text-text-primary">
                ACS Bumper
              </h1>
            </div>
            <Nav />
          </div>
        </header>
        <main className="flex-1 p-6 lg:p-8">{children}</main>
      </body>
    </html>
  );
}
