"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBase from "@/components/sections/footer/FooterBase";
import { Sparkles } from "lucide-react"; // Keep Sparkles as an example, add others if needed by sections

const NAV_ITEMS = [
  { name: "Home", id: "/" },
  { name: "Portfolio", id: "/portfolio" },
  { name: "Services", id: "/services" },
  { name: "About", id: "/about" },
  { name: "Contact", id: "/contact" }
];

const FOOTER_COLUMNS = [
  {
    title: "Company", items: [
      { label: "About", href: "/about" },
      { label: "Services", href: "/services" },
      { label: "Work", href: "/portfolio" },
      { label: "Contact", href: "/contact" }
    ]
  },
  {
    title: "Services", items: [
      { label: "Web Development", href: "/services" },
      { label: "SEO", href: "/services" },
      { label: "Branding", href: "/services" },
      { label: "UI/UX Design", href: "/services" }
    ]
  },
  {
    title: "Connect", items: [
      { label: "Twitter", href: "#" },
      { label: "LinkedIn", href: "#" },
      { label: "Instagram", href: "#" },
      { label: "Dribbble", href: "#" }
    ]
  }
];

const PORTFOLIO_FEATURES = [
  {
    id: "project-one",    title: "E-commerce Redesign",    author: "Client A",    description: "A complete overhaul of an existing e-commerce platform, focusing on user experience and conversion optimization.",    tags: ["Web Development", "UI/UX", "E-commerce"],
    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp",    imageAlt: "E-commerce Redesign project"
  },
  {
    id: "project-two",    title: "Brand Identity Launch",    author: "Client B",    description: "Developing a new brand identity from scratch, including logo design, color palette, and brand guidelines.",    tags: ["Branding", "Graphic Design"],
    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp",    imageAlt: "Brand Identity Launch project"
  },
  {
    id: "project-three",    title: "SEO Strategy & Implementation",    author: "Client C",    description: "Comprehensive SEO strategy leading to significant organic traffic growth for a SaaS company.",    tags: ["SEO", "Digital Marketing"],
    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp",    imageAlt: "SEO Strategy project"
  }
];

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            brandName="Webild"
            navItems={NAV_ITEMS}
            button={{ text: "Get Started", href: "/contact" }}
          />
        </div>
        <div id="portfolio-features" data-section="portfolio-features">
          <FeatureCardTwentyFour
            title="Our Portfolio"
            description="Explore our latest projects and client success stories."
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            features={PORTFOLIO_FEATURES}
          />
        </div>
        <div id="footer" data-section="footer">
          <FooterBase
            logoText="Webild"
            copyrightText="© 2026 | Webild"
            columns={FOOTER_COLUMNS}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
