import type { Metadata } from "next";
import "./globals.css";
import ToastProvider from "@/components/common/Toast";

const APP_NAME = process.env.NEXT_PUBLIC_APP_NAME ?? "PPT Adventure";
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://pptadventure.com";

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  applicationName: APP_NAME,
  title: {
    default: `${APP_NAME} — Open Trip & Pendakian Gunung Premium`,
    template: `%s | ${APP_NAME}`,
  },
  description:
    "Rasakan petualangan pendakian gunung yang lebih terencana bersama PPT Adventure. Open trip, booking mudah, dan pengalaman outdoor premium di Indonesia.",
  openGraph: {
    type: "website",
    locale: "id_ID",
    url: SITE_URL,
    siteName: APP_NAME,
    title: `${APP_NAME} — Open Trip & Pendakian Gunung Premium`,
    description:
      "Open trip pendakian gunung bersama PPT Adventure. Terencana, aman, dan premium.",
    images: [
      {
        url: "/brand/og-image.jpg",
        width: 1200,
        height: 630,
        alt: `${APP_NAME} — Open Trip Pendakian Gunung`,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: `${APP_NAME} — Open Trip & Pendakian Gunung Premium`,
    description: "Open trip pendakian gunung bersama PPT Adventure.",
    images: ["/brand/og-image.jpg"],
  },
  icons: {
    icon: "/brand/favicon.ico",
    shortcut: "/brand/favicon.ico",
    apple: "/brand/apple-touch-icon.png",
  },
  robots: {
    index: true,
    follow: true,
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="id" suppressHydrationWarning>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
      </head>
      <body>
        {children}
        <ToastProvider />
      </body>
    </html>
  );
}