"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Zap } from 'lucide-react';

export default function Portfolio() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="plain"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Portfolio"
          button={{
            text: "Get in touch",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Transform Your Vision Into Reality"
          description="I create stunning digital experiences that turn visitors into loyal clients. Let's build something extraordinary together."
          tag="Portfolio 2024"
          buttons={[
            {
              text: "View My Work",              href: "featured-work"
            },
            {
              text: "Let's Talk",              href: "contact"
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282085.jpg"
          imageAlt="portfolio creative workspace design professional"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="I design thoughtful, high-converting digital experiences that help businesses thrive in the modern web."
          useInvertedBackground="invertDefault"
          buttons={[
            {
              text: "Learn My Process",              href: "process"
            }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureProcessSteps
          title="How I Work With Clients"
          description="My proven process ensures that every project exceeds expectations, from initial discovery through successful launch and ongoing optimization."
          tag="Process"
          tagIcon={Zap}
          steps={[
            {
              number: "01",              title: "Discovery & Strategy",              tag: "Week 1",              description: "Deep dive into your brand, goals, and audience. I analyze your competition and craft a strategic roadmap for success."
            },
            {
              number: "02",              title: "Design & Development",              tag: "Weeks 2-4",              description: "Beautiful mockups and interactive prototypes bring your vision to life. I code clean, performant solutions tailored to your needs."
            },
            {
              number: "03",              title: "Launch & Support",              tag: "Ongoing",              description: "Your project goes live with comprehensive testing and optimization. I provide ongoing support to ensure continued success."
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="featured-work" data-section="featured-work">
        <ProductCardThree
          title="Featured Projects"
          description="A selection of recent work showcasing design excellence and measurable results for clients across industries."
          products={[
            {
              id: "1",              name: "SaaS Platform Redesign",              price: "View Case",              imageSrc: "https://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg",              imageAlt: "SaaS platform redesign project"
            },
            {
              id: "2",              name: "E-Commerce Brand Identity",              price: "View Case",              imageSrc: "https://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164830.jpg",              imageAlt: "E-commerce brand identity project"
            },
            {
              id: "3",              name: "Digital Marketing Campaign",              price: "View Case",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-computer-desktop-workspace_53876-30381.jpg",              imageAlt: "Digital marketing campaign project"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Results & Impact"
          description="Proven track record of delivering exceptional results for clients worldwide."
          metrics={[
            {
              id: "1",              value: "150+",              title: "Projects Completed",              items: [
                "Across 20+ industries",                "Global client base",                "99% satisfaction rate"
              ]
            },
            {
              id: "2",              value: "8+",              title: "Years of Experience",              items: [
                "Design & development",                "Brand strategy",                "Digital transformation"
              ]
            },
            {
              id: "3",              value: "300%",              title: "Average ROI Increase",              items: [
                "For client projects",                "Conversion optimization",                "Performance improvements"
              ]
            },
            {
              id: "4",              value: "5★",              title: "Client Rating",              items: [
                "Consistently positive",                "Long-term partnerships",                "Trusted advisor status"
              ]
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Clients Say"
          description="Real feedback from real clients who've transformed their business with my work."
          testimonials={[
            {
              id: "1",              name: "Sarah Chen, CEO of TechVenture",              date: "Date: 15 November 2024",              title: "Exceptional design and execution",              quote: "Working with this designer transformed our entire digital presence. The attention to detail and strategic thinking resulted in a 250% increase in leads within the first quarter.",              tag: "Tech Startup",              avatarSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Michael Rodriguez, Director at BrandCorp",              date: "Date: 08 November 2024",              title: "A true creative partner",              quote: "Beyond just delivering a beautiful website, they understood our business goals and created a solution that exceeded all expectations. Highly recommend for any serious brand.",              tag: "Enterprise",              avatarSrc: "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",              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",              avatarAlt: "Michael Rodriguez"
            },
            {
              id: "3",              name: "Emily Watson, Founder of DesignStudio",              date: "Date: 02 November 2024",              title: "Incredible partner for growth",              quote: "They took our vision and made it better than we imagined. The redesign not only looks stunning but performs exceptionally well. Our conversion rate doubled.",              tag: "Design Agency",              avatarSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              avatarAlt: "Emily Watson"
            },
            {
              id: "4",              name: "James Liu, VP Product at InnovateLabs",              date: "Date: 25 October 2024",              title: "Strategic thinking + execution",              quote: "This designer brought strategic thinking to every decision. The result was a cohesive brand experience that resonated with our target audience and drove measurable business results.",              tag: "Product Company",              avatarSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              avatarAlt: "James Liu"
            },
            {
              id: "5",              name: "Lisa Anderson, Marketing Director at GrowthCo",              date: "Date: 18 October 2024",              title: "Professional and results-driven",              quote: "Professional, communicative, and results-driven. They delivered our project on time and within budget while maintaining excellent quality throughout the entire process.",              tag: "B2B SaaS",              avatarSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              avatarAlt: "Lisa Anderson"
            },
            {
              id: "6",              name: "David Park, CEO of StartupXYZ",              date: "Date: 10 October 2024",              title: "Worth every investment",              quote: "The investment in quality design paid off immediately. Our website now converts at industry-leading rates, and customer feedback has been overwhelmingly positive.",              tag: "E-Commerce",              avatarSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",              avatarAlt: "David Park"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Transform Your Digital Presence?"
          description="Let's discuss your project and how I can help you achieve your business goals. I'd love to hear about your vision and create something amazing together."
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Send Message"
          termsText="I respect your privacy. Your information will be handled securely and confidentially."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Portfolio"
        />
      </div>
    </ThemeProvider>
  );
}