import type { Metadata } from 'next';
import { Poppins, Dela_Gothic_One } from 'next/font/google';
import { Providers } from '@/components/providers';
import './globals.css';

const poppins = Poppins({
  subsets: ['latin'],
  weight: ['300', '400', '500', '600', '700', '800'],
  variable: '--font-poppins',
});

const delaGothicOne = Dela_Gothic_One({
  subsets: ['latin'],
  weight: '400',
  variable: '--font-dela',
});

export const metadata: Metadata = {
  metadataBase: new URL(
    process.env.NEXT_PUBLIC_APP_URL || 'https://garamcapkapal.com'
  ),
  title: {
    default: 'Garam Capkapal',
    template: '%s | Garam Cap Kapal',
  },
  description:
    'Garam Cap Kapal, merek garam premium tradisional Indonesia dengan kualitas terbaik untuk kebutuhan kuliner dan industri Anda.',
  keywords: ['garam', 'garam premium', 'garam tradisional', 'garam Indonesia'],
  authors: [{ name: 'Garam Cap Kapal' }],
  icons: {
    icon: [
      { url: '/favicon.ico' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
    ],
    apple: [{ url: '/apple-touch-icon.png' }],
  },
  manifest: '/site.webmanifest',
  openGraph: {
    title: 'Garam Capkapal',
    description: 'Garam premium tradisional pilihan keluarga Indonesia.',
    url: '/',
    siteName: 'Garam Cap Kapal',
    type: 'website',
    images: [
      {
        url: '/og-banner.jpg',
        width: 1024,
        height: 1024,
        alt: 'Banner Garam Cap Kapal',
      },
    ],
    locale: 'id_ID',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Garam Capkapal',
    description: 'Garam premium tradisional pilihan keluarga Indonesia.',
    images: ['/og-banner.jpg'],
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="id"
      suppressHydrationWarning
      className={`${poppins.variable} ${delaGothicOne.variable}`}
    >
      <body className={`${poppins.className}`}>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}