import type { Metadata, Viewport } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { LocaleProvider } from "@/components/LocaleProvider";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
  display: "swap",
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
  display: "swap",
});

const SITE_URL = "https://moon.arthurp.fr";
const SITE_NAME = "Moon Phases";
const SITE_DESCRIPTION = "Complete guide to moon phases: lunar calendar 2026 with exact times, traditional full moon names & origins, interactive phase simulator, 3D moon visualization, world visibility map, tidal infographics, moon quiz, and downloadable PDF calendar. Available in 11 languages.";

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: "#0a0a1a",
  colorScheme: "dark",
};

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  applicationName: SITE_NAME,
  title: {
    default: "Moon Phases 2026 | Full Moon Calendar, Lunar Simulator & 3D Moon",
    template: "%s | Moon Phases",
  },
  description: SITE_DESCRIPTION,
  keywords: [
    "full moon 2026", "lunar calendar 2026", "moon phases", "next full moon",
    "new moon", "first quarter moon", "last quarter moon", "moon phase today",
    "moon simulator", "3D moon", "lunar cycle", "moon visibility map",
    "harvest moon", "wolf moon", "blood moon", "supermoon", "blue moon",
    "tides and moon", "moon gardening", "moon photography",
    "astronomy", "lunar eclipse", "moon calendar PDF",
    "pleine lune 2026", "calendrier lunaire", "phases de la lune",
    "pleine lune eclipse lunaire",
    "pleine lune mars",
    "lune rouge",
    "pleine lune",
    "eclipse lunaire ",
    "lune de sang",
    "lune rouge heure",
    "pleine lune",
    "lune de sang",
    "eclipse lunaire",
    "lune",
    "pleine lune mars",
    "lune de sang",
    "a quelle heure la lune de sang",
    "date pleine lune mars",
    "lune",
    "lune rouge heure",
    "la lune rouge",
    "lune rouge heure",
    "prochaine pleine lune",
    "horoscope",
    "semaine",
  ],
  authors: [{ name: SITE_NAME, url: SITE_URL }],
  creator: SITE_NAME,
  publisher: SITE_NAME,
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  alternates: {
    canonical: SITE_URL,
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: SITE_URL,
    title: "Moon Phases 2026 — Full Moon Calendar, Lunar Simulator & Interactive 3D Moon",
    description: "Explore moon phases, full moon traditions, interactive lunar simulator, 3D visualization, visibility map, tidal charts, quiz and more. Free PDF calendar download.",
    siteName: SITE_NAME,
    images: [
      {
        url: `${SITE_URL}/opengraph-image`,
        width: 1200,
        height: 630,
        alt: "Moon Phases — Full Moon Calendar 2026",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Moon Phases 2026 — Full Moon Calendar & Lunar Guide",
    description: "Explore moon phases, full moon traditions, interactive lunar simulator, 3D visualization and more.",
    images: [`${SITE_URL}/twitter-image`],
    creator: "@moonphases",
  },
  icons: {
    icon: "/icon",
    apple: "/apple-icon",
  },
  manifest: "/manifest.json",
  category: "science",
  classification: "Astronomy",
  other: {
    "format-detection": "telephone=no",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const jsonLd = [
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      name: SITE_NAME,
      url: SITE_URL,
      description: SITE_DESCRIPTION,
      inLanguage: ["en", "fr", "es", "de", "pt", "it", "ja", "zh", "ar", "ru", "hi"],
    },
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      name: SITE_NAME,
      url: SITE_URL,
      logo: `${SITE_URL}/icon`,
    },
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      name: "Moon Phases 2026",
      url: SITE_URL,
      isPartOf: {
        "@type": "WebSite",
        name: SITE_NAME,
        url: SITE_URL,
      },
      description: SITE_DESCRIPTION,
      primaryImageOfPage: `${SITE_URL}/opengraph-image`,
      inLanguage: "en",
    },
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      name: "Moon Phase Simulator",
      url: `${SITE_URL}/#simulator`,
      applicationCategory: "EducationalApplication",
      operatingSystem: "Any",
      offers: { "@type": "Offer", price: "0", priceCurrency: "USD" },
      description: "Interactive moon phase simulator — see how the moon looks on any date.",
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      itemListElement: [
        { "@type": "ListItem", position: 1, name: "Home", item: SITE_URL },
        { "@type": "ListItem", position: 2, name: "Lunar Calendar", item: `${SITE_URL}/#calendar` },
        { "@type": "ListItem", position: 3, name: "Full Moon Names", item: `${SITE_URL}/#fullmoons` },
        { "@type": "ListItem", position: 4, name: "Phase Simulator", item: `${SITE_URL}/#simulator` },
        { "@type": "ListItem", position: 5, name: "Quiz", item: `${SITE_URL}/#quiz` },
      ],
    },
  ];

  return (
    <html lang="en" className="dark">
      <head>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌕</text></svg>" />
        <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌕</text></svg>" />
        <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        {jsonLd.map((schema, i) => (
          <script
            key={i}
            type="application/ld+json"
            dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
          />
        ))}
      </head>
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        <LocaleProvider>
          <div className="moon-bg">
            <div className="stars" />
          </div>
          {children}
        </LocaleProvider>
      </body>
    </html>
  );
}