import type { Metadata, Viewport } from "next";
import type { ReactNode } from "react";
import { Inter } from "next/font/google";
import Script from "next/script";
import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";
import { stripExtensionAttributes } from "@/lib/strip-extension-attrs";
import { getSiteUrl, siteName } from "@/lib/site";
import "./globals.css";

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

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: {
    default: "TikTok Video Downloader | Clipwell",
    template: "%s | Clipwell",
  },
  description:
    "Paste a public TikTok link and download the video, photos, or audio that Clipwell can actually retrieve. No account required.",
  applicationName: siteName,
  robots: { index: true, follow: true },
  openGraph: {
    type: "website",
    siteName,
    title: "TikTok Video Downloader",
    description: "Download public TikTok videos, photos, and audio when a real file is available.",
    url: "/",
  },
  twitter: {
    card: "summary_large_image",
    title: "TikTok Video Downloader",
    description: "Download public TikTok videos, photos, and audio when a real file is available.",
  },
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: "#1857c8",
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={inter.variable} suppressHydrationWarning>
      <body suppressHydrationWarning>
        <Script id="strip-extension-attrs" strategy="beforeInteractive">
          {stripExtensionAttributes}
        </Script>
        <a className="skip-link" href="#main">
          Skip to main content
        </a>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}