/* eslint-disable @next/next/no-page-custom-font */
import clsx from "clsx";
import "./globals.css";
import type {Metadata} from "next";
import {Inter} from "next/font/google";
import {Almarai} from "next/font/google";

const almarai = Almarai({
	subsets: ["arabic"],
	weight: ["300", "400", "700", "800"],
});

const inter = Inter({subsets: ["latin"]});

export const metadata: Metadata = {
	title: "EnCoach",
	description: "We are the best service and the only one",
};

export default function RootLayout({children}: {children: React.ReactNode}) {
	return (
		<html lang="en">
			<head>
				<link rel="icon" href="/favicon.ico" sizes="any" />
				<meta
					httpEquiv="Content-Security-Policy-Report-Only"
					content="default-src 'self' *.stripe.com *.encoach.com staging.encoach.com localhost"
				/>

				<script async src="https://js.stripe.com/v3/pricing-table.js" />

				<link rel="preconnect" href="https://fonts.googleapis.com" />
				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
				<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap" rel="stylesheet" />
			</head>
			<body className={clsx(almarai.className, "font-almarai")}>{children}</body>
		</html>
	);
}
