"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { BookOpen, CheckCircle, Clock, GraduationCap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="mediumLarge"
        background="fluid"
        cardStyle="glass-depth"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "الرئيسية",          id: "hero"},
        {
          name: "عن البرنامج",          id: "about"},
        {
          name: "المقررات",          id: "courses"},
        {
          name: "التسجيل",          id: "contact"},
      ]}
      brandName="بصائر"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-animated"}}
      title="بصائر: تأصيل وتحصين"
      description="منهجية علمية أصيلة في دراسة الدين، تأخذ بيد العامي إلى الفهم، وبيد طالب العلم إلى الإتقان."
      buttons={[
        {
          text: "ابدأ التعلم",          href: "#courses"},
        {
          text: "تعرف علينا",          href: "#about"},
      ]}
      carouselItems={[
        {
          id: "1",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779052110448-4i531ymy.png",          imageAlt: "مقدمة البرنامج"},
        {
          id: "2",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779051866101-lx0j621p.png",          imageAlt: "المواد العلمية"},
        {
          id: "3",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779051844752-rbzkt9t4.png",          imageAlt: "البيئة التعليمية"},
        {
          id: "4",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779051945487-cx3zbvrt.png",          imageAlt: "المنهج المتكامل"},
        {
          id: "5",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779051900864-n3gb1utb.png",          imageAlt: "التعليم الرقمي"},
        {
          id: "6",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779051879617-2hktw9ab.png",          imageAlt: "نظام الشهادات"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="أرقام تدعم مسيرتك العلمية"
      metrics={[
        {
          label: "طالب علم ينهلون العلم",          value: "300+",          icon: GraduationCap,
        },
        {
          label: "مقرر علمي مؤصل",          value: "10+",          icon: BookOpen,
        },
        {
          label: "ساعات تعليمية",          value: "10,000+",          icon: Clock,
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "مسارات تعليمية مدروسة",          description: "تدرج علمي يبدأ معك من التأسيس إلى التخصص.",          media: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779050668976-40lhhtjd.png",            imageAlt: "Islamic academy interior"
          },
          items: [
            {
              icon: CheckCircle,
              text: "منهجية علمية على طريقة أهل السنة والجماعة"},
            {
              icon: CheckCircle,
              text: "تدرج منهجي"},
          ],
          reverse: false,
        },
        {
          title: "محتوى متنوع وموثق",          description: "نصوص، مرئيات، واختبارات قياس في مكان واحد.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/group-friends-having-coffee-break-library-using-smart-phone_496169-1228.jpg",            imageAlt: "Islamic academy interior"
          },
          items: [
            {
              icon: CheckCircle,
              text: "حقيبة علمية رقمية"},
            {
              icon: CheckCircle,
              text: "توثيق علمي"},
          ],
          reverse: true,
        },
        {
          title: "تفاعل وتوجيه",          description: "حلقات نقاش مباشرة ودعم فني وعلمي دائم.",          media: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779050195197-tk4r7ugz.png",            imageAlt: "Islamic academy interior"
          },
          items: [
            {
              icon: CheckCircle,
              text: "تواصل مباشر"},
            {
              icon: CheckCircle,
              text: "إشراف علمي"},
          ],
          reverse: false,
        },
      ]}
      title="لماذا تختار بصائر؟"
      description="نقدم تجربة تعليمية تراعي التدرج وتضمن التوثيق والمنهجية السلفية الرصينة."
    />
  </div>

  <div id="courses" data-section="courses">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "1",          name: "العقيدة",          price: "متاح",          variant: "تمهيدي",          imageSrc: "http://img.b2bpic.net/free-photo/glasses-books-near-crop-woman_23-2147896770.jpg"},
        {
          id: "2",          name: "الفقه",          price: "متاح",          variant: "مستوى أول",          imageSrc: "http://img.b2bpic.net/free-photo/pot-candle-near-opened-book_23-2147868944.jpg"},
        {
          id: "3",          name: "أصول الفقه",          price: "متاح",          variant: "متقدم",          imageSrc: "http://img.b2bpic.net/free-photo/magnifying-glass-with-stack-books-table_1252-718.jpg"},
        {
          id: "4",          name: "التفسير",          price: "متاح",          variant: "متوسط",          imageSrc: "http://img.b2bpic.net/free-vector/blue-background-with-green-pattern_1017-4983.jpg"},
        {
          id: "5",          name: "الحديث",          price: "متاح",          variant: "تخصصي",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-boy-using-laptop_23-2147782837.jpg"},
        {
          id: "6",          name: "الأدب",          price: "متاح",          variant: "عام",          imageSrc: "http://img.b2bpic.net/free-vector/ornamental-peter-smith-bartender-certificate_742173-9506.jpg"},
      ]}
      title="المقررات العلمية"
      description="اختر مسارك التعليمي من العقيدة إلى الأدب."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "95%",          title: "نسبة الرضا",          description: "عن جودة المحتوى.",          imageSrc: "http://img.b2bpic.net/free-photo/empty-modern-office-business-entrepreneur-with-laptop_482257-91248.jpg"},
        {
          id: "m2",          value: "80%",          title: "إتمام المقررات",          description: "متوسط إكمال الطلاب.",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-school-supplies-dark-surface_179666-46990.jpg"},
        {
          id: "m3",          value: "12",          title: "دولة",          description: "تغطيها منصتنا.",          imageSrc: "http://img.b2bpic.net/free-photo/sleepy-girl-sitting-table_23-2147657329.jpg"},
      ]}
      title="نمو مستمر"
      description="نتائج ملموسة لمستفيدينا."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "أحمد العلي",          handle: "طالب علم",          testimonial: "منصة ممتازة ومنهجية رصينة.",          imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-notebook-studio_23-2147844833.jpg"},
        {
          id: "2",          name: "سارة محمد",          handle: "طالبة",          testimonial: "تدرج رائع وواضح في العلوم.",          imageSrc: "http://img.b2bpic.net/free-photo/image-adult-africanamerican-man-holding-notebooks-smiling-studying-courses-standing-p_1258-173854.jpg"},
        {
          id: "3",          name: "خالد عبد الله",          handle: "عامي",          testimonial: "سهلت علي فهم الدين بشكل مبسط.",          imageSrc: "http://img.b2bpic.net/free-photo/glad-astonished-black-male-green-jumper-points-with-both-index-fingers-has-toothy-smile-surrounded-with-many-books_273609-23937.jpg"},
        {
          id: "4",          name: "نورة العتيبي",          handle: "طالبة",          testimonial: "دعم فني وعلمي متميز جداً.",          imageSrc: "http://img.b2bpic.net/free-photo/funny-dark-skinned-man-with-african-hairstyle-working-course-paper-while-sitting-cafe-lunch-break-holding-smartphone-being-happy-finish-his-work-african-guy-with-broad-smile-cafe_273609-7461.jpg"},
        {
          id: "5",          name: "ياسر إبراهيم",          handle: "طالب علم",          testimonial: "بصائر هي الملاذ لكل باحث عن الحق.",          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-guy-holding-notebooks-celebrating-making-fist-pump-shouting-yes-with-excitement-sta_1258-161824.jpg"},
      ]}
      title="ماذا يقول طلابنا؟"
      description="تجربة حقيقية لمنهجية بصائر."
    />
  </div>

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

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "rotated-rays-animated"}}
      tag="تواصل"
      title="انضم إلينا اليوم"
      description="سجل الآن في برنامج بصائر وابدأ رحلتك العلمية."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "عن بصائر",              href: "#about"},
            {
              label: "المقررات",              href: "#courses"},
          ],
        },
        {
          items: [
            {
              label: "الخصوصية",              href: "#"},
            {
              label: "شروط الاستخدام",              href: "#"},
          ],
        },
      ]}
      logoText="بصائر"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}