import type { Metadata } from "next";
import { Inter, Sora } from "next/font/google";
import "./globals.css";
import { SiteHeader } from "@/components/site-header";
import { SiteFooter } from "@/components/site-footer";
import { site } from "@/content/site";

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

const sora = Sora({
  variable: "--font-sora",
  subsets: ["latin"],
  display: "swap",
  weight: ["500", "600", "700"],
});

export const metadata: Metadata = {
  metadataBase: new URL(site.url),
  title: {
    default: `${site.name} — HR, Background Check & Immigration Consultants`,
    template: `%s — ${site.name}`,
  },
  description: site.description,
  keywords: [
    "HR consultants Nairobi",
    "recruitment agency Kenya",
    "background check Kenya",
    "immigration consultants Kenya",
    "career coaching",
    "CV writing",
    "team building Kenya",
  ],
  openGraph: {
    type: "website",
    locale: "en_KE",
    url: site.url,
    siteName: site.name,
    title: `${site.name} — HR, Background Check & Immigration Consultants`,
    description: site.description,
  },
  twitter: {
    card: "summary_large_image",
    title: `${site.name} — HR, Background Check & Immigration Consultants`,
    description: site.description,
  },
  alternates: { canonical: site.url },
};

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  name: site.name,
  description: site.description,
  url: site.url,
  telephone: site.contact.phone,
  email: site.contact.email,
  areaServed: "KE",
  address: {
    "@type": "PostalAddress",
    streetAddress: "Koinange Street, Rattansi Building",
    addressLocality: "Nairobi",
    addressCountry: "KE",
  },
  openingHours: "Mo-Fr 09:00-17:00",
  sameAs: site.socials.map((s) => s.href),
};

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en" className={`${inter.variable} ${sora.variable} h-full`}>
      <body className="flex min-h-full flex-col bg-cream text-ink-900">
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        />
        <a
          href="#main"
          className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-lg focus:bg-ink-900 focus:px-4 focus:py-2 focus:text-white"
        >
          Skip to content
        </a>
        <SiteHeader />
        <main id="main" className="flex-1">
          {children}
        </main>
        <SiteFooter />
      </body>
    </html>
  );
}
