import { Bricolage_Grotesque, DM_Sans } from 'next/font/google';
import { hasLocale, NextIntlClientProvider } from 'next-intl';
import { notFound } from 'next/navigation';
import { routing } from '@/i18n/routing';
import { dir } from 'i18next';
import { Provider } from '@/components/ui/provider';
import './global.css';

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

const dmSans = DM_Sans({
  variable: '--font-body',
  subsets: ['latin'],
  display: 'swap',
});

export const metadata = {
  title: 'ContentGen AI — AI ile YouTube Shorts Üret',
  description: 'Yapay zeka ile saniyeler içinde profesyonel YouTube Shorts videoları üretin. Konu girin, AI senaryoyu yazsın, videonuz hazır.',
  keywords: 'ai video generator, youtube shorts maker, ai short video, yapay zeka video',
  openGraph: {
    title: 'ContentGen AI — AI Video Generator',
    description: 'Create stunning YouTube Shorts with AI in seconds.',
    type: 'website',
  },
};

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  if (!hasLocale(routing.locales, locale)) {
    notFound();
  }

  return (
    <html
      lang={locale}
      dir={dir(locale)}
      suppressHydrationWarning
      className="dark"
    >
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
        <meta name="theme-color" content="#000000" />
        <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
        <link rel="manifest" href="/favicon/site.webmanifest" />
      </head>
      <body className={`${bricolage.variable} ${dmSans.variable} font-[family-name:var(--font-body)] noise-overlay`}>
        <NextIntlClientProvider>
          <Provider>{children}</Provider>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
