"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles } from "lucide-react";

export default function Portfolio() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="primary-glow"
      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 Started",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Portfolio"
          description="Showcasing exceptional design work and creative solutions for modern brands"
          buttons={[
            { text: "View My Work", href: "projects" },
            { text: "Get in Touch", href: "contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg"
          imageAlt="Portfolio hero background"
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Creative Designer & Developer"
          description="I'm a passionate designer with 5+ years of experience creating beautiful, user-centered digital experiences. Specializing in web design, branding, and interactive interfaces that solve real problems and delight users."
          tag="About Me"
          imageSrc="https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282085.jpg"
          imageAlt="Creative professional at work"
          buttons={[
            { text: "Download Resume", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardFour
          title="Featured Projects"
          description="A curated selection of my recent work showcasing design thinking, technical execution, and creative problem-solving"
          tag="Portfolio"
          tagIcon={Sparkles}
          textboxLayout="default"
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          products={[
            {
              id: "1",              name: "E-Commerce Platform Redesign",              price: "2024",              variant: "UX/UI Design · Web Development",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-computer-desktop-workspace_53876-30381.jpg",              imageAlt: "E-commerce redesign project"
            },
            {
              id: "2",              name: "Brand Identity System",              price: "2024",              variant: "Branding · Visual Design",              imageSrc: "https://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164830.jpg",              imageAlt: "Brand identity project"
            },
            {
              id: "3",              name: "Mobile App Interface",              price: "2023",              variant: "UI/UX Design · Prototyping",              imageSrc: "https://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151272908.jpg",              imageAlt: "Mobile app interface project"
            },
            {
              id: "4",              name: "Marketing Website",              price: "2023",              variant: "Web Design · Development",              imageSrc: "https://img.b2bpic.net/free-psd/minimal-habit-tracker-landing-page_23-2149294326.jpg",              imageAlt: "Marketing website project"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="By The Numbers"
          description="Impact and achievements through years of dedicated design work"
          tag="Experience"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "50+",              description: "Projects Completed"
            },
            {
              id: "2",              value: "100%",              description: "Client Satisfaction"
            },
            {
              id: "3",              value: "5+",              description: "Years Experience"
            },
            {
              id: "4",              value: "30+",              description: "Happy Clients"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Clients Say"
          description="Feedback from collaborators and clients I've had the pleasure to work with"
          tag="Testimonials"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              name: "Sarah Anderson",              handle: "CEO, TechStart Co",              testimonial: "Outstanding design work! The team's attention to detail and creative approach completely transformed our brand.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Anderson"
            },
            {
              id: "2",              name: "Michael Chen",              handle: "Founder, Creative Labs",              testimonial: "Professional, responsive, and incredibly talented. Delivered exactly what we envisioned and more.",              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: "Emma Williams",              handle: "Marketing Director, GrowthCo",              testimonial: "Best design investment we've made. Our conversion rates improved significantly after the redesign.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Emma Williams"
            },
            {
              id: "4",              name: "David Martinez",              handle: "Product Manager, InnovateLab",              testimonial: "Exceptional creativity combined with solid technical knowledge. A true professional to work with.",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              imageAlt: "David Martinez"
            },
            {
              id: "5",              name: "Lisa Thompson",              handle: "Founder, Digital Ventures",              testimonial: "Transformed our vision into reality. The design not only looks amazing but performs exceptionally well.",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "Lisa Thompson"
            },
            {
              id: "6",              name: "James Patterson",              handle: "CTO, Tech Solutions Inc",              testimonial: "Outstanding collaboration. The portfolio pieces speak for themselves. Highly recommend!",              imageSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",              imageAlt: "James Patterson"
            }
          ]}
        />
      </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. Drop me a message and let's discuss how I can help bring your vision to life."
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "your@email.com",              required: true
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell me about your project...",            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/young-beautiful-female-support-phone-operator-speaking-consulting-office_176420-949.jpg"
          imageAlt="Contact section image"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>

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