"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import TextAbout from '@/components/sections/about/TextAbout';
import { Award, Shield, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="largeSmall"
        background="noiseDiagonalGradient"
        cardStyle="inset"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "About",
          id: "about",
        },
        {
          name: "Features",
          id: "features",
        },
        {
          name: "Store",
          id: "store",
        },
        {
          name: "Community",
          id: "testimonials",
        },
        {
          name: "FAQ",
          id: "faq",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="NexGame"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "gradient-bars",
      }}
      title="Enter the Future of Gaming"
      description="NexGame delivers next-generation gaming hardware and high-performance digital platforms designed for competitive excellence."
      tag="Revolutionary Tech"
      buttons={[
        {
          text: "Explore Store",
          href: "#store",
        },
        {
          text: "Join Community",
          href: "#testimonials",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/futuristic-helmet-with-neon-detailing_23-2152011754.jpg"
      imageAlt="Futuristic gaming setup"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2389.jpg",
          alt: "User avatar 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2370.jpg",
          alt: "User avatar 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2364.jpg",
          alt: "User avatar 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2372.jpg",
          alt: "User avatar 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/futuristic-helmet-with-neon-detailing_23-2152011754.jpg",
          alt: "User avatar 5",
        },
      ]}
      avatarText="Join 500K+ elite gamers"
      marqueeItems={[
        {
          type: "text",
          text: "4K Ultra HD",
        },
        {
          type: "text",
          text: "Zero Latency",
        },
        {
          type: "text",
          text: "AI Optimization",
        },
        {
          type: "text",
          text: "Custom Lighting",
        },
        {
          type: "text",
          text: "Global Servers",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="Pioneering the Next Era of Digital Entertainment"
      buttons={[
        {
          text: "About Us",
          href: "#about",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "Ultra-Low Latency",
          subtitle: "Near-instant response times",
          category: "Performance",
          value: "1ms",
        },
        {
          id: "f2",
          title: "Hyper-Speed Architecture",
          subtitle: "Next-gen processing tech",
          category: "Tech",
          value: "5.0 GHz",
        },
        {
          id: "f3",
          title: "Immersive 4K Audio",
          subtitle: "Crystal clear soundscapes",
          category: "Audio",
          value: "THX",
        },
      ]}
      title="Unmatched Performance"
      description="Engineered for speed, built for precision, and designed to dominate every session."
    />
  </div>

  <div id="store" data-section="store">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "Quantum Mouse",
          price: "$129",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-happy-influencer-endorsing-wireless-mouse-from-sponsor_482257-87180.jpg",
        },
        {
          id: "p2",
          name: "Aero Keyboard",
          price: "$199",
          imageSrc: "http://img.b2bpic.net/free-photo/gradient-illuminated-neon-gaming-desk-setup-with-keyboard_23-2149529409.jpg",
        },
        {
          id: "p3",
          name: "Pulse Headset",
          price: "$159",
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-black-shirt-with-black-headphones_140725-12707.jpg",
        },
        {
          id: "p4",
          name: "Display 4K",
          price: "$899",
          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-gaming-device_23-2151005796.jpg",
        },
        {
          id: "p5",
          name: "GPU Enclosure",
          price: "$450",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-high-tech-car-engine-part_482257-76592.jpg",
        },
        {
          id: "p6",
          name: "Pro Controller",
          price: "$149",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-controller-gaming-chair_23-2149829137.jpg",
        },
      ]}
      title="Elite Gear Shop"
      description="Equip yourself with the best in the market."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "500K+",
          title: "Happy Gamers",
          description: "Global reach",
          icon: Users,
        },
        {
          id: "m2",
          value: "100%",
          title: "Satisfaction",
          description: "Top quality",
          icon: Award,
        },
        {
          id: "m3",
          value: "24/7",
          title: "Support",
          description: "Always there",
          icon: Shield,
        },
      ]}
      title="Global Impact"
      description="Join our network of elite gamers worldwide."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Alex R.",
          handle: "@alex_pro",
          testimonial: "NexGame totally changed my game.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-charming-brunette-glasses-blue-shirt-crossed-arms-listening-music-headphones-leaning-against-brick-wall-room-with-loft-design_613910-9183.jpg",
        },
        {
          id: "t2",
          name: "Sam M.",
          handle: "@sammy_stream",
          testimonial: "Best gear I have ever owned.",
          imageSrc: "http://img.b2bpic.net/free-photo/company-worker-planning-business-strategy-startup-office-using-sales-statistics-documents-create-financial-growth-female-consultant-analyzing-management-graphs-files_482257-41033.jpg",
        },
        {
          id: "t3",
          name: "Jordan P.",
          handle: "@j_p_gaming",
          testimonial: "Unbelievable performance every session.",
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-sensitive-red-head-man-smiling_23-2149509822.jpg",
        },
        {
          id: "t4",
          name: "Lee W.",
          handle: "@lee_wins",
          testimonial: "NexGame is the future of esports.",
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-studio-filming-chroma-key-tablet-review-tech-enthusiasts_482257-124453.jpg",
        },
        {
          id: "t5",
          name: "Chris K.",
          handle: "@chris_pro_v",
          testimonial: "Top-tier reliability and precision.",
          imageSrc: "http://img.b2bpic.net/free-photo/entrepreneur-working-home-office-desk-laptop-writing-notebook_482257-114440.jpg",
        },
      ]}
      title="Elite Testimonials"
      description="What our users are saying across the globe."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Is the gear compatible?",
          content: "Yes, we support all major platforms.",
        },
        {
          id: "q2",
          title: "Do you offer warranty?",
          content: "We provide a 2-year full warranty.",
        },
        {
          id: "q3",
          title: "Is shipping worldwide?",
          content: "We ship across all continents.",
        },
      ]}
      sideTitle="Common Queries"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "gradient-bars",
      }}
      tag="Join Us"
      title="Start Your Journey"
      description="Sign up to receive updates on new drops."
      imageSrc="http://img.b2bpic.net/free-photo/line-shaped-neon-lights-background_23-2147815446.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Community",
              href: "#testimonials",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Help",
              href: "#contact",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 NexGame Inc."
      bottomRightText="Privacy Policy"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
