"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Clock, Globe, Server, Trophy, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="mediumSizeLargeTitles"
        background="aurora"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Features",
          id: "features",
        },
        {
          name: "Stats",
          id: "stats",
        },
        {
          name: "Community",
          id: "community",
        },
        {
          name: "Support",
          id: "faq",
        },
      ]}
      brandName="Nexus Gaming"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardTestimonial
      background={{
        variant: "plain",
      }}
      title="Unleash Your Ultimate Potential"
      description="The world's most immersive, cross-platform gaming experience. Join millions of players across the globe in a reality-defying journey."
      testimonials={[
        {
          name: "Alex Riv",
          handle: "@rivgaming",
          testimonial: "The best platform I've played on in years, seamless transitions!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-neon-tunnel_23-2151986973.jpg?_wi=1",
          imageAlt: "futuristic gaming dashboard interface",
        },
        {
          name: "Sam K",
          handle: "@samplays",
          testimonial: "Incredible performance, low latency and amazing community.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-playing-sf-shooter-videogame-computer-talking-into-headset-with-friends_482257-104108.jpg?_wi=1",
          imageAlt: "pro gaming gear setup",
        },
        {
          name: "Jordan P",
          handle: "@jordan_dev",
          testimonial: "Revolutionary UI that makes navigation effortless.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-science-fiction-futuristic-background-with-blue-neon-lights_181624-23679.jpg?_wi=1",
          imageAlt: "data center server room",
        },
        {
          name: "Casey W",
          handle: "@caseyplays",
          testimonial: "Absolute game changer for competitive play.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/3d-view-planet-earth_23-2150499236.jpg?_wi=1",
          imageAlt: "global network connection tech",
        },
        {
          name: "Taylor B",
          handle: "@tayplays",
          testimonial: "The community support here is top notch.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/black-remote-worker-enjoying-flexibility-comfort-while-browsing-online_482257-118982.jpg?_wi=1",
          imageAlt: "pro gamer studio portrait",
        },
      ]}
      buttons={[
        {
          text: "Start Playing",
          href: "#",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/futuristic-neon-tunnel_23-2151986973.jpg?_wi=2"
      imageAlt="Futuristic gaming platform interface"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/black-remote-worker-enjoying-flexibility-comfort-while-browsing-online_482257-118982.jpg",
          alt: "Pro Gamer",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-professional-soccer-player_93675-134273.jpg",
          alt: "Esports Pro",
        },
        {
          src: "http://img.b2bpic.net/free-photo/disabled-person-with-prosthetic-leg_23-2149057459.jpg",
          alt: "Happy Gamer",
        },
        {
          src: "http://img.b2bpic.net/free-photo/listening-music-man-with-fingers-up_1301-1721.jpg",
          alt: "Content Creator",
        },
        {
          src: "http://img.b2bpic.net/free-photo/focused-man-rgb-lights-lit-living-room-playing-videogames_482257-116287.jpg",
          alt: "Hardcore Fan",
        },
      ]}
      avatarText="Join 15M+ active players"
      marqueeItems={[
        {
          type: "text",
          text: "Ultra-Low Latency",
        },
        {
          type: "text",
          text: "Global Server Coverage",
        },
        {
          type: "text",
          text: "24/7 Competitive Play",
        },
        {
          type: "text",
          text: "Cross-Platform Sync",
        },
        {
          type: "text",
          text: "Secure Gaming Cloud",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Precision Hardware",
          description: "Optimized for the highest competitive standards.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/man-playing-sf-shooter-videogame-computer-talking-into-headset-with-friends_482257-104108.jpg?_wi=2",
            imageAlt: "Gaming gear",
          },
          items: [
            {
              icon: Mouse,
              text: "Low latency support",
            },
            {
              icon: Gamepad2,
              text: "Universal controller support",
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-professional-soccer-player_93675-134273.jpg?_wi=1",
          imageAlt: "esports competitor portrait",
        },
        {
          title: "Cloud Gaming Infrastructure",
          description: "Zero lag, global edge server availability.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/abstract-science-fiction-futuristic-background-with-blue-neon-lights_181624-23679.jpg?_wi=2",
            imageAlt: "Server rack",
          },
          items: [
            {
              icon: Server,
              text: "99.99% uptime",
            },
            {
              icon: Zap,
              text: "Lightning fast connection",
            },
          ],
          reverse: true,
          imageSrc: "http://img.b2bpic.net/free-photo/disabled-person-with-prosthetic-leg_23-2149057459.jpg?_wi=1",
          imageAlt: "happy gamer studio portrait",
        },
        {
          title: "Global Player Network",
          description: "Connected community of millions worldwide.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/3d-view-planet-earth_23-2150499236.jpg?_wi=2",
            imageAlt: "Globe visualization",
          },
          items: [
            {
              icon: Globe,
              text: "Global server clusters",
            },
            {
              icon: Users,
              text: "Massive community",
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/listening-music-man-with-fingers-up_1301-1721.jpg?_wi=1",
          imageAlt: "gaming content creator headshot",
        },
      ]}
      title="Built for Peak Performance"
      description="Engineered for speed, stability, and unparalleled immersion."
    />
  </div>

  <div id="stats" data-section="stats">
      <MetricCardThree
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          icon: Users,
          title: "Active Players",
          value: "15M+",
        },
        {
          id: "m2",
          icon: Trophy,
          title: "Tournaments Won",
          value: "250K",
        },
        {
          id: "m3",
          icon: Clock,
          title: "Hours Played",
          value: "500M+",
        },
      ]}
      title="Dominating the Industry"
      description="Our numbers speak for themselves."
    />
  </div>

  <div id="community" data-section="community">
      <TestimonialCardSixteen
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah J",
          role: "Pro Gamer",
          company: "Nexus Elite",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/black-remote-worker-enjoying-flexibility-comfort-while-browsing-online_482257-118982.jpg?_wi=2",
        },
        {
          id: "2",
          name: "Michael C",
          role: "Esports Pro",
          company: "Global Squad",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-professional-soccer-player_93675-134273.jpg?_wi=2",
        },
        {
          id: "3",
          name: "Emily R",
          role: "Gamer",
          company: "Casual Squad",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/disabled-person-with-prosthetic-leg_23-2149057459.jpg?_wi=2",
        },
        {
          id: "4",
          name: "David K",
          role: "Streamer",
          company: "Content Labs",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/listening-music-man-with-fingers-up_1301-1721.jpg?_wi=2",
        },
        {
          id: "5",
          name: "Lisa M",
          role: "Hardcore Fan",
          company: "Gaming Nation",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/focused-man-rgb-lights-lit-living-room-playing-videogames_482257-116287.jpg",
        },
      ]}
      kpiItems={[
        {
          value: "99%",
          label: "Satisfaction Rate",
        },
        {
          value: "5M+",
          label: "Daily Active Users",
        },
        {
          value: "24/7",
          label: "Global Support",
        },
      ]}
      title="Hear from the Community"
      description="Join the millions who call Nexus Gaming home."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "Is the game free to play?",
          content: "Yes, we offer a robust free-to-play model for everyone.",
        },
        {
          id: "f2",
          title: "Can I play on my console?",
          content: "Absolutely! We support cross-platform play including consoles, PC, and mobile.",
        },
        {
          id: "f3",
          title: "How do I join a tournament?",
          content: "You can sign up directly from your dashboard once your profile is verified.",
        },
        {
          id: "f4",
          title: "Is there 24/7 support?",
          content: "Yes, our global support team is available around the clock.",
        },
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Everything you need to know to get started."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      text="Ready to take your game to the next level? Join the future of gaming today."
      buttons={[
        {
          text: "Get Started",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Nexus Gaming"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#",
            },
            {
              label: "Careers",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Help Center",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
        {
          title: "Connect",
          items: [
            {
              label: "Twitter",
              href: "#",
            },
            {
              label: "Discord",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}