import { ClientRoot } from '@/components/client-root';
import type { Metadata, Viewport } from 'next';
import { Manrope } from 'next/font/google';
import './globals.css';

const manrope = Manrope({ subsets: ['latin'], variable: '--font-sans' });

export const metadata: Metadata = {
  title: 'MBtaller',
  description: 'Sistema de gestión de órdenes de trabajo para taller mecánico',
  manifest: '/manifest.json',
  icons: {
    icon: [
      { url: '/favicon.png', sizes: '32x32', type: 'image/png' },
      { url: '/icons/icon-192x192.png', sizes: '192x192', type: 'image/png' },
    ],
    shortcut: '/favicon.png',
    apple: '/apple-touch-icon.png',
  },
  appleWebApp: {
    capable: true,
    statusBarStyle: 'default',
    title: 'MBtaller',
  },
  formatDetection: {
    telephone: false,
  },
  other: {
    'mobile-web-app-capable': 'yes',
  },
};

/*
 * El zoom queda habilitado a propósito.
 *
 * Antes estaba bloqueado con `maximumScale: 1, userScalable: false`. Eso le
 * quita a la persona el único recurso que tiene cuando algo se ve cortado o
 * demasiado chico, y es una barrera de accesibilidad real para quien no ve bien
 * de cerca. El bloqueo se usaba para evitar que Safari hiciera zoom al enfocar
 * un campo; eso ahora se resuelve con el tamaño de letra del propio campo
 * (16px en móvil), en components/ui/input.tsx.
 */
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  viewportFit: 'cover',
  themeColor: '#fbfbfd',
};

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