"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import AboutMetric from '@/components/sections/about/AboutMetric';
import { Zap, Target, Users, Coffee } from "lucide-react";

export default function GamingCafePage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="large"
        background="aurora"
        cardStyle="glass-elevated"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={[
              { name: "Home", id: "hero" },
              { name: "Experience", id: "about" },
              { name: "Hardware", id: "products" },
              { name: "Community", id: "testimonials" },
              { name: "Visit", id: "contact" },
            ]}
            brandName="Nexus Gaming Cafe"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardCarousel
            background={{ variant: "sparkles-gradient" }}
            title="Level Up Your Reality"
            description="Next-gen performance, ultra-low latency, and a community built for champions. Experience the pinnacle of gaming."
            tag="Premium E-Sports Lounge"
            buttons={[{ text: "View Equipment", href: "#products" }]}
            mediaItems={[
              { imageSrc: "https://img.b2bpic.net/free-photo/gaming-pc-setup_23-2149553832.jpg", imageAlt: "Gaming setup" },
              { imageSrc: "https://img.b2bpic.net/free-photo/gamer-neon-lights_23-2149301294.jpg", imageAlt: "Gamer atmosphere" },
              { imageSrc: "https://img.b2bpic.net/free-photo/gaming-pc_23-2149171720.jpg", imageAlt: "Rig 1" },
              { imageSrc: "https://img.b2bpic.net/free-photo/gaming-keyboard_23-2149171710.jpg", imageAlt: "Rig 2" },
              { imageSrc: "https://img.b2bpic.net/free-photo/gaming-headset_23-2149171755.jpg", imageAlt: "Rig 3" },
              { imageSrc: "https://img.b2bpic.net/free-photo/gaming-monitor_23-2149171730.jpg", imageAlt: "Rig 4" }
            ]}
          />
        </div>

        <div id="about" data-section="about">
          <AboutMetric
            title="Where Pro Gamers Are Made"
            metrics={[
              { icon: Zap, label: "Network Speed", value: "10Gbps" },
              { icon: Target, label: "Setup Precision", value: "4K/240Hz" },
              { icon: Users, label: "Active Members", value: "5,000+" },
            ]}
            metricsAnimation="blur-reveal"
            useInvertedBackground={true}
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardTwentySix
            textboxLayout="inline-image"
            useInvertedBackground={false}
            title="Pro-Grade Performance"
            description="Equipped with the world's most powerful hardware to ensure every click counts."
            features={[
              { title: "RTX 4090 Rigs", description: "Experience ray-tracing in every frame.", buttonIcon: Zap },
              { title: "Pro Peripherals", description: "Mechanical precision for competitive edges.", buttonIcon: Zap },
              { title: "Fiber Connection", description: "Zero lag, maximum dominance.", buttonIcon: Zap },
              { title: "Ergonomic Comfort", description: "Stay in the zone for longer sessions.", buttonIcon: Zap },
            ]}
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardTwo
            animationType="blur-reveal"
            gridVariant="three-columns-all-equal-width"
            title="Gaming Hardware Rentals"
            description="Rent the best rigs in the city and dominate the leaderboard."
            products={[
              { id: "1", brand: "Alienware", name: "Titan Pro Series", price: "$15/hr", rating: 5, reviewCount: "120", imageSrc: "https://img.b2bpic.net/free-photo/gaming-pc_23-2149171720.jpg" },
              { id: "2", brand: "Razer", name: "Stealth Elite", price: "$12/hr", rating: 4, reviewCount: "95", imageSrc: "https://img.b2bpic.net/free-photo/gaming-keyboard_23-2149171710.jpg" },
              { id: "3", brand: "Logitech", name: "Pro Streamer Hub", price: "$20/hr", rating: 5, reviewCount: "85", imageSrc: "https://img.b2bpic.net/free-photo/gaming-headset_23-2149171755.jpg" },
            ]}
            textboxLayout="split"
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardTwo
            animationType="blur-reveal"
            title="From Our Community"
            description="Hear what the local gaming legends think about Nexus."
            testimonials={[
              { id: "1", name: "Alex P.", role: "E-Sports Pro", testimonial: "The refresh rate here is unbeatable. This is the only place I practice.", imageSrc: "https://img.b2bpic.net/free-photo/gamer-profile_23-2149301290.jpg" },
              { id: "2", name: "Jordan K.", role: "Streamer", testimonial: "Best vibes and zero latency issues. My streams never looked better.", imageSrc: "https://img.b2bpic.net/free-photo/streamer-profile_23-2149301300.jpg" },
            ]}
            textboxLayout="split"
            useInvertedBackground={false}
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqDouble
            faqs={[
              { id: "1", title: "Can I book a private room?", content: "Yes, we have 4 private soundproof rooms for teams." },
              { id: "2", title: "Are energy drinks available?", content: "We carry a curated selection of premium gaming fuel." },
            ]}
            title="Know Before You Frag"
            description="Everything you need to get started at Nexus."
            faqsAnimation="slide-up"
            textboxLayout="split"
            useInvertedBackground={false}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCTA
            tag="Get Early Access"
            title="Join the Pro Lounge"
            description="Sign up for our membership to get priority booking and exclusive hourly rates."
            buttons={[{ text: "Become a Member" }]}
            background={{ variant: "sparkles-gradient" }}
            useInvertedBackground={false}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseReveal
            logoText="NEXUS"
            columns={[
              { title: "Cafe", items: [{ label: "Hardware", href: "#products" }, { label: "Locations", href: "#contact" }] },
              { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Terms", href: "#" }] }
            ]}
            copyrightText="© 2024 Nexus Gaming Cafe"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}