import type { Metadata, Viewport } from "next";
import { Plus_Jakarta_Sans, Inter } from "next/font/google";
import "./globals.css";
import { ServiceWorkerRegistration } from "@/components/shared/ServiceWorkerRegistration";
import { SplashScreen } from "@/components/shared/SplashScreen";
import { AuthProvider } from "@/context/AuthContext";

const plusJakarta = Plus_Jakarta_Sans({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700", "800"],
  variable: "--font-heading",
  display: "swap",
});

const inter = Inter({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
  variable: "--font-body",
  display: "swap",
});

export const metadata: Metadata = {
  title: {
    default: "Al-Bakkah Travels and Tours",
    template: "%s | Al-Bakkah Travels",
  },
  description:
    "Premium Hajj and Umrah travel packages. Save toward your pilgrimage with our installment wallet. Serving Nigerian pilgrims with integrity and luxury.",
  keywords: ["Hajj", "Umrah", "Nigeria", "pilgrimage", "travel", "Makkah", "Madinah"],
  authors: [{ name: "Al-Bakkah Travels and Tours Ltd." }],
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "black-translucent",
    title: "Al-Bakkah",
  },
  openGraph: {
    type: "website",
    siteName: "Al-Bakkah Travels and Tours",
    title: "Al-Bakkah Travels and Tours",
    description: "Premium Hajj and Umrah packages with installment savings wallet.",
  },
};

export const viewport: Viewport = {
  themeColor: "#1C2472",
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={`${plusJakarta.variable} ${inter.variable}`}>
      <head>
        <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
        <meta name="mobile-web-app-capable" content="yes" />
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
        {/* Capture beforeinstallprompt before React mounts — the event fires very
            early in page load and would be missed by a useEffect listener */}
        <script dangerouslySetInnerHTML={{ __html: `
          window.__pwaPrompt = null;
          window.addEventListener('beforeinstallprompt', function(e) {
            e.preventDefault();
            window.__pwaPrompt = e;
          });
        `}} />
      </head>
      <body className="bg-background text-on-surface font-body-md overflow-x-hidden selection:bg-gold-accent selection:text-surface-deep antialiased" style={{ minHeight: "max(884px, 100dvh)", backgroundColor: "#040b61" }}>
        <SplashScreen />
        <ServiceWorkerRegistration />
        <AuthProvider>{children}</AuthProvider>
      </body>
    </html>
  );
}
