import './globals.css'
import type { Metadata, Viewport } from 'next'
import { Noto_Sans_Arabic } from 'next/font/google'
import { Providers } from '@/components/providers'
import { Navbar } from '@/components/layout/navbar'
import { Footer } from '@/components/layout/footer'
import { AdSenseScript } from '@/components/adsense/ad-script'
import { ServiceWorkerRegister } from '@/components/pwa/sw-register'
import { PwaInstallPrompt } from '@/components/pwa/install-prompt'
import { FloatingActionButtons } from '@/components/floating-buttons/floating-buttons'
import { CompareBar } from '@/components/compare/compare-bar'
import { ThemeColorApplier } from '@/components/theme/theme-color-applier'

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

export const metadata: Metadata = {
  title: {
    default: 'عقار ديزاين - منصة العقارات المتكاملة في المغرب',
    template: '%s | عقار ديزاين',
  },
  description: 'ابحث عن عقارك المثالي في المغرب مع تجربة تصميم ثلاثية الأبعاد وجولات افتراضية 360°. شقق، فلل، رياض في الدار البيضاء والرباط ومراكش وأكثر.',
  keywords: ['عقارات المغرب', 'شقق للبيع', 'فلل المغرب', 'عقار ديزاين', 'جولات افتراضية', 'تصميم 3D'],
  manifest: '/manifest.json',
  appleWebApp: { capable: true, statusBarStyle: 'default', title: 'عقار ديزاين' },
  openGraph: {
    title: 'عقار ديزاين - منصة العقارات المتكاملة',
    description: 'أول منصة عقارية في المغرب مع تصميم ثلاثي الأبعاد وجولات 360°',
    locale: 'ar_MA',
    type: 'website',
  },
}

export const viewport: Viewport = {
  themeColor: '#1e40af',
  width: 'device-width',
  initialScale: 1,
  maximumScale: 5,
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ar" dir="rtl">
      <head>
        <link rel="apple-touch-icon" href="/icons/icon-192.png" />
        <meta name="mobile-web-app-capable" content="yes" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link rel="dns-prefetch" href="https://images.unsplash.com" />
        <link rel="dns-prefetch" href="https://res.cloudinary.com" />
      </head>
      <body className={`${notoArabic.className} antialiased`}>
        <Providers>
          <ThemeColorApplier />
          <AdSenseScript />
          <ServiceWorkerRegister />
          <Navbar />
          <main className="min-h-screen">{children}</main>
          <Footer />
          <PwaInstallPrompt />
          <FloatingActionButtons />
          <CompareBar />
        </Providers>
      </body>
    </html>
  )
}
