"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: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Products",          id: "#products"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="RAYHAN"
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplitKpi
      background={{
        variant: "radial-gradient"}}
      imagePosition="right"
      title="Inspired by Nature, Crafted for Comfort"
      description="Discover RAYHAN, where sustainable fashion meets timeless elegance. Our apparel is designed for conscious living, connecting you to nature with every thread."
      kpis={[
        {
          value: "100%",          label: "Organic Cotton"},
        {
          value: "25K+",          label: "Happy Customers"},
        {
          value: "Eco",          label: "Certified"},
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Shop New Arrivals",          href: "#products"},
        {
          text: "Learn Our Story",          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="Join 25,000+ happy customers!"
      marqueeItems={[
        {
          type: "text-icon",          text: "Eco-Friendly Fabrics",          icon: Leaf,
        },
        {
          type: "text",          text: "Ethically Sourced"},
        {
          type: "text-icon",          text: "Timeless Style",          icon: Sparkles,
        },
        {
          type: "text",          text: "Comfort Guaranteed"},
        {
          type: "text-icon",          text: "Carbon Neutral Shipping",          icon: Truck,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Our Commitment to Sustainable Fashion"
      metrics={[
        {
          icon: Leaf,
          label: "Sustainable Sourcing",          value: "Eco-Friendly"},
        {
          icon: Award,
          label: "Premium Quality",          value: "Handcrafted"},
        {
          icon: Heart,
          label: "Community Focus",          value: "Ethical Production"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      negativeCard={{
        items: [
          "Fast Fashion Trends",          "Synthetic Materials",          "Disposable Products",          "High Carbon Footprint"],
      }}
      positiveCard={{
        items: [
          "Timeless Designs",          "Natural Fibers",          "Durable & Long-Lasting",          "Minimal Environmental Impact"],
      }}
      title="Choose Consciously: RAYHAN vs. Conventional Fashion"
      description="At RAYHAN, we stand for enduring style and environmental responsibility. See how our values set us apart from the industry norm."
    />
  </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: "Organic Crewneck Tee",          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: "Natural Hemp Hoodie",          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: "Botanical Print Sweater",          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: "Eco-Denim Jacket",          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: "Linen Comfort Trousers",          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: "Knitted Cotton Cardigan",          price: "$110",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-forest_23-2148922214.jpg",          imageAlt: "Knitted Cotton Cardigan"},
      ]}
      title="Explore Our Conscious Collection"
      description="Each piece in our collection is thoughtfully designed and responsibly made, ensuring both style and sustainability."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "metric-1",          icon: Users,
          title: "Customer Satisfaction",          value: "98%"},
        {
          id: "metric-2",          icon: Recycle,
          title: "Recycled Materials",          value: "75%"},
        {
          id: "metric-3",          icon: Globe,
          title: "Carbon Footprint Reduced",          value: "30%"},
      ]}
      title="Our Impact & Growth"
      description="We are proud of the positive changes we're making, thanks to our community and our commitment to the planet."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Sarah J.",          handle: "@sarah_eco",          testimonial: "RAYHAN's quality and commitment to sustainability are unmatched. My new sweater is incredibly soft and stylish!",          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: "Michael K.",          handle: "@mikey_outdoors",          testimonial: "Finally, a brand that cares about the planet as much as it cares about comfort. Highly recommend RAYHAN!",          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: "Emily R.",          handle: "@emily_styled",          testimonial: "I love the timeless designs. These pieces will definitely be staples in my wardrobe for years to come. Beautifully made!",          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: "David L.",          handle: "@david_sustainable",          testimonial: "From their organic cotton to their ethical practices, RAYHAN embodies what modern fashion should be. Fantastic brand!",          imageSrc: "http://img.b2bpic.net/free-photo/collage-customer-experience-concept_23-2149367130.jpg",          imageAlt: "David L. customer review"},
        {
          id: "5",          name: "Jessica M.",          handle: "@jess_comfort",          testimonial: "The comfort of RAYHAN clothing is incredible. It feels luxurious, and I feel good knowing it's sustainable.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-nature-with-clothesline_23-2148170134.jpg",          imageAlt: "Jessica M. customer review"},
        {
          id: "6",          name: "Olivia P.",          handle: "@olivia_fashion",          testimonial: "Stylish, sustainable, and super comfortable. RAYHAN has become my go-to for everyday wear. Love it!",          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="What Our Community Says"
      description="Hear from our valued customers about their RAYHAN experience and why they choose sustainable style."
    />
  </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: "Shop",          items: [
            {
              label: "New Arrivals",              href: "#products"},
            {
              label: "Tops",              href: "#"},
            {
              label: "Bottoms",              href: "#"},
            {
              label: "Outerwear",              href: "#"},
          ],
        },
        {
          title: "About",          items: [
            {
              label: "Our Story",              href: "#about"},
            {
              label: "Sustainability",              href: "#"},
            {
              label: "Impact",              href: "#metrics"},
            {
              label: "Team",              href: "#"},
          ],
        },
        {
          title: "Help",          items: [
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Contact Us",              href: "#contact"},
            {
              label: "Shipping & Returns",              href: "#"},
            {
              label: "Size Guide",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 RAYHAN. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
