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

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

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
}

export const metadata: Metadata = {
  metadataBase: new URL('https://quality-intelligence.co'),
  title: {
    default: 'Ask QIEN — AI-augmented quality support for manufacturing',
    template: '%s — Ask QIEN',
  },
  description:
    'AI-augmented expert support for regulated manufacturing. Route quality issues from the production floor to your specialists — with AI that triages, summarises, and drafts the answer before the expert opens the ticket.',
  openGraph: {
    title: 'Ask QIEN — AI-augmented quality support for manufacturing',
    description:
      'AI-augmented expert support for regulated manufacturing. Route quality issues from the production floor to your specialists — with AI that triages, summarises, and drafts the answer before the expert opens the ticket.',
    siteName: 'Ask QIEN by Quality Intelligence',
    type: 'website',
    url: 'https://quality-intelligence.co',
    images: [{ url: '/og-image.png', width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Ask QIEN — AI-augmented quality support for manufacturing',
    description:
      'AI-augmented expert support for regulated manufacturing. Route quality issues from the production floor to your specialists — with AI that triages, summarises, and drafts the answer before the expert opens the ticket.',
    images: ['/og-image.png'],
  },
  icons: {
    icon: [
      { url: '/icons/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/icons/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
    ],
    apple: [{ url: '/brand/qi-mark.png', sizes: '395x395', type: 'image/png' }],
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html
      lang="en"
      className={`${inter.variable} h-full antialiased`}
      suppressHydrationWarning
    >
      <body className="min-h-full flex flex-col overflow-x-hidden">
        <Script id="theme-init" strategy="beforeInteractive">
          {`
            try {
              var theme = localStorage.getItem('ask-qien-theme') === 'light' ? 'light' : 'dark';
              document.documentElement.classList.toggle('dark', theme === 'dark');
              document.documentElement.classList.toggle('light', theme === 'light');
              document.documentElement.style.colorScheme = theme;
            } catch (_) {}
          `}
        </Script>
        {children}
      </body>
    </html>
  )
}
