"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TeamCardFive from '@/components/sections/team/TeamCardFive';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="small"
        sizing="mediumLargeSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="gradient-bordered"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "Products",
          id: "/products",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x51310"
      logoAlt="SKIN CARE Logo"
      brandName="SKIN CARE"
    />
  </div>

  <div id="contact-form" data-section="contact-form">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Get In Touch"
      title="We'd Love to Hear From You"
      description="Have questions about our products or your order? Reach out to our dedicated support team."
      inputPlaceholder="Your Email Address"
      buttonText="Send Message"
      termsText="By sending a message, you agree to our Privacy Policy and Terms of Service."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      team={[
        {
          id: "dr-elara",
          name: "Dr. Elara Vance",
          role: "Chief Dermatologist",
          imageSrc: "http://img.b2bpic.net/free-photo/young-female-smiling-woman-looking-away-smile_197531-33093.jpg",
          imageAlt: "Dr. Elara Vance",
        },
        {
          id: "dr-marcus",
          name: "Dr. Marcus Thorne",
          role: "Lead Formulator",
          imageSrc: "http://img.b2bpic.net/free-photo/diverse-team-engineer-architects-working-modern-cad-program_482257-19170.jpg",
          imageAlt: "Dr. Marcus Thorne",
        },
        {
          id: "ms-sierra",
          name: "Ms. Sierra Brooks",
          role: "Product Manager",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-female-teacher-showing-students-lesson-online-class_23-2148680491.jpg",
          imageAlt: "Ms. Sierra Brooks",
        },
      ]}
      title="Meet Our Skincare Experts"
      description="Our team of dermatologists and formulation specialists are passionate about healthy skin."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoSrc="http://img.b2bpic.net/free-photo/black-white-beauty-product_23-2151307248.jpg"
      logoAlt="SKIN CARE Footer Logo"
      logoText="SKIN CARE"
      columns={[
        {
          title: "Products",
          items: [
            {
              label: "Face Care",
              href: "/products#face",
            },
            {
              label: "Hand Care",
              href: "/products#hand",
            },
            {
              label: "Foot Care",
              href: "/products#foot",
            },
            {
              label: "All Products",
              href: "/products",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Our Philosophy",
              href: "#",
            },
            {
              label: "Contact Us",
              href: "/contact",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
            {
              label: "Cookie Policy",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 SKIN CARE. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
