"use client";

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

export default function ProductsPage() {
  const productsData = [
    {
      id: "product-1",      name: "Organic Herbal Blend Tea",      price: "$20.00",      imageSrc: "http://img.b2bpic.net/free-photo/top-view-spices-wooden-bowls_23-2148776472.jpg",      imageAlt: "Organic Herbal Blend Tea"},
    {
      id: "product-2",      name: "Detox Superfood Powder",      price: "$20.00",      imageSrc: "http://img.b2bpic.net/free-photo/arrangement-delicious-food-ingredients_23-2148869888.jpg",      imageAlt: "Detox Superfood Powder"},
    {
      id: "product-3",      name: "Premium Sea Moss Gel",      price: "$20.00",      imageSrc: "http://img.b2bpic.net/free-photo/still-life-beauty-products-based-regenerative-agriculture_23-2150721376.jpg",      imageAlt: "Premium Sea Moss Gel"},
    {
      id: "product-4",      name: "Immunity Booster Tincture",      price: "$20.00",      imageSrc: "http://img.b2bpic.net/free-photo/mugs-near-cinnamon-plants-nuts-board_23-2148081011.jpg",      imageAlt: "Immunity Booster Tincture"},
    {
      id: "product-5",      name: "Calming Chamomile Infusion",      price: "$20.00",      imageSrc: "http://img.b2bpic.net/free-photo/autumn-still-life-with-cup-tea-candles-cookies-knitted-elements_169016-45077.jpg",      imageAlt: "Calming Chamomile Infusion"},
    {
      id: "product-6",      name: "Energy & Focus Capsules",      price: "$20.00",      imageSrc: "http://img.b2bpic.net/free-photo/close-up-medical-capsules-glass_23-2148455855.jpg",      imageAlt: "Energy & Focus Capsules"},
    {
      id: "product-7",      name: "Herbal Detox Tea",      price: "$20.00",      imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-medicinal-spices-herbs_23-2148776490.jpg",      imageAlt: "Herbal Detox Tea"},
    {
      id: "product-8",      name: "Maca Root Powder",      price: "$20.00",      imageSrc: "http://img.b2bpic.net/free-photo/maca-root-powder-wooden-bowl_23-2150774219.jpg",      imageAlt: "Maca Root Powder"},
    {
      id: "product-9",      name: "Spirulina Powder",      price: "$20.00",      imageSrc: "http://img.b2bpic.net/free-photo/bowl-spirulina-powder_23-2148714041.jpg",      imageAlt: "Spirulina Powder"},
    {
      id: "product-10",      name: "Ashwagandha Capsules",      price: "$20.00",      imageSrc: "http://img.b2bpic.net/free-photo/ashwagandha-root_23-2149021208.jpg",      imageAlt: "Ashwagandha Capsules"}
  ];

  const updatedNavItems = [
    { name: "Home", id: "/" },
    { name: "About", id: "#about" },
    { name: "Products", id: "/products" },
    { name: "Education", id: "#education" },
    { name: "Testimonials", id: "#testimonials" },
    { name: "Contact", id: "#contact" },
  ];

  const footerColumns = [
    {
      title: "Shop",      items: [
        { label: "Herbal Teas", href: "/products" },
        { label: "Herbal Powders", href: "/products" },
        { label: "Sea Moss Blends", href: "/products" },
        { label: "Remedies & Roots", href: "/products" },
      ],
    },
    {
      title: "Learn",      items: [
        { label: "Our Story", href: "#about" },
        { label: "Herbal Benefits", href: "#features" },
        { label: "Wellness Education", href: "#education" },
        { label: "FAQ", href: "#faq" },
      ],
    },
    {
      title: "Connect",      items: [
        { label: "Contact Us", href: "#contact" },
        { label: "Shipping & Returns", href: "#" },
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="small"
        sizing="mediumLargeSizeLargeTitles"
        background="noise"
        cardStyle="glass-elevated"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            navItems={updatedNavItems}
            brandName="The Vegan Marie"
          />
        </div>

        <div id="products-page-content" data-section="products-page-content">
          <ProductCardThree
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={productsData}
            title="Our Full Product Collection"
            description="Discover all our premium herbal products, each carefully crafted to support your wellness journey for a flat price of $20.00."
            tag="Shop All"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseCard
            logoText="The Vegan Marie"
            columns={footerColumns}
            copyrightText="© 2024 The Vegan Marie. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
