import type { Metadata, Viewport } from "next";
import { Inter, Playfair_Display } from "next/font/google";
import "../globals.css";
import Script from "next/script";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import WhatsAppButton from "@/components/WhatsAppButton";

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

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

const baseUrl = "https://kitebeachakyaka.com.tr";

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 5,
  themeColor: "#0D3D50",
};

export async function generateMetadata(
  { params }: { params: Promise<{ lang: string }> }
): Promise<Metadata> {
  const { lang } = await params;
  const isEn = lang === "en";
  return {
    title: isEn
      ? "Kite Beach Akyaka | Kitesurf & Boutique Hotel"
      : "Kite Beach Akyaka | Kitesurf & Butik Otel",
    description: isEn
      ? "Tranquility of the river, energy of the sea — in one spot. Welcome to Kite Beach Akyaka boutique hotel and kitesurf center."
      : "Nehrin huzuru, denizin enerjisi — tek bir noktada. Kite Beach Akyaka butik otel ve kitesurf merkezine hoş geldiniz.",
    metadataBase: new URL(baseUrl),
    openGraph: {
      locale: isEn ? "en_US" : "tr_TR",
      alternateLocale: isEn ? "tr_TR" : "en_US",
      siteName: "Kite Beach Akyaka",
      type: "website",
      url: `${baseUrl}/${lang}`,
      images: [{ url: `${baseUrl}/og-image.jpg`, width: 1200, height: 630, alt: "Kite Beach Akyaka" }],
    },
    twitter: {
      card: "summary_large_image",
      images: [`${baseUrl}/og-image.jpg`],
    },
  };
}

export async function generateStaticParams() {
  return [{ lang: 'tr' }, { lang: 'en' }]
}

function buildJsonLd(lang: string) {
  const isEn = lang === "en";
  return {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "LodgingBusiness",
        "@id": `${baseUrl}/#business`,
        name: "Kite Beach Akyaka",
        url: baseUrl,
        logo: `${baseUrl}/logo.png`,
        image: `${baseUrl}/og-image.jpg`,
        description: isEn
          ? "Boutique hotel and kitesurf center on the banks of Azmak River in Akyaka, Muğla."
          : "Akyaka, Muğla'da Azmak Nehri kıyısında butik otel ve kitesurf merkezi.",
        telephone: "+905445040310",
        email: "info@kitebeachakyaka.com.tr",
        address: {
          "@type": "PostalAddress",
          streetAddress: "Akyaka Mahallesi, Akçapınar Mevkii",
          addressLocality: "Akyaka",
          addressRegion: "Muğla",
          addressCountry: "TR",
        },
        geo: {
          "@type": "GeoCoordinates",
          latitude: 37.0543,
          longitude: 28.3286,
        },
        sameAs: [
          "https://instagram.com/kitebeachakyaka",
        ],
        amenityFeature: [
          { "@type": "LocationFeatureSpecification", name: "Kitesurf School", value: true },
          { "@type": "LocationFeatureSpecification", name: "Restaurant & Bar", value: true },
          { "@type": "LocationFeatureSpecification", name: "Yoga Platform", value: true },
        ],
      },
      {
        "@type": "WebSite",
        "@id": `${baseUrl}/#website`,
        url: baseUrl,
        name: "Kite Beach Akyaka",
        publisher: { "@id": `${baseUrl}/#business` },
        inLanguage: [isEn ? "en" : "tr"],
      },
    ],
  };
}

export default async function RootLayout({
  children,
  params,
}: Readonly<{
  children: React.ReactNode;
  params: Promise<{ lang: string }>;
}>) {
  const { lang } = await params;
  return (
    <html
      lang={lang}
      className={`${inter.variable} ${playfair.variable} h-full antialiased scroll-smooth`}
      suppressHydrationWarning
    >
      <head>
        <Script defer src="/st.js" data-domain="kitebeachakyaka.com.tr" strategy="afterInteractive" />
      </head>
      <body className="min-h-full flex flex-col bg-background text-foreground" suppressHydrationWarning>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(buildJsonLd(lang)).replace(/</g, "\\u003c"),
          }}
        />
        <Navbar lang={lang} />
        <main className="flex-grow">{children}</main>
        <Footer lang={lang} />
        <WhatsAppButton />
      </body>
    </html>
  );
}
