import type { Metadata } from "next";
import { Instrument_Sans, Newsreader, Noto_Sans_Arabic } from "next/font/google";
import { notFound } from "next/navigation";
import { MotionController } from "@/components/MotionController";
import { SiteFooter } from "@/components/SiteFooter";
import { SiteHeader } from "@/components/SiteHeader";
import { brand, isLocale, locales, type Locale } from "@/content/site";
import "../globals.css";

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

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

const notoArabic = Noto_Sans_Arabic({
  subsets: ["arabic"],
  variable: "--font-noto-arabic",
  display: "swap",
});

export const metadata: Metadata = {
  metadataBase: new URL(`https://${brand.domain}`),
  title: {
    default: "Yashal Studios | Growth Partner au Maroc",
    template: "%s | Yashal Studios",
  },
  description:
    "Yashal Studios aide les entreprises ambitieuses au Maroc à construire stratégie, crédibilité, visibilité, autorité et croissance.",
  icons: {
    icon: [
      { url: "/favicon-32.png", sizes: "32x32" },
      { url: "/favicon-64.png", sizes: "64x64" },
      { url: "/favicon-192.png", sizes: "192x192" },
      { url: "/favicon-512.png", sizes: "512x512" },
    ],
    apple: "/favicon-192.png",
  },
  openGraph: {
    type: "website",
    siteName: "Yashal Studios",
    images: [{ url: "/social/yashal-og.png", width: 1200, height: 630 }],
  },
  twitter: {
    card: "summary_large_image",
    images: ["/social/yashal-og.png"],
  },
};

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }));
}

export default async function LocaleLayout({
  children,
  params,
}: Readonly<{
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}>) {
  const { locale: localeParam } = await params;
  if (!isLocale(localeParam)) notFound();
  const locale = localeParam as Locale;

  const organizationSchema = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": ["Organization", "ProfessionalService"],
        name: brand.name,
        url: `https://${brand.domain}`,
        email: brand.email,
        telephone: brand.phone,
        areaServed: "Morocco",
        address: {
          "@type": "PostalAddress",
          addressLocality: "Fès",
          addressCountry: "MA",
        },
        sameAs: ["https://www.instagram.com/yashal.studios/"],
      },
      {
        "@type": "WebSite",
        name: brand.name,
        url: `https://${brand.domain}`,
        inLanguage: ["fr", "en", "ar"],
      },
    ],
  };

  return (
    <html
      lang={locale}
      dir={locale === "ar" ? "rtl" : "ltr"}
      className={`${instrument.variable} ${newsreader.variable} ${notoArabic.variable}`}
    >
      <body>
        <MotionController />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema) }}
        />
        <SiteHeader locale={locale} />
        {children}
        <SiteFooter locale={locale} />
      </body>
    </html>
  );
}