nextjs-app/app/layout.tsx

import type { Metadata } from 'next';
import { DM_Sans, Playfair_Display } from 'next/font/google';
import Script from 'next/script';
import { Navigation } from '@/components/Navigation';
import { Footer } from '@/components/Footer';
import { ComparisonToast } from '@/components/ComparisonToast';
import { ComparisonProvider } from '@/context/ComparisonProvider';
import './globals.css';

const dmSans = DM_Sans({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  variable: '--font-dm-sans',
  display: 'swap',
});

const playfairDisplay = Playfair_Display({
  subsets: ['latin'],
  weight: ['600', '700'],
  variable: '--font-playfair',
  display: 'swap',
});

export const metadata: Metadata = {
  title: {
    default: 'SchoolCompare | Compare School Performance',
    template: '%s | SchoolCompare',
  },
  description: 'Compare primary and secondary school SATs and GCSE performance across England',
  keywords: 'school comparison, KS2 results, KS4 results, primary school, secondary school, England schools, SATs results, GCSE results',
  authors: [{ name: 'SchoolCompare' }],
  manifest: '/manifest.json',
  icons: {
    icon: '/favicon.svg',
    shortcut: '/favicon.svg',
    apple: '/favicon.svg',
  },
  openGraph: {
    type: 'website',
    title: 'SchoolCompare | Compare School Performance',
    description: 'Compare primary and secondary school SATs and GCSE performance across England',
    url: 'https://schoolcompare.co.uk',
    siteName: 'SchoolCompare',
  },
  twitter: {
    card: 'summary',
    title: 'SchoolCompare | Compare School Performance',
    description: 'Compare primary and secondary school SATs and GCSE performance across England',
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <Script
          defer
          src="https://analytics.schoolcompare.co.uk/script.js"
          data-website-id="d7fb0c95-bb6c-4336-8209-bd10077e50dd"
          strategy="afterInteractive"
        />
      </head>
      <body className={`${dmSans.variable} ${playfairDisplay.variable}`}>
        <div className="noise-overlay" />
        <ComparisonProvider>
          <a href="#main-content" className="skip-link">Skip to main content</a>
          <Navigation />
          <main id="main-content" className="main">
            {children}
          </main>
          <ComparisonToast />
          <Footer />
        </ComparisonProvider>
      </body>
    </html>
  );
}