import type { Metadata } from 'next'
import { DM_Sans, Cormorant_Garamond } from 'next/font/google'
import { NextIntlClientProvider } from 'next-intl'
import { getMessages, setRequestLocale } from 'next-intl/server'
import { notFound } from 'next/navigation'
import { routing } from '@/i18n/routing'
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import WhatsAppButton from '@/components/WhatsAppButton'
import '../globals.css'

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

const cormorant = Cormorant_Garamond({
  subsets: ['latin'],
  weight: ['300', '400', '500', '600', '700'],
  style: ['normal', 'italic'],
  variable: '--font-cormorant',
  display: 'swap',
})

export const metadata: Metadata = {
  title: {
    default: 'PeyzajArt — Dekoratif Saksı ve Peyzaj Ürünleri',
    template: '%s | PeyzajArt',
  },
  description:
    'PeyzajArt, yüksek kaliteli dekoratif saksı ve peyzaj ürünleri üreten Türk firmasıdır. CUBO, GLOBE, RECTA ve özel seriler.',
  keywords: ['dekoratif saksı', 'peyzaj ürünleri', 'bahçe saksısı', 'beton saksı', 'PeyzajArt'],
  openGraph: {
    type: 'website',
    url: process.env.NEXT_PUBLIC_SITE_URL,
    siteName: 'PeyzajArt',
  },
}

export function generateStaticParams() {
  return routing.locales.map((locale) => ({ locale }))
}

export default async function LocaleLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode
  params: { locale: string }
}) {
  if (!routing.locales.includes(locale as 'tr' | 'en')) notFound()

  setRequestLocale(locale)
  const messages = await getMessages()

  return (
    <html lang={locale} className={`${dmSans.variable} ${cormorant.variable}`}>
      <body className="bg-cream text-brown font-body antialiased">
        <NextIntlClientProvider messages={messages} locale={locale}>
          <Header locale={locale as 'tr' | 'en'} />
          <main>{children}</main>
          <Footer />
          <WhatsAppButton />
        </NextIntlClientProvider>
      </body>
    </html>
  )
}
