import type { Metadata } from "next";
import { Inter, Barlow_Condensed } from "next/font/google";
import "../globals.css";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import WhatsAppFloat from "@/components/WhatsAppFloat";
import GoogleAnalytics from "@/components/GoogleAnalytics";
import { SITE } from "@/lib/seo";
import { getSiteSettings } from "@/lib/site-settings";

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

const barlow = Barlow_Condensed({
  subsets: ["latin"],
  weight: ["600", "700", "800", "900"],
  style: ["normal", "italic"],
  variable: "--font-barlow",
  display: "swap",
});

export const metadata: Metadata = {
  metadataBase: new URL(SITE.domain),
  title: {
    default: "Rent a Car Dubai | Best Car Rental UAE | NCK",
    template: "%s | NCK Car Rental Dubai",
  },
  description:
    "Rent a car in Dubai. Luxury, sports, SUV & economy. Free delivery, no deposit, 24/7 support. Book online in 60 seconds.",
  keywords: [
    "rent a car dubai","car rental dubai","cheap car rental dubai",
    "luxury car rental dubai","sports car rental dubai","suv rental dubai",
    "rent a car uae","car hire dubai","dubai car rental",
  ],
  openGraph: {
    title:       "Rent a Car Dubai | NCK Car Rental",
    description: "Luxury, sports, SUV & economy cars. Free delivery across Dubai.",
    url:         SITE.domain,
    siteName:    SITE.name,
    locale:      "en_AE",
    type:        "website",
    images: [{ url: "/media/ferrari-f8-tributo-rental-dubai-02.webp", width: 1200, height: 630, alt: "NCK Car Rental Dubai - Luxury & Sports Cars" }],
  },
  twitter: {
    card:        "summary_large_image",
    title:       "Rent a Car Dubai | NCK Car Rental",
    description: "Luxury, sports, SUV & economy cars. Free delivery, no deposit, 24/7 support.",
    images:      ["/media/ferrari-f8-tributo-rental-dubai-02.webp"],
  },
  alternates: { canonical: SITE.domain },
  robots: { index: true, follow: true, googleBot: { index: true, follow: true } },
};

const navLd = {
  "@context": "https://schema.org",
  "@type": "SiteNavigationElement",
  name: [
    "All Cars", "Luxury Car Rental Dubai", "Sports Car Rental Dubai",
    "SUV Rental Dubai", "Locations", "Car Rental Price List", "Blog",
  ],
  url: [
    `${SITE.domain}/all-cars/`,
    `${SITE.domain}/cartype/luxury-car-rental-dubai/`,
    `${SITE.domain}/cartype/sports-car-rental-dubai/`,
    `${SITE.domain}/cartype/suv-rental-dubai/`,
    `${SITE.domain}/locations/`,
    `${SITE.domain}/car-price-list/`,
    `${SITE.domain}/blog/`,
  ],
};

export default async function FrontendLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  const s = await getSiteSettings()
  return (
    <html lang="en" className={`${inter.variable} ${barlow.variable}`}>
      <head>
        <link rel="preconnect" href="https://www.googletagmanager.com" />
        <link rel="preconnect" href="https://www.google-analytics.com" />
        <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
      </head>
      <body>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(navLd) }}
        />
        <GoogleAnalytics />
        <Header
          waPhone={s.whatsapp1}
          callUrl={s.callUrl1}
          phone={s.phone1}
          logoUrl={s.logoUrl}
          businessName={s.businessName}
        />
        <main>{children}</main>
        <Footer />
        <WhatsAppFloat phone={s.whatsapp1} />
      </body>
    </html>
  );
}
