import type { Metadata } from "next";
import { Bebas_Neue, Inter } from "next/font/google";
import "./globals.css";
import { Navbar } from "./components/Navbar";
import { Footer } from "./components/Footer";
import { SITE_URL, LOGO_URL } from "@/lib/site";

const bebas = Bebas_Neue({
  variable: "--font-bebas",
  weight: "400",
  subsets: ["latin"],
});

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: {
    default: "Highland Games Studio — Where summits become worlds",
    template: "%s — Highland Games Studio",
  },
  description:
    "Indie game studio crafting survival adventures. Where summits become worlds.",
  metadataBase: new URL(SITE_URL),
  openGraph: {
    title: "Highland Games Studio",
    description: "Where summits become worlds.",
    type: "website",
    siteName: "Highland Games Studio",
  },
  twitter: {
    card: "summary_large_image",
    title: "Highland Games Studio",
    description: "Where summits become worlds.",
  },
  alternates: {
    types: {
      "application/rss+xml": [
        { url: "/feed.xml", title: "Highland Games Studio — Devblog" },
      ],
    },
  },
};

const organizationJsonLd = {
  "@context": "https://schema.org",
  "@type": "Organization",
  name: "Highland Games Studio",
  url: SITE_URL,
  logo: LOGO_URL,
  description:
    "Indie game studio crafting survival adventures. Where summits become worlds.",
  slogan: "Where summits become worlds",
  foundingDate: "2026",
  email: "hello@highlandgamesstudio.com",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className={`${bebas.variable} ${inter.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col bg-background text-foreground">
        <a
          href="#main"
          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-accent focus:text-background focus:font-display focus:tracking-widest focus:text-sm"
        >
          Skip to content
        </a>
        <Navbar />
        <main id="main" className="flex-1 flex flex-col">
          {children}
        </main>
        <Footer />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(organizationJsonLd),
          }}
        />
      </body>
    </html>
  );
}
