import type { Metadata, Viewport } from "next";
import { Inter, Plus_Jakarta_Sans } from "next/font/google";
import { Toaster } from "react-hot-toast";
import { AuthProvider } from "@/contexts/AuthContext";
import "./globals.css";

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

const jakarta = Plus_Jakarta_Sans({
  subsets: ["latin"],
  variable: "--font-jakarta",
  display: "swap",
});

export const metadata: Metadata = {
  title: {
    default: "Property Hub | Premium Property Team Management",
    template: "%s | Property Hub",
  },
  description:
    "A professional real estate platform featuring a multi-level commission system, verified listings, and network growth tools.",
  keywords: ["Property Hub", "real estate", "MLM", "commission", "property", "investment"],
  authors: [{ name: "Property Hub" }],
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${inter.variable} ${jakarta.variable}`} data-scroll-behavior="smooth">
      <body className="min-h-screen bg-white text-black antialiased font-sans selection:bg-black selection:text-white">
        <AuthProvider>
          {children}
          <Toaster
            position="top-right"
            toastOptions={{
              duration: 4000,
              style: {
                background: "#ffffff",
                color: "#000000",
                border: "1px solid #e2e8f0",
                borderRadius: "16px",
                fontSize: "14px",
                fontWeight: "500",
                boxShadow: "0 10px 40px rgba(0,0,0,0.06)",
                padding: "16px 24px",
              },
              success: {
                iconTheme: { primary: "#000000", secondary: "#ffffff" },
              },
              error: {
                iconTheme: { primary: "#ff0000", secondary: "#ffffff" },
              },
            }}
          />
        </AuthProvider>
      </body>
    </html>
  );
}
