import type { Metadata, Viewport } from "next";
import { Sora, Inter } from "next/font/google";
import "./globals.css";
import Providers from "@/components/common/Providers";

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

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

export const metadata: Metadata = {
  title: "LytsUp | Earn. Spend. Live More. - Gen Z Social Currency Platform",
  description:
    "LytsUp is a gamified social currency platform where Gen Z earns LYTs through real-world activities like walking, visiting stores, referrals, playing games, and redeems them for vouchers from premium partner brands.",
  keywords: [
    "LytsUp",
    "Social Currency",
    "Walk to Earn",
    "Gen Z rewards",
    "Loyalty points",
    "Gamified rewards",
    "Earn LYTs",
    "Play to Earn",
  ],
  authors: [{ name: "LytsUp Team" }],
};

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

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className={`${sora.variable} ${inter.variable} h-full antialiased`}
      suppressHydrationWarning
    >
      <body className="min-h-full flex flex-col bg-dark text-white selection:bg-primary selection:text-dark">
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}
