import type { Metadata } from "next";
import { Plus_Jakarta_Sans, Syne } from "next/font/google";

import { SmoothScroll } from "@/components/SmoothScroll";

import "./globals.css";

const fontSans = Plus_Jakarta_Sans({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap"
});

const fontDisplay = Syne({
  subsets: ["latin"],
  variable: "--font-display",
  display: "swap",
  weight: ["400", "500", "600", "700", "800"]
});

export const metadata: Metadata = {
  title: {
    default: "Image Converter",
    template: "%s • Image Converter"
  },
  description:
    "A fast, privacy-friendly image converter. Convert JPEG, PNG, WebP, AVIF, HEIF/HEIC, TIFF, GIF, BMP, ICO and more with quality + resize controls."
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={`${fontSans.variable} ${fontDisplay.variable} font-sans text-slate-900 antialiased`}>
        <div aria-hidden className="page-fixed-bg" />
        <SmoothScroll>{children}</SmoothScroll>
      </body>
    </html>
  );
}

