"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Award } from "lucide-react";

const navItems = [
  { name: "Products", id: "products" },
  { name: "Categories", id: "categories" },
  { name: "Deals", id: "best-sellers" },
  { name: "About", id: "about" },
  { name: "Contact", id: "contact" },
];

const navButton = {
  text: "Shop Now",
  href: "/products",
};

export default function ProductsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="noise"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={navButton}
          brandName="3DStore"
        />
      </div>

      <div id="all-products" data-section="all-products">
        <ProductCardFour
          title="Complete Product Collection"
          description="Explore our entire catalog of premium products with interactive 3D visualization and detailed product information."
          tag="Shop All"
          tagIcon={Award}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          carouselMode="buttons"
          products={[
            {
              id: "1",
              name: "Premium Wireless Headphones",
              price: "$299",
              variant: "Matte Black - 2 Colors",
              imageSrc: "http://img.b2bpic.net/free-photo/modern-round-wireless-speaker-with-slick-design-showcased-geometric-podium_23-2150808056.jpg",
              imageAlt: "Premium Wireless Headphones",
              isFavorited: false,
            },
            {
              id: "2",
              name: "Designer Watch Collection",
              price: "$599",
              variant: "Silver Steel - 4 Colors",
              imageSrc: "http://img.b2bpic.net/free-photo/abstract-store-with-futuristic-concept-architecture_23-2150861970.jpg",
              imageAlt: "Designer Watch Collection",
              isFavorited: false,
            },
            {
              id: "3",
              name: "Advanced Camera Lens",
              price: "$1,299",
              variant: "Professional Grade - 3 Variants",
              imageSrc: "http://img.b2bpic.net/free-photo/view-vacuum-cleaner-robot-flat-surface-floor_23-2151736729.jpg",
              imageAlt: "Advanced Camera Lens",
              isFavorited: false,
            },
            {
              id: "4",
              name: "Luxury Leather Backpack",
              price: "$449",
              variant: "Cognac Brown - 5 Colors",
              imageSrc: "http://img.b2bpic.net/free-photo/minimal-composition-beauty-products_23-2148961332.jpg",
              imageAlt: "Luxury Leather Backpack",
              isFavorited: false,
            },
            {
              id: "5",
              name: "Smart Home Hub Pro",
              price: "$199",
              variant: "Charcoal - 2 Colors",
              imageSrc: "http://img.b2bpic.net/free-photo/minimal-black-friday-arrangement_23-2148666987.jpg",
              imageAlt: "Smart Home Hub Pro",
              isFavorited: false,
            },
            {
              id: "6",
              name: "Premium Sunglasses",
              price: "$349",
              variant: "Classic Aviator - 6 Colors",
              imageSrc: "http://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349189.jpg",
              imageAlt: "Premium Sunglasses",
              isFavorited: false,
            },
            {
              id: "7",
              name: "Flagship Smartphone",
              price: "$999",
              variant: "Graphite - Ultra",
              imageSrc: "http://img.b2bpic.net/free-photo/modern-round-wireless-speaker-with-slick-design-showcased-geometric-podium_23-2150808056.jpg",
              imageAlt: "Flagship Smartphone",
            },
            {
              id: "8",
              name: "Gaming Laptop",
              price: "$2,499",
              variant: "RGB Edition - Pro",
              imageSrc: "http://img.b2bpic.net/free-photo/abstract-store-with-futuristic-concept-architecture_23-2150861970.jpg",
              imageAlt: "Gaming Laptop",
            },
          ]}
        />
      </div>

      <div id="product-stats" data-section="product-stats">
        <MetricCardTwo
          title="Why Choose Our Products"
          description="Industry-leading quality, innovation, and customer satisfaction metrics."
          tag="Product Quality"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          metrics={[
            { id: "1", value: "12K+", description: "Active Products" },
            { id: "2", value: "98%", description: "In Stock" },
            { id: "3", value: "5★", description: "Avg Rating" },
            { id: "4", value: "2-3 Days", description: "Fast Delivery" },
          ]}
        />
      </div>

      <div id="bestseller-section" data-section="bestseller-section">
        <ProductCardFour
          title="Best Sellers"
          description="Most loved and purchased items by our customers. Premium quality guaranteed."
          tag="Top Rated"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="bento-grid"
          carouselMode="buttons"
          products={[
            {
              id: "9",
              name: "Wireless Earbuds Pro",
              price: "$249",
              variant: "Pearl White - Max",
              imageSrc: "http://img.b2bpic.net/free-photo/view-vacuum-cleaner-robot-flat-surface-floor_23-2151736729.jpg",
              imageAlt: "Wireless Earbuds Pro",
            },
            {
              id: "10",
              name: "Portable Charger Ultra",
              price: "$89",
              variant: "Space Gray - Fast Charge",
              imageSrc: "http://img.b2bpic.net/free-photo/minimal-composition-beauty-products_23-2148961332.jpg",
              imageAlt: "Portable Charger Ultra",
            },
            {
              id: "11",
              name: "Premium Screen Protector",
              price: "$29",
              variant: "Tempered Glass - Anti-Glare",
              imageSrc: "http://img.b2bpic.net/free-photo/minimal-black-friday-arrangement_23-2148666987.jpg",
              imageAlt: "Premium Screen Protector",
            },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="3DStore"
          columns={[
            {
              items: [
                { label: "Shop All Products", href: "/products" },
                { label: "Categories", href: "#categories" },
                { label: "Best Sellers", href: "#best-sellers" },
                { label: "New Arrivals", href: "/products?sort=new" },
              ],
            },
            {
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Story", href: "/about" },
                { label: "Blog", href: "/blog" },
                { label: "Careers", href: "/careers" },
              ],
            },
            {
              items: [
                { label: "Customer Support", href: "/contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Shipping Info", href: "/shipping" },
                { label: "Track Order", href: "/track" },
              ],
            },
            {
              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Return Policy", href: "/returns" },
                { label: "Contact Us", href: "/contact" },
              ],
            },
            {
              items: [
                { label: "Follow Facebook", href: "https://facebook.com" },
                { label: "Follow Instagram", href: "https://instagram.com" },
                { label: "Follow Twitter", href: "https://twitter.com" },
                { label: "Follow LinkedIn", href: "https://linkedin.com" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}