"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Briefcase } from "lucide-react";

const PortfolioPage = () => {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Portfolio", id: "/portfolio" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Product",      items: [
        { label: "Services", href: "services" },
        { label: "Portfolio", href: "portfolio" },
        { label: "Pricing", href: "#" },
        { label: "Security", href: "#" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "about" },
        { label: "Our Team", href: "about" },
        { label: "Blog", href: "#" },
        { label: "Contact", href: "contact" },
      ],
    },
    {
      title: "Connect",      items: [
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "Twitter", href: "https://twitter.com" },
        { label: "GitHub", href: "https://github.com" },
        { label: "Facebook", href: "https://facebook.com" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="Kraftcode" navItems={navItems} />
      </div>

      {/* Portfolio Case Studies */}
      <div id="portfolio" data-section="portfolio">
        <div className="py-12 md:py-20 px-4">
          <div className="max-w-6xl mx-auto">
            <div className="mb-12">
              <div className="flex items-center gap-2 mb-4">
                <Briefcase className="w-5 h-5" />
                <span className="text-sm font-medium">Case Studies</span>
              </div>
              <h2 className="text-3xl md:text-5xl font-bold mb-4">Turning Vision Into Reality</h2>
              <p className="text-lg text-gray-600 max-w-2xl">Showcase of our successful projects across diverse industries. Each case study represents our commitment to delivering innovative solutions and measurable business impact.</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <div className="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/financial-tech-solution-showcase-showing-1772536829700-08f53efb.png" alt="Finance platform" className="w-full h-64 object-cover" />
                <div className="p-6">
                  <h3 className="text-xl font-semibold mb-2">Financial Tech Platform</h3>
                  <p className="text-gray-600">Finance</p>
                </div>
              </div>
              <div className="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/human-resources-platform-illustration-sh-1772536829975-a0919a4e.png" alt="HR system" className="w-full h-64 object-cover" />
                <div className="p-6">
                  <h3 className="text-xl font-semibold mb-2">HR Management System</h3>
                  <p className="text-gray-600">Human Resources</p>
                </div>
              </div>
              <div className="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/legal-services-platform-showing-law-firm-1772536830626-e5e66c56.png" alt="Legal platform" className="w-full h-64 object-cover" />
                <div className="p-6">
                  <h3 className="text-xl font-semibold mb-2">Legal Services Platform</h3>
                  <p className="text-gray-600">Legal Tech</p>
                </div>
              </div>
              <div className="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/startup-solution-platform-showing-modern-1772536829727-82b44a37.png" alt="Startup solution" className="w-full h-64 object-cover" />
                <div className="p-6">
                  <h3 className="text-xl font-semibold mb-2">Startup Solution Suite</h3>
                  <p className="text-gray-600">Startup</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 Kraftcode Infosol. All rights reserved."
          ariaLabel="Footer section"
        />
      </div>
    </ThemeProvider>
  );
};

export default PortfolioPage;