"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Package, Sparkles } from "lucide-react";

export default function ProjectsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[
            { name: "About", id: "about" },
            { name: "Portfolio", id: "portfolio" },
            { name: "Projects", id: "/projects" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "contact" }}
          brandName="Studio"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Our Project Portfolio"
          description="A comprehensive showcase of all the brands and companies we have worked with. From startups to established enterprises, we deliver exceptional design solutions across diverse industries."
          background={{ variant: "sparkles-gradient" }}
          tag="Complete Portfolio"
          tagAnimation="slide-up"
          mediaItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg", imageAlt: "Project 1" },
            { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-business-card_23-2149277811.jpg", imageAlt: "Project 2" },
            { imageSrc: "http://img.b2bpic.net/free-photo/man-working-desk-top-view_23-2149930937.jpg", imageAlt: "Project 3" },
            { imageSrc: "http://img.b2bpic.net/free-psd/designer-template-design_23-2151802964.jpg?_wi=1", imageAlt: "Project 4" },
            { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-as-interior-designer_23-2150346499.jpg?_wi=1", imageAlt: "Project 5" },
            { imageSrc: "http://img.b2bpic.net/free-vector/flat-employee-appreciation-day-vertical-poster-template_23-2149272005.jpg", imageAlt: "Project 6" },
            { imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg", imageAlt: "Project 7" }
          ]}
          buttons={[
            { text: "Start Your Project", href: "contact" },
            { text: "Back to Home", href: "/" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardFour 
          title="Featured Client Projects"
          description="A diverse selection of brands and companies across industries that have trusted us with their design challenges"
          tag="Client Work"
          tagIcon={Package}
          tagAnimation="slide-up"
          products={[
            {
              id: "client-1",              name: "TechFlow Solutions",              price: "Tech Startup",              variant: "Brand Identity, Digital Platform",              imageSrc: "http://img.b2bpic.net/free-psd/designer-template-design_23-2151802964.jpg?_wi=2",              imageAlt: "TechFlow project"
            },
            {
              id: "client-2",              name: "Luxe Cosmetics Co.",              price: "Beauty Brand",              variant: "Packaging Design, Branding",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-as-interior-designer_23-2150346499.jpg?_wi=2",              imageAlt: "Luxe Cosmetics project"
            },
            {
              id: "client-3",              name: "EcoMove Transportation",              price: "Mobility Startup",              variant: "UI/UX, App Design, Branding",              imageSrc: "http://img.b2bpic.net/free-vector/company-proposal-template-design_742173-21283.jpg",              imageAlt: "EcoMove project"
            },
            {
              id: "client-4",              name: "Heritage Foods Ltd.",              price: "Food & Beverage",              variant: "Logo, Packaging, Guidelines",              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-women-office_23-2147651758.jpg",              imageAlt: "Heritage Foods project"
            },
            {
              id: "client-5",              name: "FinanceFlow Bank",              price: "Financial Services",              variant: "Website Redesign, Mobile App",              imageSrc: "http://img.b2bpic.net/free-vector/process-infographic-template_23-2149009144.jpg",              imageAlt: "FinanceFlow project"
            },
            {
              id: "client-6",              name: "Creative Studio Collective",              price: "Design Agency",              variant: "Brand Refresh, Portfolio Site",              imageSrc: "http://img.b2bpic.net/free-photo/business-people-pointing-screen_1098-21556.jpg",              imageAlt: "Creative Studio project"
            },
            {
              id: "client-7",              name: "AquaPure Water Systems",              price: "Environmental Tech",              variant: "B2B Branding, Marketing Materials",              imageSrc: "http://img.b2bpic.net/free-photo/woodworker-black-businesswoman-examining-blueprints-factory-coronavirus-pandemic_637285-11917.jpg",              imageAlt: "AquaPure project"
            },
            {
              id: "client-8",              name: "Horizon Education Platform",              price: "EdTech Company",              variant: "Product Design, Learning Portal",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-hands-holding-open-novel-coffee-cup_53876-23475.jpg",              imageAlt: "Horizon Education project"
            },
            {
              id: "client-9",              name: "Nexus Global Consulting",              price: "Consulting Firm",              variant: "Corporate Identity, Website",              imageSrc: "http://img.b2bpic.net/free-vector/flat-employee-appreciation-day-vertical-poster-template_23-2149272005.jpg",              imageAlt: "Nexus Consulting project"
            },
            {
              id: "client-10",              name: "ZenLife Wellness Brand",              price: "Wellness & Health",              variant: "Complete Brand System",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg",              imageAlt: "ZenLife project"
            },
            {
              id: "client-11",              name: "VenturePath Capital",              price: "Investment Firm",              variant: "Brand Positioning, Pitch Deck",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-people-working-office_23-2149636256.jpg",              imageAlt: "VenturePath project"
            },
            {
              id: "client-12",              name: "StyleHub Fashion Collective",              price: "Fashion Brand",              variant: "E-commerce Design, Lookbooks",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-working-office_329181-16293.jpg",              imageAlt: "StyleHub project"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="clientlogos" data-section="clientlogos">
        <SocialProofOne
          title="Trusted by Leading Brands"
          description="We have had the privilege of working with companies across diverse industries, from innovative startups to established corporations"
          tag="Our Clients"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "TechFlow Solutions",            "Luxe Cosmetics",            "EcoMove",            "Heritage Foods",            "FinanceFlow Bank",            "Creative Studio Collective",            "AquaPure Systems",            "Horizon Education",            "Nexus Global",            "ZenLife Wellness",            "VenturePath Capital",            "StyleHub Fashion"
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA 
          tag="Your Project Awaits"
          tagIcon={Sparkles}
          title="Ready to Join Our Portfolio?"
          description="Whether you're a startup with a big vision or an established brand looking to evolve, we'd love to discuss how we can help bring your vision to life."
          buttons={[
            { text: "Get In Touch", href: "contact" },
            { text: "View Our Process", href: "/" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple 
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Home", href: "/" },
                { label: "Projects", href: "/projects" },
                { label: "Team", href: "#team" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Brand Strategy", href: "#" },
                { label: "Design Systems", href: "#" },
                { label: "Digital Design", href: "#" },
                { label: "Packaging", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Studio. All rights reserved."
          bottomRightText="Crafting excellence in design"
        />
      </div>
    </ThemeProvider>
  );
}
