"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MediaAbout from '@/components/sections/about/MediaAbout';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, Zap } from 'lucide-react';

export default function ProductsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="plain"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="PowerFlow"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Products", id: "/products" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Shop Now", href: "/products" }}
        />
      </div>

      <div id="featured-products" data-section="featured-products">
        <ProductCardOne
          title="Complete Power Bank Collection"
          description="Discover our full range of premium power banks engineered for every lifestyle and power need"
          tag="All Products"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",
              name: "PowerFlow Ultra 30K",
              price: "$89.99",
              imageSrc: "https://img.b2bpic.net/free-photo/png-power-bank-isolated-white-background_185193-165485.jpg",
              imageAlt: "PowerFlow Ultra 30K power bank"
            },
            {
              id: "2",
              name: "PowerFlow Swift 20K",
              price: "$59.99",
              imageSrc: "https://img.b2bpic.net/free-photo/png-power-bank-isolated-white-background_185193-165523.jpg",
              imageAlt: "PowerFlow Swift 20K power bank"
            },
            {
              id: "3",
              name: "PowerFlow Solar Rugged",
              price: "$79.99",
              imageSrc: "https://img.b2bpic.net/free-photo/modern-wireless-charger-tray-with-concrete-background_23-2150808024.jpg",
              imageAlt: "PowerFlow Solar Rugged power bank"
            },
            {
              id: "4",
              name: "PowerFlow Pro Wireless",
              price: "$99.99",
              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-storage-devices-tablet_23-2149319339.jpg",
              imageAlt: "PowerFlow Pro Wireless power bank"
            },
            {
              id: "5",
              name: "PowerFlow Compact Mini",
              price: "$39.99",
              imageSrc: "https://img.b2bpic.net/free-photo/desk-arrangement-with-ssd-laptop-view_23-2149328278.jpg",
              imageAlt: "PowerFlow Compact Mini power bank"
            },
            {
              id: "6",
              name: "PowerFlow Max Display",
              price: "$129.99",
              imageSrc: "https://img.b2bpic.net/free-photo/black-power-bank-digital-device_53876-96820.jpg",
              imageAlt: "PowerFlow Max Display power bank"
            }
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="showcase" data-section="showcase">
        <MediaAbout
          title="Experience Next-Level Charging"
          description="Our power banks combine cutting-edge technology with elegant design. Fast charging capabilities, multiple device support, and premium build quality for your peace of mind."
          tag="Technology"
          tagIcon={Zap}
          imageSrc="https://img.b2bpic.net/free-photo/high-angle-storage-devices-tablet_23-2149319339.jpg"
          imageAlt="PowerFlow power bank in use"
          buttons={[
            { text: "View All Features", href: "/about" },
            { text: "Compare Models", href: "/products" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Choose Your Power Bank"
          description="Select the perfect capacity and features for your mobile lifestyle"
          tag="Pricing"
          tagIcon={Zap}
          plans={[
            {
              id: "starter",
              price: "$39.99",
              name: "Compact 10K",
              buttons: [
                { text: "Add to Cart", href: "#" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "10,000 mAh capacity",
                "Single USB-A port",
                "5W charging",
                "Compact design",
                "12-month warranty"
              ]
            },
            {
              id: "pro",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              price: "$69.99",
              name: "Pro 25K",
              buttons: [
                { text: "Add to Cart", href: "#" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "25,000 mAh capacity",
                "Dual USB ports",
                "30W fast charging",
                "LED display",
                "24-month warranty"
              ]
            },
            {
              id: "premium",
              price: "$129.99",
              name: "Ultra 50K",
              buttons: [
                { text: "Add to Cart", href: "#" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "50,000 mAh capacity",
                "Triple USB + Wireless",
                "65W super fast charging",
                "Smart display",
                "36-month warranty"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterMedia
        imageSrc="https://img.b2bpic.net/free-vector/blue-technology-wire-mesh-background_1017-17262.jpg"
        imageAlt="Technology background"
        logoText="PowerFlow"
        copyrightText="© 2025 PowerFlow. All rights reserved. Empowering your mobile lifestyle."
        columns={[
          {
            title: "Products",
            items: [
              { label: "Power Banks", href: "/products" },
              { label: "Accessories", href: "/products" },
              { label: "Bundles", href: "/products" },
              { label: "Compare", href: "/products" }
            ]
          },
          {
            title: "Support",
            items: [
              { label: "Documentation", href: "/about" },
              { label: "Warranty", href: "/about" },
              { label: "Returns", href: "/about" },
              { label: "Contact Us", href: "/contact" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Blog", href: "/about" },
              { label: "Careers", href: "/about" },
              { label: "Press", href: "/about" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}