import type { Metadata, Viewport } from "next";
import { Inter } from "next/font/google";
import ChatbotClient from "@/components/ChatbotClient";
import "./globals.css";

const inter = Inter({
    subsets: ["latin"],
    variable: "--font-inter",
    display: "swap",
    preload: true,
});

export const viewport: Viewport = {
    width: "device-width",
    initialScale: 1,
    themeColor: "#16a34a",
};

export const metadata: Metadata = {
    title: "Aasi Tech - Innovative Digital Solutions",
    description:
        "Empowering businesses with cutting-edge web development, mobile apps, AI, cloud, and cybersecurity solutions. Tailored strategies for modern enterprises.",
    icons: {
        icon: "/img/logo.png",
        shortcut: "/img/logo.png",
        apple: "/img/logo.png",
    },
    openGraph: {
        title: "Aasi Tech - Innovative Digital Solutions",
        description:
            "Empowering businesses with cutting-edge web development, mobile apps, AI, cloud, and cybersecurity solutions.",
        type: "website",
        locale: "en_US",
    },
    robots: {
        index: true,
        follow: true,
    },
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en">
            <head>
                <link
                    rel="preconnect"
                    href="https://fonts.googleapis.com"
                />
                <link
                    rel="preconnect"
                    href="https://fonts.gstatic.com"
                    crossOrigin="anonymous"
                />
                {/* Material Symbols — loaded as stylesheet, not via JS injection */}
                <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap"
                />
            </head>
            <body
                className={`${inter.variable} font-sans antialiased overflow-x-hidden`}
            >
                {children}
                <ChatbotClient />
            </body>
        </html>
    );
}
