"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="mediumLarge"
        background="noiseDiagonalGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      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="Abdulboriy"
      button={{
        text: "Download CV",
        href: "http://img.b2bpic.net/free-photo/team-recruiters-selecting-candidates-based-their-resumes_482257-107037.jpg",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{
        variant: "plain",
      }}
      title="Assalomu alekum!\nMening ismim Abdulboriy"
      description="Men PDP junior sergeli filyalida fronted yonalishida oqiman. Passionate about crafting beautiful and functional web experiences."
      buttons={[
        {
          text: "View My Work",
          href: "#projects",
        },
        {
          text: "Download CV",
          href: "http://img.b2bpic.net/free-photo/team-recruiters-selecting-candidates-based-their-resumes_482257-107037.jpg",
        },
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EyZXLIq8xH3aoRftk1JNpiBqOL/uploaded-1781152828469-k7shzrv3.png"
      imageAlt="Abdulboriy Portrait"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
          alt: "Team member 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiling-corporate-manager-sitting-with-hands-clasped-outside-office_662251-2057.jpg",
          alt: "Team member 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-confident-businesswoman_107420-84872.jpg",
          alt: "Team member 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-transgender-wearing-cool-jacket_23-2149105437.jpg",
          alt: "Team member 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/woman-with-jacket-suit_1139-493.jpg",
          alt: "Team member 5",
        },
      ]}
      avatarText="Join our network"
      marqueeItems={[
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/network-connection-graphic-overlay-background-laptop-screen_53876-124151.jpg",
          alt: "Network connection",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/scientific-biochemistry-genetics-engineering-concept_53876-15285.jpg",
          alt: "Scientific Biochemistry",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/abstract-kaleidoscope-light-backdrop_23-2147881457.jpg",
          alt: "Abstract kaleidoscope",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/3d-rendered-blue-menu-icon-within-circle_187299-47754.jpg",
          alt: "3D menu icon",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/retro-computer-icon-isolated_53876-71278.jpg",
          alt: "Retro computer",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      title="About Me"
      description="I'm a passionate frontend developer from PDP Junior Sergeli branch, dedicated to building engaging and user-friendly web interfaces. With a strong foundation in modern web technologies, I love transforming ideas into pixel-perfect digital experiences that users love."
      bulletPoints={[
        {
          title: "Responsive Design",
          description: "Building layouts that look great on any device, ensuring a seamless user experience across all screen sizes.",
        },
        {
          title: "Interactive UIs",
          description: "Creating dynamic and intuitive user interfaces that engage visitors and enhance their interaction with web applications.",
        },
        {
          title: "Performance Optimization",
          description: "Optimizing web applications for speed and efficiency, delivering fast-loading and smooth-running digital solutions.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/happy-girl-is-working-laptop-girl-with-laptop-emotion-concept_169016-65965.jpg"
      imageAlt="Developer working on laptop"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="skills" data-section="skills">
      <FeatureCardSix
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "React.js",
          description: "Building dynamic and single-page applications with a component-based architecture.",
          imageSrc: "http://img.b2bpic.net/free-photo/atomic-molecule-life-science-study-experiment-graphic_53876-147646.jpg",
          imageAlt: "React Logo",
        },
        {
          title: "HTML & CSS",
          description: "Crafting semantic markup and styling pixel-perfect designs with modern CSS techniques.",
          imageSrc: "http://img.b2bpic.net/free-photo/push-pin-icon-right-side_187299-39571.jpg",
          imageAlt: "HTML CSS Logos",
        },
        {
          title: "TypeScript",
          description: "Enhancing code quality and maintainability with strong typing in large-scale applications.",
          imageSrc: "http://img.b2bpic.net/free-photo/person-front-computer-working-html_23-2150040416.jpg",
          imageAlt: "TypeScript Logo",
        },
        {
          title: "Tailwind CSS",
          description: "Rapidly building custom user interfaces with a utility-first CSS framework for efficiency.",
          imageSrc: "http://img.b2bpic.net/free-photo/bookmark-front-side_187299-39200.jpg",
          imageAlt: "Tailwind CSS Logo",
        },
      ]}
      title="My Core Skills"
      description="Proficient in a range of frontend technologies and passionate about continuous learning and adopting new tools."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "E-commerce Platform",
          price: "View Project",
          imageSrc: "http://img.b2bpic.net/free-photo/network-connection-graphic-overlay-background-computer-screen_53876-132239.jpg",
          imageAlt: "E-commerce website screenshot",
        },
        {
          id: "p2",
          name: "Personal Portfolio",
          price: "View Project",
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345422.jpg",
          imageAlt: "Portfolio website screenshot",
        },
        {
          id: "p3",
          name: "Interactive Blog Site",
          price: "View Project",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-female-student-doing-distance-learning-course-using-laptop-studying_1258-281889.jpg",
          imageAlt: "Blog website screenshot",
        },
        {
          id: "p4",
          name: "Admin Dashboard",
          price: "View Project",
          imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg",
          imageAlt: "Admin Dashboard screenshot",
        },
        {
          id: "p5",
          name: "Marketing Landing Page",
          price: "View Project",
          imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913289.jpg",
          imageAlt: "Landing page screenshot",
        },
        {
          id: "p6",
          name: "Social Media Clone",
          price: "View Project",
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-sitting-together_23-2149103066.jpg",
          imageAlt: "Social media clone screenshot",
        },
      ]}
      title="Recent Projects"
      description="A selection of my latest work, showcasing my development and design capabilities across various domains."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          title: "Outstanding dedication",
          quote: "Abdulboriy is a highly dedicated and proactive developer. His ability to quickly grasp complex concepts and deliver clean code is impressive. A true asset to any team! His contributions were invaluable.",
          name: "Sarah Johnson",
          role: "Project Manager",
          imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",
          imageAlt: "Sarah Johnson",
        },
        {
          id: "2",
          title: "Exceptional problem-solver",
          quote: "I was consistently impressed by Abdulboriy's problem-solving skills. He tackles challenges head-on and always finds elegant solutions. He improved our workflow significantly.",
          name: "Michael Chen",
          role: "Senior Developer",
          imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-charming-female-isolated_176474-79209.jpg",
          imageAlt: "Michael Chen",
        },
        {
          id: "3",
          title: "Detail-oriented and reliable",
          quote: "Abdulboriy pays great attention to detail, ensuring that every project is polished and meets all requirements. He is a reliable and valuable team member, always delivering on time.",
          name: "Emily Rodriguez",
          role: "UI/UX Designer",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-model-sexy-stylish-man-dressed-is-blue-suit-fashion-hipster-male-posing-near-white-interior-studio_158538-25099.jpg",
          imageAlt: "Emily Rodriguez",
        },
        {
          id: "4",
          title: "Great team player",
          quote: "Working with Abdulboriy was a pleasure. He's collaborative, communicative, and always willing to help out. Highly recommend! He fostered a positive team environment.",
          name: "David Kim",
          role: "Frontend Lead",
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-working-home_23-2148162641.jpg",
          imageAlt: "David Kim",
        },
        {
          id: "5",
          title: "Passionate about learning",
          quote: "Abdulboriy's passion for learning new technologies is evident in his work. He's constantly improving and bringing fresh ideas to the table, which benefits the entire team.",
          name: "Jessica Lee",
          role: "Software Engineer",
          imageSrc: "http://img.b2bpic.net/free-photo/joyful-freelancer-dressed-casual-t-shirt-sitting-front-laptop-looking-smiling-with-cheerful-expression-after-successful-morning-work-enjoying-sunny-day-outdoor-cafe_273609-6602.jpg",
          imageAlt: "Jessica Lee",
        },
        {
          id: "6",
          title: "Highly skilled developer",
          quote: "Abdulboriy delivered a project with exceptional quality and efficiency. His code is clean, maintainable, and highly performant. A truly talented developer!",
          name: "Robert Green",
          role: "CTO",
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg",
          imageAlt: "Robert Green",
        },
      ]}
      title="What People Say"
      description="Kind words from colleagues and clients who have experienced my work and collaboration firsthand."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "React",
        "Next.js",
        "Tailwind CSS",
        "TypeScript",
        "Node.js",
        "MongoDB",
        "Git",
        "VS Code",
      ]}
      title="Tech Stack & Tools"
      description="The foundational technologies and platforms I commonly leverage to build robust and scalable web applications."
      speed={40}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",
          title: "What are your primary frontend skills?",
          content: "My primary frontend skills include React.js, Next.js, HTML5, CSS3, JavaScript (ES6+), and TypeScript. I am also proficient with modern frameworks like Tailwind CSS.",
        },
        {
          id: "faq2",
          title: "Are you available for freelance projects?",
          content: "Currently, I am focusing on my studies and gaining experience through junior roles. However, I'm open to discussing small, impactful projects. Please contact me to discuss your needs.",
        },
        {
          id: "faq3",
          title: "What is your development process?",
          content: "My process typically involves understanding requirements, planning the architecture, developing responsive and interactive UIs, testing, and continuous iteration based on feedback. I prioritize clean code and user experience.",
        },
        {
          id: "faq4",
          title: "Can you work with design mockups?",
          content: "Yes, I am experienced in translating design mockups (from Figma, Adobe XD, etc.) into pixel-perfect, functional web interfaces while ensuring responsiveness and accessibility.",
        },
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Find answers to common questions about my skills, availability, and how I approach new projects."
      faqsAnimation="slide-up"
      textPosition="left"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Get in touch"
      title="Let's Connect & Collaborate"
      description="I'm always open to new opportunities, collaborations, and learning experiences. Feel free to reach out to discuss your project or just say hello!"
      inputPlaceholder="Your email address"
      buttonText="Send Message"
      termsText="By clicking Send Message, you agree to my privacy policy and terms."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Abdulboriy"
      columns={[
        {
          title: "Navigation",
          items: [
            {
              label: "Home",
              href: "#hero",
            },
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Projects",
              href: "#projects",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Connect",
          items: [
            {
              label: "LinkedIn",
              href: "#",
            },
            {
              label: "GitHub",
              href: "#",
            },
            {
              label: "Email",
              href: "#",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Abdulboriy. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
