import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "./providers";
import { GoogleAnalytics } from "@/components/GoogleAnalytics";
import {
  GoogleTagManager,
  GoogleTagManagerNoscript,
} from "@/components/GoogleTagManager";
import { JsonLd } from "@/components/JsonLd";
import { Matomo } from "@/components/Matomo";
import { MicrosoftClarity } from "@/components/MicrosoftClarity";

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

const SITE_URL = "https://songs2vid.com";
const SITE_NAME = "Songs2VID";
const DEFAULT_TITLE =
  "Songs2VID - Automated Audio to Video Pipeline for Content Creators";
const DEFAULT_DESCRIPTION =
  "Convert MP3/WAV tracks and cover art into YouTube-ready videos instantly. Automated, Docker-ready, and lightweight pipeline.";
const OG_IMAGE = "https://songs2vid.com/og-image.png";

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  title: {
    default: DEFAULT_TITLE,
    template: `%s | ${SITE_NAME}`,
  },
  description: DEFAULT_DESCRIPTION,
  keywords: [
    "upload mp3 to youtube",
    "upload flac to youtube",
    "upload wav to youtube",
    "mp3 to youtube hd",
    "jpg to video",
    "mp3 to youtube",
    "mp3 to youtube converter",
    "upload mp3",
    "mp3 uploader",
    "youtube upload",
    "audio to video converter",
    "upload audio to youtube",
    "tunestotube alternative",
    "song to video",
    "podcast to youtube",
    "convert mp3 to mp4",
  ],
  authors: [{ name: SITE_NAME, url: SITE_URL }],
  creator: SITE_NAME,
  publisher: SITE_NAME,
  applicationName: SITE_NAME,
  alternates: {
    canonical: SITE_URL,
  },
  openGraph: {
    title: DEFAULT_TITLE,
    description: DEFAULT_DESCRIPTION,
    url: SITE_URL,
    siteName: SITE_NAME,
    type: "website",
    locale: "en_US",
    images: [
      {
        url: OG_IMAGE,
        width: 1200,
        height: 630,
        alt: SITE_NAME,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: DEFAULT_TITLE,
    description: DEFAULT_DESCRIPTION,
    images: [OG_IMAGE],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
    },
  },
  icons: {
    icon: "/favicon.png",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <GoogleTagManager />
      </head>
      <body className={inter.className} suppressHydrationWarning>
        <GoogleTagManagerNoscript />
        <GoogleAnalytics />
        <JsonLd />
        <Matomo />
        <MicrosoftClarity />
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}