"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="none"
        cardStyle="outline"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Skills",
          id: "skills",
        },
        {
          name: "Projects",
          id: "projects",
        },
        {
          name: "Testimonials",
          id: "testimonials",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Rahul"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{
        variant: "radial-gradient",
      }}
      title="Rahul, a Web Developer Specializing in React and Node.js"
      description="I build fast, user-friendly web applications that deliver exceptional digital experiences and robust functionality."
      buttons={[
        {
          text: "View Projects",
          href: "#projects",
        },
        {
          text: "Contact Me",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=1"
      imageAlt="Professional web developer workspace with code on screens"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/close-up-executive-with-white-shirt-blue-suit_1139-135.jpg",
          alt: "Professional headshot 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",
          alt: "Professional headshot 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-exhausted-workaholic-man-manager-typing-financial-strategy-using-laptop-computer-while-sitting-desk-table-business-company-office_482257-2321.jpg",
          alt: "Professional headshot 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
          alt: "Professional headshot 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
          alt: "Professional headshot 5",
        },
      ]}
      avatarText="Trusted by leading startups & agencies"
      marqueeItems={[
        {
          type: "text",
          text: "React Development",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-vector/modern-code-logo-pack_23-2148828399.jpg",
          alt: "React logo icon",
        },
        {
          type: "text",
          text: "Node.js Backend",
        },
        {
          type: "image",
          src: "asset://hero-marquee-2",
          alt: "Node.js logo icon",
        },
        {
          type: "text",
          text: "Full-stack Solutions",
        },
      ]}
      marqueeSpeed={30}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="About Me"
      description={[
        "Hi, I'm Rahul, a dedicated web developer with a passion for building innovative and efficient digital solutions. My expertise lies in crafting seamless user experiences and robust backend systems using modern technologies like React and Node.js.",
        "With a strong foundation in computer science and a continuous drive for learning, I excel at transforming complex ideas into practical, high-performance web applications. I am committed to delivering clean, scalable code and collaborating effectively to achieve project goals. My certifications in full-stack development further underscore my commitment to excellence.",
      ]}
      buttons={[
        {
          text: "View Resume",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="skills" data-section="skills">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          id: "html-css-js",
          title: "HTML, CSS, JavaScript",
          descriptions: [
            "Mastery of core web technologies for creating engaging and interactive front-end experiences.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/3d-network-particle-flow-background_1048-12212.jpg?_wi=1",
          imageAlt: "Abstract code snippets",
        },
        {
          id: "react",
          title: "React & Frontend Frameworks",
          descriptions: [
            "Extensive experience in building dynamic and responsive user interfaces with React, Next.js, and related libraries.",
          ],
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvvOk9wSQRof03bHCMu3wTm1vz/uploaded-1781071930969-lj5aivwy.png?_wi=1",
          imageAlt: "Web design interface screenshot",
        },
        {
          id: "nodejs",
          title: "Node.js & Backend Development",
          descriptions: [
            "Developing scalable and efficient server-side applications, RESTful APIs, and microservices with Node.js and Express.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/happy-pleased-young-man-employs-isolated-copy-space-home_482257-125073.jpg?_wi=1",
          imageAlt: "Multiple devices showing responsive design",
        },
        {
          id: "python",
          title: "Python & Data Tools",
          descriptions: [
            "Proficiency in Python for scripting, data analysis, web scraping, and machine learning integrations.",
          ],
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvvOk9wSQRof03bHCMu3wTm1vz/uploaded-1781071930970-6fjuqopm.jpg?_wi=1",
          imageAlt: "Web development tools",
        },
        {
          id: "databases",
          title: "Database Management",
          descriptions: [
            "Skilled in designing and managing databases including MongoDB, PostgreSQL, and MySQL for robust data storage.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/shoulder-view-african-american-startup-employee-looking-laptop-screen-with-business-analytics-charts-sitting-desk-close-focus-portable-computer-display-with-sales-results_482257-38698.jpg",
          imageAlt: "Performance graph",
        },
      ]}
      title="My Skills & Expertise"
      description="Proficient in a wide range of technologies to build robust and scalable web applications."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "project-1",
          brand: "E-commerce",
          name: "Modern Online Store",
          price: "React, Express.js",
          rating: 5,
          reviewCount: "Live Demo",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvvOk9wSQRof03bHCMu3wTm1vz/uploaded-1781071930969-ux4ilhts.png?_wi=1",
          imageAlt: "Screenshot of a modern e-commerce website",
        },
        {
          id: "project-2",
          brand: "Productivity",
          name: "Intelligent To-Do App",
          price: "React, Node.js, MongoDB",
          rating: 5,
          reviewCount: "View Code",
          imageSrc: "http://img.b2bpic.net/free-photo/cropped-hands-filling-out-online-survey-smartphone-touchscreen_1098-18940.jpg",
          imageAlt: "Screenshot of a minimalist to-do application",
        },
        {
          id: "project-3",
          brand: "Content",
          name: "Dynamic Blog Platform",
          price: "Next.js, PostgreSQL",
          rating: 5,
          reviewCount: "Explore",
          imageSrc: "http://img.b2bpic.net/free-photo/technology-coffee-internet-beverage-cafe-data-concept_53876-23193.jpg",
          imageAlt: "Screenshot of a dynamic blog platform",
        },
        {
          id: "project-4",
          brand: "Utility",
          name: "Real-time Weather App",
          price: "React, API Integration",
          rating: 4,
          reviewCount: "Live Demo",
          imageSrc: "http://img.b2bpic.net/free-photo/photo-ground-texture-pattern_58702-15809.jpg",
          imageAlt: "Screenshot of a real-time weather application",
        },
        {
          id: "project-5",
          brand: "AI/ML",
          name: "Sentiment Analysis Tool",
          price: "Python, Flask",
          rating: 5,
          reviewCount: "View Code",
          imageSrc: "http://img.b2bpic.net/free-photo/black-army-technology-specialist-troubleshooting-military-pc-systems-data-center-networks-using_482257-135445.jpg",
          imageAlt: "Screenshot of an AI/ML sentiment analysis tool",
        },
        {
          id: "project-6",
          brand: "Web Design",
          name: "Responsive Portfolio Template",
          price: "HTML, CSS, JS",
          rating: 5,
          reviewCount: "Live Demo",
          imageSrc: "http://img.b2bpic.net/free-photo/black-friday-sales-elements-composition-with-copy-space_23-2148665620.jpg",
          imageAlt: "Screenshot of a responsive portfolio template",
        },
      ]}
      title="My Recent Projects"
      description="A selection of my best work demonstrating technical proficiency and creative problem-solving across various domains."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          name: "Sarah Johnson",
          date: "May 2024",
          title: "Exceptional Web Development",
          quote: "Rahul delivered an outstanding e-commerce platform that exceeded our expectations. His attention to detail and proactive communication made the entire process smooth and efficient. Highly recommended!",
          tag: "E-commerce",
          avatarSrc: "http://img.b2bpic.net/free-photo/friendly-successful-business-lady-wearing-formal-suit-glasses-standing-with-arms-folded-smiling_74855-9932.jpg",
          avatarAlt: "Sarah Johnson",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvvOk9wSQRof03bHCMu3wTm1vz/uploaded-1781071930969-lj5aivwy.png?_wi=2",
          imageAlt: "female CEO headshot professional",
        },
        {
          id: "2",
          name: "Michael Chen",
          date: "April 2024",
          title: "Innovative Solutions",
          quote: "Rahul's creativity and technical prowess brought our complex ideas to life. The custom CRM he built is incredibly intuitive and has significantly boosted our team's productivity. A true professional.",
          tag: "Custom CRM",
          avatarSrc: "http://img.b2bpic.net/free-photo/man-solar-panels-plant-using-laptop-improve-solar-cells-efficiency_482257-119894.jpg",
          avatarAlt: "Michael Chen",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvvOk9wSQRof03bHCMu3wTm1vz/uploaded-1781071930970-6fjuqopm.jpg?_wi=2",
          imageAlt: "female CEO headshot professional",
        },
        {
          id: "3",
          name: "Emily Rodriguez",
          date: "March 2024",
          title: "Reliable and Responsive",
          quote: "Working with Rahul was a pleasure. He was always responsive, understood our needs perfectly, and delivered a beautiful, high-performing website ahead of schedule. We couldn't be happier!",
          tag: "Website Redesign",
          avatarSrc: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg",
          avatarAlt: "Emily Rodriguez",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvvOk9wSQRof03bHCMu3wTm1vz/uploaded-1781071930969-ux4ilhts.png?_wi=2",
          imageAlt: "female CEO headshot professional",
        },
        {
          id: "4",
          name: "David Kim",
          date: "February 2024",
          title: "Seamless Integration",
          quote: "Rahul integrated a complex payment gateway into our existing system with remarkable ease. His expertise ensured a seamless and secure transaction experience for our customers. Fantastic work!",
          tag: "Payment Gateway",
          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg",
          avatarAlt: "David Kim",
          imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=2",
          imageAlt: "female CEO headshot professional",
        },
        {
          id: "5",
          name: "Jessica Lee",
          date: "January 2024",
          title: "Problem Solver Extraordinaire",
          quote: "Facing a challenging bug, Rahul quickly identified the root cause and implemented an elegant solution. His problem-solving skills are top-notch, and he's an invaluable asset to any project.",
          tag: "Bug Fixing",
          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-young-student-surrounded-by-sticky-notes_273609-35273.jpg",
          avatarAlt: "Jessica Lee",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-network-particle-flow-background_1048-12212.jpg?_wi=2",
          imageAlt: "female CEO headshot professional",
        },
        {
          id: "6",
          name: "Robert Green",
          date: "December 2023",
          title: "Efficient & Professional",
          quote: "Rahul developed a powerful analytics dashboard that provides crucial insights for our business decisions. The project was handled with utmost professionalism and delivered with exceptional efficiency.",
          tag: "Data Dashboard",
          avatarSrc: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg",
          avatarAlt: "Robert Green",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-pleased-young-man-employs-isolated-copy-space-home_482257-125073.jpg?_wi=2",
          imageAlt: "female CEO headshot professional",
        },
      ]}
      title="Words from Clients"
      description="Hear what my clients have to say about working with me and the impact I've made on their projects."
    />
  </div>

  <div id="clients" data-section="clients">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Tech Solutions",
        "Innovate Hub",
        "Global Dynamics",
        "Creative Edge",
        "Digital Nexus",
        "Future Forward",
        "Synergy Labs",
        "Quantum Leap",
        "Pioneer Tech",
      ]}
      title="Trusted by Innovative Companies"
      description="Partnered with various businesses to deliver impactful digital solutions and drive growth."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq1",
          title: "What is your typical project timeline?",
          content: "Project timelines vary depending on complexity and scope. After an initial consultation, I provide a detailed estimate, typically ranging from 4 to 12 weeks for a complete web application.",
        },
        {
          id: "faq2",
          title: "Which technologies do you specialize in?",
          content: "I primarily specialize in React and Node.js for full-stack development. My stack includes Next.js, Express, MongoDB, PostgreSQL, and various cloud services.",
        },
        {
          id: "faq3",
          title: "How do you handle project revisions?",
          content: "I believe in iterative development. We'll have regular check-ins, and I include a specific number of revision rounds in the project scope to ensure your satisfaction.",
        },
        {
          id: "faq4",
          title: "Do you provide post-launch support?",
          content: "Yes, I offer various post-launch support and maintenance packages to ensure your application runs smoothly and stays up-to-date. Details can be discussed during our consultation.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-futuristic-scifi-wallpaper-with-abstract-geometric-shapes-led-laser-lights_181624-59806.jpg"
      imageAlt="Person looking at a complex problem-solving diagram"
      mediaAnimation="slide-up"
      mediaPosition="right"
      title="Frequently Asked Questions"
      description="Find answers to common questions about my services, process, and collaboration."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      tag="Contact"
      title="Let's Build Something Great Together"
      description="Ready to discuss your next project or simply want to connect? Reach out to me, and let's turn your ideas into reality."
      imageSrc="http://img.b2bpic.net/free-photo/front-view-desk-concept-with-copy-space_23-2148459701.jpg"
      imageAlt="Modern minimalist office workspace"
      mediaAnimation="slide-up"
      mediaPosition="left"
      inputPlaceholder="Enter your email address"
      buttonText="Send Message"
      termsText="By clicking Send Message, you agree to my privacy policy and terms of service."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Rahul's Portfolio"
      leftLink={{
        text: "Privacy Policy",
        href: "#",
      }}
      rightLink={{
        text: "Terms of Service",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
