"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Award, BookOpen, BoxSelect, CircuitBoard, Code, Cpu, Diamond, Film, GitFork, Globe, Infinity, Lightbulb, MessageSquare, Plane, Settings, Sparkles, SquareStack, User, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeMediumTitles"
        background="floatingGradient"
        cardStyle="solid"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Overview",          id: "#hero"},
        {
          name: "About",          id: "#about"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Projects",          id: "#projects"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n48fht"
      logoAlt="AstroVerse 5D Logo"
      brandName="AstroVerse 5D"
      bottomLeftText="Explore the Cosmos"
      bottomRightText="experience@astroverse.com"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-animated"}}
      title="Unleash Your Senses with AstroVerse 5D"
      description="Experience reality redefined. Dive into immersive worlds inspired by anime montages and breathtaking space animations, crafted with unparalleled visual fidelity and dynamic storytelling."
      tag="The Next Dimension of Entertainment"
      tagIcon={Sparkles}
      tagAnimation="slide-up"
      buttons={[
        {
          text: "Explore Experiences",          href: "#projects"},
        {
          text: "Join Our Community",          href: "#contact"},
      ]}
      buttonAnimation="slide-up"
      carouselItems={[
        {
          id: "carousel-item-1",          imageSrc: "http://img.b2bpic.net/free-photo/illustration-rain-futuristic-city_23-2151406575.jpg",          imageAlt: "Futuristic anime cityscape"},
        {
          id: "carousel-item-2",          imageSrc: "http://img.b2bpic.net/free-photo/galaxy-planets-digital-art_23-2151727737.jpg",          imageAlt: "Spaceship traveling through nebula"},
        {
          id: "carousel-item-3",          imageSrc: "http://img.b2bpic.net/free-photo/literary-fantasy-character_23-2151863450.jpg",          imageAlt: "5D anime character in abstract environment"},
        {
          id: "carousel-item-4",          imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-vr-headset-operational-base_53876-101151.jpg",          imageAlt: "Advanced virtual reality interface"},
        {
          id: "carousel-item-5",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-bright-purple-sphere_23-2148235889.jpg",          imageAlt: "Abstract geometric light particles in cosmic void"},
        {
          id: "carousel-item-6",          imageSrc: "http://img.b2bpic.net/free-photo/anime-style-galaxy-background_23-2151133886.jpg",          imageAlt: "Anime eye reflecting a collapsing star"},
      ]}
      autoPlay={true}
      autoPlayInterval={5000}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={true}
      imagePosition="right"
      title="Redefining Immersive Storytelling"
      description="AstroVerse 5D pushes the boundaries of perception, combining cutting-edge technology with cinematic artistry. Our experiences engage all five senses, creating a profound connection to narrative worlds. Prepare for a journey beyond imagination."
      tag="About AstroVerse"
      tagIcon={Globe}
      tagAnimation="blur-reveal"
      bulletPoints={[
        {
          title: "Multi-Sensory Engagement",          description: "Engage sight, sound, touch, smell, and even motion for true immersion.",          icon: Code,
        },
        {
          title: "Anime-Inspired Universes",          description: "Explore worlds brought to life with dynamic animation and rich character design.",          icon: Sparkles,
        },
        {
          title: "Pioneering 5D Technology",          description: "Leveraging advanced haptics, environmental effects, and volumetric displays.",          icon: Zap,
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/abstract-shapes-blue-wallpaper_1017-2733.jpg"
      imageAlt="Abstract representation of 5 Dimensions"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Global Immersive Networks",          description: "Connect with users worldwide in shared, persistent 5D spaces.",          bentoComponent: "globe"
        },
        {
          title: "Orbiting Dimensional Gates",          description: "Access various narrative branches and alternate realities seamlessly.",          bentoComponent: "orbiting-icons",          centerIcon: Diamond,
          items: [
            {
              icon: BoxSelect,
              ring: 1,
            },
            {
              icon: Plane,
              ring: 2,
            },
            {
              icon: SquareStack,
              ring: 3,
            },
            {
              icon: Infinity,
              ring: 1,
            },
            {
              icon: GitFork,
              ring: 2,
            },
          ]
        },
        {
          title: "Dynamic Scenario Generation",          description: "AI-driven storytelling adapts to your choices, creating truly unique journeys.",          bentoComponent: "3d-card-grid",          items: [
            {
              name: "Adaptive AI",              icon: Cpu,
            },
            {
              name: "Generative Worlds",              icon: CircuitBoard,
            },
            {
              name: "Personalized Narratives",              icon: User,
            },
            {
              name: "Emergent Lore",              icon: BookOpen,
            },
          ],
          centerIcon: Lightbulb
        },
      ]}
      title="The Core of Our 5D Ecosystem"
      description="Our unique blend of technology and artistry creates unforgettable experiences that transcend traditional media. Explore the innovative features that bring our digital worlds to life."
      tag="Advanced Capabilities"
      tagIcon={Settings}
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardOne
      animationType="scale-rotate"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          name: "Nebula Echoes",          price: "Interactive Journey",          imageSrc: "http://img.b2bpic.net/free-photo/woman-playing-games-vr-set-indoors_23-2148513444.jpg",          imageAlt: "Nebula Echoes concept art",          rating: 5,
        },
        {
          id: "p2",          name: "Chrono Drift",          price: "Time-Bending Adventure",          imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568844.jpg",          imageAlt: "Chrono Drift concept art",          rating: 5,
        },
        {
          id: "p3",          name: "Quantum Bloom",          price: "Generative Art Installation",          imageSrc: "http://img.b2bpic.net/free-photo/couple-getting-married-beach_23-2151158054.jpg",          imageAlt: "Quantum Bloom concept art",          rating: 4,
        },
        {
          id: "p4",          name: "Echoes of Elysium",          price: "Multi-Sensory Story",          imageSrc: "http://img.b2bpic.net/free-photo/natural-rock-formations-landscape_23-2151723068.jpg",          imageAlt: "Echoes of Elysium concept art",          rating: 5,
        },
        {
          id: "p5",          name: "Void Weaver",          price: "Cosmic Horror Experience",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-posing-with-universe-projection-texture_23-2149581305.jpg",          imageAlt: "Void Weaver concept art",          rating: 4,
        },
        {
          id: "p6",          name: "SynthWave Drift",          price: "Audiovisual Journey",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-creative-illustration_23-2151980675.jpg",          imageAlt: "SynthWave Drift concept art",          rating: 5,
        },
      ]}
      title="Our Groundbreaking 5D Experiences"
      description="Explore the diverse worlds and captivating narratives we've crafted. Each project is a unique gateway to another dimension, offering unparalleled immersion."
      tag="The AstroVerse Portfolio"
      tagIcon={Film}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "500K+",          title: "Total Interactions",          description: "Engaging experiences across all platforms.",          imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301541.jpg",          imageAlt: "Data network visualization"},
        {
          id: "m2",          value: "98%",          title: "Immersion Rating",          description: "Users consistently report deep, realistic immersion.",          imageSrc: "http://img.b2bpic.net/free-photo/colorful-gradient-background-with-neon-led-light_53876-103676.jpg",          imageAlt: "Holographic brain interface"},
        {
          id: "m3",          value: "100+",          title: "Unique Dimensions",          description: "A vast library of worlds and realities to explore.",          imageSrc: "http://img.b2bpic.net/free-photo/door-leading-magical-world_23-2151038280.jpg",          imageAlt: "Geometric planes and portals"},
        {
          id: "m4",          value: "Global",          title: "Community Reach",          description: "Connecting enthusiasts from every corner of the globe.",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-universe-texture-projection_23-2149512129.jpg",          imageAlt: "Anime character with celestial map"},
      ]}
      title="Measurable Impact, Infinite Potential"
      description="Our innovations aren't just conceptual; they deliver tangible results and unparalleled user engagement across all dimensions."
      tag="Our Achievements"
      tagIcon={Award}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      animationType="depth-3d"
      testimonials={[
        {
          id: "1",          name: "Anya Sharma",          role: "Tech Enthusiast",          company: "DigitalFrontiers",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100195.jpg"},
        {
          id: "2",          name: "Kenji Tanaka",          role: "Game Developer",          company: "PixelNexus Studios",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/rendering-portrait-anime-doctor_23-2151151870.jpg"},
        {
          id: "3",          name: "Elara Vance",          role: "Concept Artist",          company: "Ethereal Brush",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568837.jpg"},
        {
          id: "4",          name: "Marcus 'Synapse' Lee",          role: "VR Entrepreneur",          company: "InfiniteSight VR",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-watching-rocket-launch-futuristic-city_23-2151999272.jpg"},
        {
          id: "5",          name: "Dr. Lena Petrova",          role: "Student Researcher",          company: "Chronos Institute",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/anime-character-singing_23-2151103470.jpg"},
        {
          id: "6",          name: "David 'Dimension' Kim",          role: "VR Designer",          company: "Reality Weavers",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-scene-with-people-doing-regular-tasks-anime-style_23-2151002550.jpg"},
      ]}
      title="Voices from the 5th Dimension"
      description="Don't just take our word for it. Hear from users who have journeyed into AstroVerse 5D and had their perceptions transformed."
      tag="What Our Explorers Say"
      tagIcon={MessageSquare}
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Cosmic Dreams Studios",        "Dimension Forge Gaming",        "Neural Flow AI",        "Quantum Leap VFX",        "Ethereal Realms VR",        "Flux Wave Simulations",        "Infinite Horizon Studios",        "NextGen Innovations"]}
      title="Trusted by Innovators & Visionaries"
      description="We collaborate with leading studios and tech pioneers to bring you the future of immersive experiences."
      tag="Our Partners"
      tagIcon={Users}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",          title: "What exactly is '5D' technology?",          content: "5D technology integrates advanced visual and auditory experiences with haptic feedback, environmental effects (like wind, scent), and motion simulation, engaging more senses for profound immersion."},
        {
          id: "faq-2",          title: "How is AstroVerse 5D different from VR?",          content: "While VR focuses primarily on sight and sound, 5D expands upon it by adding physical sensations, environmental elements, and dynamic motion, creating a more holistic and believable simulated reality."},
        {
          id: "faq-3",          title: "What kind of content can I expect?",          content: "We offer a diverse range, from anime-inspired narrative adventures and cosmic explorations to interactive art installations and mind-bending simulations. Our content continually expands with new experiences."},
        {
          id: "faq-4",          title: "Do I need special equipment?",          content: "Some experiences may require specialized haptic suits or motion platforms, often available at our partner locations. We also develop content compatible with advanced home VR setups enhanced with environmental peripherals."},
        {
          id: "faq-5",          title: "How can I contribute to the AstroVerse community?",          content: "Join our forums, participate in beta tests, submit fan art, or even apply to be a content creator. We're always looking for passionate individuals to help shape the future of 5D."},
      ]}
      sideTitle="Your Questions, Answered"
      sideDescription="Find quick answers to common inquiries about our 5D experiences, technology, and community."
      faqsAnimation="slide-up"
      textPosition="left"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Connect with the Cosmos"
      description="Ready to dive into the next dimension or have a partnership inquiry? Reach out to us, and let's create something extraordinary together."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
        },
      ]}
      textarea={{
        name: "message",        placeholder: "Your Message",        rows: 5,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/senior-people-attending-videocall-meeting-with-relatives-hospital-grandparents-using-laptop-computer-chat-with-family-online-remote-videoconference-internet-conversation_482257-33895.jpg"
      imageAlt="Cosmic connection hub"
      mediaAnimation="slide-up"
      mediaPosition="right"
      buttonText="Send Message"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Experiences",          items: [
            {
              label: "Nebula Echoes",              href: "#projects"},
            {
              label: "Chrono Drift",              href: "#projects"},
            {
              label: "Quantum Bloom",              href: "#projects"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Partners",              href: "#social-proof"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Community Guidelines",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n48fht"
      logoAlt="AstroVerse 5D Logo"
      logoText="AstroVerse 5D"
      copyrightText="© 2024 AstroVerse 5D. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
