import type { Metadata, Viewport } from 'next'
import localFont from 'next/font/local'
import { brand } from '@/config/brand'
import './globals.css'

// Fuente empaquetada en el proyecto: el build no depende de servicios externos.
const inter = localFont({ src: './fonts/inter.woff2', variable: '--font-inter', display: 'swap', weight: '100 900' })
const display = localFont({ src: './fonts/space-grotesk.woff2', variable: '--font-display', display: 'swap', weight: '300 700' })

export const metadata: Metadata = {
  title: { default: `${brand.name} — ${brand.tagline}`, template: `%s · ${brand.name}` },
  description: 'Pedí y pagá desde el celular. Mostrá la pantalla y retirá. Sin fila, sin gritar.',
  manifest: '/manifest.webmanifest',
  icons: { icon: '/icon.svg', apple: '/apple-icon.png' },
}

export const viewport: Viewport = {
  themeColor: '#121212', width: 'device-width', initialScale: 1, viewportFit: 'cover',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es" className={`${inter.variable} ${display.variable}`}>
      <body className="min-h-dvh bg-gray-50 font-sans text-gray-900 antialiased">{children}</body>
    </html>
  )
}