"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';

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="hero" data-section="hero">
      <HeroOverlayTestimonial
      title="Crafting Immersive Digital Experiences"
      description="Bringing ideas to life with seamless motion and captivating UI design."
      testimonials={[
        {
          name: "Sarah Chen",
          handle: "@TechInnovate",
          testimonial: "Their motion design transformed our app, making it truly intuitive and delightful for users. Exceeded all expectations!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-black-t-shirt-happy-excited-showing-thumbs-up-standing-green-wall_141793-81905.jpg",
        },
        {
          name: "David Lee",
          handle: "@CreativeStudio",
          testimonial: "An incredible talent! The animations brought a new level of sophistication to our brand identity project. Highly recommend.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg",
        },
        {
          name: "Emily White",
          handle: "@GrowthMarketer",
          testimonial: "The UI animations significantly boosted user engagement and conversions on our platform. A true expert in the field.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/photographer-fixing-overexposed-pictures-desktop-computer_482257-104114.jpg",
        },
        {
          name: "Michael Brown",
          handle: "@ProductLaunch",
          testimonial: "Responsive, creative, and a pleasure to work with. Our product launch video's motion graphics were outstanding.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/glad-hipster-guy-wears-glasses-has-gentle-smile-face-reads-good-news-newspaper-spare-time-waits-order-cafeteria-fond-press-handsome-man-interested-fresh-events-country_273609-29256.jpg",
        },
        {
          name: "Jessica Green",
          handle: "@DesignForward",
          testimonial: "Consistently delivers top-tier motion design that aligns perfectly with our vision. A valuable partner for any project.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-business-people-have-talk-coffee-break-office_93675-133587.jpg",
        },
        {
          name: "Daniel Kim",
          handle: "@StartupSpark",
          testimonial: "From concept to execution, the animation work was flawless, creating a truly memorable user journey for our MVP.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-glasses-freelancer-sitting-cafe-with-laptop-drinking-coffee-pointing-fingers_1258-314116.jpg",
        },
      ]}
      tagAnimation="slide-up"
      buttonAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
          alt: "Client 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg",
          alt: "Client 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/user-profile-front-side-with-white-background_187299-40009.jpg",
          alt: "Client 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-camera-with-crossed-arms-happy-confident-satisfied-expression-lateral-view_1194-633413.jpg",
          alt: "Client 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/elegant-young-businesswoman-posing_329181-11490.jpg",
          alt: "Client 5",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/colorful-bubbles-cyan-background_23-2148205192.jpg"
      imageAlt="Abstract UI motion design background"
    />
  </div>

  <div id="feature-highlight" data-section="feature-highlight">
      <FeatureCardTwentyOne
      useInvertedBackground={true}
      title="Seamless Motion & Intuitive Design"
      description="I specialize in creating fluid animations and responsive user interfaces that elevate the digital experience."
      accordionItems={[
        {
          id: "f1",
          title: "Advanced UI/UX Animation",
          content: "Crafting pixel-perfect animations that guide users and enhance usability across all devices.",
        },
        {
          id: "f2",
          title: "Responsive Cross-Platform UI",
          content: "Designing and implementing adaptive interfaces that look and perform beautifully on any screen size or operating system.",
        },
        {
          id: "f3",
          title: "Brand-Centric Visual Storytelling",
          content: "Transforming brand narratives into compelling visual journeys through dynamic motion graphics and interactive elements.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/light-leak-overlay-effect-with-blur-blue-light-leak-noisy-retro-film_474888-8016.jpg"
      imageAlt="Motion graphic UI animation showcase"
      mediaAnimation="slide-up"
      mediaPosition="right"
    />
  </div>

  <div id="client-social-proof" data-section="client-social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Tech Solutions Inc.",
        "Creative Minds Studio",
        "Digital Growth Agency",
        "Innovate Ventures",
        "Pixel Perfect Corp.",
        "Global Design Hub",
        "FutureTech Partners",
      ]}
      title="Trusted by Leading Brands"
      description="Collaborating with innovative companies to bring their digital visions to life through exceptional motion and UI design."
      speed={60}
    />
  </div>

  <div id="home-testimonials" data-section="home-testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Alex Johnson",
          role: "CEO",
          company: "InnovateX",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-cheerful-caucasian-woman-showing-thumbs-up-approval-smiling-pleased-like-praise-s_1258-146590.jpg",
        },
        {
          id: "t2",
          name: "Maria Rodriguez",
          role: "Head of Product",
          company: "Dynamic Apps",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-3571.jpg",
        },
        {
          id: "t3",
          name: "Ben Carter",
          role: "Marketing Director",
          company: "VisualBrand",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/focused-videographer-producer-working-movie-production-editing-film-design_482257-19397.jpg",
        },
        {
          id: "t4",
          name: "Sophia Lee",
          role: "Lead UX Designer",
          company: "UserFlow Studio",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/customer-experience-creative-collage_23-2149346504.jpg",
        },
        {
          id: "t5",
          name: "Omar Hassan",
          role: "CTO",
          company: "Quantum Solutions",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/interracial-group-young-hipsters-using-modern-gadgets-coffee-shop-business-friendship-startup-teamwork-coworking-process-concept_273609-648.jpg",
        },
      ]}
      kpiItems={[
        {
          value: "99%",
          label: "Client Satisfaction",
        },
        {
          value: "500+",
          label: "Projects Delivered",
        },
        {
          value: "10+",
          label: "Years Experience",
        },
      ]}
      title="Hear From My Valued Clients"
      description="Discover how my motion and UI design expertise has helped businesses achieve their creative and strategic goals."
    />
  </div>

  <div id="feature" data-section="feature">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      title="My Creative Process at a Glance"
      description="From initial concept to final polish, a structured approach ensures every animation delivers impact and clarity."
      showStepNumbers={true}
      features={[
        {
          title: "Discovery & Ideation",
          description: "Understanding project goals, target audience, and core message to brainstorm visual concepts.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/manager-watches-tablet-with-greenscreen_482257-76577.jpg",
            imageAlt: "Manager watches tablet",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/corporate-business-line-graph-report_53876-120736.jpg",
            imageAlt: "Corporate business line graph report",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/colorful-bubbles-cyan-background_23-2148205192.jpg",
          imageAlt: "Manager watches tablet with greenscreen",
        },
        {
          title: "Design & Prototyping",
          description: "Translating ideas into wireframes, storyboards, and interactive prototypes for feedback.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/sales-graph-tablet-screen_1262-3819.jpg",
            imageAlt: "Sales graph on tablet screen",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/financial-broker-analyzing-stock-trade-market-computer-using-exchange-hedge-fund-statistics-create-investment-profit-entrepreneur-working-with-forex-real-time-sales-trend-handheld-shot_482257-40951.jpg",
            imageAlt: "Financial broker analyzing stock",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
          imageAlt: "Manager watches tablet with greenscreen",
        },
        {
          title: "Animation & Refinement",
          description: "Bringing designs to life with fluid motion, paying attention to timing, easing, and visual hierarchy.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-using-tablet_53876-14784.jpg",
            imageAlt: "Businesswoman using tablet",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/illustrator-tools-arrangement_23-2150268023.jpg",
            imageAlt: "Illustrator tools arrangement",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg",
          imageAlt: "Manager watches tablet with greenscreen",
        },
      ]}
    />
  </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>
  );
}
