import type { Metadata } from "next";
import "./globals.css";
import { SiteShell } from "@/components/layout/SiteShell";
import { siteConfig } from "@/lib/config";

export const metadata: Metadata = {
  metadataBase: new URL(siteConfig.siteUrl),
  title: {
    default: `${siteConfig.brand} — Video Editing & Post Production Studio`,
    template: `%s — ${siteConfig.brand}`,
  },
  description: "Professional video editing studio for TikTok, Instagram Reels, YouTube, podcasts, music videos and commercial content.",
  robots: {
    index: true,
    follow: true,
  },
  alternates: {
    canonical: siteConfig.siteUrl,
  },
  openGraph: {
    title: `${siteConfig.brand} — Video Editing & Post Production Studio`,
    description: "Professional video editing for short-form and long-form content.",
    type: "website",
    url: siteConfig.siteUrl,
    siteName: siteConfig.brand,
    images: ["/images/logo.png"],
  },
  twitter: {
    card: "summary_large_image",
    title: `${siteConfig.brand} — Video Editing & Post Production Studio`,
    description: "Professional video editing for short-form and long-form content.",
    images: ["/images/logo.png"],
  },
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  const organization = {
    "@context": "https://schema.org",
    "@type": "Organization",
    name: siteConfig.brand,
    url: siteConfig.siteUrl,
    email: siteConfig.email,
    sameAs: Object.values(siteConfig.socials),
    logo: `${siteConfig.siteUrl}/images/logo.png`,
  };

  return (
    <html lang="en">
      <body>
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(organization) }} />
        <SiteShell>{children}</SiteShell>
      </body>
    </html>
  );
}
