import type { Metadata, Viewport } from 'next';
import { Inter, Poppins } from 'next/font/google';
import '@/styles/globals.css';
import { AuthProvider } from '@/contexts/AuthContext';

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

const poppins = Poppins({ 
  weight: ['300', '400', '500', '600', '700'],
  subsets: ['latin'],
  variable: '--font-poppins',
  display: 'swap'
});

export const metadata: Metadata = {
  title: 'LMS BGN - Learning Management System Badan Gizi Nasional',
  description: 'Platform pembelajaran online untuk meningkatkan kapasitas SDM di bidang gizi dan keamanan pangan',
  keywords: 'LMS, Badan Gizi Nasional, pembelajaran online, gizi, keamanan pangan, HACCP, SLHS, sertifikasi halal',
  authors: [{ name: 'Badan Gizi Nasional' }],
  manifest: '/manifest.json',
  icons: {
    icon: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
  openGraph: {
    title: 'LMS BGN - Learning Management System',
    description: 'Platform pembelajaran online untuk meningkatkan kapasitas SDM di bidang gizi dan keamanan pangan',
    type: 'website',
    locale: 'id_ID',
    siteName: 'LMS BGN',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'LMS BGN - Learning Management System',
    description: 'Platform pembelajaran online untuk meningkatkan kapasitas SDM di bidang gizi dan keamanan pangan',
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
};

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  themeColor: '#3B82F6',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="id" className={`${inter.variable} ${poppins.variable}`}>
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
      </head>
      <body className="font-inter antialiased bg-gray-50 text-gray-900">
        <AuthProvider>
          <div id="root">
            {children}
          </div>
          <div id="modal-root" />
          <div id="toast-root" />
        </AuthProvider>
      </body>
    </html>
  );
}