تسجيل الدخول والحسابات

"use client";

import { SignInButton, SignUpButton, UserButton, Show } from "@clerk/nextjs";

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-white">
      {/* شريط علوي */}
      <nav className="flex justify-between items-center p-6 max-w-7xl mx-auto">
        <h1 className="text-2xl font-bold text-gray-900">منصتنا</h1>
        <div className="flex gap-4 items-center">
          <Show when="signed-out">
            <SignInButton mode="modal">
              <button className="text-gray-700 hover:text-gray-900 font-semibold">
                تسجيل الدخول
              </button>
            </SignInButton>
            <SignUpButton mode="modal">
              <button className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                ابدأ مجانًا
              </button>
            </SignUpButton>
          </Show>
          <Show when="signed-in">
            <a href="/dashboard" className="text-gray-700 hover:text-gray-900">
              لوحة التحكم
            </a>
            <UserButton afterSignOutUrl="/" />
          </Show>
        </div>
      </nav>

      {/* محتوى الصفحة الرئيسية */}
      <main className="max-w-7xl mx-auto px-6 py-20">
        <div className="text-center">
          <h2 className="text-5xl font-bold text-gray-900 mb-6">
            تعلّم البرمجة بطريقة أسهل
          </h2>
          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
            منصة تعليمية متكاملة تساعدك على تعلم أحدث التقنيات
          </p>
        </div>
      </main>
    </div>
  );
}