"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Palette, Mail, Package } from "lucide-react";

export default function Portfolio() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="medium"
      background="none"
      cardStyle="elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Projects", id: "gallery" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "contact"
          }}
          brandName="Portfolio"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Creative Designer & Developer"
          description="Crafting exceptional digital experiences through innovative design and strategic thinking. Welcome to my portfolio of work."
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282085.jpg"
          imageAlt="Portfolio showcase"
          imagePosition="right"
          kpis={[
            { value: "50+", label: "Projects Completed" },
            { value: "8+", label: "Years Experience" },
            { value: "100%", label: "Client Satisfaction" }
          ]}
          enableKpiAnimation={true}
          buttons={[
            { text: "View Work", href: "gallery" },
            { text: "Contact Me", href: "contact" }
          ]}
          tag="Welcome"
          tagIcon={Sparkles}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardFour
          title="Featured Projects"
          description="A curated selection of recent work showcasing diverse design disciplines and technical expertise."
          tag="Gallery"
          tagIcon={Palette}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="bento-grid"
          carouselMode="buttons"
          products={[
            {
              id: "1",              name: "E-Commerce Platform Redesign",              price: "2024",              variant: "UX/UI Design",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-e-commerce-design-template_23-2149567524.jpg",              imageAlt: "E-commerce design project",              isFavorited: false
            },
            {
              id: "2",              name: "Brand Identity System",              price: "2024",              variant: "Branding",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-70252.jpg",              imageAlt: "Brand identity project",              isFavorited: false
            },
            {
              id: "3",              name: "Mobile App Interface",              price: "2023",              variant: "App Design",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-e-commerce-design-template_23-2149567530.jpg",              imageAlt: "Mobile app design project",              isFavorited: false
            },
            {
              id: "4",              name: "Visual Design Campaign",              price: "2023",              variant: "Graphic Design",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69728.jpg",              imageAlt: "Graphic design campaign",              isFavorited: false
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="About My Creative Journey"
          description="With a passion for solving complex design challenges and creating meaningful user experiences, I've spent the last 8 years helping brands and businesses elevate their digital presence through thoughtful design and innovative solutions."
          imageSrc="https://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-65.jpg"
          imageAlt="Creative professional portrait"
          useInvertedBackground="noInvert"
          tag="About Me"
          buttons={[
            { text: "Download Resume", href: "/" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          tagIcon={Mail}
          title="Let's Create Something Amazing"
          description="Have a project in mind? I'd love to hear about it. Send me a message and let's start a conversation about how I can help bring your vision to life."
          imageSrc="https://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg"
          imageAlt="Creative collaboration"
          mediaPosition="right"
          useInvertedBackground="noInvert"
          background={{ variant: "plain" }}
          inputPlaceholder="Enter your email"
          buttonText="Send Message"
          termsText="We respect your privacy. Unsubscribe at any time."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Portfolio"
          columns={[
            {
              title: "Work",              items: [
                { label: "Projects", href: "#gallery" },
                { label: "Case Studies", href: "#" },
                { label: "Portfolio", href: "#" }
              ]
            },
            {
              title: "About",              items: [
                { label: "About Me", href: "#about" },
                { label: "Resume", href: "#" },
                { label: "Services", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Email", href: "mailto:hello@example.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            }
          ]}
          copyrightText="© 2025 Creative Portfolio. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}