import type { Metadata } from 'next';
import './globals.css';

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';

export const metadata: Metadata = {
  title: {
    default: 'Kit - Your Creative Toolkit',
    template: '%s | Kit',
  },
  description: 'A curated collection of creative and utility tools for developers and creators. Features file conversion, image editing, and color manipulation.',
  keywords: ['tools', 'utilities', 'file converter', 'image editor', 'color palette', 'creative toolkit', 'convert', 'paint', 'color', 'open source'],
  metadataBase: new URL(siteUrl),
  icons: {
    icon: '/icon.png',
    shortcut: '/icon.png',
    apple: '/icon.png',
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const umamiScript = process.env.UMAMI_SCRIPT;
  const umamiId = process.env.UMAMI_ID;
  const isProd = process.env.NODE_ENV === 'production';

  return (
    <html lang="en">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <meta name="apple-mobile-web-app-title" content="Kit" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="theme-color" content="#8b5cf6" />
        {isProd && umamiScript && umamiId && (
          <script defer src={umamiScript} data-website-id={umamiId}></script>
        )}
      </head>
      <body className="antialiased">
        {children}
      </body>
    </html>
  );
}
