import type { Metadata } from 'next';
import { Analytics } from '@/components/analytics';
import { FloatingContactWidget } from '@/components/floating-contact-widget';
import { SiteFooter } from '@/components/site-footer';
import { SiteHeader } from '@/components/site-header';
import { ScrollMotion } from '@/components/scroll-motion';
import { I18nProvider } from '@/lib/i18n';
import { runtimeEnv } from '@/lib/config';
import { SITE_CONFIG } from '@/lib/site-config';
import './globals.css';

export const metadata: Metadata = {
  title: {
    default: SITE_CONFIG.brand,
    template: `%s | ${SITE_CONFIG.brand}`,
  },
  description: SITE_CONFIG.description,
  applicationName: SITE_CONFIG.brand,
  keywords: ['móc len', 'dụng cụ móc len', 'học móc len', 'bộ kit móc len'],
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const gscVerification = runtimeEnv('GSC_VERIFICATION');
  const ga4MeasurementId = runtimeEnv('GA4_MEASUREMENT_ID');
  return (
    <html lang="vi">
      <head>{gscVerification ? <meta name="google-site-verification" content={gscVerification} /> : null}</head>
      <body>
        <I18nProvider>
          <div className="site-shell">
            <Analytics measurementId={ga4MeasurementId} />
            <ScrollMotion />
            <SiteHeader />
            <main>{children}</main>
            <SiteFooter />
            <FloatingContactWidget />
          </div>
        </I18nProvider>
      </body>
    </html>
  );
}