05572ed9-64fa-43d9-99fb-bdb36f3b8b59/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="mediumLarge"
        background="aurora"
        cardStyle="glass-elevated"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "الرئيسية",          id: "hero"},
        {
          name: "الألعاب",          id: "features"},
        {
          name: "الاشتراكات",          id: "pricing"},
        {
          name: "الدردشة",          id: "contact"},
      ]}
      brandName="المهندس"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogo
      logoText="المهندس"
      description="منصة التحديات والمهارات. العب، اربح النقاط، وتواصل مع المهندسين من كل مكان."
      buttons={[
        {
          text: "ابدأ اللعب الآن",          href: "#features"},
      ]}
      buttonAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-vector/futuristic-technology-infographic-pack_52683-34337.jpg"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "الألعاب التنافسية",          description: "مجموعة متنوعة من الألعاب التفاعلية مع تتبع فوري للنتيجة وحالة اللعب.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/phone-icon-front-side-with-white-background_187299-39933.jpg", imageAlt: "3d puzzle game" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/3d-view-puzzle-pieces_23-2150499224.jpg", imageAlt: "3d puzzle game" }
        },
        {
          title: "عجلة الحظ اليومية",          description: "نظام سحب عشوائي تفاعلي يحدد الجوائز بناءً على خوارزمية منطقية.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/student-home-taking-notes-while-watching-presentation-closeup_482257-118737.jpg", imageAlt: "3d puzzle game" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/8-bits-cars-gaming-assets_23-2151143796.jpg", imageAlt: "3d puzzle game" }
        },
        {
          title: "نظام النقاط الذكي",          description: "لوحة تحكم كاملة تدير رصيد المستخدم وحالة الجلسات التفاعلية.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/view-3d-arcade-game-box_23-2151005754.jpg", imageAlt: "3d puzzle game" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/gradient-futuristic-infographic_23-2148459379.jpg", imageAlt: "3d puzzle game" }
        }
      ]}
      showStepNumbers={true}
      title="مميزات منصة المهندس"
      description="تطوير شامل لأنظمة اللعب التفاعلية وضمان تجربة مستخدم ديناميكية."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "monthly",          name: "اشتراك شهري",          price: "100,000 نقطة",          buttons: [
            {
              text: "تفعيل الاشتراك"},
          ],
          features: [
            "دخول كامل للألعاب",            "دردشة المهندسين",            "عجلة حظ إضافية"],
        },
        {
          id: "yearly",          name: "اشتراك سنوي",          badge: "الأوفر",          price: "500,000 نقطة",          buttons: [
            {
              text: "تفعيل الاشتراك"},
          ],
          features: [
            "كل مميزات الشهرية",            "خصم خاص",            "أولوية في المسابقات"],
        },
      ]}
      title="خطط الاشتراكات"
      description="استخدم نقاطك للترقية والحصول على صلاحيات حصرية."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",          title: "كيف أحصل على النقاط؟",          content: "يمكنك الحصول على 200 نقطة يومياً من خلال الدخول واللعب."},
        {
          id: "f2",          title: "كيف أستخدم عجلة الحظ؟",          content: "تتوفر عجلة الحظ مرة واحدة كل 24 ساعة في واجهة المستخدم."},
        {
          id: "f3",          title: "هل الاشتراك يتجدد تلقائياً؟",          content: "لا، يمكنك اختيار التجديد يدوياً من خلال لوحة التحكم."},
      ]}
      title="الأسئلة الشائعة"
      description="كل ما تحتاج معرفته عن منصة المهندس."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "animated-grid"}}
      title="دردشة المجتمع"
      description="انضم إلى الدردشة العامة للمهندسين وشارك تجاربك مع الآخرين."
      mediaAnimation="slide-up"
      buttonText="انضم للدردشة"
      imageSrc="http://img.b2bpic.net/free-vector/neon-game-show-interface-with-glowing-elements_1308-181130.jpg"
      tag="تواصل معنا"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "الرئيسية",              href: "/"},
            {
              label: "الألعاب",              href: "#features"},
          ],
        },
        {
          items: [
            {
              label: "الاشتراكات",              href: "#pricing"},
            {
              label: "الدردشة",              href: "#contact"},
          ],
        },
      ]}
      logoText="المهندس"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}