"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import AboutMetric from '@/components/sections/about/AboutMetric';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Award, Users, Zap, Target, Sparkles, Palette, Shield, Code } from 'lucide-react';

export default function Portfolio() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Portfolio"
          navItems={[
            { name: "About", id: "about" },
            { name: "Projects", id: "projects" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get in Touch",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Creative Portfolio & Design Showcase"
          description="Explore innovative projects that transform ideas into digital experiences"
          background={{ variant: "radial-gradient" }}
          tag="Portfolio"
          tagIcon={Sparkles}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-psd/minimal-magazine-cover-landing-page-template_23-2149660314.jpg",              imageAlt: "Portfolio showcase 1"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-psd/emotional-wellbeing-landing-page_23-2149170499.jpg",              imageAlt: "Portfolio showcase 2"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/gradient-business-template-design_23-2149752068.jpg",              imageAlt: "Portfolio showcase 3"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-psd/minimal-magazine-cover-landing-page-template_23-2149660314.jpg",              imageAlt: "Portfolio showcase 4"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-psd/emotional-wellbeing-landing-page_23-2149170499.jpg",              imageAlt: "Portfolio showcase 5"
            }
          ]}
          buttons={[
            { text: "View Projects", href: "#projects" },
            { text: "Contact Me", href: "#contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Crafting Digital Experiences With Precision and Innovation"
          useInvertedBackground="noInvert"
          metrics={[
            { icon: Award, label: "Projects Completed", value: "50+" },
            { icon: Users, label: "Happy Clients", value: "30+" },
            { icon: Zap, label: "Years Experience", value: "5+" },
            { icon: Target, label: "Industry Awards", value: "12" }
          ]}
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardFour
          title="Featured Projects"
          description="A selection of my best work across web design, branding, and digital experiences"
          tag="Latest Work"
          tagIcon={Palette}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          products={[
            {
              id: "1",              name: "E-Commerce Platform Redesign",              price: "2024",              variant: "Web Design • UI/UX",              imageSrc: "https://img.b2bpic.net/free-psd/plant-care-template-design_23-2150262440.jpg",              imageAlt: "E-commerce redesign project"
            },
            {
              id: "2",              name: "Brand Identity System",              price: "2024",              variant: "Branding • Design System",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-interior-landing-page-design-template_23-2149263407.jpg",              imageAlt: "Brand identity project"
            },
            {
              id: "3",              name: "Mobile App Interface",              price: "2023",              variant: "Mobile App • UI Design",              imageSrc: "https://img.b2bpic.net/free-vector/modern-blog-landing-page-template_23-2148402691.jpg",              imageAlt: "Mobile app design"
            },
            {
              id: "4",              name: "Visual Identity Campaign",              price: "2023",              variant: "Graphic Design • Marketing",              imageSrc: "https://img.b2bpic.net/free-psd/landing-page-template-professional-business_23-2150623079.jpg",              imageAlt: "Visual identity campaign"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBorderGlow
          title="Why Choose My Work"
          description="Premium design solutions backed by strategy, creativity, and technical excellence"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          textboxLayout="default"
          features={[
            {
              icon: Zap,
              title: "Performance Focused",              description: "Every design is optimized for speed, usability, and user engagement"
            },
            {
              icon: Shield,
              title: "Secure & Reliable",              description: "Built with best practices ensuring data security and system reliability"
            },
            {
              icon: Users,
              title: "User Centered",              description: "Research-driven approach prioritizing user needs and satisfaction"
            },
            {
              icon: Palette,
              title: "Creative Vision",              description: "Innovative designs that stand out and capture attention in crowded markets"
            },
            {
              icon: Code,
              title: "Technical Excellence",              description: "Clean code and modern technologies for maintainable digital solutions"
            },
            {
              icon: Target,
              title: "Results Driven",              description: "Strategic designs that deliver measurable business impact and growth"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Client Success Stories"
          description="What my clients say about working together and the impact of our projects"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          textboxLayout="default"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "CEO",              company: "TechStart Inc",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Founder",              company: "Design Studio Co",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Marketing Director",              company: "Digital Agency Pro",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              role: "Product Manager",              company: "Innovation Labs",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "David Kim"
            }
          ]}
          kpiItems={[
            { value: "98%", label: "Client Satisfaction Rate" },
            { value: "50+", label: "Successful Projects Delivered" },
            { value: "3.5", label: "Years Average Partnership" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to bring your vision to life? Let's collaborate and create something extraordinary together."
          animationType="entrance-slide"
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Start a Project", href: "mailto:hello@portfolio.com" },
            { text: "Schedule Call", href: "#" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Portfolio"
          columns={[
            {
              title: "Navigation",              items: [
                { label: "About", href: "#about" },
                { label: "Projects", href: "#projects" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "GitHub", href: "https://github.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Blog", href: "#" },
                { label: "Case Studies", href: "#" },
                { label: "Resume", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Portfolio. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}