import { Inter } from "next/font/google";
import Script from "next/script";
import "./globals.css";

import type { Metadata } from "next";
import Navbar from "@/components/landing/navbar";
import { Footer } from "@/components/landing/footer";
import { CtaAnalytics } from "@/components/cta-analytics";
const inter = Inter({ subsets: ["latin"], display: "swap" });

const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;

export const metadata: Metadata = {
  metadataBase: new URL("https://quickvoice.co"),
  title: {
    default: "QuickVoice - Open-Source AI Phone Agent Stack",
    template: "%s | QuickVoice",
  },
  description:
    "Run, inspect, and extend the QuickVoice stack for AI phone agents, including the console, API, LiveKit worker, telephony integrations, knowledge bases, campaigns, and call logs.",
  keywords: [
    "AI voice agents",
    "open-source voice AI",
    "AI voice automation",
    "self-hosted voice agents",
    "voice agent platform",
    "conversational AI",
  ],
  robots: { index: true, follow: true },
  openGraph: {
    type: "website",
    siteName: "QuickVoice",
    title: "QuickVoice - Open-Source AI Phone Agent Stack",
    description:
      "Run, inspect, and extend the QuickVoice stack for AI phone agents, including the console, API, LiveKit worker, telephony integrations, knowledge bases, campaigns, and call logs.",
    images: [
      {
        url: "/logo.svg",
        width: 512,
        height: 512,
        alt: "QuickVoice Logo",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "QuickVoice - Open-Source AI Phone Agent Stack",
    description:
      "Run, inspect, and extend the QuickVoice stack for AI phone agents.",
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <link
          rel="alternate"
          type="text/plain"
          href="/llms.txt"
          title="LLM Information"
        />
        <link rel="apple-touch-icon" href="/apple-icon.png" />
        {process.env.NEXT_PUBLIC_GSC_VERIFICATION && (
          <meta
            name="google-site-verification"
            content={process.env.NEXT_PUBLIC_GSC_VERIFICATION}
          />
        )}
      </head>
      {GA_MEASUREMENT_ID && (
        <>
          <Script
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
            strategy="afterInteractive"
          />
          <Script id="google-analytics" strategy="afterInteractive">
            {`
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${GA_MEASUREMENT_ID}');
            `}
          </Script>
        </>
      )}
      <body className={inter.className}>
        <a
          href="#main-content"
          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[9999] focus:rounded-lg focus:bg-indigo-600 focus:px-4 focus:py-2 focus:text-white focus:text-sm focus:font-semibold focus:shadow-lg"
        >
          Skip to main content
        </a>
        <Navbar />
        <CtaAnalytics />
        <div id="main-content">{children}</div>
        <Footer />
      </body>
    </html>
  );
}
