import type { Metadata } from 'next';
import {
  Inter,
  Playfair_Display,
  Noto_Nastaliq_Urdu,
  Noto_Sans_Arabic,
} from 'next/font/google';
import LanguageBanner from '@/components/layout/LanguageBanner';
import Header from '@/components/layout/Header';
import Footer from '@/components/layout/Footer';
import LocaleAttributes from '@/components/layout/LocaleAttributes';
import { SITE_NAME } from '@/lib/constants';
import './globals.css';

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

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

const notoUrdu = Noto_Nastaliq_Urdu({
  subsets: ['arabic'],
  variable: '--font-urdu',
  weight: ['400', '500', '600', '700'],
  display: 'swap',
});

const notoArabic = Noto_Sans_Arabic({
  subsets: ['arabic'],
  variable: '--font-arabic',
  weight: ['400', '500', '600', '700'],
  display: 'swap',
});

const siteDescription =
  'Premium 100% Halal meat delivery. Fresh chicken, beef, and lamb; frozen fish and seafood only — customized to your preference and delivered to your door.';

export const metadata: Metadata = {
  title: {
    default: `${SITE_NAME} — Premium Halal Meat Delivery`,
    template: `%s | ${SITE_NAME}`,
  },
  description: siteDescription,
  themeColor: '#8B1F1F',
  keywords: [
    'halal meat',
    'halal chicken',
    'halal beef',
    'halal lamb',
    'meat delivery',
    'fresh meat',
    'Kött Gård',
    'kottgard',
  ],
  openGraph: {
    title: `${SITE_NAME} — Premium Halal Meat Delivery`,
    description: siteDescription,
    type: 'website',
    locale: 'sv_SE',
    siteName: SITE_NAME,
  },
  robots: {
    index: true,
    follow: true,
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="sv"
      dir="ltr"
      className={`${inter.variable} ${playfair.variable} ${notoUrdu.variable} ${notoArabic.variable}`}
      suppressHydrationWarning
    >
      <body className="flex min-h-screen flex-col font-sans">
        <LocaleAttributes />
        <div className="sticky top-0 z-50">
          <LanguageBanner />
          <Header />
        </div>
        <main className="flex-1">{children}</main>
        <Footer />
      </body>
    </html>
  );
}