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

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: {
    default: 'Puffin Offset - Carbon Offsetting for Yachts',
    template: '%s | Puffin Offset',
  },
  description: 'Premium carbon offset calculator and solutions for luxury yachts. Offset your vessel\'s carbon footprint with verified climate projects.',
  keywords: ['carbon offset', 'yacht carbon offset', 'luxury yacht sustainability', 'marine carbon calculator', 'yacht emissions', 'climate action'],
  authors: [{ name: 'Puffin Offset' }],
  creator: 'Puffin Offset',
  publisher: 'Puffin Offset',
  metadataBase: new URL(process.env.NEXT_PUBLIC_API_BASE_URL || 'https://puffinoffset.com'),
  alternates: {
    canonical: '/',
  },
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://puffinoffset.com',
    title: 'Puffin Offset - Carbon Offsetting for Yachts',
    description: 'Premium carbon offset calculator and solutions for luxury yachts. Offset your vessel\'s carbon footprint with verified climate projects.',
    siteName: 'Puffin Offset',
    images: [
      {
        url: '/puffinOffset.png',
        width: 1200,
        height: 630,
        alt: 'Puffin Offset Logo',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Puffin Offset - Carbon Offsetting for Yachts',
    description: 'Premium carbon offset calculator and solutions for luxury yachts.',
    images: ['/puffinOffset.png'],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  verification: {
    // Add Google Search Console verification here when available
    // google: 'your-verification-code',
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={inter.className}>
      <head>
        {/* Preconnect to external domains for performance */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

        {/* Favicon and app icons */}
        <link rel="icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/puffinOffset.png" />

        {/* PWA manifest */}
        <link rel="manifest" href="/manifest.json" />

        {/* Theme color */}
        <meta name="theme-color" content="#1E40AF" />
      </head>
      <body className="flex flex-col min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 wave-pattern">
        {/* Google Analytics - using Next.js Script component for security and performance */}
        {process.env.NODE_ENV === 'production' && (
          <>
            <Script
              src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
              strategy="afterInteractive"
            />
            <Script id="google-analytics" strategy="afterInteractive">
              {`
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', 'G-XXXXXXXXXX');
              `}
            </Script>
          </>
        )}
        <RootLayoutClient>{children}</RootLayoutClient>
      </body>
    </html>
  );
}
