"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="small"
        sizing="largeSmallSizeLargeTitles"
        background="noiseDiagonalGradient"
        cardStyle="inset"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Features",
          id: "features",
        },
        {
          name: "Shop",
          id: "products",
        },
        {
          name: "Testimonials",
          id: "testimonials",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="AuraTech"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCentered
      background={{
        variant: "sparkles-gradient",
      }}
      title="The Future of Sensory Tech"
      description="Experience unparalleled luxury with our latest neural-sync innovation. Designed for the elite, built for the future."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/abstract-reflections-background_1017-2644.jpg",
          alt: "AuraTech Launch",
        },
        {
          src: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139322.jpg",
          alt: "Blurred night lights",
        },
        {
          src: "http://img.b2bpic.net/free-photo/reflections-abstract-background_1017-2648.jpg",
          alt: "Reflections abstract background",
        },
        {
          src: "http://img.b2bpic.net/free-photo/3d-render-network-technology-background-with-connecting-lines-dots_1048-14613.jpg",
          alt: "3D render of a network technology background with connecting lines and dots",
        },
        {
          src: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-315237.jpg",
          alt: "Abstract geometric background shapes or texture.",
        },
      ]}
      buttons={[
        {
          text: "Explore Collection",
          href: "#products",
        },
        {
          text: "Learn More",
          href: "#about",
        },
      ]}
      buttonAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardEight
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Neural Sync",
          description: "Seamless integration with your subconscious.",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037196.jpg",
        },
        {
          title: "Quantum Audio",
          description: "Unmatched sonic clarity across all spectra.",
          imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-sale_23-2152027241.jpg",
        },
        {
          title: "Haptic Precision",
          description: "Feel the interface respond to you.",
          imageSrc: "http://img.b2bpic.net/free-photo/ice-cube-with-water-drops_628469-366.jpg",
        },
        {
          title: "Adaptive Shielding",
          description: "Protecting your privacy at the data core.",
          imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-neon-sale_23-2152027238.jpg",
        },
        {
          title: "Energy Efficient",
          description: "High performance with low carbon footprint.",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-glowing-red-shield-with-lightning-bolt-icon-cybersecurity-protection_84443-91345.jpg",
        },
      ]}
      title="Engineered for Excellence"
      description="Unrivaled performance integrated into every detail of our hardware."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Aura Headset",
          price: "$1,299",
          imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074279.jpg",
        },
        {
          id: "p2",
          name: "Aura Watch",
          price: "$899",
          imageSrc: "http://img.b2bpic.net/free-photo/elderly-woman-checking-website-stock-find-items-store-mall_482257-88626.jpg",
        },
        {
          id: "p3",
          name: "Aura Interface",
          price: "$4,999",
          imageSrc: "http://img.b2bpic.net/free-photo/modern-business-desk-with-virtual-reality-headset_23-2148513458.jpg",
        },
        {
          id: "p4",
          name: "Aura Lens",
          price: "$2,199",
          imageSrc: "http://img.b2bpic.net/free-photo/black-silver-headphones-black-textile_417767-485.jpg",
        },
        {
          id: "p5",
          name: "Aura Console",
          price: "$5,499",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-using-virtual-reality-technology-receive-video-recommendations-delivered-instantly-user_482257-136504.jpg",
        },
        {
          id: "p6",
          name: "Aura Beacon",
          price: "$599",
          imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-concept_23-2151896832.jpg",
        },
      ]}
      title="Premium Collection"
      description="Discover our most sought-after technological achievements."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          title: "Exceptional",
          quote: "The most advanced tech I have ever used.",
          name: "Sarah Johnson",
          role: "CEO",
          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13573.jpg",
        },
        {
          id: "2",
          title: "Game Changer",
          quote: "A complete shift in luxury standards.",
          name: "David Kim",
          role: "CTO",
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-night-city-lights_23-2149024762.jpg",
        },
        {
          id: "3",
          title: "Pure Magic",
          quote: "Seamlessly fits into my workflow.",
          name: "Emily Chen",
          role: "Designer",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",
        },
        {
          id: "4",
          title: "Future proof",
          quote: "Worth every single penny of investment.",
          name: "Mark Wilson",
          role: "Investor",
          imageSrc: "http://img.b2bpic.net/free-photo/photo-young-redhead-bearded-man-white-shirt-reading-book-cafeteria_171337-10019.jpg",
        },
        {
          id: "5",
          title: "Top Tier",
          quote: "Stunning design, impeccable performance.",
          name: "Alice Brown",
          role: "Tech Lead",
          imageSrc: "http://img.b2bpic.net/free-photo/neon-portrait-man-wearing-glasses_158595-7929.jpg",
        },
      ]}
      title="Client Experiences"
      description="What industry leaders say about our ecosystem."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "99.9%",
          title: "System Uptime",
          description: "Absolute reliability.",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-connections-background-flowing-dots-with-shallow-depth-field_1048-11868.jpg",
        },
        {
          id: "m2",
          value: "24/7",
          title: "Neural Support",
          description: "Instant assistance.",
          imageSrc: "http://img.b2bpic.net/free-photo/technology-concept-with-futuristic-element_23-2151910973.jpg",
        },
        {
          id: "m3",
          value: "15ms",
          title: "Response Latency",
          description: "Near-instantaneous speed.",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-low-poly-plexus-design-shallow-depth-field-modern-communication_1048-12682.jpg",
        },
      ]}
      title="Performance By Numbers"
      description="Proven results for the discerning professional."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "How does Neural Sync work?",
          content: "It utilizes high-fidelity sensors to map cognitive input.",
        },
        {
          id: "f2",
          title: "Is it waterproof?",
          content: "Our devices are rated for extreme conditions.",
        },
        {
          id: "f3",
          title: "What is the warranty?",
          content: "All units come with a lifetime guarantee.",
        },
        {
          id: "f4",
          title: "Do you ship internationally?",
          content: "Yes, we ship to most major global cities.",
        },
        {
          id: "f5",
          title: "Can I return the product?",
          content: "Returns are accepted within 30 days of purchase.",
        },
      ]}
      title="Common Questions"
      description="Answers to our most frequently asked queries."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "rotated-rays-animated-grid",
      }}
      title="Connect With Us"
      description="Ready to experience the next evolution?"
      tag="Get In Touch"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="AuraTech"
      columns={[
        {
          title: "Product",
          items: [
            {
              label: "Hardware",
              href: "#products",
            },
            {
              label: "Software",
              href: "#",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#",
            },
            {
              label: "Careers",
              href: "#",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy",
              href: "#",
            },
            {
              label: "Terms",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
