import type { Metadata, Viewport } from 'next'
import { Inter, Instrument_Serif, JetBrains_Mono } from 'next/font/google'
import { Analytics } from '@vercel/analytics/next'
import './globals.css'

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

const instrumentSerif = Instrument_Serif({ 
  weight: '400',
  subsets: ['latin'],
  variable: '--font-instrument-serif',
  display: 'swap',
})

const jetbrainsMono = JetBrains_Mono({ 
  subsets: ['latin'],
  variable: '--font-jetbrains-mono',
  display: 'swap',
})

export const metadata: Metadata = {
  title: 'Jamulix | 50 Jahre Code',
  description: 'Seit 50 Jahren Code. Von Fortran IV bis Python, Rust und KI-Projekten. Erfahrener Programmierer, Linux-Veteran und KI-Entwickler.',
  keywords: ['Programmierung', 'Linux', 'KI', 'Python', 'Rust', 'Software-Entwicklung', 'AI', 'Fortran', 'Unix'],
  authors: [{ name: 'Jamulix' }],
  creator: 'Jamulix',
  openGraph: {
    type: 'website',
    locale: 'de_DE',
    url: 'https://jamulix.de',
    siteName: 'Jamulix',
    title: 'Jamulix | 50 Jahre Code',
    description: 'Seit 50 Jahren Code. Von Fortran IV bis Python, Rust und KI-Projekten.',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Jamulix | 50 Jahre Code',
    description: 'Seit 50 Jahren Code. Von Fortran IV bis Python, Rust und KI-Projekten.',
  },
  robots: {
    index: true,
    follow: true,
  },
}

export const viewport: Viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#faf9f7' },
    { media: '(prefers-color-scheme: dark)', color: '#1a1a1f' },
  ],
  width: 'device-width',
  initialScale: 1,
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html 
      lang="de" 
      className={`${inter.variable} ${instrumentSerif.variable} ${jetbrainsMono.variable} dark bg-background`}
      suppressHydrationWarning
    >
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function() {
                const stored = localStorage.getItem('theme');
                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                const theme = stored || (prefersDark ? 'dark' : 'light');
                document.documentElement.classList.toggle('dark', theme === 'dark');
              })();
            `,
          }}
        />
        <noscript>
          <style dangerouslySetInnerHTML={{
            __html: `
              [style*="opacity:0"], [style*="opacity: 0"] { opacity: 1 !important; }
              [style*="transform:translate"], [style*="transform: translate"] { transform: none !important; }
            `
          }} />
        </noscript>
      </head>
      <body className="font-sans antialiased min-h-screen">
        {children}
        {process.env.NODE_ENV === 'production' && <Analytics />}
      </body>
    </html>
  )
}
