"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';

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="products-catalog" data-section="products-catalog">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={false}
      products={[
        {
          id: "face-serum",
          name: "Hydrating Face Serum",
          price: "$45.00",
          imageSrc: "http://img.b2bpic.net/free-photo/natural-cleansing-product_23-2148532755.jpg",
          imageAlt: "Hydrating Face Serum",
        },
        {
          id: "face-mask",
          name: "Radiance Face Mask",
          price: "$38.00",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-pink-bathrobe-holding-cream-blue-wall-shower-cleaning-beauty-self-care-cream_140725-65480.jpg",
          imageAlt: "Radiance Face Mask",
        },
        {
          id: "eye-cream",
          name: "Revitalizing Eye Cream",
          price: "$52.00",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-ongoing-gua-sha-face-procedure_23-2149401487.jpg",
          imageAlt: "Revitalizing Eye Cream",
        },
        {
          id: "hand-cream",
          name: "Nourishing Hand Cream",
          price: "$25.00",
          imageSrc: "http://img.b2bpic.net/free-photo/foundation-arrangement-with-dark-background_23-2148978144.jpg",
          imageAlt: "Nourishing Hand Cream",
        },
        {
          id: "hand-sanitizer",
          name: "Purifying Hand Gel",
          price: "$18.00",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-kids-washing-their-hands_23-2148501331.jpg",
          imageAlt: "Purifying Hand Gel",
        },
        {
          id: "foot-balm",
          name: "Soothing Foot Balm",
          price: "$30.00",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-female-hand-applying-sunscreen-leg_1262-4782.jpg",
          imageAlt: "Soothing Foot Balm",
        },
        {
          id: "foot-scrub",
          name: "Exfoliating Foot Scrub",
          price: "$28.00",
          imageSrc: "http://img.b2bpic.net/free-photo/young-male-doing-selfcare-routine_23-2149291785.jpg",
          imageAlt: "Exfoliating Foot Scrub",
        },
        {
          id: "body-lotion",
          name: "Silky Body Lotion",
          price: "$40.00",
          imageSrc: "http://img.b2bpic.net/free-photo/gold-gift-box-bed-bouquet-white-peonies-craft-packaging-scandivanavian-white-interior_1182-2570.jpg",
          imageAlt: "Silky Body Lotion",
        },
      ]}
      title="Our Exquisite Product Range"
      description="Discover our curated collections for radiant face, supple hands, and revitalized feet. Each product is formulated with nature's finest ingredients."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "customers",
          value: "100K+",
          title: "Happy Customers",
          items: [
            "Trusted by a global community",
            "Achieve visible results",
          ],
        },
        {
          id: "natural",
          value: "98%",
          title: "Natural Ingredients",
          items: [
            "Pure, potent & plant-based",
            "Free from harmful chemicals",
          ],
        },
        {
          id: "satisfaction",
          value: "5-Star",
          title: "Customer Satisfaction",
          items: [
            "Exceptional product reviews",
            "Dedicated support team",
          ],
        },
      ]}
      title="Results You Can See & Feel"
      description="Proudly serving our community with products that make a real difference."
      tag="Our Impact"
    />
  </div>

  <div id="faq-products" data-section="faq-products">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Are your products suitable for sensitive skin?",
          content: "Yes, all SKIN CARE products are formulated with gentle, natural ingredients and are dermatologically tested, making them suitable for most sensitive skin types.",
        },
        {
          id: "q2",
          title: "Are your products cruelty-free and vegan?",
          content: "Absolutely! We are proud to be a cruelty-free brand. Many of our products are also vegan; please check individual product descriptions for details.",
        },
        {
          id: "q3",
          title: "How long until I see results?",
          content: "Results can vary depending on individual skin type and product usage. However, many customers report visible improvements within 2-4 weeks of consistent use.",
        },
      ]}
      sideTitle="Product FAQs"
      sideDescription="Find answers to common questions about our products and your skincare routine."
      faqsAnimation="slide-up"
      textPosition="left"
    />
  </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>
  );
}
