import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Open_Sans } from "next/font/google";
import "./globals.css";
import "@/lib/gsap-setup";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script";

const inter = Inter({
  variable: "--font-inter",  subsets: ["latin"]
});

const openSans = Open_Sans({
  variable: "--font-open-sans",  subsets: ["latin"]
});

const canonicalUrl = "https://creatorquestrpg.com";

export const metadata: Metadata = {
  metadataBase: new URL(canonicalUrl),
  title: "Creator Quest RPG - Gamified Content Creation Platform",  description: "Level up your content creation journey with Creator Quest RPG. Complete daily missions, conquer quests, and gain XP to become a successful influencer. For TikTok, YouTube, & Instagram creators.",  keywords: "creator quest, rpg, content creation, social media growth, influencer, tiktok, youtube, instagram, gamified learning, daily challenges, achievements, skill tree",  openGraph: {
    title: "Creator Quest RPG - Gamified Content Creation Platform",    description: "Level up your content creation journey with Creator Quest RPG. Complete daily missions, conquer quests, and gain XP to become a successful influencer. For TikTok, YouTube, & Instagram creators.",    url: canonicalUrl,
    siteName: "Creator Quest RPG",    images: [
      {
        url: "http://img.b2bpic.net/free-photo/market-trends-concept-with-smartphone_23-2150372420.jpg",        alt: "Creator Quest RPG Gamified Dashboard"
      }
    ],
    type: "website"
  },
  twitter: {
    card: "summary_large_image",    title: "Creator Quest RPG - Gamified Content Creation Platform",    description: "Level up your content creation journey with Creator Quest RPG. Complete daily missions, conquer quests, and gain XP to become a successful influencer. For TikTok, YouTube, & Instagram creators.",    images: [
      "http://img.b2bpic.net/free-photo/market-trends-concept-with-smartphone_23-2150372420.jpg"
    ]
  },
  robots: {
    index: true,
    follow: true
  },
  alternates: {
    canonical: canonicalUrl,
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
        <body
          className={`${inter.variable} ${openSans.variable} antialiased`}
        >
          <Tag />
          {children}
          <script
              dangerouslySetInnerHTML={{
                  __html: `${getVisualEditScript()}`
              }}
          />
        </body>
      </ServiceWrapper>
    </html>
  );
}