"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Award, Globe, Heart, Leaf, Recycle, Sparkles, Truck, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="mediumLargeSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="gradient-mesh"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "الرئيسية",          id: "#home"},
        {
          name: "عنّا",          id: "#about"},
        {
          name: "الميزات",          id: "#features"},
        {
          name: "المنتجات",          id: "#products"},
        {
          name: "الشهادات",          id: "#testimonials"},
        {
          name: "الأسئلة الشائعة",          id: "#faq"},
        {
          name: "اتصل بنا",          id: "#contact"},
      ]}
      brandName="ريحان"
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplitKpi
      background={{
        variant: "radial-gradient"}}
      imagePosition="right"
      title="مستوحى من الطبيعة، مصمم للراحة"
      description="اكتشف ريحان، حيث يلتقي الأسلوب المستدام بالأناقة الخالدة. صُممت ملابسنا للحياة الواعية، لتربطك بالطبيعة في كل خيط."
      kpis={[
        {
          value: "100%",          label: "قطن عضوي"},
        {
          value: "25 ألف+",          label: "عميل سعيد"},
        {
          value: "صديق للبيئة",          label: "معتمد"},
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "تسوق الوافدين الجدد",          href: "#products"},
        {
          text: "تعرف على قصتنا",          href: "#about"},
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ESfWACNaFxYkN6kyArXPEKtzge/uploaded-1780176937183-1aupd19d.png"
      imageAlt="RAYHAN sustainable apparel packaging"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/female-personal-shopper-helping-cutomer_23-2148924090.jpg",          alt: "Smiling customer wearing sustainable fashion"},
        {
          src: "http://img.b2bpic.net/free-photo/female-personal-shopper-helping-cutomer_23-2148924092.jpg",          alt: "Happy client with eco-friendly apparel"},
        {
          src: "http://img.b2bpic.net/free-photo/blonde-shopping_1157-7675.jpg",          alt: "Satisfied shopper in nature-inspired clothing"},
        {
          src: "http://img.b2bpic.net/free-photo/customer-experience-creative-collage_23-2149346511.jpg",          alt: "Positive review from RAYHAN customer"},
        {
          src: "http://img.b2bpic.net/free-photo/pretty-woman-wearing-cute-pink-robe_23-2148311738.jpg",          alt: "Customer enjoying comfort of RAYHAN clothes"},
      ]}
      avatarText="انضم إلى أكثر من 25,000 عميل سعيد!"
      marqueeItems={[
        {
          type: "text-icon",          text: "أقمشة صديقة للبيئة",          icon: Leaf,
        },
        {
          type: "text",          text: "مصدرها أخلاقيًا"},
        {
          type: "text-icon",          text: "أسلوب خالد",          icon: Sparkles,
        },
        {
          type: "text",          text: "راحة مضمونة"},
        {
          type: "text-icon",          text: "شحن محايد للكربون",          icon: Truck,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="التزامنا بالأزياء المستدامة"
      metrics={[
        {
          icon: Leaf,
          label: "مصادر مستدامة",          value: "صديقة للبيئة"},
        {
          icon: Award,
          label: "جودة ممتازة",          value: "مصنوع يدويًا"},
        {
          icon: Heart,
          label: "تركيز على المجتمع",          value: "إنتاج أخلاقي"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      negativeCard={{
        items: [
          "اتجاهات الموضة السريعة",          "مواد صناعية",          "منتجات قابلة للتصرف",          "بصمة كربونية عالية"],
      }}
      positiveCard={{
        items: [
          "تصاميم خالدة",          "ألياف طبيعية",          "متينة وطويلة الأمد",          "تأثير بيئي ضئيل"],
      }}
      title="اختر بوعي: ريحان مقابل الأزياء التقليدية"
      description="في ريحان، نؤمن بالأسلوب الدائم والمسؤولية البيئية. اكتشف كيف تميزنا قيمنا عن المعايير الصناعية."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "product-1",          name: "تي شيرت قطن عضوي برقبة دائرية",          price: "$45",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-young-beautiful-tattooed-girl-smiling-posing-looking-down_176420-9473.jpg",          imageAlt: "Organic Crewneck Tee"},
        {
          id: "product-2",          name: "هودي قنب طبيعي",          price: "$85",          imageSrc: "http://img.b2bpic.net/free-photo/positive-woman-wearing-sportswear-relaxing-outdoors_1262-18288.jpg",          imageAlt: "Natural Hemp Hoodie"},
        {
          id: "product-3",          name: "كنزة بطبعة نباتية",          price: "$70",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-wearing-knitted-cap_23-2148923342.jpg",          imageAlt: "Botanical Print Sweater"},
        {
          id: "product-4",          name: "جاكيت دينيم صديق للبيئة",          price: "$120",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-headphones-walking_23-2148574705.jpg",          imageAlt: "Eco-Denim Jacket"},
        {
          id: "product-5",          name: "بنطلون كتان مريح",          price: "$95",          imageSrc: "http://img.b2bpic.net/free-photo/racks-filled-with-basic-shirt_482257-78330.jpg",          imageAlt: "Linen Comfort Trousers"},
        {
          id: "product-6",          name: "كارديجان قطني محبوك",          price: "$110",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-forest_23-2148922214.jpg",          imageAlt: "Knitted Cotton Cardigan"},
      ]}
      title="استكشف مجموعتنا الواعية"
      description="كل قطعة في مجموعتنا مصممة بعناية ومصنوعة بمسؤولية، لتضمن لك الأناقة والاستدامة."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "metric-1",          icon: Users,
          title: "رضا العملاء",          value: "98%"},
        {
          id: "metric-2",          icon: Recycle,
          title: "مواد معاد تدويرها",          value: "75%"},
        {
          id: "metric-3",          icon: Globe,
          title: "انخفاض البصمة الكربونية",          value: "30%"},
      ]}
      title="تأثيرنا ونمونا"
      description="نحن فخورون بالتغييرات الإيجابية التي نحدثها، بفضل مجتمعنا والتزامنا تجاه الكوكب."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "سارة ج.",          handle: "@sarah_eco",          testimonial: "جودة ريحان والتزامها بالاستدامة لا مثيل لهما. سويتر الجديد ناعم وأنيق بشكل لا يصدق!",          imageSrc: "http://img.b2bpic.net/free-photo/happy-pleased-delighted-female-customer-with-blond-short-hairstyle-satisfied-joyful-grin-showing-okay-gesture-smiling_176420-43666.jpg",          imageAlt: "Sarah J. customer review"},
        {
          id: "2",          name: "مايكل ك.",          handle: "@mikey_outdoors",          testimonial: "أخيرًا، علامة تجارية تهتم بالكوكب بقدر اهتمامها بالراحة. أوصي بشدة بريحان!",          imageSrc: "http://img.b2bpic.net/free-photo/serious-latino-man-wears-blank-grey-longsleeve-poses-near-ladder-isolated-white_346278-1040.jpg",          imageAlt: "Michael K. customer review"},
        {
          id: "3",          name: "إميلي ر.",          handle: "@emily_styled",          testimonial: "أحب التصاميم الخالدة. ستكون هذه القطع بالتأكيد أساسًا في خزانة ملابسي لسنوات قادمة. مصنوعة بشكل جميل!",          imageSrc: "http://img.b2bpic.net/free-photo/charming-tender-blond-girlfriend-silver-shiny-elegant-dress-feel-little-cold-standing-prom-night_1258-131106.jpg",          imageAlt: "Emily R. customer review"},
        {
          id: "4",          name: "ديفيد ل.",          handle: "@david_sustainable",          testimonial: "من قطنها العضوي إلى ممارساتها الأخلاقية، تجسد ريحان ما يجب أن تكون عليه الموضة الحديثة. علامة تجارية رائعة!",          imageSrc: "http://img.b2bpic.net/free-photo/collage-customer-experience-concept_23-2149367130.jpg",          imageAlt: "David L. customer review"},
        {
          id: "5",          name: "جيسيكا م.",          handle: "@jess_comfort",          testimonial: "راحة ملابس ريحان لا تصدق. إنها تشعر بالفخامة، وأشعر بالرضا knowing أنها مستدامة.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-nature-with-clothesline_23-2148170134.jpg",          imageAlt: "Jessica M. customer review"},
        {
          id: "6",          name: "أوليفيا ب.",          handle: "@olivia_fashion",          testimonial: "أنيقة، مستدامة، ومريحة للغاية. أصبحت ريحان خياري الأول للملابس اليومية. أحبها!",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-happy-painter-woman-lying-canvas-with-brushes-hands-dreaming-relaxing-after-productive-work_273443-45.jpg",          imageAlt: "Olivia P. customer review"},
      ]}
      title="ماذا يقول مجتمعنا"
      description="استمع من عملائنا الكرام عن تجربتهم مع ريحان ولماذا يختارون الأسلوب المستدام."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "مجلة إيكو لايف",        "خيوط مستدامة",        "مدونة الحياة الخضراء",        "المستهلك الأخلاقي",        "خزانة الطبيعة",        "الأسلوب الواعي",        "أقمشة الأرض",        "ملابس نقية"]}
      title="كما يظهر في وشركاؤنا"
      description="تم الاعتراف بالتزامنا بالاستدامة من قبل المنصات والشركاء الرائدين في مجال الوعي البيئي."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",          title: "ما هي المواد التي تستخدمونها؟",          content: "نحن نستخدم بشكل أساسي القطن العضوي المعتمد من GOTS، البوليستر المعاد تدويره، القنب، والكتان، وجميعها مصدرها موردون أخلاقيون."},
        {
          id: "faq-2",          title: "كيف تضمنون الإنتاج الأخلاقي؟",          content: "نتعاون مع مصنعين يلتزمون بممارسات العمل العادلة، وظروف العمل الآمنة، ويوفرون أجورًا عادلة لموظفيهم."},
        {
          id: "faq-3",          title: "ما هي سياسة الإرجاع لديكم؟",          content: "نحن نقدم إرجاعًا مجانيًا خلال 30 يومًا من الشراء للمنتجات في حالتها الجديدة وغير المستخدمة. يرجى الاطلاع على سياسة الإرجاع الكاملة لدينا للحصول على التفاصيل."},
        {
          id: "faq-4",          title: "هل تشحنون دوليًا؟",          content: "نعم، نحن نشحن إلى جميع أنحاء العالم! تختلف تكاليف الشحن وأوقات التسليم حسب الوجهة. يمكنك العثور على مزيد من المعلومات أثناء الدفع."},
      ]}
      sideTitle="أسئلة حول ريحان؟"
      sideDescription="ابحث عن إجابات لأكثر الأسئلة شيوعًا حول منتجاتنا واستدامتنا وسياساتنا."
      buttons={[
        {
          text: "زيارة مركز المساعدة",          href: "#"},
      ]}
      faqsAnimation="slide-up"
      textPosition="left"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"}}
      tag="تواصل معنا"
      title="هل أنت مستعد لاحتضان الأسلوب المستدام؟"
      description="انضم إلى مجتمع ريحان واختبر الموضة التي تشعرك بالرضا وتفعل الخير. تواصل مع فريقنا لأي استفسارات."
      buttons={[
        {
          text: "أرسل لنا رسالة",          href: "mailto:info@rayhanwear.com"},
        {
          text: "تابعنا على وسائل التواصل الاجتماعي",          href: "#"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-frailejon-plant-logo-design_23-2150043638.jpg"
      logoAlt="RAYHAN Logo"
      logoText="RAYHAN"
      columns={[
        {
          title: "تسوق",          items: [
            {
              label: "الوافدون الجدد",              href: "#products"},
            {
              label: "بلايز",              href: "#"},
            {
              label: "بناطيل",              href: "#"},
            {
              label: "ملابس خارجية",              href: "#"},
          ],
        },
        {
          title: "عنّا",          items: [
            {
              label: "قصتنا",              href: "#about"},
            {
              label: "الاستدامة",              href: "#"},
            {
              label: "تأثيرنا",              href: "#metrics"},
            {
              label: "الفريق",              href: "#"},
          ],
        },
        {
          title: "مساعدة",          items: [
            {
              label: "الأسئلة الشائعة",              href: "#faq"},
            {
              label: "اتصل بنا",              href: "#contact"},
            {
              label: "الشحن والإرجاع",              href: "#"},
            {
              label: "دليل المقاسات",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 ريحان. جميع الحقوق محفوظة."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
