"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Lightbulb, Users, Palette, Sparkles, Mail } from "lucide-react";

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-mesh"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Portfolio"
          navItems={[
            { name: "Work", id: "gallery" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="PORTFOLIO"
          description="Award-winning designer crafting digital experiences that inspire and engage"
          buttons={[
            { text: "View Work", href: "gallery" },
            { text: "Get in Touch", href: "contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg"
          imageAlt="Creative workspace and design portfolio"
          showDimOverlay={true}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardFour
          title="Featured Projects"
          description="A selection of recent work showcasing design excellence and creative problem-solving"
          tag="Portfolio Highlights"
          products={[
            {
              id: "1",              name: "E-Commerce Platform Redesign",              price: "2024",              variant: "Web Design · UX/UI",              imageSrc: "https://img.b2bpic.net/free-vector/flat-design-brutalism-template_52683-97146.jpg",              imageAlt: "E-commerce website design"
            },
            {
              id: "2",              name: "Brand Identity & Guidelines",              price: "2024",              variant: "Branding · Design System",              imageSrc: "https://img.b2bpic.net/free-vector/travel-landing-page-template-with-photo_23-2148492826.jpg",              imageAlt: "Brand identity project"
            },
            {
              id: "3",              name: "Mobile App Design Suite",              price: "2023",              variant: "Mobile Design · Prototyping",              imageSrc: "https://img.b2bpic.net/free-vector/making-new-memories-travel-mobile-app_23-2148497898.jpg",              imageAlt: "Mobile application design"
            },
            {
              id: "4",              name: "SaaS Dashboard Interface",              price: "2023",              variant: "Interface Design · Analytics",              imageSrc: "https://img.b2bpic.net/free-vector/travel-landing-page-template-with-photo_23-2148492831.jpg",              imageAlt: "SaaS dashboard design"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="about" data-section="about">
        <FeatureCardTwentyFive
          title="About My Practice"
          description="Passionate about creating meaningful digital experiences through thoughtful design and strategic thinking"
          features={[
            {
              title: "Strategic Design Thinking",              description: "Every project starts with understanding user needs, business goals, and market opportunities to create solutions that truly resonate.",              icon: Lightbulb,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/group-business-executives-interacting-with-each-other_1170-760.jpg",                  imageAlt: "Design strategy workshop"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/empty-meeting-office-space-enterprise-used-workers-attend-conferences_482257-115920.jpg",                  imageAlt: "Creative process collaboration"
                }
              ]
            },
            {
              title: "User-Centered Approach",              description: "Research, testing, and iteration inform every design decision, ensuring interfaces that are both beautiful and highly functional.",              icon: Users,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/empty-meeting-office-space-enterprise-used-workers-attend-conferences_482257-115920.jpg",                  imageAlt: "User research and testing"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/group-business-executives-interacting-with-each-other_1170-760.jpg",                  imageAlt: "Design collaboration team"
                }
              ]
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="featured-work" data-section="featured-work">
        <FeatureCardTwentyFive
          title="Core Expertise"
          description="Specializing in comprehensive digital design solutions that drive business growth and user satisfaction"
          features={[
            {
              title: "UI/UX Design",              description: "Creating intuitive interfaces and seamless user experiences across web and mobile platforms with accessibility at the forefront.",              icon: Palette,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/flat-design-brutalism-template_52683-97146.jpg",                  imageAlt: "UI design showcase"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/making-new-memories-travel-mobile-app_23-2148497898.jpg",                  imageAlt: "User experience design"
                }
              ]
            },
            {
              title: "Brand Development",              description: "Crafting distinct visual identities and comprehensive brand systems that communicate values and build meaningful connections.",              icon: Sparkles,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/travel-landing-page-template-with-photo_23-2148492826.jpg",                  imageAlt: "Brand identity design"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/travel-landing-page-template-with-photo_23-2148492831.jpg",                  imageAlt: "Brand system guidelines"
                }
              ]
            }
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Client Feedback"
          description="What clients say about working together and the impact of design on their businesses"
          testimonials={[
            {
              id: "1",              name: "Alexandra Chen",              role: "CEO, TechVenture",              testimonial: "The design work transformed our platform completely. Users immediately noticed the improved experience, and our conversion rate increased by 40% within the first month.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Alexandra Chen"
            },
            {
              id: "2",              name: "Michael Richardson",              role: "Marketing Director, Creative Co",              testimonial: "Beyond just beautiful design, the strategic thinking behind every decision made a real difference. Our brand now stands out meaningfully in a crowded market.",              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 Richardson"
            },
            {
              id: "3",              name: "Sofia Morales",              role: "Founder, StartupHub",              testimonial: "Working with this designer was a game-changer. They understood our vision and brought it to life in ways we hadn't even imagined. Highly recommend.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Sofia Morales"
            },
            {
              id: "4",              name: "James Park",              role: "Product Manager, Digital Ventures",              testimonial: "Professional, detail-oriented, and genuinely collaborative. The mobile app design exceeded all expectations and our users absolutely love it.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              imageAlt: "James Park"
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Impact by Numbers"
          description="Measurable results from design-driven solutions across diverse projects and industries"
          metrics={[
            {
              id: "1",              value: "50+",              description: "Projects Completed"
            },
            {
              id: "2",              value: "8 Years",              description: "Industry Experience"
            },
            {
              id: "3",              value: "95%",              description: "Client Satisfaction"
            },
            {
              id: "4",              value: "3.2x",              description: "Average ROI Increase"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Let's Collaborate"
          tagIcon={Mail}
          title="Ready to Start Your Next Project?"
          description="I'd love to hear about your ideas and discuss how thoughtful design can drive meaningful results for your business."
          buttons={[
            { text: "Send Message", href: "mailto:contact@portfolio.com" },
            { text: "Schedule Call", href: "https://calendly.com" }
          ]}
          background={{ variant: "gradient-bars" }}
          useInvertedBackground="invertDefault"
        />
      </div>

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