"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Facebook, Linkedin, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="large"
        background="aurora"
        cardStyle="glass-elevated"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "About Us",          id: "about"},
        {
          name: "Features",          id: "features"},
        {
          name: "Services",          id: "products"},
        {
          name: "Pricing",          id: "pricing"},
        {
          name: "Testimonials",          id: "testimonials"},
        {
          name: "FAQ",          id: "faq"},
        {
          name: "Contact Us",          id: "contact"},
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u8l15k"
      logoAlt="Inwi Moneye Logo"
      brandName="Inwi Moneye"
      button={{
        text: "Download App",        href: "#"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardScroll
      background={{
        variant: "radial-gradient"}}
      title="Inwi Moneye: Your Comprehensive Digital Wallet"
      description="Send money, pay bills, and manage your finances smartly and securely, both in Morocco and abroad. With Inwi Moneye, you control your financial future."
      buttons={[
        {
          text: "Download App Now",          href: "#download"},
        {
          text: "Discover More",          href: "#about"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-guy-with-ring-smartphone_23-2148450773.jpg"
      imageAlt="Inwi Moneye app on smartphone"
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="About Inwi Moneye: Your Smart Financial Partner"
      description="Inwi Moneye is Inwi's advanced e-wallet application, designed to simplify your daily financial transactions. It offers you the freedom to send and receive money, pay your bills, and top up your balance with ease and convenience, powered by AI technologies to provide a smart, personalized banking experience tailored to your needs in Morocco and beyond."
      imageSrc="http://img.b2bpic.net/free-photo/advanced-technological-robot-interacting-with-money-finance_23-2151612658.jpg"
      imageAlt="People interacting with an e-wallet application"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwelve
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          id: "f1",          label: "Fast & Secure Transfers",          title: "Send & Receive Money",          items: [
            "Instant transfers to friends and family",            "Supported locally and internationally",            "Low and transparent fees"],
          buttons: [
            {
              text: "Learn More",              href: "#"},
          ],
        },
        {
          id: "f2",          label: "Pay with a Tap",          title: "Pay Bills & Top Up",          items: [
            "Pay Wi-Fi and internet bills",            "Easily top up phone balance",            "Various service payments"],
          buttons: [
            {
              text: "Explore Bills",              href: "#"},
          ],
        },
        {
          id: "f3",          label: "Unified Management",          title: "Link Bank Accounts",          items: [
            "Link your wallet to your personal accounts",            "Seamless transfers between banks and wallet",            "Full control over your finances"],
          buttons: [
            {
              text: "Start Linking",              href: "#"},
          ],
        },
        {
          id: "f4",          label: "Your Financial Assistant",          title: "AI-Powered Support",          items: [
            "Personalized spending insights and suggestions",            "Smart analysis of your transactions",            "Better financial planning with AI assistance"],
          buttons: [
            {
              text: "Try AI",              href: "#"},
          ],
        },
      ]}
      title="Key Features of Inwi Moneye"
      description="Enjoy a wide range of services designed to make managing your money more efficient, secure, and smart."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "5M+",          title: "مستخدم نشط",          description: "أكثر من خمسة ملايين مستخدم يثقون في Inwi Moneye.",          imageSrc: "http://img.b2bpic.net/free-photo/group-friends-taking-selfie_53876-40336.jpg",          imageAlt: "أيقونة مستخدمين"},
        {
          id: "m2",          value: "10M+",          title: "معاملة شهرياً",          description: "نحن نجري أكثر من 10 ملايين معاملة مالية كل شهر.",          imageSrc: "http://img.b2bpic.net/free-vector/recycle-sign-with-dollar-sign-green-black_78370-9145.jpg",          imageAlt: "أيقونة معاملات"},
        {
          id: "m3",          value: "20+",          title: "دولة مدعومة",          description: "تتواجد خدماتنا في أكثر من 20 دولة حول العالم.",          imageSrc: "http://img.b2bpic.net/free-photo/earth-globe-internet-icon-sign-symbol-button-blue-speech-bubble-white-background-3d-rendering_56104-1178.jpg",          imageAlt: "أيقونة دول"},
        {
          id: "m4",          value: "99.9%",          title: "رضا العملاء",          description: "معدل رضا عالٍ يعكس جودة خدماتنا ودعمنا.",          imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-different-feelings_23-2148860250.jpg",          imageAlt: "أيقونة رضا العملاء"},
      ]}
      title="أرقامنا تتحدث عن نفسها"
      description="شاهد كيف يساهم Inwi Moneye في تمكين الآلاف يومياً من خلال خدماتنا الموثوقة والمنتشرة."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          name: "تحويل الأموال الدولي",          price: "مجاني*",          variant: "حدود عالية",          imageSrc: "http://img.b2bpic.net/free-photo/business-person-futuristic-business-environment_23-2150970183.jpg",          imageAlt: "تحويل أموال دولي"},
        {
          id: "p2",          name: "دفع فواتير الإنترنت",          price: "فوري",          variant: "لكل الشبكات",          imageSrc: "http://img.b2bpic.net/free-photo/joyous-person-delighted-online-shopping-carefully-typing-credit-card_482257-102475.jpg",          imageAlt: "دفع فواتير الإنترنت"},
        {
          id: "p3",          name: "شحن رصيد الهاتف",          price: "سهل",          variant: "جميع المشغلين",          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-holding-credit-card-looking-screen-his-smartphone-standing-blue-wall_141793-23007.jpg",          imageAlt: "شحن رصيد الهاتف"},
        {
          id: "p4",          name: "محفظة AI الذكية",          price: "حصري",          variant: "تحليل مالي",          imageSrc: "http://img.b2bpic.net/free-photo/man-using-digital-assistant-his-smartphone_23-2149107950.jpg",          imageAlt: "محفظة AI الذكية"},
        {
          id: "p5",          name: "ربط الحسابات البنكية",          price: "آمن",          variant: "تكامل سلس",          imageSrc: "http://img.b2bpic.net/free-vector/online-education-concept_23-2147507995.jpg",          imageAlt: "ربط الحسابات البنكية"},
        {
          id: "p6",          name: "مدفوعات التجار",          price: "سريع",          variant: "QR Code",          imageSrc: "http://img.b2bpic.net/free-photo/person-paying-using-nfc-technology_23-2149893847.jpg",          imageAlt: "مدفوعات التجار"},
      ]}
      title="خدماتنا المخصصة لك"
      description="اكتشف مجموعة حلول Inwi Moneye التي تلبي جميع احتياجاتك المالية وتجعل حياتك أسهل."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "plan-basic",          tag: "الاكثر شعبية",          price: "مجاناً",          period: "شهرياً",          description: "للمستخدمين الجدد والذين يحتاجون للخدمات الأساسية اليومية.",          button: {
            text: "ابدأ مجاناً",            href: "#"},
          featuresTitle: "الميزات الأساسية:",          features: [
            "تحويل الأموال محلياً",            "دفع فواتير Wi-Fi والإنترنت",            "شحن رصيد الهاتف",            "دعم فني على مدار الساعة"],
        },
        {
          id: "plan-premium",          tag: "موصى به",          price: "49 درهم",          period: "شهرياً",          description: "للمستخدمين الذين يبحثون عن ميزات متقدمة ودعم أوسع.",          button: {
            text: "اشترك الآن",            href: "#"},
          featuresTitle: "الميزات المتقدمة:",          features: [
            "جميع ميزات الخطة الأساسية",            "تحويل الأموال دولياً",            "الربط بحسابات بنكية متعددة",            "تقارير مالية مدعومة بالذكاء الاصطناعي",            "أولوية في الدعم الفني"],
        },
        {
          id: "plan-business",          tag: "للشركات",          price: "199 درهم",          period: "شهرياً",          description: "حلول مالية متكاملة للشركات الصغيرة والمتوسطة.",          button: {
            text: "تواصل للمؤسسات",            href: "#"},
          featuresTitle: "حلول الأعمال:",          features: [
            "جميع ميزات الخطة المميزة",            "مدفوعات جماعية للموظفين",            "بوابات دفع مخصصة للتجار",            "تحليلات مالية متقدمة للأعمال",            "مدير حساب شخصي"],
        },
      ]}
      title="خطط مرنة تناسب الجميع"
      description="اختر الخطة التي تناسب احتياجاتك المالية اليومية والمتقدمة، مع خيارات متعددة للتحكم في تكاليفك."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",          name: "أحمد المغربي",          handle: "@AhmedMorocco",          testimonial: "Inwi Moneye غيّر طريقة تعاملي مع الأموال. التحويلات سريعة وسهلة، ودفع الفواتير أصبح لا يتطلب أي مجهود. أوصي به بشدة!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg",          imageAlt: "أحمد المغربي"},
        {
          id: "t2",          name: "فاطمة الزهراء",          handle: "@FatimaZahra",          testimonial: "تطبيق رائع! خاصة ميزة ربط الحسابات البنكية ودعم الذكاء الاصطناعي الذي يقدم لي نصائح قيمة. أشعر أن أموالي تحت السيطرة.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/powerful-woman-director-receives-project-updates-via-text-messages_482257-106601.jpg",          imageAlt: "فاطمة الزهراء"},
        {
          id: "t3",          name: "يوسف بناني",          handle: "@YoussefB",          testimonial: "كنت أبحث عن حل لدفع فواتير الإنترنت وشحن رصيد هاتفي بسهولة. Inwi Moneye فاق توقعاتي بفضل سرعته وأمانه العالي.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-elegant-male-enjoying-coffee_23-2148673397.jpg",          imageAlt: "يوسف بناني"},
        {
          id: "t4",          name: "مريم علوي",          handle: "@MaryamAlawi",          testimonial: "خدمة عملاء ممتازة وتطبيق سهل الاستخدام. قمت بتحويل أموال دولياً عدة مرات ولم أواجه أي مشكلة. تجربة رائعة!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-funny-expression_1194-3026.jpg",          imageAlt: "مريم علوي"},
        {
          id: "t5",          name: "خالد رشيدي",          handle: "@KhalidRachidi",          testimonial: "أحببت كيف يساعدني الذكاء الاصطناعي في تتبع إنفاقي وتقديم رؤى لتحسين ميزانيتي. إنه كأن لدي مساعد مالي شخصي.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-people-asking-advice-assistance-regarding-pension-plans_482257-106912.jpg",          imageAlt: "خالد رشيدي"},
      ]}
      showRating={true}
      title="ماذا يقول عملاؤنا?"
      description="تجارب حقيقية من مستخدمي Inwi Moneye السعداء الذين يثقون بخدماتنا."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "كيف يمكنني تفعيل حساب Inwi Moneye الخاص بي؟",          content: "لتفعيل حسابك، قم بتحميل التطبيق من متجر التطبيقات، ثم اتبع الخطوات لإدخال معلوماتك الشخصية والتحقق من هويتك. يستغرق الأمر بضع دقائق فقط."},
        {
          id: "q2",          title: "هل Inwi Moneye آمن للاستخدام؟",          content: "نعم، نستخدم أحدث تقنيات التشفير والأمان لحماية بياناتك ومعاملاتك المالية. أمانك هو أولويتنا القصوى."},
        {
          id: "q3",          title: "ما هي رسوم التحويلات الدولية؟",          content: "تختلف رسوم التحويلات الدولية حسب البلد والمبلغ. يمكنك مراجعة جدول الرسوم الشفاف داخل التطبيق قبل إتمام أي معاملة."},
        {
          id: "q4",          title: "كيف يمكنني ربط حسابي البنكي؟",          content: "اذهب إلى قسم 'إعدادات الحساب' في التطبيق، ثم اختر 'ربط حساب بنكي' واتبع التعليمات لإدخال تفاصيل حسابك بأمان."},
        {
          id: "q5",          title: "ما هي ميزات الذكاء الاصطناعي؟",          content: "يقدم لك الذكاء الاصطناعي رؤى مخصصة حول إنفاقك، ويقترح طرقاً لتوفير المال، وينبهك إلى الفواتير القادمة، ويساعدك في التخطيط المالي."},
      ]}
      title="الأسئلة الشائعة"
      description="إجابات على كل استفساراتك حول Inwi Moneye وكيف يمكنك الاستفادة القصوى من خدماتنا."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "cell-wave"}}
      text="فريق دعم Inwi Moneye جاهز لمساعدتك في أي وقت. لا تتردد في الاتصال بنا لأي استفسارات أو دعم فني بخصوص محفظتك الرقمية. نحن هنا لخدمتك."
      buttons={[
        {
          text: "أرسل رسالة",          href: "mailto:support@inwimoneye.com"},
        {
          text: "اتصل بالدعم",          href: "tel:+212-XXX-XXXXXX"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Inwi Moneye"
      copyrightText="© 2024 Inwi Moneye. جميع الحقوق محفوظة."
      socialLinks={[
        {
          icon: Facebook,
          href: "https://facebook.com/inwimoneye",          ariaLabel: "Facebook"},
        {
          icon: Twitter,
          href: "https://twitter.com/inwimoneye",          ariaLabel: "Twitter"},
        {
          icon: Linkedin,
          href: "https://linkedin.com/company/inwimoneye",          ariaLabel: "LinkedIn"},
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}