"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { BookOpen, Globe, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="large"
        background="grid"
        cardStyle="glass-depth"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "الرئيسية",
          id: "hero",
        },
        {
          name: "الخدمات",
          id: "features",
        },
        {
          name: "الأسئلة الشائعة",
          id: "faq",
        },
        {
          name: "تواصل معنا",
          id: "contact",
        },
      ]}
      brandName="مساعدك الإلكتروني"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-animated-grid",
      }}
      title="مساعدك الإلكتروني الذكي"
      description="حلول برمجية ذكية لترجمة وتطوير مهاراتك الدراسية وحل جميع استفساراتك اليومية بسرعة."
      carouselItems={[
        {
          id: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/digital-world-map-hologram-blue-background_1379-900.jpg",
          imageAlt: "ai assistant tech abstract",
        },
        {
          id: "2",
          imageSrc: "http://img.b2bpic.net/free-photo/high-tech-view-futuristic-earth_23-2151100372.jpg",
          imageAlt: "ai translation concept",
        },
        {
          id: "3",
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-portrait-young-girl-with-high-tech_23-2151133554.jpg",
          imageAlt: "smart education ai interface",
        },
        {
          id: "4",
          imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-illustration-with-neon-colors-futuristic-technology_23-2151672037.jpg",
          imageAlt: "ai brain reasoning tech",
        },
        {
          id: "5",
          imageSrc: "http://img.b2bpic.net/free-photo/manager-wakes-up-employee-after-falling-asleep-table-desk_482257-77539.jpg",
          imageAlt: "tech startup office dark",
        },
        {
          id: "6",
          imageSrc: "http://img.b2bpic.net/free-photo/african-american-staff-gathers-examines-monthly-revenue-balance_482257-130896.jpg",
          imageAlt: "analytical data dashboard",
        },
      ]}
      buttons={[
        {
          text: "ابدأ الآن",
          href: "#contact",
        },
        {
          text: "تعرف على المزيد",
          href: "#about",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="لماذا مساعدك الإلكتروني؟"
      description="نقدم تقنيات الذكاء الاصطناعي الأحدث لضمان جودة عالية في التعليم والترجمة وحل المهام اليومية بكفاءة."
      imageSrc="http://img.b2bpic.net/free-photo/industrial-designers-working-3d-model_23-2149370114.jpg"
      imageAlt="human ai synergy"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwelve
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          label: "الترجمة",
          title: "ترجمة فورية",
          items: [
            "دعم لغات متعددة",
            "دقة لغوية عالية",
            "ترجمة الجمل المعقدة",
          ],
        },
        {
          id: "f2",
          label: "التعليم",
          title: "دعم تعليمي",
          items: [
            "شروحات مبسطة",
            "تلخيص المواد الدراسية",
            "دعم حل المسائل",
          ],
        },
        {
          id: "f3",
          label: "ذكاء",
          title: "حلول ذكية",
          items: [
            "إجابات دقيقة",
            "حل المشكلات المعقدة",
            "دعم فني على مدار الساعة",
          ],
        },
      ]}
      title="خدماتنا الذكية"
      description="نحن هنا لتبسيط حياتك اليومية من خلال حلول تقنية متطورة."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          title: "مستخدم نشط",
          value: "50,000+",
          icon: Users,
        },
        {
          id: "m2",
          title: "عملية ترجمة",
          value: "1M+",
          icon: Globe,
        },
        {
          id: "m3",
          title: "استشارة تعليمية",
          value: "200k+",
          icon: BookOpen,
        },
      ]}
      title="أرقامنا في سطور"
      description="نفتخر بما حققناه من إنجازات في خدمة آلاف المستخدمين يومياً."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="لقد غير هذا الموقع أسلوبي الدراسي تماماً! المساعدة التعليمية دقيقة جداً ومفيدة."
      rating={5}
      author="سارة محمود"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-festive-plump-male-eyeglasses-bow-tie-dark-grey-background_613910-13747.jpg",
          alt: "Sarah",
        },
        {
          src: "http://img.b2bpic.net/free-photo/cheerful-businesswoman-with-hands-crossed_1098-20032.jpg",
          alt: "Ali",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg",
          alt: "Omar",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiling-it-professional-silicon-valley-company-office-developing-software-apps-happy_482257-136225.jpg",
          alt: "Layla",
        },
        {
          src: "http://img.b2bpic.net/free-photo/studio-portrait-handsome-senior-man-using-tablet-with-headphones-dark-background_613910-38.jpg",
          alt: "Ahmed",
        },
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "هل الخدمة مجانية؟",
          content: "نعم، نقدم باقات مجانية ومدفوعة تناسب الجميع.",
        },
        {
          id: "q2",
          title: "كيف أبدأ؟",
          content: "فقط اضغط على زر ابدأ في أي خدمة وسنساعدك فوراً.",
        },
        {
          id: "q3",
          title: "هل البيانات آمنة؟",
          content: "نحن نطبق أعلى معايير الأمان لحماية خصوصيتك.",
        },
        {
          id: "q4",
          title: "ما هي اللغات المدعومة؟",
          content: "ندعم أكثر من 50 لغة عالمية بدقة عالية.",
        },
        {
          id: "q5",
          title: "هل هناك تطبيق للهاتف؟",
          content: "نعم، يمكنك الوصول لمساعدك عبر متصفح هاتفك أو تطبيقنا.",
        },
      ]}
      title="الأسئلة الشائعة"
      description="كل ما تحتاج لمعرفته عن خدماتنا."
      faqsAnimation="slide-up"
      mediaAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/ai-cloud-concept-with-lit-brain_23-2149739755.jpg"
      imageAlt="Ai cloud concept with lit brain"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="تواصل معنا"
      description="هل لديك استفسار آخر؟ أرسل لنا رسالة وسنرد عليك في أقرب وقت."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "الاسم الكامل",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "البريد الإلكتروني",
          required: true,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "رسالتك...",
        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/man-having-gaming-session-with-friends-communicating-online_482257-77061.jpg"
      imageAlt="digital communication office"
    />
  </div>

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