"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users, Oil, DollarSign, CheckCircle, Truck, MapPin, ShoppingCart, HelpCircle, Package, Bell, List, Car, Tractor, Factory, Ship, Smile, CalendarCheck } from "lucide-react";

export default function WebAgency2Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="metallic"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <NavbarLayoutFloatingOverlay
          brandName="الحسام للزيوت"
          navItems={[
            { name: "منتجاتنا", id: "products" },
            { name: "خدماتنا", id: "services" },
            { name: "من نحن", id: "about" },
            { name: "اتصل بنا", id: "contact" },
          ]}
          button={{ text: "احجز الآن", href: "#contact" }}
        />
        <HeroSplitDoubleCarousel
          title="الحسام للزيوت | جودة لا تضاهى، سهولة الحجز"
          description="اكتشف مجموعتنا الواسعة من الزيوت عالية الجودة، قارن الأسعار، واحجز منتجاتك المفضلة بسهولة عبر موقعنا الإلكتروني المتكامل. تجربة تسوق فريدة بانتظارك."
          tag="مورد الزيوت الرائد"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "canvas-reveal" }}
          buttons={[
            { text: "تصفح الزيوت", href: "#products" },
            { text: "احجز الآن", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
          carouselPosition="right"
          leftCarouselItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/dripping-paint-letter-l_23-2148185101.jpg", imageAlt: "تشكيلة زيوت عالية الجودة" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0a6wdw", imageAlt: "زيوت محركات متطورة" },
            { imageSrc: "http://img.b2bpic.net/free-photo/glowing-yellow-warning-triangle-dark-smoky-background-with-dramatic-lighting_84443-91343.jpg", imageAlt: "زيوت صناعية متخصصة" },
            { imageSrc: "http://img.b2bpic.net/free-photo/letter-y-made-green-grass-with-flowers-isolated-white_169016-57306.jpg", imageAlt: "زيوت هيدروليكية" },
            { imageSrc: "http://img.b2bpic.net/free-photo/letter-o-made-real-natural-flowers-leaves-white-background-isolated_169016-53994.jpg", imageAlt: "منتجات الحسام للزيوت" },
          ]}
          rightCarouselItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/balloon-twist-letters-flat-background_23-2151675329.jpg", imageAlt: "قارورة زيت حديثة" },
            { imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-with-letter-r_1187-2114.jpg", imageAlt: "زيوت ناقل الحركة" },
            { imageSrc: "http://img.b2bpic.net/free-photo/grass-letter-n-alphabet-3d-design-isolated-transparent-background_169016-57417.jpg", imageAlt: "ورشة عمل لزيوت السيارات" },
            { imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-letter-r-sign_53876-47263.jpg", imageAlt: "مصنع زيوت الحسام" },
          ]}
          carouselItemClassName="!aspect-[4/5]"
        />
        <FeatureBento
          title="خدماتنا المميزة"
          description="نقدم لك تجربة متكاملة من الاختيار حتى باب منزلك."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          buttons={[{ text: "جميع الخدمات", href: "#services" }]}
          buttonAnimation="slide-up"
          features={[
            {
              title: "أنواع الزيوت",              description: "مجموعة واسعة من الزيوت لتناسب جميع احتياجاتك، من زيوت المحركات إلى الزيوت الصناعية.",              bentoComponent: "marquee",              centerIcon: Oil,
              variant: "text",              texts: ["زيت محركات", "زيت هيدروليكي", "زيت ناقل حركة", "زيوت صناعية", "زيوت تشحيم", "زيوت للمولدات"],
            },
            {
              title: "جودة مضمونة",              description: "نلتزم بأعلى معايير الجودة العالمية لضمان أداء ممتاز وحماية فائقة.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-with-q-letter_1149-1812.jpg", imageAlt: "فحص جودة الزيوت في المختبر" },
                { imageSrc: "http://img.b2bpic.net/free-photo/letter-t-made-green-grass-with-flowers-isolated-white_169016-57321.jpg", imageAlt: "شهادات جودة عالمية" },
                { imageSrc: "http://img.b2bpic.net/free-photo/grass-letter-o-alphabet-d-design-isolated-transparent-background_169016-57281.jpg", imageAlt: "معدات فحص الجودة" },
              ],
            },
            {
              title: "سهولة الحجز",              description: "نظام حجز مبسط ومرن يسمح لك باختيار زيوتك وتحديد موعد التسليم بكل سهولة.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "http://img.b2bpic.net/free-photo/golden-us-dollar-usd-yellow-background-dollar-is-main-currency-exchange-world-by-3d-render_616485-21.jpg", imageAlt: "واجهة حجز الزيوت عبر الإنترنت" },
                { imageSrc: "http://img.b2bpic.net/free-photo/e-commerce-online-shopping-plant-sale_53876-125021.jpg", imageAlt: "شاشة تأكيد الطلب" },
                { imageSrc: "http://img.b2bpic.net/free-photo/professional-e-sports-afro-gamer-talking-microhone-live-tournament-streaming-viral-video-games-putting-headphones-typing-keyboard-online-championship_482257-12650.jpg", imageAlt: "تقويم لتحديد موعد التسليم" },
              ],
            },
          ]}
        />
        <FeatureCardTwentySix
          title="منتجاتنا المختارة بعناية"
          description="اكتشف تشكيلتنا الواسعة من الزيوت عالية الأداء لمختلف التطبيقات."
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "تصفح جميع المنتجات", href: "#products" }]}
          buttonAnimation="slide-up"
          cardClassName="!h-auto aspect-video"
          features={[
            {
              title: "زيت محركات اصطناعي",              description: "حماية قصوى وأداء متفوق لمحرك سيارتك.",              imageSrc: "http://img.b2bpic.net/free-photo/sign-language-hand-showing-letter-t_23-2148590410.jpg",              imageAlt: "زيت محركات اصطناعي",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "زيت ناقل حركة أوتوماتيكي",              description: "أداء سلس وعمر أطول لناقل الحركة.",              imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-letter-s-sign_53876-63787.jpg",              imageAlt: "زيت ناقل حركة أوتوماتيكي",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "زيت هيدروليكي صناعي",              description: "كفاءة عالية واستقرار حراري للأنظمة الهيدروليكية.",              imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-letter-s-sign_53876-47229.jpg",              imageAlt: "زيت هيدروليكي صناعي",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "زيت فرامل عالي الأداء",              description: "قوة إيقاف موثوقة في جميع الظروف.",              imageSrc: "http://img.b2bpic.net/free-photo/balloon-twist-letter-flat-background_23-2151675268.jpg",              imageAlt: "زيت فرامل عالي الأداء",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "زيوت تشحيم معدات ثقيلة",              description: "حماية فائقة للمعدات الثقيلة في الظروف القاسية.",              imageSrc: "http://img.b2bpic.net/free-photo/letter-e-made-real-natural-flowers-leaves-white-background-isolated_169016-53964.jpg",              imageAlt: "زيوت تشحيم للمعدات الثقيلة",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
          ]}
        />
        <FeatureBento
          title="لماذا تختار الحسام؟"
          description="نلتزم بتقديم الأفضل لك في كل خطوة."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              title: "توصيل سريع وموثوق",              description: "منتجاتك تصل إليك بأسرع وقت ممكن وبأمان تام.",              bentoComponent: "phone",              statusIcon: CheckCircle,
              alertIcon: Truck,
              alertTitle: "حالة التوصيل",              alertMessage: "تم الشحن بنجاح",              apps: [
                { name: "تتبع", icon: MapPin },
                { name: "طلب جديد", icon: ShoppingCart },
                { name: "دعم", icon: HelpCircle },
                { name: "المخزون", icon: Package },
                { name: "الإشعارات", icon: Bell },
                { name: "الطلبات", icon: List },
                { name: "الإعدادات", icon: Settings },
                { name: "التواصل", icon: MessageCircle },
              ],
            },
            {
              title: "أسعار تنافسية",              description: "أفضل قيمة مقابل جودة لا تضاهى في السوق.",              bentoComponent: "reveal-icon",              icon: DollarSign,
            },
            {
              title: "خدمة عملاء استثنائية",              description: "فريق دعم متاح لمساعدتك في أي وقت.",              bentoComponent: "timeline",              heading: "دعم متواصل",              subheading: "رضاك أولويتنا",              items: [
                { label: "استلام الطلب", detail: "فوري" },
                { label: "معالجة الاستفسارات", detail: "24/7" },
                { label: "متابعة ما بعد البيع", detail: "دائم" },
              ],
              completedLabel: "دعم متميز"},
            {
              title: "تنوع المنتجات والحلول",              description: "تشكيلة واسعة لتلبية جميع متطلبات القطاعات المختلفة.",              bentoComponent: "orbiting-icons",              centerIcon: Package,
              items: [
                { icon: Car },
                { icon: Tractor },
                { icon: Factory },
                { icon: Ship },
              ],
            },
            {
              title: "تقييمات وثقة العملاء",              description: "بناء على آراء عملائنا الكرام، نسعى دائمًا للأفضل.",              bentoComponent: "line-chart"},
          ]}
        />
        <TestimonialCardFifteen
          testimonial="الحسام للزيوت غيرت تجربتي تمامًا. جودة المنتجات استثنائية، وخدمة الحجز والتوصيل كانت في غاية السلاسة والسرعة. أوصي بهم بشدة!"
          rating={5}
          author="— أحمد الهاشمي، مالك مركز صيانة سيارات"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/abstract-luxury-plain-blur-grey-black-gradient-used-as-background-studio-wall-display-your-p_1258-70240.jpg", alt: "أحمد الهاشمي" },
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
        <MetricCardOne
          title="أرقام تتحدث عن نفسها"
          description="سنوات من الخبرة في توفير زيوت عالية الجودة وخدمة عملاء ممتازة."
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            { id: "oils_offered", value: "50+", title: "نوع زيت", description: "تشكيلة واسعة تلبي كل الاحتياجات", icon: Oil },
            { id: "satisfied_customers", value: "1000+", title: "عميل راضٍ", description: "نفتخر بثقة عملائنا الكرام", icon: Smile },
            { id: "years_experience", value: "15+", title: "عام خبرة", description: "في سوق الزيوت بامتياز", icon: CalendarCheck },
          ]}
        />
        <FeatureCardSixteen
          title="لماذا الحسام للزيوت هو خيارك الأول؟"
          description="قارن لتعرف الفرق الحقيقي."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          negativeCard={{
            items: [
              "زيوت ذات جودة منخفضة",              "صعوبة في العثور على المنتج المناسب",              "أسعار غير تنافسية",              "خدمة عملاء سيئة أو غير متوفرة",              "توصيل بطيء أو غير موثوق"],
          }}
          positiveCard={{
            items: [
              "زيوت عالية الجودة بمعايير عالمية",              "مجموعة واسعة مع سهولة الاختيار",              "أسعار تنافسية وعروض مميزة",              "دعم فني وخدمة عملاء ممتازة",              "توصيل سريع وآمن لجميع طلباتك"],
          }}
        />
        <TeamCardFive
          title="فريق عمل الحسام للزيوت"
          description="خبرات متكاملة لتقديم أفضل الخدمات والمنتجات."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          mediaClassName="object-[65%_center]"
          team={[
            { id: "1", name: "خالد المنصوري", role: "مدير العمليات", imageSrc: "http://img.b2bpic.net/free-photo/balloon-twist-letters-flat-background_23-2151675345.jpg", imageAlt: "خالد المنصوري" },
            { id: "2", name: "ليلى فهد", role: "مسؤولة الجودة", imageSrc: "http://img.b2bpic.net/free-photo/letter-k-with-fresh-tasty-lettuce_1149-830.jpg", imageAlt: "ليلى فهد" },
            { id: "3", name: "طارق سليم", role: "مسؤول المبيعات والحجوزات", imageSrc: "http://img.b2bpic.net/free-photo/professional-e-sports-afro-gamer-talking-microhone-live-tournament-streaming-viral-video-games-putting-headphones-typing-keyboard-online-championship_482257-12650.jpg", imageAlt: "طارق سليم" },
          ]}
        />
        <FaqBase
          title="أسئلة متكررة حول الحسام للزيوت"
          description="إجابات لجميع استفساراتك حول منتجاتنا وخدماتنا."
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            { id: "1", title: "كيف يمكنني حجز الزيوت عبر الموقع؟", content: "يمكنك تصفح المنتجات، إضافة ما تحتاجه إلى سلة المشتريات، ثم إتمام عملية الحجز والدفع بخطوات بسيطة وآمنة." },
            { id: "2", title: "ما هي مناطق التوصيل المتاحة؟", content: "نغطي حاليًا معظم المدن الرئيسية. يرجى إدخال موقعك عند الحجز للتحقق من إمكانية التوصيل." },
            { id: "3", title: "هل تقدمون زيوتًا صناعية و للمعدات الثقيلة؟", content: "نعم، لدينا مجموعة واسعة من الزيوت الصناعية، الهيدروليكية، وزيوت التشحيم المصممة خصيصًا للمعدات الثقيلة والصناعات المختلفة." },
            { id: "4", title: "كيف أضمن جودة الزيوت؟", content: "جميع زيوتنا تخضع لاختبارات صارمة وتتوافق مع أعلى المعايير العالمية، ونحن نتعامل فقط مع موردين موثوقين لضمان الجودة." },
            { id: "5", title: "هل تتوفر لديكم خدمة الدفع عند الاستلام؟", content: "نعم، نقدم خيارات دفع متنوعة بما في ذلك الدفع عند الاستلام لراحتكم." },
          ]}
        />
        <ContactCTA
          tag="تواصل معنا"
          title="جاهز لتجربة زيوت الحسام؟"
          description="دعنا نساعدك في اختيار الزيوت المناسبة لاحتياجاتك. فريقنا في انتظارك!"
          background={{ variant: "rotated-rays-animated" }}
          buttons={[
            { text: "احجز الآن", href: "#contact" },
            { text: "تصفح المنتجات", href: "#products" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
        <FooterBase
          logoText="الحسام للزيوت"
          copyrightText="© 2024 | الحسام للزيوت. جميع الحقوق محفوظة."
          columns={[
            {
              title: "الشركة",              items: [
                { label: "من نحن", href: "#about" },
                { label: "منتجاتنا", href: "#products" },
                { label: "خدماتنا", href: "#services" },
                { label: "اتصل بنا", href: "#contact" },
              ],
            },
            {
              title: "المنتجات",              items: [
                { label: "زيوت محركات", href: "#" },
                { label: "زيوت صناعية", href: "#" },
                { label: "زيوت هيدروليكية", href: "#" },
                { label: "زيوت تشحيم", href: "#" },
              ],
            },
            {
              title: "الدعم",              items: [
                { label: "الأسئلة الشائعة", href: "#faq" },
                { label: "سياسة الخصوصية", href: "#" },
                { label: "الشروط والأحكام", href: "#" },
              ],
            },
          ]}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}
