"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function ProductsPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="small"
        sizing="largeSmallSizeMediumTitles"
        background="noise"
        cardStyle="inset"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              { name: "Products", id: "/products" },
              { name: "About", id: "/about" },
              { name: "Manufacturing", id: "/#features" },
              { name: "Contact", id: "/contact" },
            ]}
            brandName="Plásticos Kame"
            button={{ text: "Get Quote", href: "/contact" }}
          />
        </div>

        <div id="socialProof" data-section="socialProof">
          <SocialProofOne
            names={["GlobalPharma", "AutoCorp Solutions", "CosmoTech", "ConsumerGoods Group", "Logistics Pro", "TechFlow", "BioIndustries"]}
            title="Trusted by Industry Leaders"
            description="Our clients represent the cutting edge of global supply chain excellence."
            useInvertedBackground={false}
            textboxLayout="default"
            className="py-16"
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardFour
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            useInvertedBackground={true}
            textboxLayout="default"
            title="Product Catalog"
            description="Explore our premium line of high-durability plastic containers, closures, and industrial components."
            products={[]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterMedia
            imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-ventilation-system_23-2149281305.jpg?_wi=2"
            logoText="Plásticos Kame"
            columns={[
              { title: "Platform", items: [{ label: "Shop", href: "/products" }, { label: "About", href: "/about" }, { label: "Custom Solutions", href: "/#features" }] },
              { title: "Company", items: [{ label: "Inquiry", href: "/contact" }, { label: "Careers", href: "#" }, { label: "Support", href: "#" }] },
              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }, { label: "Certifications", href: "#" }] },
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}