import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
// BEGIN CHANGE: providers + artwork global em todas as paginas
import { LanguageProvider } from "@/i18n/LanguageProvider";
import { AuthProvider } from "@/auth/AuthProvider";
import { HeroBackground } from "@/components/HeroBackground";
import { EnvBanner } from "@/components/EnvBanner";
// END CHANGE

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

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

export const metadata: Metadata = {
  title: "White Antidote - Open Tibia Server",
  description: "Portal oficial do White Antidote. Novo site em construcao.",
  // BEGIN CHANGE: favicon com fundo escuro (visivel na aba) + cache-bust
  icons: {
    icon: [
      { url: "/favicon.ico?v=3", sizes: "any" },
      { url: "/favicon-32.png?v=3", type: "image/png", sizes: "32x32" },
      { url: "/favicon-48.png?v=3", type: "image/png", sizes: "48x48" },
    ],
    apple: [{ url: "/apple-touch-icon.png?v=3", type: "image/png", sizes: "180x180" }],
  },
  // END CHANGE
};

// BEGIN CHANGE: viewport mobile (evita zoom/layout quebrado no celular)
export const viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 5,
  viewportFit: "cover" as const,
};
// END CHANGE

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="pt-BR"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
      <body className="flex min-h-full min-w-0 flex-col overflow-x-clip bg-transparent">
        {/* BEGIN CHANGE: artwork fixo + providers */}
        <HeroBackground />
        <LanguageProvider>
          <AuthProvider>
            <EnvBanner />
            {children}
          </AuthProvider>
        </LanguageProvider>
        {/* END CHANGE */}
      </body>
    </html>
  );
}
