"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TeamCardSix from '@/components/sections/team/TeamCardSix';

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="blog-posts" data-section="blog-posts">
      <BlogCardOne
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      title="Latest Insights & Articles"
      description="Exploring trends, techniques, and thoughts on motion design, UI/UX, and creative technology."
      blogs={[
        {
          id: "b1",
          category: "UI/UX",
          title: "The Art of Microinteractions in UI Design",
          excerpt: "Discover how subtle animations can significantly enhance user experience and delight.",
          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-asynchronous-work-concept_23-2150892037.jpg",
          imageAlt: "Microinteractions in UI Design",
          authorName: "My Name",
          authorAvatar: "http://img.b2bpic.net/free-photo/young-handsome-man-grey-shirt-looking-up-thinking-positive-smiling-broadly_141793-55034.jpg",
          date: "Oct 26, 2024",
        },
        {
          id: "b2",
          category: "Motion Graphics",
          title: "Embracing Apple Motion Design Principles for iOS",
          excerpt: "A deep dive into creating fluid and intuitive animations inspired by Apple's design philosophy.",
          imageSrc: "http://img.b2bpic.net/free-photo/mobile-settings-closeup_116348-6.jpg",
          imageAlt: "Apple Motion Design Principles",
          authorName: "My Name",
          authorAvatar: "http://img.b2bpic.net/free-photo/young-beautiful-woman-with-curly-hair-isolated_273609-48328.jpg",
          date: "Oct 19, 2024",
        },
        {
          id: "b3",
          category: "Tools & Workflow",
          title: "Optimizing Your Animation Workflow with Figma & Principle",
          excerpt: "Tips and tricks for a seamless animation workflow, from design to prototyping.",
          imageSrc: "http://img.b2bpic.net/free-photo/graphic-designer-gaming-industry-talking-detail-with-his-colleague-analyzing-3d-design-level-explaining-production-creative-ideas-game-creators-working-videogame-illustration-company-office_482257-28160.jpg",
          imageAlt: "Figma & Principle Workflow",
          authorName: "My Name",
          authorAvatar: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586561.jpg",
          date: "Oct 12, 2024",
        },
      ]}
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardSix
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      title="Meet Our Contributors"
      description="The minds behind the articles, sharing their expertise in motion design and UI/UX."
      members={[
        {
          id: "blog-c-1",
          name: "Alex Rivera",
          role: "Motion Design Lead",
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-confident-man_1098-18449.jpg",
        },
        {
          id: "blog-c-2",
          name: "Maya Singh",
          role: "UI/UX Specialist",
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-glasses_23-2148766932.jpg",
        },
        {
          id: "blog-c-3",
          name: "Liam Chen",
          role: "Interactive Prototyper",
          imageSrc: "http://img.b2bpic.net/free-photo/videographer-smiling-camera-working-computer-editing-video-footage-audio-app-sitting-mo_482257-2649.jpg",
        },
        {
          id: "blog-c-4",
          name: "Sofia Morales",
          role: "Creative Technologist",
          imageSrc: "http://img.b2bpic.net/free-photo/content-female-illustrator-keeps-both-hands-chin-looks-happily-camera-makes-sketches-notepad-dressed-casual-clothing-drinks-takeaway-coffee-isolated-pink-wall_273609-29132.jpg",
        },
        {
          id: "blog-c-5",
          name: "Ethan Black",
          role: "Visual Storyteller",
          imageSrc: "http://img.b2bpic.net/free-photo/african-rastafarian-male-smiles-looks-camera-standing-with-his-arms-crossed-studio-portrait-blue-background_613910-3671.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>
  );
}
