"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterBase from '@/components/sections/footer/FooterBase';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';

export default function ProductsPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSmall"
        background="noise"
        cardStyle="outline"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              {
                name: "Home",          id: "/"},
              {
                name: "About",          id: "#about"},
              {
                name: "Collections",          id: "/products"},
              {
                name: "Features",          id: "#features"},
              {
                name: "Testimonials",          id: "#testimonials"},
              {
                name: "FAQ",          id: "#faq"},
              {
                name: "Contact",          id: "#contact"},
            ]}
            logoSrc="http://img.b2bpic.net/free-vector/luxury-floral-perfume-logo-template-concept_23-2148467151.jpg"
            logoAlt="AromaLux Logo"
            brandName="AromaLux"
            button={{
              text: "Shop Now",        href: "/products"}}
            animateOnLoad={true}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardCarousel
            background={{
              variant: "radial-gradient"}}
            title="Our Exquisite Products"
            description="Explore a diverse range of fragrances, each a masterpiece waiting to be discovered."
            buttons={[
              {
                text: "Back to Home",          href: "/"}
            ]}
            buttonAnimation="slide-up"
            mediaItems={[
              {
                imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163167.jpg?_wi=1",          imageAlt: "Product display"
              }
            ]}
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardFour
            animationType="slide-up"
            gridVariant="three-columns-all-equal-width"
            textboxLayout="default"
            useInvertedBackground={false}
            products={[
              {
                id: "p1",          name: "Aura Bloom",          price: "$120",          variant: "Eau de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307320.jpg?_wi=2",          imageAlt: "Aura Bloom Perfume"},
              {
                id: "p2",          name: "Serenity Mist",          price: "$110",          variant: "Eau de Toilette",          imageSrc: "http://img.b2bpic.net/free-photo/swirls-foam-blue-liquid_23-2148346909.jpg?_wi=2",          imageAlt: "Serenity Mist Perfume"},
              {
                id: "p3",          name: "Ignite Elixir",          price: "$135",          variant: "Extrait de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163167.jpg?_wi=2",          imageAlt: "Ignite Elixir Perfume"},
              {
                id: "p4",          name: "Blooming Charm",          price: "$105",          variant: "Eau de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/serum-bottle-yellow-flower-arrangement_23-2149353084.jpg",          imageAlt: "Blooming Charm Perfume"},
              {
                id: "p5",          name: "Noir Allure",          price: "$140",          variant: "Extrait de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/luxury-black-perfume-bottle-with-gold-cap-dark-textured-background_84443-84117.jpg",          imageAlt: "Noir Allure Perfume"},
              {
                id: "p6",          name: "Solstice Glow",          price: "$125",          variant: "Eau de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/golden-smoke-black-screen_23-2148227231.jpg",          imageAlt: "Solstice Glow Perfume"},
            ]}
            title="Our Exquisite Collections"
            description="Explore a diverse range of fragrances, each a masterpiece waiting to be discovered."
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            columns={[
              {
                title: "Shop",          items: [
                  {
                    label: "All Fragrances",              href: "/products"},
                  {
                    label: "Gift Sets",              href: "#offerings"},
                  {
                    label: "New Arrivals",              href: "/products"},
                  {
                    label: "Discovery Sets",              href: "#offerings"},
                ],
              },
              {
                title: "Company",          items: [
                  {
                    label: "Our Story",              href: "#about"},
                  {
                    label: "Craftsmanship",              href: "#features"},
                  {
                    label: "Sustainability",              href: "#features"},
                  {
                    label: "Careers",              href: "#"},
                ],
              },
              {
                title: "Support",          items: [
                  {
                    label: "FAQ",              href: "#faq"},
                  {
                    label: "Contact Us",              href: "#contact"},
                  {
                    label: "Shipping & Returns",              href: "#"},
                  {
                    label: "Privacy Policy",              href: "#"},
                ],
              },
            ]}
            logoText="AromaLux"
            copyrightText="© 2024 AromaLux. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}