"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Star, Trophy, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="mediumLargeSizeLargeTitles"
        background="floatingGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Games",          id: "games"},
        {
          name: "Community",          id: "stats"},
        {
          name: "Support",          id: "contact"},
      ]}
      brandName="GameSphere"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Unleash Your Ultimate Gaming Experience"
      description="Discover, play, and compete with thousands of games on our high-speed, community-driven platform."
      buttons={[
        {
          text: "Start Playing Free",          href: "#games"},
        {
          text: "Join Community",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/cyber-security-expert-working-with-technology-neon-lights_23-2151645670.jpg"
      imageAlt="Futuristic gaming platform hero interface"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/cyberpunk-boy-illustration_23-2151728231.jpg",          alt: "Cyberpunk boy illustration"},
        {
          src: "http://img.b2bpic.net/free-photo/programmer-developing-software-large-computer-screen_53876-101149.jpg",          alt: "Programmer developing software on a large computer screen"},
        {
          src: "http://img.b2bpic.net/free-photo/futuristic-set-with-dj-charge-music-using-virtual-reality-glasses_23-2151418220.jpg",          alt: "Futuristic set with dj in charge of music using virtual reality glasses"},
        {
          src: "http://img.b2bpic.net/free-photo/cyberpunk-illustration-with-neon-colors-futuristic-technology_23-2151671979.jpg",          alt: "Cyberpunk illustration with neon colors and futuristic technology"},
        {
          src: "http://img.b2bpic.net/free-photo/cyberpunk-boy-illustration_23-2151728202.jpg",          alt: "Cyberpunk boy illustration"},
      ]}
      avatarText="Join 1M+ active players"
    />
  </div>

  <div id="games" data-section="games">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        {
          id: "1",          brand: "Adventure",          name: "Shadow Quest",          price: "Free",          rating: 5,
          reviewCount: "12k",          imageSrc: "http://img.b2bpic.net/free-photo/view-airplane-flying-through-fantasy-world_23-2151752713.jpg"},
        {
          id: "2",          brand: "Racing",          name: "Cyber Drift",          price: "Free",          rating: 4,
          reviewCount: "8k",          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138974.jpg"},
        {
          id: "3",          brand: "Puzzle",          name: "Whimsy Land",          price: "$4.99",          rating: 5,
          reviewCount: "5k",          imageSrc: "http://img.b2bpic.net/free-photo/cartoon-dragon-character_23-2151128980.jpg"},
        {
          id: "4",          brand: "Action",          name: "City Ruins",          price: "Free",          rating: 4,
          reviewCount: "15k",          imageSrc: "http://img.b2bpic.net/free-photo/darkly-atmospheric-retail-environment-rendering_23-2151153776.jpg"},
        {
          id: "5",          brand: "Strategy",          name: "Kingdom Tales",          price: "$2.99",          rating: 4,
          reviewCount: "9k",          imageSrc: "http://img.b2bpic.net/free-photo/coastal-landscape-fantasy-style_23-2151515098.jpg"},
        {
          id: "6",          brand: "Shooter",          name: "Tactical Strike",          price: "Free",          rating: 5,
          reviewCount: "20k",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-soldier-wearing-camouflage-equipment_23-2151001961.jpg"},
      ]}
      title="Popular Games Library"
      description="Explore the best titles from top-tier developers and indie creators."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Zero Latency",          description: "Optimized servers ensuring lag-free gameplay experience worldwide.",          imageSrc: "http://img.b2bpic.net/free-photo/cybernetic-warrior-neon-lit-server-room_23-2152031312.jpg",          imageAlt: "Latency"},
        {
          title: "Community Rewards",          description: "Unlock badges, points, and exclusive access by leveling up your gaming profile.",          imageSrc: "http://img.b2bpic.net/free-photo/batmobile-car-with-neon-lights_23-2151649938.jpg",          imageAlt: "Rewards"},
        {
          title: "Multi-Device Sync",          description: "Seamlessly switch between desktop, mobile, and console platforms instantly.",          imageSrc: "http://img.b2bpic.net/free-photo/view-kids-playing-video-games-together_23-2151005762.jpg",          imageAlt: "Sync"},
      ]}
      title="Why Gamers Choose Us"
      description="Built for speed, performance, and maximum entertainment."
    />
  </div>

  <div id="stats" data-section="stats">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "1",          icon: Star,
          title: "Active Games",          value: "5,000+"},
        {
          id: "2",          icon: Users,
          title: "Registered Players",          value: "1M+"},
        {
          id: "3",          icon: Trophy,
          title: "Tournaments Held",          value: "500+"},
      ]}
      title="Our Global Impact"
      description="Building the world's most active gaming ecosystem."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Alex J.",          role: "Hardcore Gamer",          company: "Global Clan",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/concept-covid-social-distancing-lifestyle-image-middleaged-man-medical-mask-gloves_1258-130915.jpg"},
        {
          id: "2",          name: "Sarah M.",          role: "Speedrunner",          company: "Pro League",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/black-teen-smiling-girl-headset-playing-video-games-video-game-club_1268-25918.jpg"},
        {
          id: "3",          name: "Chris K.",          role: "Casual Fan",          company: "Casual Squad",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/african-american-bearded-guy-wearing-hoodie-cap-sitting-gamer-chair-looking-camera-gaming-club-internet-cafe_613910-19248.jpg"},
        {
          id: "4",          name: "Jordan P.",          role: "Strategy Enthusiast",          company: "Tactical Team",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-couch-playing-game-console_23-2148095815.jpg"},
        {
          id: "5",          name: "Taylor W.",          role: "Competitive Player",          company: "Elite Elite",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-pro-gamer-streaming-game-while-talking-with-subscribers-using-headphones-mic_482257-116250.jpg"},
      ]}
      title="Player Voices"
      description="What our community has to say about their gaming journey with us."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "Is the platform free?",          content: "Yes, basic access and a vast library of games are completely free to enjoy."},
        {
          id: "2",          title: "Can I play on my phone?",          content: "Absolutely, our web platform is optimized for seamless mobile gaming."},
        {
          id: "3",          title: "How do I join a clan?",          content: "Navigate to the community tab and search for active clans to join the action."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/cyber-security-expert-working-with-technology-neon-lights_23-2151645587.jpg"
      imageAlt="Support team"
      mediaAnimation="slide-up"
      title="Questions Answered"
      description="Everything you need to know about our platform and how to start playing."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "gradient-bars"}}
      text="Ready to dominate the leaderboard? Reach out and get started today."
      buttons={[
        {
          text: "Contact Support",          href: "mailto:support@gamesphere.com"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Explore Games",              href: "#games"},
            {
              label: "Trending",              href: "#games"},
            {
              label: "Top Rated",              href: "#games"},
          ],
        },
        {
          items: [
            {
              label: "Community",              href: "#stats"},
            {
              label: "Support",              href: "#contact"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
        {
          items: [
            {
              label: "Twitter",              href: "https://twitter.com"},
            {
              label: "Discord",              href: "https://discord.com"},
            {
              label: "YouTube",              href: "https://youtube.com"},
          ],
        },
      ]}
      logoText="GameSphere"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}