"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Facebook, Instagram, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeMediumTitles"
        background="aurora"
        cardStyle="gradient-bordered"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "Features",
          id: "#features",
        },
        {
          name: "Products",
          id: "#products",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQs",
          id: "#faqs",
        },
        {
          name: "Order Now",
          id: "#order",
        },
      ]}
      brandName="Product Platform"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "animated-grid",
      }}
      imagePosition="right"
      title="Unleash the Power of Our Platform"
      description="Discover a seamless experience for managing your products and client orders with our cutting-edge platform. Simplify operations, boost sales, and drive growth."
      buttons={[
        {
          text: "Explore Products",
          href: "#products",
        },
        {
          text: "Contact Sales",
          href: "#order",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/customer-relationship-management-concept_23-2150038414.jpg"
      imageAlt="Product dashboard interface"
      mediaAnimation="slide-up"
      fixedMediaHeight={true}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-attractive-redhead-female-student-sits-armchair-leaning-arms-smiling_197531-22962.jpg",
          alt: "Sarah Johnson, CEO",
        },
        {
          src: "http://img.b2bpic.net/free-photo/tired-people-office-working-late_23-2149006105.jpg",
          alt: "Michael Chen, Founder",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-curly-black-woman-smiling-camera-home_197531-33133.jpg",
          alt: "Emily Rodriguez, Marketing Lead",
        },
        {
          src: "http://img.b2bpic.net/free-photo/man-with-fingers-intertwined-leaning-his-chin_1187-3066.jpg",
          alt: "David Kim, Product Manager",
        },
        {
          src: "http://img.b2bpic.net/free-photo/side-view-smiley-man-with-copy-space_23-2148612949.jpg",
          alt: "Alex Miller, Lead Developer",
        },
      ]}
      avatarText="Join 10,000+ satisfied businesses"
      marqueeItems={[
        {
          type: "image",
          src: "http://img.b2bpic.net/free-vector/flat-design-geometric-business-card_23-2149292245.jpg",
          alt: "Innovate Solutions Logo",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/light-leak-overlay-effect-with-blur-blue-light-leak-noisy-retro-film_474888-8016.jpg",
          alt: "Quantum Dynamics Logo",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-vector/abstract-globe-technology-logo-with-global-tech-text-purple-tone_53876-117490.jpg",
          alt: "Nexus Tech Logo",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/top-view-offul-toy-construction-designed-light-desk-toy-plastic_140725-33873.jpg",
          alt: "Synergy Systems Logo",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627920.jpg",
          alt: "Fusion Innovations Logo",
        },
      ]}
      marqueeSpeed={40}
      showMarqueeCard={true}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      carouselMode="buttons"
      features={[
        {
          title: "Responsive Product Grid",
          description: "Showcase your products beautifully on any device with our fully responsive design. Your customers will enjoy a seamless browsing experience.",
          imageSrc: "http://img.b2bpic.net/free-photo/summer-holiday_53876-31164.jpg",
          imageAlt: "Responsive design across devices",
          titleImageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg",
          buttonText: "See it in action",
        },
        {
          title: "Intuitive Order Forms",
          description: "Simplify the ordering process with dynamic forms. Customers can easily select products and provide their details, accelerating conversions.",
          imageSrc: "http://img.b2bpic.net/free-photo/e-commerce-online-shopping-website-technology-concept_53876-133666.jpg",
          imageAlt: "Customer order form",
          titleImageSrc: "http://img.b2bpic.net/free-photo/digital-banking-transparent-screen_53876-105382.jpg",
          buttonText: "Place an order",
        },
        {
          title: "Secure Admin Panel",
          description: "Gain full control over your inventory and client orders with our secure, easy-to-use admin panel. Manage everything from one centralized location.",
          imageSrc: "http://img.b2bpic.net/free-photo/female-depot-staff-tracking-orders-controlling-warehouse-merchandise_482257-130861.jpg",
          imageAlt: "Admin panel interface",
          titleImageSrc: "http://img.b2bpic.net/free-photo/open-laptop-with-glowing-screen-notepad-table-night_169016-53665.jpg",
          buttonText: "Manage products",
        },
      ]}
      title="Features Designed for Your Success"
      description="Our platform is built to streamline your workflow, enhance customer engagement, and provide robust control over your business operations."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      carouselMode="buttons"
      products={[
        {
          id: "1",
          name: "Quantum Smartwatch",
          price: "$299",
          variant: "Midnight Black",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-bandaging-her-arms_23-2148322435.jpg",
          imageAlt: "Quantum Smartwatch",
        },
        {
          id: "2",
          name: "Aura Wireless Earbuds",
          price: "$129",
          variant: "Cloud White",
          imageSrc: "http://img.b2bpic.net/free-photo/modern-wireless-earphones-with-case-displayed-round-podium-with-soft-shadows_23-2150808020.jpg",
          imageAlt: "Aura Wireless Earbuds",
        },
        {
          id: "3",
          name: "Echo Smart Speaker",
          price: "$199",
          variant: "Space Grey",
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722637.jpg",
          imageAlt: "Echo Smart Speaker",
        },
        {
          id: "4",
          name: "Volt Portable Charger",
          price: "$49",
          variant: "Metallic Silver",
          imageSrc: "http://img.b2bpic.net/free-photo/blue-cell-phone-connected-usb-cable-type-charging_58702-4479.jpg",
          imageAlt: "Volt Portable Charger",
        },
        {
          id: "5",
          name: "SkyDrone Pro",
          price: "$899",
          variant: "Stealth Black",
          imageSrc: "http://img.b2bpic.net/free-photo/technologically-savvy-hipster-young-generation-millennial-professional-photographer-uses-remote-control-pilot-drone-quadrocopter-gadget-air_346278-15.jpg",
          imageAlt: "SkyDrone Pro",
        },
        {
          id: "6",
          name: "Vision VR Headset",
          price: "$599",
          variant: "Deep Blue",
          imageSrc: "http://img.b2bpic.net/free-photo/amazed-businesswoman-watching-virtual-presentation_74855-1093.jpg",
          imageAlt: "Vision VR Headset",
        },
      ]}
      title="Our Featured Products"
      description="Explore a selection of our most popular products, each designed with quality and innovation in mind. Find what you need to enhance your digital life."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="“This platform has revolutionized our product management. The admin panel is incredibly intuitive, and the customer experience on the landing page is flawless. A true game-changer for our business!”"
      rating={5}
      author="Sarah Johnson, CEO of TechCorp"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-woman-digital-nomad-standing-office-with-laptop-smiling-working-her_1258-195350.jpg",
          alt: "Sarah Johnson",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg",
          alt: "Michael Chen",
        },
        {
          src: "http://img.b2bpic.net/free-photo/model-with-curly-hair-posing_23-2148323715.jpg",
          alt: "Emily Rodriguez",
        },
        {
          src: "http://img.b2bpic.net/free-photo/disabled-business-manager-wheelchair-looking-tired-front_482257-2229.jpg",
          alt: "David Kim",
        },
        {
          src: "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804509.jpg",
          alt: "Alex Miller",
        },
      ]}
      ratingAnimation="blur-reveal"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      carouselMode="buttons"
      metrics={[
        {
          id: "m1",
          value: "99.9%",
          description: "Uptime Reliability",
        },
        {
          id: "m2",
          value: "+25%",
          description: "Average Sales Increase",
        },
        {
          id: "m3",
          value: "10K+",
          description: "Products Managed",
        },
        {
          id: "m4",
          value: "5-Star",
          description: "Customer Satisfaction",
        },
      ]}
      title="Driving Success with Key Metrics"
      description="Our platform's impact is quantifiable. See how we help businesses achieve outstanding results."
    />
  </div>

  <div id="faqs" data-section="faqs">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq1",
          title: "How does the order form work?",
          content: "Our order form is dynamic, allowing customers to select products from a dropdown. It also features dynamic Wilaya and Commune dropdowns for precise delivery details, ensuring a smooth ordering experience.",
        },
        {
          id: "faq2",
          title: "Is the admin panel secure?",
          content: "Yes, the admin panel is secured with session-based authentication. Default login credentials are 'admin' / 'admin123', but we strongly recommend changing these immediately after the first login.",
        },
        {
          id: "faq3",
          title: "Can I add product videos?",
          content: "Absolutely! Each product entry in the admin panel supports both image URLs and optional video URLs. You can showcase your products with compelling visuals and videos.",
        },
        {
          id: "faq4",
          title: "What database is used?",
          content: "The backend utilizes a lightweight SQLite database to store product information and client orders. The database is automatically created on the first run if it doesn't already exist.",
        },
        {
          id: "faq5",
          title: "Is the landing page responsive?",
          content: "Yes, the customer-facing landing page features a responsive design with a product grid, ensuring optimal viewing and interaction across all devices, from desktops to mobile phones.",
        },
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Find quick answers to common questions about our platform, product features, and ordering process."
      faqsAnimation="slide-up"
      textPosition="left"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Innovate Solutions",
        "Quantum Dynamics",
        "Nexus Tech",
        "Synergy Systems",
        "Fusion Innovations",
        "Pinnacle Labs",
        "Aether Core",
      ]}
      title="Trusted by Leading Innovators"
      description="Our platform is the choice for businesses pushing the boundaries of technology and customer satisfaction."
      speed={40}
      showCard={true}
    />
  </div>

  <div id="order" data-section="order">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient",
      }}
      tag="Place Your Order"
      title="Ready to Get Started?"
      description="Fill out the form below to place your order or get in touch with our sales team for more information about our products and services."
      inputPlaceholder="Your email for inquiries"
      buttonText="Submit Order / Inquiry"
      termsText="By clicking submit, you agree to our terms of service and privacy policy."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Product Platform"
      copyrightText="© 2024 Product Platform. All rights reserved."
      socialLinks={[
        {
          icon: Twitter,
          href: "#",
          ariaLabel: "Twitter",
        },
        {
          icon: Facebook,
          href: "#",
          ariaLabel: "Facebook",
        },
        {
          icon: Instagram,
          href: "#",
          ariaLabel: "Instagram",
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
