import type { Metadata } from "next";
import { Manrope, Inter } from "next/font/google";
import DynamicNotchNav from "@/components/DynamicNotchNav";
import Footer from "@/components/Footer";
import "./globals.css";

// Manrope — display / heading typeface (variable font, all weights available).
const manrope = Manrope({
  subsets: ["latin"],
  variable: "--font-manrope",
  display: "swap",
});

// Inter — body typeface (clean, highly-readable sans-serif, variable font).
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
});

export const metadata: Metadata = {
  title: {
    default: "Oscar One — Build to outperform",
    template: "%s | Oscar One",
  },
  description:
    "Oscar One delivers engineering-grade aviation and drone technology — aerial survey, inspection, surveillance, and logistics platforms built to outperform.",
  keywords: [
    "Oscar One",
    "drone technology",
    "aviation",
    "aerial survey",
    "drone inspection",
    "UAV",
    "autonomous systems",
  ],
  authors: [{ name: "Oscar One" }],
  metadataBase: new URL("https://example.com"),
  openGraph: {
    title: "Oscar One — Build to outperform",
    description:
      "Engineering-grade aviation and drone technology, built to outperform.",
    type: "website",
    siteName: "Oscar One",
  },
  robots: { index: true, follow: true },
};

export const viewport = {
  themeColor: "#0b1f45",
  width: "device-width",
  initialScale: 1,
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="en"
      className={`${manrope.variable} ${inter.variable} scroll-smooth`}
    >
      <body>
        <DynamicNotchNav />
        {children}
        <Footer />
      </body>
    </html>
  );
}