"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Award, Clock, Medal, Star, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="small"
        sizing="large"
        background="aurora"
        cardStyle="soft-shadow"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "About",          id: "#about"},
        {
          name: "Gaming",          id: "#gaming"},
        {
          name: "Gallery",          id: "#gallery"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "Reviews",          id: "#reviews"},
        {
          name: "Team",          id: "#team"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}

    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="ELEVATE YOUR GAME // <span class='text-transparent bg-clip-text bg-gradient-to-r from-[#00d4ff] to-[#a855f7]'>DOMINATE</span> THE ARENA"
      description="Amman's premier 24/7 esports hub. Experience elite gaming, community events, and unrivaled performance. With a perfect 5.0 Google Rating, your victory starts here."
      tag="PREMIUM ESPORTS EXPERIENCE"
      buttons={[
        {
          text: "EXPLORE OUR PCs"},
        {
          text: "JOIN THE NETWORK"},
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/person-using-futuristic-virtual-reality-headset-video-games_23-2151133310.jpg",          alt: "Gamer 1"},
        {
          src: "http://img.b2bpic.net/free-photo/excited-young-beautiful-woman-wearing-headphones-holding-mobile-phone-pink-wall-with-copy-space_141793-25791.jpg",          alt: "Gamer 2"},
        {
          src: "http://img.b2bpic.net/free-photo/comic-book-everyday-lifestyle-scene_23-2151133832.jpg",          alt: "Gamer 3"},
        {
          src: "http://img.b2bpic.net/free-photo/cyberpunk-boy-illustration_23-2151728213.jpg",          alt: "Gamer 4"},
        {
          src: "http://img.b2bpic.net/free-photo/smiling-man-gamer-play-games-with-joystick_171337-16530.jpg",          alt: "Gamer 5"},
      ]}
      avatarText="Join 5000+ happy gamers!"
      imageSrc="http://img.b2bpic.net/free-photo/bright-purple-square-mosaic-textural-background_1258-69250.jpg"
      imageAlt="Cyberpunk gaming arena"
      showDimOverlay={true}
      showBlur={true}
      textPosition="bottom"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="BEYOND GAMING, A <span class='text-transparent bg-clip-text bg-gradient-to-r from-[#00d4ff] to-[#a855f7]'>NETWORK</span>"
      metrics={[
        {
          icon: Star,
          label: "Google Rating",          value: "5.0 / 5.0"},
        {
          icon: Clock,
          label: "Availability",          value: "24/7 Access"},
        {
          icon: Zap,
          label: "Performance",          value: "Elite Hardware"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="gaming" data-section="gaming">
      <FeatureCardSix
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "High-End PCs",          description: "Experience zero lag with custom-built gaming rigs featuring RTX 40-series GPUs and Intel i9 processors.",          imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-lounge-with-neon-lights_23-2151986952.jpg",          imageAlt: "High-End Gaming PC Setup"},
        {
          title: "Next-Gen Consoles",          description: "Access the latest titles on PlayStation 5 and Xbox Series X, complete with 4K displays and premium peripherals.",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746612.jpg",          imageAlt: "Next-Gen Console Setup"},
        {
          title: "Private Gaming Booths",          description: "Enjoy focused gaming or intimate co-op sessions in soundproof, ergonomically designed private booths.",          imageSrc: "http://img.b2bpic.net/free-photo/sideways-happy-women-playing-arcade-game_23-2148253130.jpg",          imageAlt: "Private Gaming Booth"},
        {
          title: "Immersive VR Experiences",          description: "Step into new worlds with our advanced VR setups, offering a diverse library of virtual reality games.",          imageSrc: "http://img.b2bpic.net/free-photo/man-with-vr-glasses-device_23-2148864946.jpg",          imageAlt: "VR Gaming Zone"},
        {
          title: "Esports Training Stage",          description: "Practice and compete on a professional-grade esports stage, built to simulate tournament conditions.",          imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-competition-3d-illustration_1419-2782.jpg",          imageAlt: "Esports Training Stage"},
        {
          title: "Ultra-Fast Fiber Internet",          description: "Never miss a beat with our dedicated fiber optic connection, ensuring lightning-fast downloads and minimal latency.",          imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151204914.jpg",          imageAlt: "Ultra-Fast Internet Connectivity"},
      ]}
      title="YOUR ARSENAL: <span class='text-transparent bg-clip-text bg-gradient-to-r from-[#00d4ff] to-[#a855f7]'>UNLEASHED</span>"
      description="Dive into the ultimate gaming environment. Our stations are equipped with cutting-edge hardware and a vast library of games, ensuring an immersive experience for every player."
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "pc-premium",          name: "Premium PC Station",          price: "From 3 JD/Hr",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-playing-sf-shooter-videogame-computer-talking-into-headset-with-friends_482257-104108.jpg",          imageAlt: "Premium PC Gaming Station"},
        {
          id: "vr-zone",          name: "VR Zone",          price: "From 5 JD/Session",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-set-with-dj-charge-music-using-virtual-reality-glasses_23-2151418207.jpg",          imageAlt: "Virtual Reality Gaming Zone"},
        {
          id: "private-room",          name: "Private Gaming Room",          price: "From 15 JD/Hr",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-business-office-space_23-2151003784.jpg",          imageAlt: "Private Gaming Room"},
        {
          id: "esports-stage",          name: "Esports Stage Access",          price: "Event Based",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/asian-hacker-coding-computer-virus_482257-78486.jpg",          imageAlt: "Esports Competition Stage"},
        {
          id: "console-bay",          name: "Console Bay",          price: "From 2.5 JD/Hr",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172434.jpg",          imageAlt: "Console Gaming Bay"},
        {
          id: "sim-rig",          name: "Racing Simulator Rig",          price: "From 7 JD/Session",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-playing-videogame_23-2149350006.jpg",          imageAlt: "High-Fidelity Racing Simulator Rig"},
      ]}
      title="OUR <span class='text-transparent bg-clip-text bg-gradient-to-r from-[#00d4ff] to-[#a855f7]'>ARENAS</span>"
      description="Discover the perfect setup for your gaming style. From solo adventures to team battles, our diverse stations cater to every need, powered by the latest tech."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "hourly",          badge: "Standard",          badgeIcon: Star,
          price: "2.5 JD",          name: "Hourly Pass",          buttons: [
            {
              text: "Get Started"},
          ],
          features: [
            "Access to Standard PCs",            "Access to Console Bays",            "Per-minute billing",            "No commitment"],
        },
        {
          id: "day",          badge: "Popular",          badgeIcon: Medal,
          price: "20 JD",          name: "Day Pass",          buttons: [
            {
              text: "Go All In"},
          ],
          features: [
            "Unlimited standard PC/Console access for 24 hours",            "Priority queue for busy times",            "Exclusive discounts on snacks",            "Includes 1 VR session"],
        },
        {
          id: "monthly",          badge: "Ultimate",          badgeIcon: Award,
          price: "150 JD",          name: "Monthly Membership",          buttons: [
            {
              text: "Join Elite"},
          ],
          features: [
            "Unlimited access to ALL stations (PC, Console, VR)",            "Priority booking for private rooms",            "Dedicated locker storage",            "Exclusive member-only events and tournaments"],
        },
      ]}
      title="FLEXIBLE <span class='text-transparent bg-clip-text bg-gradient-to-r from-[#00d4ff] to-[#a855f7]'>PLANS</span>"
      description="Choose from our competitive hourly rates or membership packages designed for dedicated gamers. Unlock more value with every hour you play."
    />
  </div>

  <div id="reviews" data-section="reviews">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          title: "Unmatched Gaming Experience!",          quote: "Hackers Network is truly Amman's top gaming spot. The PCs are insane, the vibe is perfect for competitive play, and the staff are always super helpful. 10/10!",          name: "Ahmad Al-Hassan",          role: "Esports Enthusiast",          imageSrc: "http://img.b2bpic.net/free-photo/person-working-animation-porject_23-2149269942.jpg",          imageAlt: "Ahmad Al-Hassan"},
        {
          id: "2",          title: "My Second Home!",          quote: "I spend most of my free time here. The community is fantastic, and I've made so many friends. It's clean, comfortable, and always buzzing with energy.",          name: "Layla Khalil",          role: "Community Gamer",          imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-pink-hairs-looks-positive-wearing-headphones_114579-17772.jpg",          imageAlt: "Layla Khalil"},
        {
          id: "3",          title: "Professional and Welcoming",          quote: "As a semi-pro player, I need reliable setups. Hackers Network delivers every time. Plus, the private rooms are excellent for strategizing with my team.",          name: "Omar Zaid",          role: "Competitive Player",          imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-man-wearing-sunglasses-standing-yellow-background-hugging-oneself-happy-positive-smiling-confident-self-love-self-care_839833-30697.jpg",          imageAlt: "Omar Zaid"},
        {
          id: "4",          title: "Best VR in Town!",          quote: "The VR zone here is mind-blowing! So many games and the equipment is top-notch. It's a whole new level of immersion I haven't found anywhere else in Amman.",          name: "Sara Ma'ani",          role: "VR Explorer",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-cool-teenage-boy-listening-music-headphones_23-2149085895.jpg",          imageAlt: "Sara Ma'ani"},
        {
          id: "5",          title: "Open 24/7 - A Dream Come True!",          quote: "Being able to game whenever I want, day or night, is a game-changer. The prices are fair, and the environment is safe and friendly. Highly recommend!",          name: "Tareq Jaber",          role: "Night Owl Gamer",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-playing-videogames_23-2150573823.jpg",          imageAlt: "Tareq Jaber"},
      ]}
      title="WHAT OUR <span class='text-transparent bg-clip-text bg-gradient-to-r from-[#00d4ff] to-[#a855f7]'>COMMUNITY</span> SAYS"
      description="Don't just take our word for it. Hear from the gamers who make Hackers Network their home. We pride ourselves on delivering a 5-star experience every single time."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      members={[
        {
          id: "1",          name: "Majd Al-Faqih",          role: "General Manager",          description: "With a vision to create the ultimate esports destination, Majd oversees all operations, ensuring a seamless and premium experience for every visitor.",          imageSrc: "http://img.b2bpic.net/free-photo/man-with-laptop-posing-coworker_23-2148746260.jpg",          imageAlt: "Majd Al-Faqih"},
        {
          id: "2",          name: "Zaid Omar",          role: "Lead Systems Technician",          description: "Zaid is our hardware wizard, ensuring all PCs and consoles run at peak performance. His expertise keeps Hackers Network at the forefront of gaming technology.",          imageSrc: "http://img.b2bpic.net/free-photo/futurism-perspective-digital-nomads-lifestyle_23-2151252523.jpg",          imageAlt: "Zaid Omar"},
        {
          id: "3",          name: "Nour Issa",          role: "Community & Events Manager",          description: "Nour fosters our vibrant community, organizing thrilling tournaments and engaging events that bring gamers together and celebrate their passion.",          imageSrc: "http://img.b2bpic.net/free-photo/freelancer-wearing-wireless-headphones_482257-76994.jpg",          imageAlt: "Nour Issa"},
      ]}
      title="MEET THE <span class='text-transparent bg-clip-text bg-gradient-to-r from-[#00d4ff] to-[#a855f7]'>MASTERS</span>"
      description="Behind every great gaming center is a passionate team. Get to know the dedicated individuals who ensure your experience at Hackers Network is always top-tier."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq1",          title: "What are your operating hours?",          content: "Hackers Network Gaming Center is open 24 hours a day, 7 days a week, including holidays. Game whenever you want!"},
        {
          id: "faq2",          title: "Do I need to book a station in advance?",          content: "While not always necessary, especially during off-peak hours, we highly recommend booking your station in advance, particularly for private rooms or during busy evenings and weekends, to guarantee availability."},
        {
          id: "faq3",          title: "What types of games are available?",          content: "We offer a vast library of games across all genres for PC, PlayStation, Xbox, and VR. From competitive esports titles to casual single-player adventures, we have something for everyone."},
        {
          id: "faq4",          title: "Can I bring my own peripherals?",          content: "Absolutely! You are welcome to bring your own keyboard, mouse, headset, and controller to ensure your comfort and optimal performance."},
        {
          id: "faq5",          title: "Do you host tournaments or events?",          content: "Yes, we regularly host a variety of tournaments, community events, and special gaming nights. Check our social media (@hackers.jo_) or our 'Events' section for the latest schedule."},
        {
          id: "faq6",          title: "What payment methods do you accept?",          content: "We accept cash, credit/debit cards, and mobile payment options. Please inquire at the front desk for specific mobile payment services supported."},
      ]}
      title="FREQUENTLY ASKED <span class='text-transparent bg-clip-text bg-gradient-to-r from-[#00d4ff] to-[#a855f7]'>QUESTIONS</span>"
      description="Have queries about our facilities, services, or events? Find quick answers to the most common questions from our community."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"}}
      text="READY TO <span class='text-transparent bg-clip-text bg-gradient-to-r from-[#00d4ff] to-[#a855f7]'>LEVEL UP</span> YOUR GAMING?"
      buttons={[
        {
          text: "CALL US NOW",          href: "tel:+962775515525"},
        {
          text: "MESSAGE ON WHATSAPP",          href: "https://wa.me/962775515525"},
        {
          text: "FIND US ON MAP",          href: "https://maps.app.goo.gl/YourGoogleMapsLinkHere"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ev2AC5LQjzTLQLEMllIrZVpSSI/uploaded-1781045007817-ypevrz8r.png"
      logoAlt="Hackers Network Gaming Center Logo"
      columns={[
        {
          items: [
            {
              label: "Home",              href: "#hero"},
            {
              label: "About Us",              href: "#about"},
            {
              label: "Gaming Stations",              href: "#gallery"},
            {
              label: "Pricing",              href: "#pricing"},
          ],
        },
        {
          items: [
            {
              label: "Esports Events",              href: "#"},
            {
              label: "VR Zone",              href: "#gallery"},
            {
              label: "Private Rooms",              href: "#gallery"},
            {
              label: "Community",              href: "#reviews"},
          ],
        },
        {
          items: [
            {
              label: "Contact Us",              href: "#contact"},
            {
              label: "WhatsApp: +962 7 7551 5525",              href: "https://wa.me/962775515525"},
            {
              label: "Instagram: @hackers.jo_",              href: "https://instagram.com/hackers.jo_"},
            {
              label: "Location: Amman, Jordan",              href: "https://maps.app.goo.gl/YourGoogleMapsLinkHere"},
          ],
        },
      ]}
      logoText="HACKERS NETWORK"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}