"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import FeatureCardTwentyTwo from '@/components/sections/feature/FeatureCardTwentyTwo';
import AboutMetric from '@/components/sections/about/AboutMetric';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Award, Briefcase, Sparkles, Star, ThumbsUp, TrendingUp, Users, Zap, Globe } from 'lucide-react';

export default function Portfolio() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="outline"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Portfolio"
          navItems={[
            { name: "Projects", id: "projects" },
            { name: "About", id: "about" },
            { name: "Experience", id: "metrics" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Based in Global"
          bottomRightText="hello@portfolio.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Creative Designer & Developer"
          description="Crafting exceptional digital experiences through innovative design and cutting-edge development. Explore my portfolio of award-winning projects."
          background={{ variant: "sparkles-gradient" }}
          tag="Available for Projects"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282085.jpg"
          imageAlt="Portfolio workspace"
          buttons={[
            { text: "View My Work", href: "projects" },
            { text: "Get In Touch", href: "contact" }
          ]}
        />
      </div>

      <div id="projects" data-section="projects">
        <FeatureCardTwentyTwo
          title="Featured Projects"
          description="A selection of recent work spanning web design, branding, and digital experiences"
          tag="Portfolio"
          tagIcon={Briefcase}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: "1",              title: "SaaS Platform Redesign: Modernizing User Experience",              category: ["Web Design", "UX/UI"],
              imageSrc: "https://img.b2bpic.net/free-vector/furniture-shop-ui-app-template_47987-1879.jpg",              imageAlt: "SaaS platform redesign project"
            },
            {
              id: "2",              title: "Brand Identity Development for Tech Startup",              category: ["Branding", "Visual Identity"],
              imageSrc: "https://img.b2bpic.net/free-vector/beauty-salon-booking-app_23-2148557907.jpg",              imageAlt: "Brand identity project"
            },
            {
              id: "3",              title: "E-Commerce Platform: Design & Development",              category: ["Web Development", "UI Design"],
              imageSrc: "https://img.b2bpic.net/free-vector/workout-tracker-app_23-2148639062.jpg",              imageAlt: "E-commerce platform project"
            },
            {
              id: "4",              title: "Analytics Dashboard: Data Visualization Interface",              category: ["Dashboard Design", "Frontend"],
              imageSrc: "https://img.b2bpic.net/free-vector/crowdfunding-app-collection-template_23-2148637235.jpg",              imageAlt: "Analytics dashboard project"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Passionate about creating digital solutions that inspire, engage, and deliver measurable results for forward-thinking brands"
          useInvertedBackground="noInvert"
          metrics={[
            {
              icon: Award,
              label: "Projects Completed",              value: "50+"
            },
            {
              icon: Users,
              label: "Satisfied Clients",              value: "30+"
            },
            {
              icon: Zap,
              label: "Years Experience",              value: "7+"
            },
            {
              icon: Globe,
              label: "Global Reach",              value: "15+"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Impact & Recognition"
          description="Metrics that showcase growth, innovation, and client success"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",              value: "98",              title: "%",              description: "Client Satisfaction Rate",              icon: ThumbsUp
            },
            {
              id: "2",              value: "2.5",              title: "M+",              description: "Total Users Impacted",              icon: TrendingUp
            },
            {
              id: "3",              value: "12",              title: "Awards",              description: "Design & Development Recognition",              icon: Star
            },
            {
              id: "4",              value: "40",              title: "%",              description: "Average Performance Improvement",              icon: Zap
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Client Testimonials"
          description="What my clients and collaborators have to say about working together"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "CEO",              testimonial: "The design and development work exceeded our expectations. The attention to detail and innovative approach transformed our digital presence.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Creative Director",              testimonial: "Working with this team was seamless. They brought our vision to life with stunning visuals and intuitive user experience.",              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: "Emily Rodriguez",              role: "Product Manager",              testimonial: "Exceptional work on our platform redesign. The improvements in user engagement and conversion rates were immediate and significant.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              role: "Founder",              testimonial: "A true professional who understands both design and business. Highly recommended for any ambitious digital project.",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              imageAlt: "David Kim"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to bring your vision to life? Let's collaborate and create something extraordinary together."
          animationType="reveal-blur"
          background={{ variant: "plain" }}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Start Project", href: "mailto:hello@portfolio.com" },
            { text: "Schedule Call", href: "https://calendly.com" }
          ]}
        />
      </div>

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