import type { Metadata } from 'next';
import { Inter, Caveat } from 'next/font/google';
import Image from 'next/image';
import Script from 'next/script';
import { Footer } from '@/components/shared/Footer';
import banatieLogo from './_assets/banatie-logo-horisontal.png';
import './globals.css';

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

const caveat = Caveat({
  variable: '--font-caveat',
  subsets: ['latin'],
  weight: ['500', '600', '700'],
  display: 'swap',
});

export const metadata: Metadata = {
  metadataBase: new URL('https://banatie.app'),
};

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>
      <Script
        src="https://cloud.umami.is/script.js"
        data-website-id="5af6a122-ca2e-4a48-9bfd-9cfd4d7b5174"
        strategy="afterInteractive"
      />
      <body className={`${inter.variable} ${caveat.variable} antialiased`}>
        <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
          {/* Animated gradient background */}
          <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>

          {/* Header */}
          <header className="sticky top-0 z-10 bg-slate-900/80 backdrop-blur-md border-b border-white/5">
            <nav className="max-w-7xl mx-auto px-4 sm:px-6 py-2 sm:py-3 flex justify-between items-center h-12 sm:h-14 md:h-16">
              <div className="h-full flex items-center">
                <Image
                  src={banatieLogo}
                  alt="Banatie Logo"
                  width={150}
                  height={40}
                  priority
                  className="h-8 sm:h-10 md:h-full w-auto object-contain"
                />
              </div>
              <a
                href="#get-access"
                className="text-xs sm:text-sm text-gray-300 hover:text-white transition-colors"
              >
                Get Access
              </a>
            </nav>
          </header>

          {/* Page content */}
          {children}

          <Footer />
        </div>
      </body>
    </html>
  );
}
