school_compare/nextjs-app/app/layout.tsx

import type { Metadata, Viewport } from 'next';
import { Manrope, Inter } 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 { SITE_URL } from '@/lib/site';
import './globals.css';

// Manrope carries headings and key messaging — the guideline's "friendly,
// modern personality". It never sets body copy or a control.
const manrope = Manrope({
  subsets: ['latin'],
  weight: ['500', '600', '700'],
  variable: '--font-manrope',
  display: 'swap',
});

// Inter carries body copy, every control and every figure — chosen in the
// guideline for clarity and legibility. Its tabular numerals hold a column
// properly, which matters on a page that is mostly percentages.
const inter = Inter({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  variable: '--font-inter',
  display: 'swap',
});

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  // viewport-fit=cover lets us paint behind the notch / Dynamic Island so
  // env(safe-area-inset-*) values resolve to real numbers on iPhone.
  viewportFit: 'cover',
  // These must match --bg-primary in globals.css for each theme, or the
  // browser chrome and the page disagree at the top edge of the screen.
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#FAFAF8' },
    { media: '(prefers-color-scheme: dark)', color: '#111A20' },
  ],
};

export const metadata: Metadata = {
  appleWebApp: {
    capable: true,
    title: 'schoolcompare',
    statusBarStyle: 'default',
  },
  title: {
    default: 'Compare Schools Side by Side | schoolcompare',
    template: '%s | schoolcompare',
  },
  description:
    'Put five English schools on one screen — SATs, GCSE results, Ofsted grades, and how close you had to live to get a place. Free, no sign-up.',
  keywords: 'school comparison, KS2 results, KS4 results, primary school, secondary school, England schools, SATs results, GCSE results',
  authors: [{ name: 'schoolcompare' }],
  manifest: '/manifest.json',
  // No `icons` key on purpose: setting it here would override the file
  // conventions. app/icon.svg and app/apple-icon.tsx are the source, and
  // app/opengraph-image.tsx supplies og:image and twitter:image.
  metadataBase: new URL(SITE_URL),
  openGraph: {
    type: 'website',
    title: 'Compare Schools Side by Side | schoolcompare',
    description:
      'Put five English schools on one screen — SATs, GCSE results, Ofsted grades, and how close you had to live to get a place.',
    url: SITE_URL,
    siteName: 'schoolcompare',
  },
  twitter: {
    // summary_large_image now that there is an image worth showing.
    card: 'summary_large_image',
    title: 'Compare Schools Side by Side | schoolcompare',
    description:
      'Put five English schools on one screen — SATs, GCSE results, Ofsted grades, and how close you had to live to get a place.',
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    // The font variable classes must sit on <html>, not <body>. globals.css
    // declares --font-display on :root as var(--font-manrope) and --font-ui as
    // var(--font-inter), and a custom property's var() references resolve on
    // the element that declares it. With the classes on <body>, those two are
    // undefined at :root, so --font-display computes to the guaranteed-invalid
    // value and every font-family referencing it silently falls back — which
    // once shipped the whole site in Times. Nothing throws and no unit test
    // fails, so the e2e typeface assertion is the only guard.
    <html lang="en" className={`${manrope.variable} ${inter.variable}`}>
      <head>
        <link rel="preconnect" href="https://analytics.schoolcompare.co.uk" />
        <link rel="preconnect" href="https://api.postcodes.io" />
        {/* data-domains: the tracker only fires on the production hostnames,
            so staging (same image, different host) never pollutes Umami */}
        <Script
          src="https://analytics.schoolcompare.co.uk/script.js"
          data-website-id="d7fb0c95-bb6c-4336-8209-bd10077e50dd"
          data-domains="schoolcompare.co.uk,www.schoolcompare.co.uk"
          data-performance="true"
          strategy="afterInteractive"
        />
        {/* Heatmap / session recorder — same data-domains guard so staging
            (same image, different host) never feeds the heatmap. */}
        <Script
          src="https://analytics.schoolcompare.co.uk/recorder.js"
          data-website-id="d7fb0c95-bb6c-4336-8209-bd10077e50dd"
          data-domains="schoolcompare.co.uk,www.schoolcompare.co.uk"
          strategy="afterInteractive"
        />
      </head>
      <body>
        <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>
  );
}