"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Award, Gauge, Globe, MessageCircle, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="largeSizeMediumTitles"
        background="none"
        cardStyle="gradient-bordered"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Shop",          id: "#shop"},
        {
          name: "Stats",          id: "#stats"},
        {
          name: "Community",          id: "#community"},
        {
          name: "FAQs",          id: "#faqs"},
        {
          name: "Discord",          id: "#discord"},
      ]}
      brandName="Jet Sim"
      button={{
        text: "Play Now",        href: "https://www.roblox.com/games/your-game-id"}}
    />
  </div>

  <div id="home" data-section="home">
      <HeroLogoBillboard
      background={{
        variant: "downward-rays-animated-grid"}}
      logoText="Jet Sim"
      description="Experience the thrill of high-speed aerial combat and precision flying in our ultimate Roblox jet simulation game. Master the skies, dominate dogfights, and explore vast worlds."
      buttons={[
        {
          text: "Play Now",          href: "https://www.roblox.com/games/your-game-id"},
        {
          text: "Watch Trailer",          href: "https://www.youtube.com/your-trailer-link"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/view-airplane-flying-through-fantasy-world_23-2151752729.jpg"
      imageAlt="Futuristic jet fighter in action"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Unleash Your Inner Ace Pilot"
      description="Jet Sim offers an unparalleled flight experience on Roblox, combining realistic physics with thrilling gameplay. Master various aircraft, engage in intense dogfights, and explore vast open-world maps. Our dedicated team continually updates the game with new jets, maps, and features, ensuring endless fun for pilots of all skill levels."
      imageSrc="http://img.b2bpic.net/free-photo/control-table-spacecraft-from-inside_23-2151828203.jpg"
      imageAlt="First-person view from a jet cockpit"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Realistic Flight Physics",          description: "Experience authentic aerodynamics, responsive controls, and challenging flight mechanics that reward skill and precision.",          icon: Gauge,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/top-view-blue-spiral-staircase-white-background_181624-59298.jpg",              imageAlt: "Jet wing with aerodynamic flaps"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-white-aircraft-flying-sky_181624-19136.jpg",              imageAlt: "Jet performing a barrel roll"},
          ]
        },
        {
          title: "Intense Aerial Combat",          description: "Engage in thrilling dogfights against other players or AI, utilizing a vast arsenal of weaponry and tactical maneuvers to secure victory.",          icon: Award,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/technological-exploration-settlement_23-2151768694.jpg",              imageAlt: "Two jets in a dogfight"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/couple-staying-light-no-war-wording_23-2149377341.jpg",              imageAlt: "Jet HUD with target lock"},
          ]
        },
        {
          title: "Expansive Open Worlds",          description: "Soar over meticulously crafted, diverse landscapes ranging from bustling cities to vast deserts and serene oceans, each offering unique challenges and exploration opportunities.",          icon: Globe,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/digital-art-old-map-with-terrain-locations_23-2151445175.jpg",              imageAlt: "Aerial view of a diverse game map"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/futuristic-dubai-landscape_23-2151339737.jpg",              imageAlt: "Jet flying over a futuristic city"},
          ]
        }
      ]}
      title="Master the Skies with Cutting-Edge Features"
      description="Dive into the world of aerial mastery with features designed for ultimate engagement and realism, pushing the boundaries of Roblox aviation."
    />
  </div>

  <div id="shop" data-section="shop">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "product-1",          name: "Apex Predator Jet",          price: "R$ 1,200",          variant: "Legendary",          imageSrc: "http://img.b2bpic.net/free-photo/view-spaceship-from-future_23-2150675461.jpg",          imageAlt: "Apex Predator Jet"},
        {
          id: "product-2",          name: "Stealth Interceptor",          price: "R$ 950",          variant: "Rare",          imageSrc: "http://img.b2bpic.net/free-photo/spacecraft-natural-landscape_23-2151903092.jpg",          imageAlt: "Stealth Interceptor Jet"},
        {
          id: "product-3",          name: "Desert Camo Livery",          price: "R$ 250",          variant: "Cosmetic",          imageSrc: "http://img.b2bpic.net/free-photo/painted-colourful-yellow-water-with-powder_23-2148016552.jpg",          imageAlt: "Desert Camo Livery"},
        {
          id: "product-4",          name: "Afterburner Boost",          price: "R$ 400",          variant: "Upgrade",          imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-style-clouds-light_23-2151058898.jpg",          imageAlt: "Afterburner Boost Effect"},
        {
          id: "product-5",          name: "VIP Hangar Access",          price: "R$ 700",          variant: "Pass",          imageSrc: "http://img.b2bpic.net/free-photo/view-bedroom-with-futuristic-decor-style_23-2151152274.jpg",          imageAlt: "VIP Hangar"},
        {
          id: "product-6",          name: "Advanced Radar System",          price: "R$ 300",          variant: "Upgrade",          imageSrc: "http://img.b2bpic.net/free-photo/control-table-spacecraft-from-inside_23-2151828204.jpg",          imageAlt: "Advanced Radar System"},
      ]}
      title="Expand Your Hangar"
      description="Unlock a formidable fleet of premium jets, exclusive liveries, and powerful upgrades to dominate the skies and customize your experience."
    />
  </div>

  <div id="stats" data-section="stats">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "metric-1",          value: "5M+",          title: "Total Flights",          description: "Over five million flights logged by our dedicated pilots.",          icon: Globe,
        },
        {
          id: "metric-2",          value: "250K+",          title: "Active Pilots",          description: "A quarter-million active players taking to the skies regularly.",          icon: Users,
        },
        {
          id: "metric-3",          value: "100K+",          title: "Discord Members",          description: "A thriving community discussing tactics and sharing experiences.",          icon: MessageCircle,
        },
      ]}
      title="Our Community's Achievements"
      description="Join thousands of pilots dominating the skies and breaking new records daily. Be part of a rapidly growing flight community!"
    />
  </div>

  <div id="community" data-section="community">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Roblox Streamers",        "Gaming Legends",        "Pro Pilots Guild",        "Community Hub",        "Alpha Squad",        "Aero Enthusiasts",        "Flight Crew"]}
      title="Featured & Endorsed"
      description="Proudly recognized and played by top Roblox creators, gaming communities, and flight simulation enthusiasts worldwide."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "testimonial-1",          name: "AcePilotGamer",          role: "Pro Player",          company: "Roblox",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/friends-looking-together-their-pictures-phone_23-2148529057.jpg",          imageAlt: "AcePilotGamer"},
        {
          id: "testimonial-2",          name: "SkyHighHero",          role: "Streamer",          company: "Roblox",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/girl-nightclub-listening-somebody-while-sitting-table_158595-4343.jpg",          imageAlt: "SkyHighHero"},
        {
          id: "testimonial-3",          name: "FlightFanatic",          role: "Community Mod",          company: "Roblox",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-man-with-gaming-headset-playing-multiplayer-online-action-game-streaming-gameplay-professional-pc-setup-gamer-looking-computer-screen-while-talking-team-members-tournament_482257-49310.jpg",          imageAlt: "FlightFanatic"},
        {
          id: "testimonial-4",          name: "JetJockey",          role: "Content Creator",          company: "Roblox",          rating: 4,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-professional-bearded-video-gamer-front-his-pc_482257-31725.jpg",          imageAlt: "JetJockey"},
        {
          id: "testimonial-5",          name: "AviatorAddict",          role: "Veteran Player",          company: "Roblox",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/sportive-young-man-holding-using-phone_23-2148203547.jpg",          imageAlt: "AviatorAddict"},
      ]}
      title="What Our Pilots Are Saying"
      description="Hear directly from our passionate community about their exhilarating experiences and why Jet Sim is their top choice for flight simulation on Roblox."
    />
  </div>

  <div id="faqs" data-section="faqs">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",          title: "How do I play Jet Sim?",          content: "Jet Sim is available exclusively on Roblox. Search for 'Jet Sim' in the Roblox game library, click to play, and follow the in-game tutorial to get started. It's free to play, with optional in-game purchases to enhance your experience."},
        {
          id: "faq-2",          title: "What are the system requirements for Jet Sim?",          content: "Jet Sim runs on any device that supports Roblox, including PC, Mac, mobile, and Xbox. For the best experience, we recommend a stable internet connection and a device with reasonable processing power. Graphics settings can be adjusted in-game to suit your hardware."},
        {
          id: "faq-3",          title: "How can I report a bug or suggest a feature?",          content: "We welcome all feedback! Join our official Discord server to report bugs, suggest new features, or connect with other pilots. Our dedicated development team actively monitors the server for community input and aims to implement popular suggestions."},
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to common questions about Jet Sim, gameplay, technical support, and community involvement."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="discord" data-section="discord">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"}}
      tag="Stay Connected"
      title="Join Our Elite Pilot Discord Community"
      description="Get exclusive updates, interact directly with our developers, participate in community events, and connect with fellow pilots from around the globe. Your journey to flight mastery starts here!"
      buttons={[
        {
          text: "Join Our Discord",          href: "https://discord.gg/your-jetsim-discord"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Jet Sim"
      columns={[
        {
          title: "About",          items: [
            {
              label: "Our Game",              href: "#about"},
            {
              label: "Features",              href: "#features"},
            {
              label: "Updates",              href: "#"},
          ],
        },
        {
          title: "Community",          items: [
            {
              label: "Discord",              href: "https://discord.gg/your-jetsim-discord"},
            {
              label: "Roblox Group",              href: "https://www.roblox.com/groups/your-group-id"},
            {
              label: "Testimonials",              href: "#testimonials"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "FAQs",              href: "#faqs"},
            {
              label: "Contact Us",              href: "#discord"},
            {
              label: "Bug Report",              href: "#"},
          ],
        },
        {
          title: "Shop",          items: [
            {
              label: "Jets",              href: "#shop"},
            {
              label: "Upgrades",              href: "#shop"},
            {
              label: "Game Passes",              href: "#shop"},
          ],
        },
      ]}
      copyrightText="© 2024 Jet Sim. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}