import "./globals.css";
import { Metadata } from "next";
import { Bricolage_Grotesque, Geist, Geist_Mono } from "next/font/google";
import React from "react";
import ClientProviders from "./components/ClientProviders";
import { cookies } from "next/headers";
import { getBaseUrl } from "@/lib/seo";

// Bricolage behält die Achsen für Breite und optische Größe, damit das Plakat-Wortbild variieren kann
const bricolage = Bricolage_Grotesque({
  variable: "--font-bricolage",
  subsets: ["latin"],
  axes: ["opsz", "wdth"],
  display: "swap",
  adjustFontFallback: true,
});

const geist = Geist({
  variable: "--font-geist",
  subsets: ["latin"],
  display: "swap",
  adjustFontFallback: true,
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
  display: "swap",
});

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const cookieStore = await cookies();
  const locale = cookieStore.get("NEXT_LOCALE")?.value || "en";
  return (
    <html lang={locale} suppressHydrationWarning>
      <head>
        <meta charSet="utf-8" />
        <link rel="preconnect" href="https://assets.hardcover.app" />
        <link rel="preconnect" href="https://cms.dk0.dev" />
        {/* Prevent flash of unstyled theme — reads localStorage + system preference before React hydrates */}
        <script dangerouslySetInnerHTML={{ __html: `try{var t=localStorage.getItem('theme');var d=t==='dark'||((!t||t==='system')&&window.matchMedia('(prefers-color-scheme:dark)').matches);if(d)document.documentElement.classList.add('dark');}catch(e){}` }} />
      </head>
      <body className={`${bricolage.variable} ${geist.variable} ${geistMono.variable}`} suppressHydrationWarning>
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>
  );
}

export const metadata: Metadata = {
  metadataBase: new URL(getBaseUrl()),
  title: {
    default: "Dennis Konkol",
    template: "%s | dk0",
  },
  description:
    "Dennis Konkol – Software Engineer & Webentwickler in Osnabrück. Webentwicklung, Fullstack-Apps, Docker, Next.js, Flutter. Portfolio mit Projekten und Kontakt.",
  keywords: [
    "Dennis Konkol",
    "dk0",
    "denshooter",
    "Webentwicklung Osnabrück",
    "Webentwicklung",
    "Softwareentwicklung Osnabrück",
    "Website erstellen Osnabrück",
    "Web Design Osnabrück",
    "Informatik Osnabrück",
    "Software Engineer",
    "Full Stack Developer",
    "Frontend Developer Osnabrück",
    "Next.js",
    "React",
    "TypeScript",
    "Flutter",
    "Docker",
    "Self-Hosting",
    "DevOps",
    "Portfolio",
    "Osnabrück",
  ],
  authors: [{ name: "Dennis Konkol", url: "https://dk0.dev" }],
  creator: "Dennis Konkol",
  publisher: "Dennis Konkol",
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  openGraph: {
    title: "Dennis Konkol",
    description:
      "Software Engineer & Webentwickler in Osnabrück. Next.js, Flutter, Docker, DevOps. Projekte ansehen und Kontakt aufnehmen.",
    url: "https://dk0.dev",
    siteName: "Dennis Konkol",
    images: [
      {
        url: "https://dk0.dev/api/og",
        width: 1200,
        height: 630,
        alt: "Dennis Konkol",
      },
    ],
    locale: "de_DE",
    alternateLocale: ["en_US"],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Dennis Konkol",
    description: "Software Engineer & Webentwickler in Osnabrück.",
    images: ["https://dk0.dev/api/og"],
    creator: "@denshooter",
  },
  verification: {
    google: process.env.NEXT_PUBLIC_GOOGLE_VERIFICATION,
  },
  alternates: {
    canonical: "https://dk0.dev",
    languages: {
      de: "https://dk0.dev/de",
      en: "https://dk0.dev/en",
    },
  },
};