import React, { Suspense } from "react"
import type { Metadata } from 'next'
import { Analytics } from '@vercel/analytics/next'
import { OfflineShellRegister } from '@/components/offline-shell-register'
import { RouteFeedback } from '@/components/route-feedback'
import './globals.css'

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL?.startsWith('http')
  ? process.env.NEXT_PUBLIC_SITE_URL
  : 'https://ballbox.com'

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: 'Ballbox | Máquinas Vending de Pelotas de Pádel para Clubes',
  description: 'Automatiza la venta de pelotas de pádel en tu club deportivo. Sin gestión, sin inversión inicial. Pantallas publicitarias integradas para ingresos extra. Solución llave en mano 24/7. Argentina y Chile.',
  generator: 'v0.app',
  openGraph: {
    title: 'Ballbox | Máquinas Vending de Pelotas de Pádel para Clubes',
    description: 'Automatiza la venta de pelotas de pádel en tu club deportivo. Sin gestión, sin inversión inicial. Pantallas publicitarias integradas para ingresos extra.',
    images: ['/images/ballbox-logo.png'],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Ballbox | Máquinas Vending de Pelotas de Pádel para Clubes',
    description: 'Automatiza la venta de pelotas de pádel en tu club deportivo. Sin gestión, sin inversión inicial. Pantallas publicitarias integradas para ingresos extra.',
    images: ['/images/ballbox-logo.png'],
  },
  icons: {
    icon: '/images/ballbox-logo.png',
    shortcut: '/images/ballbox-logo.png',
    apple: '/images/ballbox-logo.png',
  },
  manifest: '/manifest.webmanifest',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="es" suppressHydrationWarning>
      <body suppressHydrationWarning className="font-sans antialiased">
        <Suspense fallback={null}>
          <RouteFeedback />
        </Suspense>
        <OfflineShellRegister />
        {children}
        <Analytics />
      </body>
    </html>
  )
}
