import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono, Fredoka, Permanent_Marker } from "next/font/google"
import { MusicProvider } from "@/components/music/music-provider"
import { MiniPlayer } from "@/components/music/mini-player"
import { UpdateBanner } from "@/components/update-banner"
import { OfflineProvider } from "@/lib/stores/offline"
import { ServiceWorkerRegister } from "@/components/sw-register"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })
const _fredoka = Fredoka({
  subsets: ["latin"],
  weight: ["400", "700"],
  variable: "--font-fredoka",
})
const _permanentMarker = Permanent_Marker({
  subsets: ["latin"],
  weight: ["400"],
  variable: "--font-marker",
})

export const metadata: Metadata = {
  metadataBase: new URL("https://jefflix.com"),
  title: "Jefflix - Seize the Streams of Production",
  description: "A revolutionary approach to media consumption. Free from subscriptions, owned by the people.",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://jefflix.com",
    title: "Jefflix - Seize the Streams of Production",
    description: "A revolutionary approach to media consumption. Free from subscriptions, owned by the people.",
    siteName: "Jefflix",
    images: [
      {
        url: "/og-image.jpg",
        width: 1200,
        height: 630,
        alt: "Jefflix - Seize the Streams of Production",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Jefflix - Seize the Streams of Production",
    description: "A revolutionary approach to media consumption. Free from subscriptions, owned by the people.",
    images: ["/og-image.jpg"],
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className={`${_fredoka.variable} ${_permanentMarker.variable}`}>
      <body className={`font-sans antialiased`}>
        <ServiceWorkerRegister />
        <UpdateBanner />
        <MusicProvider>
          <OfflineProvider>
            {children}
            <MiniPlayer />
          </OfflineProvider>
        </MusicProvider>
      </body>
    </html>
  )
}
