import type { Metadata } from 'next'
import { Inter, Exo } from 'next/font/google'
import './globals.css'

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

const exo = Exo({
  subsets: ['latin'],
  variable: '--font-exo',
  display: 'swap',
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
})

export const metadata: Metadata = {
  title: 'CHORUS PING! - Insights on Contextual AI',
  description: 'Deep dives into contextual AI orchestration, agent coordination, and the future of intelligent systems.',
  keywords: ['contextual AI', 'agent orchestration', 'enterprise AI', 'AI insights', 'technology blog'],
  authors: [{ name: 'Anthony Rawlins', url: 'https://chorus.services' }],
  creator: 'Anthony Rawlins',
  publisher: 'CHORUS Services',
  metadataBase: new URL('https://blog.chorus.services'),
  alternates: {
    canonical: 'https://blog.chorus.services',
    types: {
      'application/rss+xml': [
        { url: '/rss.xml', title: 'CHORUS PING! RSS Feed' }
      ]
    }
  },
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://blog.chorus.services',
    siteName: 'CHORUS PING!',
    title: 'CHORUS PING! - Insights on Contextual AI',
    description: 'Deep dives into contextual AI orchestration, agent coordination, and the future of intelligent systems.',
    images: [
      {
        url: '/logos/logo-ring-only.png',
        width: 256,
        height: 256,
        alt: 'CHORUS Services Logo',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'CHORUS PING! - Insights on Contextual AI',
    description: 'Deep dives into contextual AI orchestration, agent coordination, and the future of intelligent systems.',
    images: ['/logos/chorus-landscape-on-blue.png'],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        {/* Google tag (gtag.js) */}
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-RTYKD3GJ44"></script>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'G-RTYKD3GJ44);
            `,
          }}
        />
        {/* Theme initialization script */}
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function() {
                try {
                  var theme = localStorage.getItem('theme');
                  var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                  var shouldBeDark = theme === 'dark' || (!theme && prefersDark);
                  
                  if (shouldBeDark) {
                    document.documentElement.classList.add('dark');
                  } else {
                    document.documentElement.classList.remove('dark');
                  }
                } catch (e) {
                  // If localStorage is not available, default to dark
                  document.documentElement.classList.add('dark');
                }
              })();
            `,
          }}
        />
      </head>
      <body className={`${inter.variable} ${exo.variable} font-sans bg-white dark:bg-carbon-950 text-carbon-950 dark:text-carbon-100 transition-colors duration-300`}>
        {children}
      </body>
    </html>
  )
}