"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="medium"
        background="fluid"
        cardStyle="gradient-bordered"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Skills",
          id: "#skills",
        },
        {
          name: "Projects",
          id: "#projects",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="DevPortfolio"
      button={{
        text: "Contact Me",
        href: "#contact",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCentered
      background={{
        variant: "gradient-bars",
      }}
      title="Full Stack Developer Building Modern Web Experiences"
      description="I focus on scalable, high-performance web applications using Laravel, Node.js, and React. Passionate about UI/UX and clean code."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/cartoon-woman-wearing-glasses_23-2151136885.jpg",
          alt: "Developer Portrait",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg",
          alt: "Tech Professional 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",
          alt: "Tech Professional 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg",
          alt: "Tech Professional 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151098592.jpg",
          alt: "Tech Professional 4",
        },
      ]}
      buttons={[
        {
          text: "View Projects",
          href: "#projects",
        },
        {
          text: "Contact Me",
          href: "#contact",
        },
      ]}
      buttonAnimation="slide-up"
      marqueeItems={[
        {
          type: "text",
          text: "Laravel",
        },
        {
          type: "text",
          text: "React",
        },
        {
          type: "text",
          text: "Node.js",
        },
        {
          type: "text",
          text: "Cloud Architecture",
        },
        {
          type: "text",
          text: "TypeScript",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={false}
      title="Crafting Digital Excellence"
      description="With a background in both front-end and back-end development, I bridge the gap between creative UI/UX and technical logic. I thrive on solving complex problems and delivering efficient, scalable software."
      bulletPoints={[
        {
          title: "Web App Development",
          description: "Building full-scale applications with modern tools.",
        },
        {
          title: "API Design",
          description: "Creating robust, secure RESTful API architectures.",
        },
        {
          title: "UI/UX Focus",
          description: "Designing intuitive interfaces that look great.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/still-life-office-cleaning-process_23-2149343035.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="skills" data-section="skills">
      <FeatureCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      features={[
        {
          title: "Frontend",
          description: "React, JavaScript, CSS, HTML",
          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",
        },
        {
          title: "Backend",
          description: "PHP, Laravel, Node.js, Java",
          imageSrc: "http://img.b2bpic.net/free-photo/creative-colleagues-working-new-app-design_1098-21584.jpg",
        },
        {
          title: "Database & Tools",
          description: "MySQL, Git, Postman, VS Code",
          imageSrc: "http://img.b2bpic.net/free-photo/data-center-engineer-coding-notebook-adjusting-power-settings_482257-121043.jpg",
        },
      ]}
      title="Technical Toolkit"
      description="A diverse set of technologies to build the future."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        {
          id: "1",
          name: "Laravel Management System",
          price: "Management Tool",
          imageSrc: "http://img.b2bpic.net/free-photo/financial-software-ui-pc-screen-apartment-office-desk_482257-122945.jpg",
        },
        {
          id: "2",
          name: "Cloud Document System",
          price: "Cloud SaaS",
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-as-lawyer_23-2151054062.jpg",
        },
        {
          id: "3",
          name: "Volunteer API",
          price: "API Project",
          imageSrc: "http://img.b2bpic.net/free-photo/freelancer-working-from-apartment-office-seated-desk-using-ai-llm-chatbot_482257-127291.jpg",
        },
        {
          id: "4",
          name: "Portfolio App",
          price: "Frontend Design",
          imageSrc: "http://img.b2bpic.net/free-photo/multicultural-team-women-leaders-hold-online-conference-call_482257-123708.jpg",
        },
        {
          id: "5",
          name: "Dashboard UI",
          price: "UI Design",
          imageSrc: "http://img.b2bpic.net/free-photo/outgoing-call-calling-communication-concept_53876-125180.jpg",
        },
        {
          id: "6",
          name: "RESTful API",
          price: "Backend Logic",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-code-laptop-screen-server-hub-employees-reading-paperwork_482257-122503.jpg",
        },
      ]}
      title="Featured Work"
      description="Selected software and web projects."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",
          title: "University Education",
          content: "BSc in Computer Science with a focus on modern web development.",
        },
        {
          id: "2",
          title: "Certifications",
          content: "AWS Certified Solutions Architect & Laravel Expert Certification.",
        },
        {
          id: "3",
          title: "Professional Path",
          content: "5+ years delivering full-stack solutions for agencies and startups.",
        },
      ]}
      title="Professional Experience"
      description="A journey through my development career and training."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Alex Smith",
          date: "Jan 2024",
          title: "CEO",
          quote: "Incredible attention to detail and technical skill.",
          tag: "Web Dev",
          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/cartoon-woman-wearing-glasses_23-2151136885.jpg",
          imageAlt: "tech professional portrait",
        },
        {
          id: "2",
          name: "Sarah Lee",
          date: "Feb 2024",
          title: "CTO",
          quote: "Reliable, fast, and highly capable developer.",
          tag: "SaaS",
          avatarSrc: "http://img.b2bpic.net/free-photo/business-man-working-late-office_23-2148991380.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-cleaning-process_23-2149343035.jpg",
          imageAlt: "tech professional portrait",
        },
        {
          id: "3",
          name: "Mike Jones",
          date: "Mar 2024",
          title: "Startup Founder",
          quote: "Delivered exactly what we needed on schedule.",
          tag: "App Dev",
          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
          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: "tech professional portrait",
        },
        {
          id: "4",
          name: "Emma Brown",
          date: "Apr 2024",
          title: "Manager",
          quote: "Excellent communication and code quality.",
          tag: "Frontend",
          avatarSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/creative-colleagues-working-new-app-design_1098-21584.jpg",
          imageAlt: "tech professional portrait",
        },
        {
          id: "5",
          name: "David Wilson",
          date: "May 2024",
          title: "Freelance Client",
          quote: "Best developer experience I've had yet.",
          tag: "API",
          avatarSrc: "http://img.b2bpic.net/free-photo/pov-businessman-attending-videocall-meeting-office-using-online-videoconference-talk-consultant-about-financial-strategy-company-employee-chatting-remote-teleconference-close-up_482257-40929.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/data-center-engineer-coding-notebook-adjusting-power-settings_482257-121043.jpg",
          imageAlt: "tech professional portrait",
        },
      ]}
      title="Client Feedback"
      description="What partners and clients say about my work."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      text="Ready to bring your project to life? Let's discuss your next software challenge."
      buttons={[
        {
          text: "Email Me",
          href: "mailto:dev@portfolio.com",
        },
        {
          text: "GitHub Profile",
          href: "https://github.com",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="DevPortfolio"
      columns={[
        {
          title: "Navigation",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Projects",
              href: "#projects",
            },
          ],
        },
        {
          title: "Connect",
          items: [
            {
              label: "GitHub",
              href: "#",
            },
            {
              label: "LinkedIn",
              href: "#",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy",
              href: "#",
            },
            {
              label: "Terms",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
