import type { Metadata, Viewport } from "next";
import "./globals.css";
import { ClerkProvider } from "@clerk/nextjs";
import { AppShell } from "@/components/app-shell";

export const metadata: Metadata = {
  title: "meSEO – AI Visibility Platform",
  description: "Machine Enhanced Search Engine Optimization",
  icons: {
    icon: "/favicon.png",
    shortcut: "/favicon.png",
    apple: "/apple-touch-icon.png",
  },
};

// Explicit viewport for iOS compatibility: viewport-fit=cover handles
// the notch, no maximum-scale restriction allows pinch-zoom AND proper
// keyboard activation on iOS Safari 16+.
export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  viewportFit: "cover",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <ClerkProvider>
          <AppShell>{children}</AppShell>
        </ClerkProvider>
      </body>
    </html>
  );
}
