"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="mediumLarge"
        background="grid"
        cardStyle="inset"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "About Me",
          id: "/about",
        },
        {
          name: "Projects",
          id: "/projects",
        },
        {
          name: "Blog",
          id: "/blog",
        },
        {
          name: "Contact Us",
          id: "/contact",
        },
      ]}
      brandName="My Portfolio"
      bottomLeftText="Motion Design Portfolio"
      bottomRightText="hello@myportfolio.com"
    />
  </div>

  <div id="about-me" data-section="about-me">
      <TextSplitAbout
      useInvertedBackground={true}
      title="About My Motion Design Journey"
      description={[
        "With a passion for bringing digital interfaces to life, I specialize in creating engaging and intuitive motion graphics for UI/UX.",
        "My journey began with a fascination for how subtle animations can transform user perception and interaction. Over the years, I've honed my skills in various design and animation tools, focusing on delivering impactful visual experiences that align with brand goals.",
        "I believe in a collaborative approach, working closely with clients to understand their vision and translate it into fluid, responsive designs. My goal is to not just animate, but to craft meaningful interactions that captivate and delight users, making every digital touchpoint memorable.",
      ]}
    />
  </div>

  <div id="metrics-achievements" data-section="metrics-achievements">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "150+",
          title: "Projects Completed",
          description: "Successfully delivered a wide range of UI animation and motion design projects for diverse clients.",
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-neon-lights-wonder-wheel_23-2148328075.jpg",
        },
        {
          id: "m2",
          value: "95%",
          title: "Client Retention Rate",
          description: "Building lasting partnerships through consistent quality and a deep understanding of client needs.",
          imageSrc: "http://img.b2bpic.net/free-photo/business-analytics-financial-technology-concept-generative-ai_8829-2894.jpg",
        },
        {
          id: "m3",
          value: "30%",
          title: "Avg. Engagement Boost",
          description: "Motion-enhanced UIs have consistently shown significant improvements in user engagement metrics.",
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-sketching-web-design_23-2149930947.jpg",
        },
      ]}
      title="Achievements & Impact"
      description="Highlights of my contributions and the results achieved through innovative motion design."
    />
  </div>

  <div id="my-skills" data-section="my-skills">
      <TeamCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      members={[
        {
          id: "s1",
          name: "Motion Graphics",
          role: "Key Skill",
          description: "Expert in After Effects, Principle, and Figma for creating fluid and engaging UI animations.",
          imageSrc: "http://img.b2bpic.net/free-photo/image-happy-beautiful-young-social-media-influencer-female-vlogger-records-video-digital_1258-254726.jpg",
        },
        {
          id: "s2",
          name: "UI/UX Design",
          role: "Core Competency",
          description: "Skilled in Figma, Sketch, and Adobe XD for crafting intuitive and visually appealing user interfaces.",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",
        },
        {
          id: "s3",
          name: "Interactive Prototyping",
          role: "Specialized Area",
          description: "Building high-fidelity prototypes with interactive elements to test and validate user flows.",
          imageSrc: "http://img.b2bpic.net/free-photo/photo-woman-with-stylish-haircut-round-big-earrings-white-t-shirt-light-denim-jacket-smiling-pink_197531-19230.jpg",
        },
      ]}
      title="My Expertise & Tools"
      description="Proficient in a wide array of design principles and software, ensuring high-quality output for every project."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="My Portfolio"
      columns={[
        {
          title: "Explore",
          items: [
            {
              label: "About Me",
              href: "/about",
            },
            {
              label: "Projects",
              href: "/projects",
            },
            {
              label: "Blog",
              href: "/blog",
            },
          ],
        },
        {
          title: "Connect",
          items: [
            {
              label: "Contact Us",
              href: "/contact",
            },
            {
              label: "LinkedIn",
              href: "#",
            },
            {
              label: "Dribbble",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 My Portfolio. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
