import type { Metadata, Viewport } from "next";
import "./globals.css";
import { APP_URL, SITE_NAME, SITE_TAGLINE } from "@/lib/env";

export const metadata: Metadata = {
  metadataBase: new URL(APP_URL),
  title: { default: `${SITE_NAME} — ${SITE_TAGLINE}`, template: `%s · ${SITE_NAME}` },
  description: "An independently curated, source-cited encyclopedia of software, AI systems, APIs, data platforms, developer tools and academic tools, with verified links and honest limitations.",
  applicationName: SITE_NAME,
  openGraph: { type: "website", siteName: SITE_NAME, locale: "en_CA" },
  twitter: { card: "summary_large_image" },
  robots: { index: true, follow: true },
  alternates: { canonical: "/" },
};
export const viewport: Viewport = { themeColor: [{ media: "(prefers-color-scheme: light)", color: "#faf8f4" }, { media: "(prefers-color-scheme: dark)", color: "#0f1115" }], width: "device-width", initialScale: 1 };

const themeScript = `(function(){try{var m=localStorage.getItem('theme');var d=m==='dark'||((!m||m==='system')&&matchMedia('(prefers-color-scheme: dark)').matches);if(d)document.documentElement.classList.add('dark');}catch(e){}})();`;

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head><script dangerouslySetInnerHTML={{ __html: themeScript }} /></head>
      <body className="min-h-dvh flex flex-col">
        <a href="#main" className="skip-link">Skip to content</a>
        {children}
      </body>
    </html>
  );
}