"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Award } from "lucide-react";

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="large"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Webild Studio"
          navItems={[
            { name: "Work", id: "/portfolio" },
            { name: "Services", id: "/services" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get Started",
            href: "/contact"
          }}
        />
      </div>

      <div id="featured-projects" data-section="featured-projects">
        <ProductCardTwo
          title="Featured Case Studies"
          description="Explore our most impactful projects showcasing innovative design solutions and measurable business results across various industries"
          tag="Portfolio Highlights"
          tagIcon={Award}
          products={[
            {
              id: "1",
              brand: "TechVision",
              name: "Complete SaaS Platform Redesign",
              price: "8-week engagement",
              rating: 5,
              reviewCount: "Featured",
              imageSrc: "https://img.b2bpic.net/free-photo/grand-parent-learning-use-digital-divice_23-2149214556.jpg",
              imageAlt: "TechVision SaaS platform interface redesign showcase"
            },
            {
              id: "2",
              brand: "Aurora Digital",
              name: "Mobile-First Experience Design",
              price: "12-week project",
              rating: 5,
              reviewCount: "Award Winner",
              imageSrc: "https://img.b2bpic.net/free-photo/side-view-man-working-desk_23-2149930959.jpg",
              imageAlt: "Aurora Digital mobile application UI design"
            },
            {
              id: "3",
              brand: "Luxe Brands Co",
              name: "End-to-End Brand Identity",
              price: "6-week project",
              rating: 5,
              reviewCount: "Featured",
              imageSrc: "https://img.b2bpic.net/free-photo/web-design-online-technology-content-concept_53876-123927.jpg",
              imageAlt: "Luxe Brands comprehensive branding solution"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
        />
      </div>

      <div id="client-success" data-section="client-success">
        <TestimonialCardFifteen
          testimonial="Working with Webild Studio has been transformative for our business. They didn't just redesign our platform - they reimagined our entire user experience. The results speak for themselves: 40% increase in user engagement and 60% boost in conversions within the first month of launch."
          rating={5}
          author="Lisa Chen, VP of Product at TechVision"
          avatars={[
            { src: "https://img.b2bpic.net/free-vector/blue-circle-with-white-user_78370-4707.jpg", alt: "Client testimonial avatar" },
            { src: "https://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg", alt: "Client testimonial avatar" },
            { src: "https://img.b2bpic.net/free-photo/portrait-man-laughing_23-2148859448.jpg", alt: "Client testimonial avatar" },
            { src: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Client testimonial avatar" },
            { src: "https://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2148827181.jpg", alt: "Client testimonial avatar" },
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg", alt: "Client testimonial avatar" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="more-work" data-section="more-work">
        <ProductCardTwo
          title="Additional Showcase"
          description="More examples of our creative excellence and technical innovation across different project scales and industries"
          tag="Recent Work"
          tagIcon={Award}
          products={[
            {
              id: "4",
              brand: "StartupLaunch",
              name: "MVP Development & Launch",
              price: "10-week sprint",
              rating: 5,
              reviewCount: "Live",
              imageSrc: "https://img.b2bpic.net/free-vector/infographic-dashboard-user-panel_52683-30026.jpg",
              imageAlt: "StartupLaunch MVP platform development"
            },
            {
              id: "5",
              brand: "RetailMax",
              name: "E-commerce Platform Redesign",
              price: "14-week project",
              rating: 5,
              reviewCount: "Launched",
              imageSrc: "https://img.b2bpic.net/free-photo/disabled-man-wheelchair-working-his-office-job_23-2149571107.jpg",
              imageAlt: "RetailMax e-commerce platform redesign"
            },
            {
              id: "6",
              brand: "HealthTech Solutions",
              name: "Healthcare Dashboard System",
              price: "16-week build",
              rating: 5,
              reviewCount: "Active",
              imageSrc: "https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg",
              imageAlt: "HealthTech healthcare dashboard interface"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
          imageAlt="Creative footer background"
          logoText="Webild Studio"
          copyrightText="© 2025 Webild Studio. All rights reserved."
          columns={[
            {
              title: "Services",
              items: [
                { label: "Brand Design", href: "/services" },
                { label: "Web Development", href: "/services" },
                { label: "Mobile Apps", href: "/services" },
                { label: "Digital Marketing", href: "/services" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Portfolio", href: "/portfolio" },
                { label: "Careers", href: "/contact" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Contact", href: "/contact" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Instagram", href: "https://instagram.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}