"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';

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="single-blog-content" data-section="single-blog-content">
      <FeatureCardTwentyOne
      useInvertedBackground={true}
      title="The Art of Microinteractions in UI Design"
      description="Microinteractions are subtle, momentary design elements that enhance the user experience by providing feedback, communicating status, and adding a touch of delight. From a simple button hover to a loading animation, these small details collectively contribute to a polished and intuitive interface. Mastering microinteractions involves understanding psychology, timing, and visual cues to create an invisible layer of communication that guides the user effortlessly."
      accordionItems={[
        {
          id: "post-s1",
          title: "Why Microinteractions Matter",
          content: "Microinteractions provide crucial feedback, reinforce brand personality, and significantly improve the perceived responsiveness of an application. They turn mundane actions into delightful experiences, reducing user frustration and increasing engagement.",
        },
        {
          id: "post-s2",
          title: "Key Principles of Effective Microinteractions",
          content: "Effective microinteractions are timely, relevant, and subtle. They should never interrupt the user flow but rather enhance it. Consider the user's context, emotional state, and the task at hand to design interactions that feel natural and intuitive.",
        },
        {
          id: "post-s3",
          title: "Tools and Techniques for Implementation",
          content: "Modern design tools like Figma, Principle, and After Effects offer robust capabilities for creating complex microinteractions. Understanding CSS animations and JavaScript libraries also allows for seamless integration into web and mobile platforms.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-vector/icon-business-set-colorful_53876-6410.jpg"
      imageAlt="Microinteractions in UI Design"
      mediaAnimation="slide-up"
      mediaPosition="left"
    />
  </div>

  <div id="testimonial" data-section="testimonial">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      title="What Readers Say"
      description="Insights and feedback from our community on the value of these articles."
      testimonials={[
        {
          id: "blog-t-1",
          name: "Jordan Lee",
          date: "Oct 30, 2024",
          title: "Invaluable Insights!",
          quote: "This article broke down microinteractions so clearly. Truly a must-read for any UI designer looking to refine their craft.",
          tag: "Design Insight",
          avatarSrc: "http://img.b2bpic.net/free-photo/smiling-young-brunette-caucasian-girl-stands-with-closed-eyes-isolated-green-background-with-copy-space_141793-66903.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/blurred-women-gesturing-thumb-up_23-2147774835.jpg",
        },
        {
          id: "blog-t-2",
          name: "Chloe Wong",
          date: "Oct 28, 2024",
          title: "Practical & Inspiring",
          quote: "The examples and principles discussed here are directly applicable to my projects. Very inspiring!",
          tag: "UX Mastery",
          avatarSrc: "http://img.b2bpic.net/free-photo/happy-woman-with-short-hair_1308-171290.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-keeps-thumbs-up-approves-praises-something-recommends-product-smiles-happily-dressed-casually-white_273609-54887.jpg",
        },
        {
          id: "blog-t-3",
          name: "Omar Khan",
          date: "Oct 27, 2024",
          title: "Elevated My Workflow",
          quote: "After reading this, I immediately started implementing these tips. My designs feel much more polished.",
          tag: "Workflow Boost",
          avatarSrc: "http://img.b2bpic.net/free-photo/middle-aged-man-celebrating-life_23-2149070405.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/crazy-sports-man-funny-expression_1194-3318.jpg",
        },
        {
          id: "blog-t-4",
          name: "Lena Petrova",
          date: "Oct 25, 2024",
          title: "A Deep Dive",
          quote: "Finally, a comprehensive guide to microinteractions that covers both theory and practical application.",
          tag: "Design Theory",
          avatarSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-beige-turtleneck-smiling-cheerfully-showing-teeth_141793-54841.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/excited-smiling-blond-girl-happily-keeping-thumbs-up-near-with-copy-space-text-promotional-content-isolated-yellow-background-like-expression_574295-2945.jpg",
        },
        {
          id: "blog-t-5",
          name: "Raj Patel",
          date: "Oct 23, 2024",
          title: "Highly Recommended!",
          quote: "Every designer needs to understand these concepts. This article makes it easy and engaging.",
          tag: "Essential Reading",
          avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-teenage-girl-wearing-trendy-colorful-clothing-rejoicing-positive-news-looking-with-charming-smile-showing-her-perfect-white-teeth-people-lifestyle-youth-happiness_273609-8086.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/glad-brunette-young-woman-smiles-happily-keeps-thumbs-up-shows-approval-sign-satisfied-with-service-good-feedback-says-its-excellent-dressed-casual-pink-t-shirt-isolated-white-background_273609-61011.jpg",
        },
      ]}
    />
  </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>
  );
}
