// import type React from "react"
// import type { Metadata } from "next"
// import { Inter } from "next/font/google"
// import "./globals.css"
// import { AuthProvider } from "@/hooks/use-auth"
// import { LeadsProvider } from "@/hooks/use-leads"
// import RouteGuard from "@/components/route-guard"
// import { Suspense } from "react"
// import { Toaster } from "sonner"   // 👈 ADD THIS

// const inter = Inter({
//   subsets: ["latin"],
//   variable: "--font-sans",
// })

// export const metadata: Metadata = {
//   title: "Kairali Group Management System",
//   description: "Employee and Business Management Platform",
//   generator: "v0.app",
//   icons: {
//     icon: "/crm.png",
//   },
// }

// export default function RootLayout({
//   children,
// }: Readonly<{
//   children: React.ReactNode
// }>)
//  {
//   return (
//     <html lang="en" className={`${inter.variable} antialiased`}>
//       <body>
//         <Suspense
//           fallback={
//             <div className="flex items-center justify-center min-h-screen">
//               Loading...
//             </div>
//           }
//         >
//           <AuthProvider>
//             <RouteGuard>
//               <LeadsProvider>
//                 {children}

//                 {/* ✅ GLOBAL TOAST MOUNT */}
//                 <Toaster
//                   position="top-right"
//                   richColors
//                   toastOptions={{
//                     style: {
//                       fontSize: "14px",
//                     },
//                   }}
//                 />
//               </LeadsProvider>
//             </RouteGuard>
//           </AuthProvider>
//         </Suspense>
//       </body>
//     </html>
//   )
// }


/*path: app/layout.tsx */
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { AuthProvider } from "@/hooks/use-auth"
import { LeadsProvider } from "@/hooks/use-leads"
import RouteGuard from "@/components/route-guard"
import ContentProtectionProvider from "@/components/content-protection-provider" // 👈 ADD THIS
import { Suspense } from "react"
import { Toaster } from "sonner"

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
})

export const metadata: Metadata = {
  title: "Kairali Group Management System",
  description: "Employee and Business Management Platform",
  generator: "v0.app",
  icons: {
    icon: "/crm.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>)
 {
  return (
    <html lang="en" className={`${inter.variable} antialiased`}>
      <body>
        <Suspense
          fallback={
            <div className="flex items-center justify-center min-h-screen">
              Loading...
            </div>
          }
        >
          <AuthProvider>
            <RouteGuard>
              <LeadsProvider>
                {/* 🛡️ ADD CONTENT PROTECTION HERE */}
                <ContentProtectionProvider>
                  {children}
                </ContentProtectionProvider>

                {/* ✅ GLOBAL TOAST MOUNT */}
                <Toaster
                  position="top-right"
                  richColors
                  toastOptions={{
                    style: {
                      fontSize: "14px",
                    },
                  }}
                />
              </LeadsProvider>
            </RouteGuard>
          </AuthProvider>
        </Suspense>
      </body>
    </html>
  )
}
