"use client";

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function ProductsPage() {
  const navItems = [
    { name: "Features", id: "#features" },
    { name: "Solutions", id: "#solutions" },
    { name: "Pricing", id: "#pricing" },
    { name: "Documentation", id: "#documentation" },
    { name: "Products", id: "/products" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeLargeTitles"
      background="blurBottom"
      cardStyle="gradient-radial"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Marvixa"
          navItems={navItems}
          topBarButton={{ text: "Log In", href: "#" }}
          button={{ text: "Start Free", href: "#start-free" }}
        />
      </div>

      <div id="products-section" data-section="products-section">
        <ProductCardThree
          title="Explore Our Innovative Product Line."
          description="Discover the tools designed to revolutionize your project management and boost team efficiency."
          products={[
            {
              id: "product1",              name: "Marvixa Pro",              price: "$29/month",              imageSrc: "http://img.b2bpic.net/free-photo/minimal-design-digital-tablet-white-table_53876-147281.jpg",              imageAlt: "Marvixa Pro Tablet Display",              initialQuantity: 1,
              onProductClick: () => console.log('View Marvixa Pro'),
              onQuantityChange: (q) => console.log('Quantity changed for Pro:', q)
            },
            {
              id: "product2",              name: "Marvixa Enterprise Suite",              price: "Custom",              imageSrc: "http://img.b2bpic.net/free-photo/multi-ethnic-group-young-business-people-meeting-modern-office_23-2147844075.jpg",              imageAlt: "Enterprise Team Collaboration",              initialQuantity: 1,
              onProductClick: () => console.log('View Marvixa Enterprise'),
              onQuantityChange: (q) => console.log('Quantity changed for Enterprise:', q)
            },
            {
              id: "product3",              name: "Marvixa AI Integrator",              price: "$19/month",              imageSrc: "http://img.b2bpic.net/free-photo/futuristic-technological-background-with-circuit-board-elements_23-2148152504.jpg",              imageAlt: "AI Integrator Circuit Board",              initialQuantity: 1,
              onProductClick: () => console.log('View Marvixa AI Integrator'),
              onQuantityChange: (q) => console.log('Quantity changed for AI Integrator:', q)
            },
            {
              id: "product4",              name: "Marvixa Data Insights",              price: "$39/month",              imageSrc: "http://img.b2bpic.net/free-photo/abstract-binary-code-background-digital-data-processing_23-2149591461.jpg",              imageAlt: "Data Insights Dashboard",              initialQuantity: 1,
              onProductClick: () => console.log('View Marvixa Data Insights'),
              onQuantityChange: (q) => console.log('Quantity changed for Data Insights:', q)
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Integrations", href: "#" }, { label: "Testimonials", href: "#" }] },
            { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }, { label: "Blog", href: "#" }, { label: "Contact", href: "#" }] },
            { title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "Support", href: "#" }, { label: "API Reference", href: "#" }, { label: "Security", href: "#" }, { label: "Changelog", href: "#" }] },
            { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "Cookie Policy", href: "#" }, { label: "Disclaimer", href: "#" }] }
          ]}
          bottomLeftText="© 2024 Marvixa. All rights reserved."
          bottomRightText="Built with Intelligence and Precision."
        />
      </div>
    </ThemeProvider>
  );
}