// src/app/layout.tsx
import type { Metadata } from 'next'
import './globals.css'
import { Providers } from './providers'

export const metadata: Metadata = {
  title: {
    default: 'Motif — Local Talent & Service Hub',
    template: '%s | Motif',
  },
  description:
    'Find local jobs, hire service providers, and build your professional resume — all in one place.',
  keywords: ['jobs', 'freelance', 'services', 'resume builder', 'local talent', 'South Africa'],
  openGraph: {
    title: 'Motif — Local Talent & Service Hub',
    description: 'Find jobs, hire services, build your resume.',
    type: 'website',
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link
          href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap"
          rel="stylesheet"
        />
      </head>
      <body className="font-body bg-[#032A1A] text-white min-h-screen relative overflow-x-hidden">
        <div className="global-pattern-overlay" />
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}
