import type { Metadata } from "next";
import { DM_Sans, DM_Serif_Display, DM_Mono } from "next/font/google";
import { GoogleTagManager } from '@next/third-parties/google'
import Providers from "./providers";
import "./globals.css";

const GA_ID = "G-84LELVV3P5";

const dmSans = DM_Sans({
  variable: "--font-dm-sans",
  subsets: ["latin"],
});

const dmSerif = DM_Serif_Display({
  variable: "--font-dm-serif",
  weight: "400",
  subsets: ["latin"],
});

const dmMono = DM_Mono({
  variable: "--font-dm-mono",
  weight: "400",
  subsets: ["latin"],
});

const BASE_URL = "https://delegare.dev";
const TITLE = "Delegare — Let AI agents pay for things, safely.";
const DESCRIPTION =
  "Give AI agents real spending power with hard limits they can't override. Users set the rules. Agents execute. Merchants get paid. Max 3¢ per transaction on Stripe or Base (USDC).";

export const metadata: Metadata = {
  metadataBase: new URL(BASE_URL),
  title: TITLE,
  description: DESCRIPTION,

  openGraph: {
    type: "website",
    url: BASE_URL,
    siteName: "Delegare",
    title: TITLE,
    description: DESCRIPTION,
    images: [
      {
        url: "/opengraph-image",
        width: 1200,
        height: 630,
        alt: "Delegare — Let AI agents pay for things, safely.",
      },
    ],
  },

  twitter: {
    card: "summary_large_image",
    title: TITLE,
    description: DESCRIPTION,
    site: "@delegare_dev",
    images: ["/opengraph-image"],
  },

  icons: {
    icon: [
      { url: '/favicon/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
      { url: '/favicon/favicon.svg', type: 'image/svg+xml' },
    ],
    shortcut: '/favicon/favicon.ico',
    apple: '/favicon/apple-touch-icon.png',
  },
  manifest: '/favicon/site.webmanifest',
  appleWebApp: {
    title: 'Delegare'
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className={`${dmSans.variable} ${dmSerif.variable} ${dmMono.variable} h-full antialiased dark`}
      style={{ backgroundColor: "#0c0c0c", color: "#f0ede8" }}
    >
      <body className="min-h-full flex flex-col font-sans">
        <Providers>
          {children}
        </Providers>
        <GoogleTagManager gtmId={GA_ID} />
      </body>
    </html>
  );
}
