import type { Metadata, Viewport } from 'next'
import { Readex_Pro } from 'next/font/google'
import './globals.css'
import './polish.css'
import './design.css'
import './color-trial.css'

/* Readex Pro: a modern Arabic/Latin face drawn for screens and interfaces.
   Self-hosted at build time by next/font. */
const sans = Readex_Pro({
  subsets: ['arabic', 'latin'],
  weight: ['300', '400', '500', '600', '700'],
  display: 'swap',
  variable: '--font-sans',
})

/* The design is light-only: stop browsers' forced dark modes from repainting it. */
export const viewport: Viewport = { colorScheme: 'only light', themeColor: '#ffffff' }

export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai'),
  title: { default: 'أنور بآي — أدلة الذكاء الاصطناعي العملي بالعربية', template: '%s — أنور بآي' },
  description: 'دليلك العربي للذكاء الاصطناعي العملي: وكلاء، نماذج، وأدوات.',
  alternates: { canonical: './' },
  openGraph: {
    type: 'website',
    siteName: 'أنور بآي',
    locale: 'ar',
    images: [{ url: '/og-default.png', width: 1200, height: 630 }],
  },
  twitter: { card: 'summary_large_image', images: ['/og-default.png'] },
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai'
  return (
    <html lang="ar" dir="rtl" className={sans.variable}>
      <head>
        <meta name="darkreader-lock" />
      </head>
      <body>
        {children}
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ '@context': 'https://schema.org', '@type': 'WebSite', name: 'أنور بآي', url: siteUrl, inLanguage: 'ar' }) }} />
      </body>
    </html>
  )
}