import type { Metadata, Viewport } from "next";

import { Inter, JetBrains_Mono } from "next/font/google";

import { Providers } from "./providers";

import { AppShell } from "@/components/layout/AppShell";

import "./globals.css";

const inter = Inter({

  subsets: ["latin"],

  variable: "--font-inter",

  display: "swap",

});

const jetbrainsMono = JetBrains_Mono({

  subsets: ["latin"],

  variable: "--font-jetbrains-mono",

  display: "swap",

});

export const metadata: Metadata = {

  title: "DropHawk - ticket drop monitor",

  description:

    "Always-on, self-hosted monitor that catches the instant tickets go on sale and pushes you a one-tap buy link.",

  applicationName: "DropHawk",

  manifest: "/manifest.webmanifest",

  appleWebApp: { capable: true, title: "DropHawk", statusBarStyle: "black-translucent" },

};

export const viewport: Viewport = {

  themeColor: "#0b0e14",

  width: "device-width",

  initialScale: 1,

  viewportFit: "cover",

};

export default function RootLayout({ children }: { children: React.ReactNode }) {

  return (

    <html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>

      <body className="antialiased">

        <Providers>

          <AppShell>{children}</AppShell>

        </Providers>

      </body>

    </html>

  );

}