"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Sparkles, Palette, Code, Zap, Image, Briefcase, Globe, Smartphone } from "lucide-react";

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="large"
      background="floatingGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Portfolio"
          navItems={[
            { name: "About", id: "about" },
            { name: "Projects", id: "projects" },
            { name: "Skills", id: "skills" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get In Touch",            href: "contact"
          }}
          buttonClassName="px-4 py-2 rounded-lg"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Creative Designer & Developer"
          description="Crafting beautiful, functional digital experiences that inspire and engage. Specializing in web design, UI/UX, and interactive solutions."
          tag="Welcome"
          tagIcon={Sparkles}
          buttons={[
            { text: "View My Work", href: "projects" },
            { text: "Let's Connect", href: "contact" }
          ]}
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Creative Analytics",            logoIcon: Palette,
            imageSrc: "https://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg",            searchPlaceholder: "Search projects...",            buttons: [
              { text: "Portfolio", href: "projects" },
              { text: "Resume", href: "#" }
            ],
            sidebarItems: [
              { icon: Palette },
              { icon: Code },
              { icon: Zap }
            ],
            stats: [
              {
                title: "Projects",                values: [12, 18, 24],
                description: "Completed works"
              },
              {
                title: "Clients",                values: [8, 15, 22],
                description: "Satisfied partners"
              },
              {
                title: "Experience",                values: [2, 5, 8],
                valuePrefix: "",                valueSuffix: "yrs",                description: "Years in design"
              }
            ],
            chartTitle: "Monthly Growth",            chartData: [
              { value: 45 },
              { value: 62 },
              { value: 58 },
              { value: 75 },
              { value: 88 }
            ],
            listTitle: "Recent Projects",            listItems: [
              {
                icon: Briefcase,
                title: "E-Commerce Platform",                status: "Completed"
              },
              {
                icon: Globe,
                title: "Corporate Redesign",                status: "In Progress"
              },
              {
                icon: Smartphone,
                title: "Mobile App Design",                status: "Completed"
              }
            ]
          }}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About Me"
          description={[
            "I'm a passionate designer and developer with 5+ years of experience creating stunning digital experiences. My journey began with a love for design, and over time, I've honed my skills across UI/UX, web development, and interactive media.",            "I believe in the power of thoughtful design to solve real problems and create meaningful connections between users and brands. My approach combines creative aesthetics with technical precision, ensuring every project is both beautiful and functional.",            "When I'm not designing or coding, you'll find me exploring new design trends, contributing to open-source projects, or sharing knowledge with the design community."
          ]}
          buttons={[
            { text: "Download Resume", href: "#" },
            { text: "Connect on LinkedIn", href: "#" }
          ]}
          showBorder={true}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="projects" data-section="projects">
        <FeatureCardMedia
          title="Featured Projects"
          description="A selection of recent work showcasing my design and development capabilities across various industries and platforms."
          tag="Gallery"
          tagIcon={Image}
          features={[
            {
              id: "1",              title: "E-Commerce Platform Redesign",              description: "Complete redesign and development of a high-traffic e-commerce platform, improving conversion rates by 35% through enhanced UX and performance optimization.",              tag: "Web Design",              imageSrc: "https://img.b2bpic.net/free-vector/business-landing-page-template_52683-28746.jpg",              imageAlt: "E-commerce project mockup",              buttons: [
                { text: "View Case Study", href: "#" }
              ]
            },
            {
              id: "2",              title: "Mobile App Interface System",              description: "Designed a comprehensive design system for a fintech mobile application, creating 80+ reusable components and establishing design guidelines for scalability.",              tag: "App Design",              imageSrc: "https://img.b2bpic.net/free-vector/business-workshop-social-media-pack-landing-page_23-2149381280.jpg",              imageAlt: "Mobile app interface design",              buttons: [
                { text: "Explore Design", href: "#" }
              ]
            },
            {
              id: "3",              title: "Brand Identity & Website",              description: "Complete branding overhaul and website development for a creative agency, including logo design, color system, and interactive web experience.",              tag: "Branding",              imageSrc: "https://img.b2bpic.net/free-psd/flat-design-car-sharing-landing-page_23-2150431825.jpg",              imageAlt: "Brand identity project",              buttons: [
                { text: "View Website", href: "#" }
              ]
            },
            {
              id: "4",              title: "SaaS Dashboard Design",              description: "Developed an intuitive analytics dashboard for a B2B SaaS platform, focusing on data visualization and user workflow optimization.",              tag: "Dashboard",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-interior-landing-page-design-template_23-2149263407.jpg",              imageAlt: "SaaS dashboard interface",              buttons: [
                { text: "See Live Demo", href: "#" }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          carouselMode="buttons"
        />
      </div>

      <div id="skills" data-section="skills">
        <MetricCardTen
          title="Skills & Expertise"
          description="My core competencies across design, development, and creative disciplines"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              title: "UI/UX Design",              subtitle: "User-centered interface and experience design",              category: "Design",              value: "Expert",              buttons: [
                { text: "Learn More", href: "#" }
              ]
            },
            {
              id: "2",              title: "Web Development",              subtitle: "Full-stack web application development",              category: "Development",              value: "Expert",              buttons: [
                { text: "See Projects", href: "#" }
              ]
            },
            {
              id: "3",              title: "Branding & Identity",              subtitle: "Logo design and brand system creation",              category: "Branding",              value: "Advanced",              buttons: [
                { text: "View Portfolio", href: "#" }
              ]
            },
            {
              id: "4",              title: "Motion & Animation",              subtitle: "Interactive and animated experiences",              category: "Animation",              value: "Advanced",              buttons: [
                { text: "Explore Work", href: "#" }
              ]
            },
            {
              id: "5",              title: "Design Systems",              subtitle: "Scalable component architecture",              category: "Systems",              value: "Expert",              buttons: [
                { text: "View Framework", href: "#" }
              ]
            },
            {
              id: "6",              title: "Prototyping & Tools",              subtitle: "Figma, Adobe Suite, and development tools",              category: "Tools",              value: "Expert",              buttons: [
                { text: "Tech Stack", href: "#" }
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Working with this designer was transformative. They didn't just create beautiful work—they understood our vision and delivered solutions that exceeded our expectations. Their attention to detail and collaborative approach made the entire process seamless."
          rating={5}
          author="Sarah Johnson, CEO at TechVenture"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              alt: "Sarah Johnson"
            },
            {
              src: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              alt: "Client testimonial"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              alt: "Client testimonial"
            },
            {
              src: "https://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84733.jpg",              alt: "Client testimonial"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Work Together"
          description="Have a project in mind? I'd love to hear about it. Send me a message and I'll get back to you as soon as possible. Let's create something amazing together."
          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 Name",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell me about your project...",            rows: 6,
            required: true
          }}
          imageSrc="https://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164870.jpg"
          imageAlt="Creative workspace"
          mediaPosition="right"
          buttonText="Send Message"
          useInvertedBackground="noInvert"
          onSubmit={(data) => console.log('Form submitted:', data)}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Navigation",              items: [
                { label: "Home", href: "#" },
                { label: "About", href: "about" },
                { label: "Projects", href: "projects" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "LinkedIn", href: "#" },
                { label: "GitHub", href: "#" },
                { label: "Twitter", href: "#" },
                { label: "Dribbble", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Sitemap", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Portfolio. All rights reserved."
          onPrivacyClick={() => console.log('Privacy clicked')}
        />
      </div>
    </ThemeProvider>
  );
}