import type { Metadata } from "next";
import "./globals.css";
import { Providers } from "./providers";
import { Toaster } from "react-hot-toast";

export const metadata: Metadata = {
  title: { default: "ProTouch - Laptops & iPhones Kenya", template: "%s | ProTouch" },
  description: "Kenya's premier tech store. Shop brand new laptops, iPhones, and accessories at the best prices. Same-day delivery in Nairobi.",
  keywords: ["laptops Kenya", "iPhones Kenya", "MacBook Kenya", "Dell laptop Nairobi", "buy laptop Nairobi"],
  openGraph: {
    title: "ProTouch - Laptops & iPhones Kenya",
    description: "Kenya's premier tech store for laptops and iPhones.",
    type: "website",
    locale: "en_KE",
  },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className="h-full">
      <body className="min-h-full flex flex-col bg-white antialiased" suppressHydrationWarning>
        <Providers>
          {children}
          <Toaster
            position="bottom-right"
            toastOptions={{
              className: "text-sm font-medium",
              style: { borderRadius: "12px", padding: "12px 16px" },
              success: { iconTheme: { primary: "#0ea5e9", secondary: "#fff" } },
            }}
          />
        </Providers>
      </body>
    </html>
  );
}
