import type { Metadata, Viewport } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { LocaleProvider } from "@/i18n/LocaleProvider";
import { Header } from "@/components/Header";
import { Footer } from "@/components/Footer";

const latin = localFont({
  src: "./fonts/Montserrat.ttf",
  variable: "--font-latin",
  weight: "100 900",
});
const arabic = localFont({
  src: [
    { path: "./fonts/Tajawal-Regular.ttf", weight: "400" },
    { path: "./fonts/Tajawal-Medium.ttf", weight: "500" },
    { path: "./fonts/Tajawal-Bold.ttf", weight: "700" },
  ],
  variable: "--font-arabic",
});

// Public canonical origin (override per environment with NEXT_PUBLIC_SITE_URL).
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? "https://beebbeeb.sa.com";

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: {
    default: "BeebBeeb  Smart electric mobility | بيب بيب للتنقّل الذكي",
    template: "%s | BeebBeeb",
  },
  description:
    "BeebBeeb is dockless electric scooter and bike sharing for Saudi Arabia. Find a vehicle near you, scan the QR to unlock, and ride, paying by the minute from your wallet. بيب بيب: تأجير سكوترات ودراجات كهربائية للتنقّل الذكي والسريع في المملكة العربية السعودية.",
  applicationName: "BeebBeeb",
  keywords: [
    "BeebBeeb",
    "بيب بيب",
    "سكوتر كهربائي",
    "تأجير سكوتر",
    "تنقل ذكي",
    "سكوتر السعودية",
    "دراجة كهربائية",
    "electric scooter",
    "scooter sharing",
    "bike sharing",
    "micromobility",
    "Saudi Arabia",
    "Riyadh",
  ],
  authors: [{ name: "BeebBeeb" }],
  creator: "BeebBeeb",
  publisher: "BeebBeeb",
  category: "transportation",
  alternates: {
    canonical: "/",
    languages: { "ar-SA": "/", "en": "/" },
  },
  openGraph: {
    type: "website",
    url: siteUrl,
    siteName: "BeebBeeb",
    title: "BeebBeeb  Smart electric mobility",
    description:
      "Dockless electric scooter and bike sharing for Saudi Arabia. Scan, unlock, and ride. تأجير سكوترات ودراجات كهربائية للتنقّل الذكي.",
    locale: "ar_SA",
    alternateLocale: ["en_US"],
    images: [{ url: "/beeb-logo.png", width: 500, height: 500, alt: "BeebBeeb" }],
  },
  twitter: {
    card: "summary",
    title: "BeebBeeb  Smart electric mobility",
    description: "Dockless electric scooter and bike sharing for Saudi Arabia.",
    images: ["/beeb-logo.png"],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: { index: true, follow: true, "max-image-preview": "large" },
  },
};

export const viewport: Viewport = {
  themeColor: "#F5C24B",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" dir="ltr">
      <body className={`${latin.variable} ${arabic.variable} antialiased`}>
        <LocaleProvider>
          <Header />
          <main>{children}</main>
          <Footer />
        </LocaleProvider>
      </body>
    </html>
  );
}