"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import Link from "next/link";
import ProductCardTwo, { ProductCardTwoProps } from '@/components/sections/product/ProductCardTwo'; // For portfolio display

interface FooterProps {
  brandName?: string;
  navItems: Array<{ name: string; href: string; }>;
}

const Footer: React.FC<FooterProps> = ({ brandName = "Nexsoft Australia", navItems }) => {
  return (
    <footer className="w-full py-8 bg-card text-foreground border-t border-accent mt-16">
      <div className="mx-auto px-4 md:px-6 max-w-7xl flex flex-col md:flex-row justify-between items-center gap-4">
        <div className="text-lg font-bold">
          {brandName}
        </div>
        <nav className="flex flex-wrap justify-center gap-6">
          {navItems.map((item) => (
            <Link key={item.href} href={item.href} className="text-foreground hover:text-primary-cta">
              {item.name}
            </Link>
          ))}
        </nav>
        <div className="text-sm text-foreground/80">
          © {new Date().getFullYear()} {brandName}. All rights reserved.
        </div>
      </div>
    </footer>
  );
};

export default function PortfolioPage() {
  const navItems = [
    {name: "Home", id: "home", href: "/"},
    {name: "About us", id: "about", href: "/about"},
    {name: "Products", id: "products", href: "/products"},
    {name: "Achievements", id: "achievements", href: "/portfolio"},
    {name: "News", id: "news", href: "/portfolio"},
    {name: "Contact us", id: "contact", href: "/contact"}
  ];

  const navbarProps = {
    brandName: "Nexsoft Australia",    navItems: navItems.map(item => ({ name: item.name, id: item.href })),
    button: {text: "Get a Quote", href: "/contact"}
  };

  const productCardTwoProps: ProductCardTwoProps = {
    title: "Our Portfolio",    description: "Discover the projects we've brought to life.",    gridVariant: "bento-grid", // This is valid for ProductCardTwo
    animationType: "slide-up",    textboxLayout: "default",    useInvertedBackground: false,
    products: [
        { id: "1", brand: "Client Project", name: "Project Alpha", price: "Case Study", rating: 5, reviewCount: "0", imageSrc: "https://r2.webild.io/p/4e2bb7a8-1a5c-4235-9008-012903330663_img_1.webp", imageAlt: "Project Alpha screenshot" },
        { id: "2", brand: "Client Project", name: "Project Beta", price: "Case Study", rating: 5, reviewCount: "0", imageSrc: "https://r2.webild.io/p/4e2bb7a8-1a5c-4235-9008-012903330663_img_2.webp", imageAlt: "Project Beta screenshot" },
        { id: "3", brand: "Client Project", name: "Project Gamma", price: "Case Study", rating: 5, reviewCount: "0", imageSrc: "https://r2.webild.io/p/4e2bb7a8-1a5c-4235-9008-012903330663_img_3.webp", imageAlt: "Project Gamma screenshot" },
        { id: "4", brand: "Client Project", name: "Project Delta", price: "Case Study", rating: 5, reviewCount: "0", imageSrc: "https://r2.webild.io/p/4e2bb7a8-1a5c-4235-9008-012903330663_img_4.webp", imageAlt: "Project Delta screenshot" }
    ]
  };

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmall"
      background="blurBottom"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay {...navbarProps} />
      </div>

      <main>
        <div id="portfolio-hero" data-section="portfolio-hero" className="py-20 md:py-32 text-center">
          <h1 className="text-4xl md:text-6xl font-bold text-foreground">Our Portfolio</h1>
          <p className="mt-4 text-xl text-foreground/80 max-w-2xl mx-auto">Explore our diverse range of successful projects and client collaborations.</p>
        </div>

        <div id="product-card-two" data-section="product-card-two">
          <ProductCardTwo {...productCardTwoProps} />
        </div>
      </main>

      <Footer brandName="Nexsoft Australia" navItems={navItems} />
    </ThemeProvider>
  );
}
