import type { Metadata } from 'next';
import { CartProvider } from '@/components/cart/CartProvider';
import './globals.css';

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: { default: 'Acme Store', template: '%s · Acme Store' },
  description: 'A ready-to-run storefront: catalog, cart, checkout, payments and admin.',
  openGraph: {
    type: 'website',
    siteName: 'Acme Store',
    url: '/',
    title: 'Acme Store',
    description: 'A ready-to-run storefront: catalog, cart, checkout, payments and admin.',
    images: [{ url: '/art/og.webp', width: 1536, height: 1024, alt: 'Acme Store — everyday goods, made to last' }],
  },
  robots: { index: true, follow: true },
};

const themeScript = `document.documentElement.classList.add('js');try{var t=localStorage.getItem('theme');var d=t? t==='dark' : matchMedia('(prefers-color-scheme: dark)').matches;if(d)document.documentElement.classList.add('dark');}catch(e){}`;

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
      </head>
      <body className="min-h-screen antialiased">
        <CartProvider>{children}</CartProvider>
      </body>
    </html>
  );
}