import type { Metadata, Viewport } from "next";
import { Cairo, Tajawal } from "next/font/google";
import "./globals.css";

const tajawal = Tajawal({
  subsets: ["arabic", "latin"],
  weight: ["400", "500", "700", "800"],
  variable: "--font-tajawal"
});

const cairo = Cairo({
  subsets: ["arabic", "latin"],
  weight: ["400", "600", "700", "800"],
  variable: "--font-cairo"
});

export const metadata: Metadata = {
  title: "نور الحرمين للحج والعمرة",
  description: "منصة فاخرة لحجوزات الحج والعمرة، الفنادق، الحافلات، المرشدين، والتذاكر الذكية.",
  manifest: "/manifest.webmanifest",
  appleWebApp: {
    capable: true,
    title: "نور الحرمين",
    statusBarStyle: "black-translucent"
  }
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 5,
  themeColor: "#0f5f43"
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="ar" suppressHydrationWarning>
      <body className={`${tajawal.variable} ${cairo.variable} font-tajawal`}>{children}</body>
    </html>
  );
}
