import type { Metadata, Viewport } from "next";
import "./globals.css";
import { Toaster } from "@/components/ui/toaster";

export const metadata: Metadata = {
  title: "FileDeck: free online tools for PDFs, images, writing and files",
  description:
    "Drop a file. Pick the job. 102 free tools to edit PDFs, work with images, write with AI and convert files. No sign-up, no watermark — files stay on your device. English + বাংলা.",
  keywords: ["FileDeck", "PDF tools", "image tools", "AI write", "file converter", "free online tools", "বাংলা টুলস"],
  authors: [{ name: "FileDeck" }],
  icons: {
    icon: "data:image/svg+xml," + encodeURIComponent(
      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#0b8a47"/><path d="M24 16h12l10 10v22a4 4 0 0 1-4 4H24a4 4 0 0 1-4-4V20a4 4 0 0 1 4-4z" fill="white"/><path d="M36 16v10h10" fill="#d1e7db"/><rect x="26" y="32" width="14" height="3" rx="1.5" fill="#0b8a47"/><rect x="26" y="39" width="10" height="3" rx="1.5" fill="#86c7a4"/></svg>`,
    ),
  },
  openGraph: {
    title: "FileDeck — Drop a file. Pick the job.",
    description: "102 free online tools for PDFs, images, writing and files.",
    siteName: "FileDeck",
    type: "website",
  },
};

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

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        {/* eslint-disable-next-line @next/next/no-page-custom-font */}
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+Bengali:wght@400;500;600;700;800&display=swap"
          rel="stylesheet"
        />
      </head>
      <body className="antialiased bg-background text-foreground">
        {children}
        <Toaster />
      </body>
    </html>
  );
}
