"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function ProductsPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="grid"
        cardStyle="solid"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <NavbarStyleCentered
            navItems={[
                { name: "Home", id: "/" },
                { name: "About", id: "/#about" },
                { name: "Features", id: "/#features" },
                { name: "Catalog", id: "/#catalog" },
                { name: "Products", id: "/products" },
                { name: "Contact", id: "/#contact" },
            ]}
            brandName="FoodieFinder"
        />
        
        <div id="products" data-section="products" style={{ paddingTop: "100px" }}>
            <ProductCardThree
                animationType="slide-up"
                textboxLayout="default"
                gridVariant="three-columns-all-equal-width"
                useInvertedBackground={false}
                title="Our Full Product Range"
                description="Explore all our premium culinary offerings and equipment."
                products={[
                    { id: "pr1", name: "Chef's Knife", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/chef-knife-set_123.jpg" },
                    { id: "pr2", name: "Professional Pan", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/cooking-pan_456.jpg" },
                    { id: "pr3", name: "Blender Pro", price: "$250", imageSrc: "http://img.b2bpic.net/free-photo/blender_789.jpg" },
                ]}
            />
        </div>

        <FooterMedia
            imageSrc="http://img.b2bpic.net/free-photo/table-two-food-photography-recipe-idea_53876-47154.jpg"
            logoText="FoodieFinder"
            columns={[
                { title: "Company", items: [{ label: "About", href: "/#about" }, { label: "Careers", href: "#" }] },
                { title: "Resources", items: [{ label: "Blog", href: "#" }, { label: "Support", href: "#" }] },
            ]}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}
