"use client"

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { CheckCircle, Users, Award, Sparkles, Linkedin, Github, Twitter, Mail } from "lucide-react";

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="large"
      background="none"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Portfolio"
          navItems={[
            { name: "About", id: "about" },
            { name: "Projects", id: "projects" },
            { name: "Skills", id: "skills" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Creative Portfolio & Design Work"
          description="Discover my latest projects, case studies, and professional design solutions. Specializing in digital design, branding, and user experience."
          background={{ variant: "glowing-orb" }}
          tag="Welcome"
          imageSrc="https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282085.jpg"
          imageAlt="Portfolio hero showcase"
          imagePosition="right"
          buttons={[
            { text: "View My Work", href: "projects" },
            { text: "Contact Me", href: "contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Bringing Ideas to Life Through Design"
          description="With 8+ years of experience in digital design and creative direction, I've helped startups and established brands create compelling visual experiences. I specialize in crafting intuitive interfaces, stunning visual identities, and engaging digital products that resonate with users."
          tag="About Me"
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
          imageAlt="About me professional portrait"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Download Resume", href: "#" },
            { text: "Let's Connect", href: "contact" }
          ]}
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardFour
          title="Featured Projects"
          description="A selection of my most impactful work across digital design, branding, and product development"
          tag="Portfolio"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "project-1",              name: "TechFlow Dashboard",              price: "Web App Design",              variant: "UI/UX  |  2024",              imageSrc: "https://img.b2bpic.net/free-vector/social-page-application-ui-design-concept_1284-45234.jpg",              imageAlt: "TechFlow dashboard project"
            },
            {
              id: "project-2",              name: "MobileApp Suite",              price: "Mobile App",              variant: "App Design  |  2024",              imageSrc: "https://img.b2bpic.net/free-vector/travel-landing-page-template-with-photo_23-2148492826.jpg",              imageAlt: "Mobile app suite project"
            },
            {
              id: "project-3",              name: "Brand Identity System",              price: "Branding",              variant: "Identity Design  |  2023",              imageSrc: "https://img.b2bpic.net/free-vector/creative-smart-home-management-app_52683-42987.jpg",              imageAlt: "Brand identity system project"
            },
            {
              id: "project-4",              name: "Digital Illustration Series",              price: "Illustration",              variant: "Art Direction  |  2023",              imageSrc: "https://img.b2bpic.net/free-psd/landing-page-swimming-club-template_23-2148463354.jpg",              imageAlt: "Digital illustration series project"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
        />
      </div>

      <div id="skills" data-section="skills">
        <MetricCardOne
          title="Professional Achievements"
          description="Key milestones and metrics that showcase my experience and impact in the creative industry"
          tag="Stats"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          metrics={[
            {
              id: "1",              value: "50+",              title: "Projects",              description: "Completed successfully across various industries",              icon: CheckCircle
            },
            {
              id: "2",              value: "100+",              title: "Clients",              description: "Satisfied clients worldwide trusting my expertise",              icon: Users
            },
            {
              id: "3",              value: "8",              title: "Years",              description: "Experience in digital design and creative direction",              icon: Award
            },
            {
              id: "4",              value: "15",              title: "Awards",              description: "Recognition for design excellence and innovation",              icon: Sparkles
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Client Feedback"
          description="What industry leaders and satisfied clients say about working with me"
          tag="Testimonials"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              title: "Exceptional Design Excellence",              quote: "Working with this designer transformed our brand presence. The attention to detail and creative vision exceeded our expectations. Highly recommended for any serious project.",              name: "Sarah Johnson",              role: "CEO",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Sarah Johnson testimonial"
            },
            {
              id: "2",              title: "Professional and Results-Driven",              quote: "Delivered outstanding design work on tight deadlines. The collaboration was seamless, and the final product perfectly aligned with our vision and business goals.",              name: "Michael Chen",              role: "Founder",              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 testimonial"
            },
            {
              id: "3",              title: "Transformed Our Digital Presence",              quote: "From concept to completion, every stage was handled with professionalism and creativity. The new design increased our conversions significantly. A true partner in growth.",              name: "Emily Rodriguez",              role: "Marketing Director",              imageSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              imageAlt: "Emily Rodriguez testimonial"
            },
            {
              id: "4",              title: "Design Partner You Can Trust",              quote: "Consistently delivers high-quality work with clear communication throughout the process. More than a designer—a true strategic partner committed to our success.",              name: "David Kim",              role: "Product Manager",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "David Kim testimonial"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Start Something Great"
          description="Have a project in mind or want to discuss collaboration opportunities? I'd love to hear from you. Fill out the form below and I'll get back to you within 24 hours."
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/young-beautiful-female-support-phone-operator-speaking-consulting-office_176420-949.jpg"
          imageAlt="Contact form background"
          mediaPosition="right"
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
            { name: "company", type: "text", placeholder: "Company/Organization", required: false }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell me about your project or idea...",            rows: 5,
            required: true
          }}
          buttonText="Send Message"
        />
      </div>

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