"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSignup from '@/components/sections/hero/HeroSignup';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Award, Briefcase, Clock, Github, Lightbulb, Linkedin, Mail, MessageSquare, Sparkles, Star, TrendingUp, Twitter } from "lucide-react";

export default function Portfolio() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="small"
      sizing="largeSmall"
      background="none"
      cardStyle="gradient-radial"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Portfolio"
          navItems={[
            { name: "About", id: "about" },
            { name: "Gallery", id: "gallery" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Let's Talk",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSignup
          title="Crafting Digital Excellence"
          description="Discover innovative design and development solutions tailored to bring your vision to life. Let's create something extraordinary together."
          tag="Welcome"
          tagIcon={Sparkles}
          background={{
            variant: "sparkles-gradient"
          }}
          inputPlaceholder="Enter your email"
          buttonText="Get Started"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Me"
          tagIcon={Lightbulb}
          title="I'm a passionate designer and developer dedicated to creating beautiful, functional digital experiences that resonate with users and drive meaningful results for brands."
          useInvertedBackground="invertDefault"
          buttons={[
            {
              text: "View My Work",              href: "gallery"
            },
            {
              text: "Download Resume",              href: "#"
            }
          ]}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <FeatureCardThree
          title="Featured Projects"
          description="A curated selection of my best work showcasing design thinking, technical expertise, and creative problem-solving across diverse industries and mediums."
          tag="Portfolio"
          tagIcon={Award}
          features={[
            {
              id: "01",              title: "E-Commerce Platform",              description: "Redesigned user experience for a leading online retailer, increasing conversions by 45% through improved navigation and checkout flow.",              imageSrc: "https://img.b2bpic.net/free-psd/landing-page-template-professional-business_23-2150623079.jpg",              imageAlt: "web design project portfolio mockup showcase"
            },
            {
              id: "02",              title: "Brand Identity System",              description: "Comprehensive branding strategy and visual identity system for a tech startup, including logo, guidelines, and digital applications.",              imageSrc: "https://img.b2bpic.net/free-psd/various-coffee-shop-banner-template-pack_23-2148458494.jpg",              imageAlt: "branding design project case study work"
            },
            {
              id: "03",              title: "Mobile App Interface",              description: "User-centered mobile app design with intuitive navigation, beautiful micro-interactions, and accessibility-first approach.",              imageSrc: "https://img.b2bpic.net/free-psd/online-expo-web-design-template_23-2149146612.jpg",              imageAlt: "digital interface project ux design portfolio"
            },
            {
              id: "04",              title: "Visual Campaign Design",              description: "Creative direction and design for multi-channel marketing campaign that increased brand awareness and user engagement.",              imageSrc: "https://img.b2bpic.net/free-psd/sale-new-winter-season-clothes_23-2148319690.jpg",              imageAlt: "creative design project illustration artwork"
            }
          ]}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Impact by Numbers"
          description="Measurable results and achievements from collaborative projects with clients across various industries."
          tag="Statistics"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",              value: "150+",              title: "Projects",              description: "Completed across design and development",              icon: Briefcase
            },
            {
              id: "2",              value: "92%",              title: "Satisfaction",              description: "Client satisfaction rating and retention",              icon: Star
            },
            {
              id: "3",              value: "8+",              title: "Years",              description: "of industry experience and expertise",              icon: Clock
            }
          ]}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Clients Say"
          description="Testimonials from satisfied clients and collaborators who've experienced our design and development excellence firsthand."
          tag="Testimonials"
          tagIcon={MessageSquare}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Creative Director",              company: "Tech Innovations Co",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "client professional headshot avatar portrait"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Marketing Manager",              company: "GrowthLabs",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",              imageAlt: "woman professional headshot avatar portrait"
            },
            {
              id: "3",              name: "David Rodriguez",              role: "Product Owner",              company: "Digital Studios",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",              imageAlt: "man professional headshot avatar portrait"
            },
            {
              id: "4",              name: "Emma Williams",              role: "Founder",              company: "StartupXYZ",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              imageAlt: "entrepreneur professional headshot avatar portrait"
            }
          ]}
          kpiItems={[
            {
              value: "98%",              label: "Project Success Rate"
            },
            {
              value: "150+",              label: "Happy Clients"
            },
            {
              value: "8+",              label: "Years Experience"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          tagIcon={Mail}
          title="Let's Create Something Amazing"
          description="Ready to transform your vision into reality? Reach out and let's discuss how we can collaborate on your next project."
          background={{
            variant: "sparkles-gradient"
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-vector/internet-communication_24877-51940.jpg"
          imageAlt="contact communication connection network collaboration"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Send Message"
          termsText="We respect your privacy and will only use your information to get back to you."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Portfolio"
          copyrightText="© 2024 My Creative Portfolio. All rights reserved."
          socialLinks={[
            {
              icon: Twitter,
              href: "https://twitter.com",              ariaLabel: "Twitter"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
            },
            {
              icon: Github,
              href: "https://github.com",              ariaLabel: "GitHub"
            },
            {
              icon: Mail,
              href: "mailto:hello@portfolio.com",              ariaLabel: "Email"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}