"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { CheckCircle, Sparkles, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Services",          id: "#services"},
        {
          name: "About",          id: "#about"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQs",          id: "#faqs"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="AI / Web Agency"
      bottomLeftText="Innovation Driven"
      bottomRightText="hello@aiweb.agency"
      button={{
        text: "Get a Quote",        href: "#contact"}}
    />
  </div>

  <div id="home" data-section="home">
      <HeroCarouselLogo
      logoText="AI & Web Mastery"
      description="Building hyper-interactive digital experiences with cutting-edge AI automation. Elevating brands to Apple, Stripe, and Linear-level presence."
      buttons={[
        {
          text: "Explore Services",          href: "#services"},
        {
          text: "Get a Quote",          href: "#contact"},
      ]}
      slides={[
        {
          imageSrc: "asset://ai-core-1",          imageAlt: "Fluid 3D AI Core with Electric Blue glow"},
        {
          imageSrc: "asset://ai-core-2",          imageAlt: "Morphing 3D Torus Knot with Deep Hyper-Purple aura"},
        {
          imageSrc: "asset://ai-core-3",          imageAlt: "Dynamic Mesh Sphere with reactive light trails"},
        {
          imageSrc: "asset://ai-core-4",          imageAlt: "Abstract AI Brain model in a cybernetic style"},
        {
          imageSrc: "asset://ai-core-5",          imageAlt: "Networked 3D data visualization with blue and purple hues"},
        {
          imageSrc: "asset://ai-core-6",          imageAlt: "Interactive 3D particle cloud representing AI processing"},
      ]}
      autoplayDelay={4000}
      showDimOverlay={true}
    />
  </div>

  <div id="services" data-section="services">
      <ProductCardThree
      animationType="scale-rotate"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "1",          name: "Custom Web Development",          price: "Tailored Solutions",          imageSrc: "asset://web-dev-3d",          imageAlt: "Floating 3D wireframe grid representing web development"},
        {
          id: "2",          name: "AI Agents & Automation",          price: "Intelligent Systems",          imageSrc: "asset://ai-agents-3d",          imageAlt: "Dense constellation particle system representing AI neural networks"},
        {
          id: "3",          name: "Premium Maintenance",          price: "24/7 Support",          imageSrc: "asset://maintenance-3d",          imageAlt: "Glowing 3D mechanical ring structure for system maintenance"},
        {
          id: "4",          name: "Digital Transformation",          price: "Strategic Roadmaps",          imageSrc: "asset://digital-transform-3d",          imageAlt: "Abstract 3D data flow visualization for digital transformation"},
        {
          id: "5",          name: "Cloud Infrastructure",          price: "Scalable Deployments",          imageSrc: "asset://cloud-infra-3d",          imageAlt: "Interconnected 3D network nodes for cloud infrastructure"},
        {
          id: "6",          name: "Data Analytics & Insights",          price: "Actionable Intelligence",          imageSrc: "asset://data-analytics-3d",          imageAlt: "Complex 3D graph representing data streams and analytics"},
      ]}
      title="Our Core Services"
      description="Unlock unparalleled digital prowess with our bespoke web development and intelligent AI automation solutions."
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      title="Pioneering the Future of Digital"
      description="We are an elite team of creative technologists and engineers, dedicated to crafting bespoke web solutions and intelligent AI automations that redefine industry standards. Our passion lies in engineering seamless, high-performance digital experiences."
      bulletPoints={[
        {
          title: "Innovation-Driven",          description: "Constantly pushing boundaries with new technologies and creative approaches.",          icon: Sparkles,
        },
        {
          title: "Client-Centric",          description: "Tailoring every solution to meet unique business goals and exceed expectations.",          icon: Users,
        },
        {
          title: "Unrivaled Quality",          description: "Delivering robust, scalable, and secure applications with pixel-perfect precision.",          icon: CheckCircle,
        },
      ]}
      imageSrc="asset://about-futuristic-desk"
      imageAlt="Futuristic desk setup with holographic displays and AI interface"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardEight
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Real-time 3D Graphics",          description: "Immersive WebGL experiences with Three.js and React Three Fiber for captivating visuals.",          imageSrc: "asset://feature-3d-graphics",          imageAlt: "Abstract 3D graphic rendering on a dark background"},
        {
          title: "Framer Motion Animations",          description: "Fluid, scroll-driven, and magnetic animations that bring interfaces to life.",          imageSrc: "asset://feature-framer-motion",          imageAlt: "Animated UI elements flowing across a screen"},
        {
          title: "Optimized AI Workflows",          description: "Seamless integration of AI agents and automation for intelligent business processes.",          imageSrc: "asset://feature-ai-workflow",          imageAlt: "Diagram showing optimized AI workflow with data points"},
        {
          title: "Robust Next.js Architecture",          description: "Scalable and high-performance applications built on the leading React framework.",          imageSrc: "asset://feature-nextjs",          imageAlt: "Next.js logo integrated with code snippets"},
      ]}
      title="Advanced Interaction & Performance"
      description="Experience websites that are not just visually stunning, but also incredibly fast, secure, and intuitive. We integrate the latest technologies for unmatched user engagement."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          title: "Revolutionary Web Presence",          quote: "Our new website is a masterpiece. The interactive 3D elements and smooth animations have captivated our audience and significantly boosted engagement. Truly a game-changer!",          name: "Dr. Elena Petrova",          role: "CEO, Quantum Dynamics",          imageSrc: "asset://testimonial-1",          imageAlt: "Portrait of Dr. Elena Petrova"},
        {
          id: "2",          title: "Seamless AI Integration",          quote: "The AI automation solutions provided by the agency have streamlined our operations beyond expectation. Efficiency is up, costs are down, and our team is more productive than ever.",          name: "Markus Jensen",          role: "CTO, Synapse Innovations",          imageSrc: "asset://testimonial-2",          imageAlt: "Portrait of Markus Jensen"},
        {
          id: "3",          title: "Unmatched Design & Speed",          quote: "We needed a website that stood out, and they delivered. The attention to detail, the performance, and the unique interactive features are truly next-level.",          name: "Sophia Rodriguez",          role: "Head of Marketing, Apex Solutions",          imageSrc: "asset://testimonial-3",          imageAlt: "Portrait of Sophia Rodriguez"},
        {
          id: "4",          title: "Exceptional Partnership",          quote: "From concept to launch, the team was brilliant. Their expertise in both web development and AI is evident in every aspect of our new platform. Highly recommended!",          name: "David Chen",          role: "Founder, FutureForge",          imageSrc: "asset://testimonial-4",          imageAlt: "Portrait of David Chen"},
        {
          id: "5",          title: "Truly Transformative",          quote: "The new digital experience has transformed how our clients interact with us. It's intuitive, visually stunning, and has set a new benchmark for our industry.",          name: "Amelia White",          role: "Director of Product, InnovateX",          imageSrc: "asset://testimonial-5",          imageAlt: "Portrait of Amelia White"},
      ]}
      title="Client Success Stories"
      description="Hear directly from industry leaders who have experienced the transformative power of our digital solutions."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "GlobalTech Solutions",        "AI Innovations Hub",        "Digital Future Labs",        "Quantum Computing Inc.",        "Cybernetic Systems",        "DataStream Analytics",        "NeuralNet Ventures"]}
      title="Trusted by Industry Leaders"
      description="Our innovative solutions are adopted by forward-thinking companies across various sectors."
    />
  </div>

  <div id="faqs" data-section="faqs">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "What technologies do you specialize in for web development?",          content: "We primarily specialize in Next.js, React, Node.js, and modern frontend frameworks, ensuring robust, scalable, and high-performance web applications. We also integrate serverless architectures and cloud services like AWS and Vercel."},
        {
          id: "q2",          title: "How do your AI automation solutions work?",          content: "Our AI solutions leverage machine learning, natural language processing, and advanced algorithms to automate complex tasks, optimize workflows, and provide data-driven insights. We build custom AI agents tailored to your specific business needs."},
        {
          id: "q3",          title: "What is the typical timeline for a custom web project?",          content: "Project timelines vary based on complexity and scope. A typical custom web development project can range from 8 to 20 weeks, including discovery, design, development, testing, and deployment. We provide a detailed roadmap after our initial consultation."},
        {
          id: "q4",          title: "Do you offer post-launch support and maintenance?",          content: "Absolutely. We offer comprehensive post-launch support and maintenance packages, including bug fixes, security updates, performance monitoring, and ongoing feature development to ensure your digital assets remain cutting-edge and secure."},
        {
          id: "q5",          title: "What sets your agency apart from competitors?",          content: "Our unique blend of artistic creativity and technical mastery, especially in interactive 3D WebGL experiences and bespoke AI automation, sets us apart. We don't just build websites; we craft immersive digital ecosystems that captivate and convert."},
      ]}
      title="Frequently Asked Questions"
      description="Find answers to common inquiries about our web development and AI automation services."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient"}}
      tag="Get in Touch"
      title="Let's Build the Future Together"
      description="Ready to transform your digital presence? Reach out to discuss your project and discover how our Web Development and AI Automation expertise can elevate your brand."
      imageSrc="asset://contact-futuristic-connection"
      imageAlt="Futuristic network connection with glowing lines"
      mediaAnimation="opacity"
      mediaPosition="left"
      inputPlaceholder="Your Email Address"
      buttonText="Send Inquiry"
      termsText="By submitting, you agree to our Privacy Policy and Terms of Service."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="asset://footer-background-3d"
      imageAlt="Abstract 3D background with electric blue and purple gradients"
      logoText="AI / Web Agency"
      columns={[
        {
          title: "Services",          items: [
            {
              label: "Web Development",              href: "#services"},
            {
              label: "AI Automation",              href: "#services"},
            {
              label: "Maintenance",              href: "#services"},
            {
              label: "Digital Strategy",              href: "#services"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Careers",              href: "#"},
            {
              label: "Testimonials",              href: "#testimonials"},
            {
              label: "Blog",              href: "#"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
            {
              label: "Cookie Policy",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 AI / Web Agency. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}