import type { Metadata } from "next";
import "./globals.css";
import { AuthNav } from '@/components/AuthNav';

export const metadata: Metadata = {
  title: "CEFR Vocab - Jago Bahasa Inggris",
  description: "Pelajari 7.404 kosakata bahasa Inggris terpenting dari A1 hingga C2.",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="id">
      <head>
        <script 
          type="text/javascript"
          src="https://app.midtrans.com/snap/snap.js"
          data-client-key={process.env.NEXT_PUBLIC_MIDTRANS_CLIENT_KEY}
        ></script>
      </head>
      <body className="bg-gray-50 text-gray-900 font-sans min-h-screen antialiased">
        <nav className="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-gray-100 px-8 py-4 flex justify-between items-center shadow-sm">
          <a href="/" className="font-extrabold text-2xl text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 flex items-center gap-2 hover:opacity-80 transition-opacity">
            JagoVocab <span className="text-2xl">🚀</span>
          </a>
          <div className="flex gap-3 items-center">
            <a href="/dashboard" className="hidden sm:inline-flex px-5 py-2.5 font-semibold text-gray-700 bg-gray-50 border border-gray-200 rounded-xl hover:bg-gray-100 hover:text-blue-600 transition-all">
              Ruang Belajar
            </a>
            <a href="/quiz" className="hidden sm:inline-flex px-5 py-2.5 font-semibold text-gray-700 bg-gray-50 border border-gray-200 rounded-xl hover:bg-gray-100 hover:text-purple-600 transition-all">
              Kuis 🎮
            </a>
            <AuthNav />
          </div>
        </nav>
        {children}
      </body>
    </html>
  );
}
