"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardFour from '@/components/sections/product/ProductCardFour';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeMediumTitles"
        background="circleGradient"
        cardStyle="inset"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "Collection",
          id: "/collection",
        },
        {
          name: "Custom Orders",
          id: "/custom-order",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      brandName="Wanda"
    />
  </div>

  <div id="product" data-section="product">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      title="New Arrivals & Limited Editions"
      description="Be the first to explore our latest handcrafted creations and exclusive pieces, designed to captivate with timeless elegance."
      products={[
        {
          id: "new-prod-1",
          name: "The Aurora Clutch",
          price: "$320",
          variant: "Evening",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-stylish-woman-holding-straw-handbag_285396-4844.jpg",
          imageAlt: "Woman wearing knitted bag - Aurora Clutch",
        },
        {
          id: "new-prod-2",
          name: "Desert Bloom Shoulder Bag",
          price: "$290",
          variant: "Daywear",
          imageSrc: "http://img.b2bpic.net/free-photo/sexy-elegant-woman-natural-beauty-fashion-style-clothes-casual-formal-suit-white-cotton-blouse-silk-pants-romantic-date-blouse-pants-party-style-glamour-model-trend-accessory-bag-dark-hair-makeup_132075-12101.jpg",
          imageAlt: "Elegant woman with Desert Bloom Shoulder Bag",
        },
        {
          id: "new-prod-3",
          name: "Celestial Crossbody",
          price: "$275",
          variant: "Versatile",
          imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-stylish-girl-with-dark-short-hair-walking-after-work-carrying-black-leather-bag-smiling-portrait-adorable-brunette-young-woman-wearing-vintage-french-clothes-having-fun-indoors_197531-3644.jpg",
          imageAlt: "Gorgeous girl with Celestial Crossbody",
        },
        {
          id: "new-prod-4",
          name: "Mystic Aura Tote",
          price: "$380",
          variant: "Statement",
          imageSrc: "http://img.b2bpic.net/free-photo/clutch-with-ghost_23-2147680167.jpg",
          imageAlt: "Clutch with ghost - Mystic Aura Tote",
        },
        {
          id: "new-prod-5",
          name: "Starlight Minaudiere",
          price: "$340",
          variant: "Glamour",
          imageSrc: "http://img.b2bpic.net/free-photo/antique-hand-bag-layout-with-place-text-jewellery-background-mockup-banner-fashion-accessories_460848-12976.jpg",
          imageAlt: "Antique Hand Bag layout - Starlight Minaudiere",
        },
        {
          id: "new-prod-6",
          name: "Pearl Dewdrop Clutch",
          price: "$300",
          variant: "Bridal",
          imageSrc: "http://img.b2bpic.net/free-photo/hand-bag-layout-with-place-text-women-s-accessories-jewellery-background-mockup-banner-fashion-accessories_460848-14712.jpg",
          imageAlt: "Hand Bag Layout - Pearl Dewdrop Clutch",
        },
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      text="Didn't find what you're looking for? Let us create a custom beaded bag just for you. Your unique style, handcrafted."
      buttons={[
        {
          text: "Start a Custom Order",
          href: "/custom-order",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Wanda",
          items: [
            {
              label: "Elevating Everyday and Event Style",
              href: "#",
            },
          ],
        },
        {
          title: "Navigation",
          items: [
            {
              label: "Home",
              href: "/",
            },
            {
              label: "Collection",
              href: "/collection",
            },
            {
              label: "Custom Orders",
              href: "/custom-order",
            },
            {
              label: "Contact",
              href: "/contact",
            },
          ],
        },
        {
          title: "Connect",
          items: [
            {
              label: "Instagram",
              href: "https://instagram.com/wandabags",
            },
            {
              label: "WhatsApp",
              href: "https://wa.me/96176813559",
            },
            {
              label: "Facebook",
              href: "https://facebook.com/wandabags",
            },
          ],
        },
      ]}
      bottomLeftText="Wanda — Where Art Meets Accessory"
      bottomRightText="© 2024 Wanda. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
