"use client"

import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, Briefcase, Code, Lightbulb, LayoutGrid, Mail, MessageCircle, Palette, Smartphone, Sparkles, Star, TrendingUp, Users, Zap } from "lucide-react";

export default function Portfolio() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Portfolio"
          navItems={[
            { name: "About", id: "about" },
            { name: "Projects", id: "projects" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Creative Designer & Developer"
          description="Crafting beautiful digital experiences with attention to detail and a passion for excellence"
          background={{ variant: "sparkles-gradient" }}
          tag="Portfolio"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282085.jpg"
          imageAlt="Portfolio hero showcase"
          buttons={[
            { text: "View Projects", href: "projects" },
            { text: "Get In Touch", href: "contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About Me"
          description={[
            "I'm a passionate designer and developer with 8+ years of experience creating compelling digital solutions. I specialize in crafting user-centered designs that balance aesthetics with functionality.",            "My expertise spans UI/UX design, web development, brand strategy, and digital transformation. I work closely with clients to understand their vision and deliver solutions that exceed expectations and drive measurable results.",            "When I'm not designing, you'll find me exploring new design trends, contributing to open-source projects, or mentoring aspiring designers in the community."
          ]}
          buttons={[
            { text: "Download Resume", href: "https://example.com/resume.pdf" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardFour
          title="Featured Projects"
          description="Explore a selection of my recent design and development work"
          tag="Portfolio"
          tagIcon={Star}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "1",              name: "E-Commerce Platform Redesign",              price: "Web Design & Development",              variant: "UI/UX, Frontend",              imageSrc: "https://img.b2bpic.net/free-vector/smart-home-management_52683-43979.jpg",              imageAlt: "E-commerce platform project"
            },
            {
              id: "2",              name: "Mobile Fitness App",              price: "iOS & Android Application",              variant: "App Design, UI/UX",              imageSrc: "https://img.b2bpic.net/free-vector/professional-dashboard-user-panel_23-2148310538.jpg",              imageAlt: "Fitness mobile app project"
            },
            {
              id: "3",              name: "Brand Identity System",              price: "Branding & Visual Design",              variant: "Logo, Guidelines",              imageSrc: "https://img.b2bpic.net/free-vector/web-elements-set_1057-409.jpg",              imageAlt: "Brand identity project"
            },
            {
              id: "4",              name: "SaaS Dashboard",              price: "Web Application Design",              variant: "UI/UX, Interaction Design",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page-template_23-2149061053.jpg",              imageAlt: "SaaS dashboard project"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBorderGlow
          title="My Expertise"
          description="Core skills and specializations that define my design approach"
          tag="Services"
          tagIcon={Zap}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          features={[
            {
              icon: Palette,
              title: "UI/UX Design",              description: "Creating intuitive and visually stunning user interfaces with focus on user experience and accessibility"
            },
            {
              icon: Code,
              title: "Web Development",              description: "Building responsive, performant web applications using modern frameworks and best practices"
            },
            {
              icon: Zap,
              title: "Brand Strategy",              description: "Developing cohesive brand identities that resonate with target audiences and drive engagement"
            },
            {
              icon: LayoutGrid,
              title: "Product Design",              description: "Designing end-to-end digital products with focus on functionality, aesthetics, and user satisfaction"
            },
            {
              icon: Smartphone,
              title: "Mobile Design",              description: "Crafting seamless mobile experiences for iOS and Android platforms with intuitive navigation"
            },
            {
              icon: Lightbulb,
              title: "Innovation",              description: "Exploring emerging technologies and design patterns to create cutting-edge digital solutions"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Impact & Results"
          description="Measurable outcomes from projects and collaborations"
          tag="Stats"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              icon: Users,
              title: "Users Impacted",              value: "500K+"
            },
            {
              id: "2",              icon: Award,
              title: "Projects Completed",              value: "80+"
            },
            {
              id: "3",              icon: Star,
              title: "Client Satisfaction",              value: "4.9/5"
            },
            {
              id: "4",              icon: Briefcase,
              title: "Years Experience",              value: "8+"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Client Success Stories"
          description="What my clients and collaborators have to say about working together"
          tag="Testimonials"
          tagIcon={MessageCircle}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              title: "Transformed Our Digital Presence",              quote: "Working with this designer was a game-changer. They understood our vision immediately and delivered a website that exceeded all expectations. Our conversion rate increased by 45% within three months.",              name: "Sarah Johnson",              role: "CEO",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-mid-adult-businessman-using-computer-while-working-office-desk_637285-6746.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              title: "Exceptional Attention to Detail",              quote: "The level of detail and care put into our mobile app redesign was outstanding. Every interaction feels polished and intentional. Our team and users both love the new design.",              name: "Michael Chen",              role: "Product Manager",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-listening-senior-man_1262-1970.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              title: "True Partnership Approach",              quote: "More than just a designer, they were a true partner in our brand evolution. They took time to understand our business deeply and created something truly special that resonates with our audience.",              name: "Emily Rodriguez",              role: "Founder",              imageSrc: "https://img.b2bpic.net/free-photo/two-happy-male-female-business-people-showing-thumbs-up-outdoors_1262-12567.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              title: "Delivered on Time, Over Budget in Value",              quote: "Professional, creative, and reliable. They delivered our project ahead of schedule with exceptional quality. We've already started planning our next collaboration.",              name: "David Kim",              role: "Marketing Director",              imageSrc: "https://img.b2bpic.net/free-photo/thumbs-up-spa-smiling-girl-white-robe-good-wellness-vibes_169016-69478.jpg",              imageAlt: "David Kim"
            },
            {
              id: "5",              title: "Turned Ideas Into Reality",              quote: "Our initial concept was rough, but they helped refine it into something beautiful and functional. The design system they created is now the foundation for our entire product suite.",              name: "Jessica Martinez",              role: "Design Lead",              imageSrc: "https://img.b2bpic.net/free-photo/cheerful-employees-looking-laptop-laughing_74855-4007.jpg",              imageAlt: "Jessica Martinez"
            },
            {
              id: "6",              title: "Excellent Communication Throughout",              quote: "Clear communication, regular updates, and a collaborative approach made the entire process smooth and enjoyable. They're responsive, thoughtful, and genuinely care about the outcome.",              name: "Robert Thompson",              role: "Project Manager",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businesswoman-her-coworkers-clapping-hands-meeting-office_637285-207.jpg",              imageAlt: "Robert Thompson"
            }
          ]}
        />
      </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. Whether you're looking for design, development, or both, let's discuss how we can work together to bring your vision to life."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/smiling-woman-using-smartphone-couch_53876-96944.jpg"
          imageAlt="Contact section illustration"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Send Message"
          termsText="I'll get back to you within 24 hours. We respect your privacy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigation",              items: [
                { label: "Home", href: "/" },
                { label: "About", href: "#about" },
                { label: "Projects", href: "#projects" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Social",              items: [
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "GitHub", href: "https://github.com" },
                { label: "Dribbble", href: "https://dribbble.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Cookie Policy", href: "/cookies" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Portfolio. All rights reserved."
          bottomRightText="Designed & Developed with care"
        />
      </div>
    </ThemeProvider>
  );
}