"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles } from "lucide-react";

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Portfolio"
          navItems={[
            { name: "About", id: "about" },
            { name: "Projects", id: "projects" },
            { name: "Services", id: "services" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="CREATIVE PORTFOLIO"
          description="Showcasing innovative design and development work that transforms ideas into compelling digital experiences"
          buttons={[
            { text: "View My Work", href: "#projects" },
            { text: "Get In Touch", href: "#contact" }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282085.jpg",              imageAlt: "Portfolio hero background"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-psd/landing-page-template-professional-business_23-2150623079.jpg",              imageAlt: "Featured project one"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-psd/online-expo-web-design-template_23-2149146612.jpg",              imageAlt: "Featured project two"
            }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Me"
          title="Creative designer and developer dedicated to crafting beautiful, functional digital solutions that solve real problems and create lasting impact for brands and users worldwide"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Download Resume", href: "#" }
          ]}
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardTwo
          title="Featured Projects"
          description="A curated selection of my best work showcasing diverse design disciplines and technical expertise"
          tag="Portfolio Gallery"
          tagIcon={Sparkles}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              brand: "Web Design",              name: "E-Commerce Platform Redesign",              price: "Award Winner",              rating: 5,
              reviewCount: "12.5k views",              imageSrc: "https://img.b2bpic.net/free-psd/landing-page-template-professional-business_23-2150623079.jpg",              imageAlt: "E-commerce platform project"
            },
            {
              id: "2",              brand: "Branding",              name: "Tech Startup Identity System",              price: "Featured",              rating: 5,
              reviewCount: "8.3k views",              imageSrc: "https://img.b2bpic.net/free-psd/online-expo-web-design-template_23-2149146612.jpg",              imageAlt: "Branding project"
            },
            {
              id: "3",              brand: "UI/UX Design",              name: "Mobile App Interface Design",              price: "Published",              rating: 5,
              reviewCount: "9.7k views",              imageSrc: "https://img.b2bpic.net/free-psd/local-tea-shop-website-design-template_23-2149079396.jpg",              imageAlt: "UI/UX design project"
            },
            {
              id: "4",              brand: "Graphic Design",              name: "Print & Digital Campaign",              price: "Completed",              rating: 5,
              reviewCount: "6.2k views",              imageSrc: "https://img.b2bpic.net/free-vector/gym-promotion-landing-page-with-photo_23-2148310410.jpg",              imageAlt: "Graphic design project"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Impact & Experience"
          description="Proven track record delivering exceptional results across diverse design and development projects"
          tag="My Journey"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          metrics={[
            {
              id: "1",              value: "50+",              title: "Projects Completed",              description: "Diverse portfolio across web, mobile, and brand design",              imageSrc: "https://img.b2bpic.net/free-psd/landing-page-template-professional-business_23-2150623079.jpg",              imageAlt: "Portfolio projects"
            },
            {
              id: "2",              value: "8+",              title: "Years Experience",              description: "Dedicated to growth and mastering digital design craft",              imageSrc: "https://img.b2bpic.net/free-psd/online-expo-web-design-template_23-2149146612.jpg",              imageAlt: "Experience milestone"
            },
            {
              id: "3",              value: "95%",              title: "Client Satisfaction",              description: "Committed to exceeding expectations and delivering quality",              imageSrc: "https://img.b2bpic.net/free-psd/local-tea-shop-website-design-template_23-2149079396.jpg",              imageAlt: "Client satisfaction"
            }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSixteen
          title="Services & Skills"
          description="Comprehensive design and development capabilities to bring your vision to life"
          tag="What I Offer"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          negativeCard={{
            items: [
              "Limited design options",              "Slow iteration process",              "Disconnected user experience",              "Poor accessibility"
            ]
          }}
          positiveCard={{
            items: [
              "Custom design solutions",              "Rapid prototyping & testing",              "Seamless user journeys",              "Inclusive design practices"
            ]
          }}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Clients Say"
          description="Real feedback from brands and teams I've had the privilege to work with"
          tag="Testimonials"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "CEO",              company: "TechVision Studios",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Johnson testimonial"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Creative Director",              company: "Brand Innovations",              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 testimonial"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Product Manager",              company: "Digital Growth Co",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Emily Rodriguez testimonial"
            },
            {
              id: "4",              name: "David Kim",              role: "Founder",              company: "Creative Ventures",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              imageAlt: "David Kim testimonial"
            }
          ]}
          kpiItems={[
            { value: "98%", label: "Client Satisfaction Rate" },
            { value: "50+", label: "Successful Projects Delivered" },
            { value: "8+", label: "Years of Creative Excellence" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Create Something Amazing"
          description="Have a project in mind? I'd love to hear about it. Get in touch and let's discuss how I can help bring your vision to life with exceptional design and development."
          useInvertedBackground="noInvert"
          mediaPosition="right"
          imageSrc="https://img.b2bpic.net/free-photo/young-beautiful-female-support-phone-operator-speaking-consulting-office_176420-949.jpg"
          imageAlt="Contact section visual"
          buttonText="Send Message"
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "your@email.com",              required: true
            },
            {
              name: "subject",              type: "text",              placeholder: "Project Subject",              required: true
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell me about your project...",            rows: 5,
            required: true
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Portfolio"
          leftLink={{
            text: "Privacy Policy",            href: "#"
          }}
          rightLink={{
            text: "Terms of Service",            href: "#"
          }}
        />
      </div>
    </ThemeProvider>
  );
}