"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';

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="contact-us" data-section="contact-us">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Let's Create Something Amazing"
      description="I'm always open to new challenges and collaborations. Reach out to discuss your next motion design or UI/UX project."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email",
          required: true,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Tell me about your project...",
        rows: 5,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/arrangement-different-colored-plastic-bags_23-2148829865.jpg"
      imageAlt="Abstract contact background"
      mediaAnimation="opacity"
      mediaPosition="right"
      buttonText="Send Message"
    />
  </div>

  <div id="metric" data-section="metric">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="My Impact & Reach"
      tag="Global Collaboration"
      metricsAnimation="slide-up"
      metrics={[
        {
          id: "contact-m-1",
          value: "100+",
          description: "Happy Clients Worldwide",
        },
        {
          id: "contact-m-2",
          value: "500+",
          description: "Successful Projects",
        },
        {
          id: "contact-m-3",
          value: "10M+",
          description: "Users Reached",
        },
        {
          id: "contact-m-4",
          value: "98%",
          description: "Project Completion Rate",
        },
        {
          id: "contact-m-5",
          value: "5+",
          description: "Awards Won",
        },
      ]}
    />
  </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>
  );
}
