"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterBase from '@/components/sections/footer/FooterBase';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="largeSmall"
        background="floatingGradient"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "About",
          id: "/about",
        },
        {
          name: "Gallery",
          id: "/gallery",
        },
        {
          name: "Track Order",
          id: "/track-order",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      brandName="Malavida"
    />
  </div>

  <div id="product-gallery" data-section="product-gallery">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "pg-product-1",
          name: "The Serenity Dress",
          price: "$150.00",
          imageSrc: "http://img.b2bpic.net/free-photo/female-model-being-photographed-with-grunge-environment-urban-exploration_23-2150943455.jpg",
          imageAlt: "Elegant black dress",
        },
        {
          id: "pg-product-2",
          name: "Urban Explorer Hoodie",
          price: "$95.00",
          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-walks-paris-concept-happy-travel-photo_1321-3488.jpg",
          imageAlt: "Grey hoodie",
        },
        {
          id: "pg-product-3",
          name: "Aurora Bomber Jacket",
          price: "$190.00",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-winter-cloths_1303-16964.jpg",
          imageAlt: "Women's stylish jacket",
        },
        {
          id: "pg-product-4",
          name: "Classic Tailored Shirt",
          price: "$75.00",
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-model-man-stylish-summer-clothes-posing-sunglasses_158538-14713.jpg",
          imageAlt: "Men's tailored shirt",
        },
        {
          id: "pg-product-5",
          name: "Vibrant Abstract Tee",
          price: "$60.00",
          imageSrc: "http://img.b2bpic.net/free-photo/vintage-collage-surfers-road_23-2149438105.jpg",
          imageAlt: "Colorful graphic tee",
        },
        {
          id: "pg-product-6",
          name: "Autumn Knit Cardigan",
          price: "$110.00",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-defensive-lab-coat-standing-white-wall_114579-73009.jpg",
          imageAlt: "Knitted sweater",
        },
        {
          id: "pg-product-7",
          name: "Rebel Leather Jacket",
          price: "$250.00",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-demonstrating-upper-cloths_1303-24573.jpg",
          imageAlt: "Leather jacket",
        },
        {
          id: "pg-product-8",
          name: "Minimalist A-Line Dress",
          price: "$135.00",
          imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-shiny-long-dress_343629-136.jpg",
          imageAlt: "Minimalist black dress",
        },
      ]}
      title="Our Full Collection"
      description="Explore the diverse range of Malavida apparel, where every piece is a statement of style and comfort."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Vogue",
        "GQ",
        "ELLE",
        "Harper's Bazaar",
        "Fashion Week",
        "Zalando",
        "ASOS",
      ]}
      title="As Seen In & Collaborations"
      description="Malavida is proud to be recognized by leading fashion authorities and trusted by trendsetters worldwide."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "/about",
            },
            {
              label: "Our Story",
              href: "/about",
            },
            {
              label: "Careers",
              href: "#",
            },
          ],
        },
        {
          title: "Shop",
          items: [
            {
              label: "Collections",
              href: "/gallery",
            },
            {
              label: "New Arrivals",
              href: "/gallery",
            },
            {
              label: "Sale",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Contact Us",
              href: "/contact",
            },
            {
              label: "Track Order",
              href: "/track-order",
            },
            {
              label: "FAQ",
              href: "/contact#faq",
            },
          ],
        },
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/fashion-accessories-logo-collection_23-2148888014.jpg"
      logoAlt="Malavida Logo"
      logoText="Malavida"
      copyrightText="© 2024 Malavida. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
