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

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

export const metadata: Metadata = {
  title: 'Banatie - AI Image Generation API | Developer-First Platform',
  description:
    "Transform text and reference images into production-ready visuals with Banatie's developer-first AI image generation API. Powered by Google Gemini & Imagen 4.0. Join the beta.",
  keywords: [
    'AI image generation',
    'image generation API',
    'text to image',
    'Gemini API',
    'developer tools',
    'REST API',
    'image AI',
  ],
  authors: [{ name: 'Banatie Team' }],
  creator: 'Banatie',
  publisher: 'Banatie',
  metadataBase: new URL('https://banatie.com'),
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://banatie.com',
    title: 'Banatie - AI Image Generation API for Developers',
    description:
      'Developer-first API for AI-powered image generation. Transform text and reference images into production-ready visuals in seconds.',
    siteName: 'Banatie',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Banatie - AI Image Generation API',
    description: 'Developer-first API for AI-powered image generation. Join the beta.',
    creator: '@banatie',
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  verification: {
    google: 'google-site-verification-code',
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="scroll-smooth">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
      </head>
      <body className={`${inter.variable} antialiased`}>
        <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
          <div className="fixed inset-0 overflow-hidden pointer-events-none">
            <div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl animate-pulse"></div>
            <div className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl animate-pulse delay-700"></div>
          </div>

          {children}
        </div>
      </body>
    </html>
  );
}
