"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="outline"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Portfolio"
          navItems={[
            { name: "About", id: "about" },
            { name: "Projects", id: "projects" },
            { name: "Work", id: "work" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Crafting Digital Experiences"
          description="I design and build beautiful, functional websites and applications that bring ideas to life. Explore my work below."
          tag="Designer & Developer"
          imageSrc="https://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg"
          imageAlt="portfolio creative workspace design dark"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "View My Work", href: "projects" },
            { text: "Get In Touch", href: "contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Me"
          title="I'm a creative designer with a passion for solving complex problems through elegant digital solutions. With 5+ years of experience, I specialize in web design, user experience, and brand identity."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Download Resume", href: "https://example.com/resume.pdf" },
            { text: "Connect on LinkedIn", href: "https://linkedin.com" }
          ]}
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardThree
          title="Featured Projects"
          description="A selection of recent work showcasing design thinking and technical implementation"
          tag="Portfolio"
          products={[
            {
              id: "1",              name: "E-Commerce Platform Redesign",              price: "2023",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-interior-landing-page-design-template_23-2149263407.jpg",              imageAlt: "web design project portfolio creative mockup"
            },
            {
              id: "2",              name: "Mobile App Interface Design",              price: "2023",              imageSrc: "https://img.b2bpic.net/free-vector/flat-design-web-designer-landing-page_23-2150397655.jpg",              imageAlt: "digital design project interface creative mockup"
            },
            {
              id: "3",              name: "Brand Identity System",              price: "2022",              imageSrc: "https://img.b2bpic.net/free-vector/flat-design-rugby-game-landing-page_23-2150224407.jpg",              imageAlt: "branding project portfolio creative design"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="work" data-section="work">
        <FeatureCardNine
          title="Featured Work"
          description="Deep dive into my latest projects with detailed case studies and results"
          tag="Case Studies"
          features={[
            {
              id: 1,
              title: "Complete Design System Overhaul",              description: "Led a comprehensive redesign of a major e-commerce platform, improving user engagement by 45% and conversion rates by 23%. Implemented a modular design system used across 50+ pages.",              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/workspace-with-note-brick-wall_53876-31266.jpg",                imageAlt: "design work portfolio case study creative professional"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-photo/workspace-with-note-brick-wall_53876-31266.jpg",                imageAlt: "design work portfolio case study creative professional"
              }
            },
            {
              id: 2,
              title: "Mobile-First Application Development",              description: "Designed and developed a financial dashboard application from scratch. Focused on accessibility and performance, achieving 98% Lighthouse score and supporting 100K+ daily active users.",              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-vector/vinous-white-business-brochure-collection_1142-935.jpg",                imageAlt: "creative project portfolio showcase design work mockup"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-vector/vinous-white-business-brochure-collection_1142-935.jpg",                imageAlt: "creative project portfolio showcase design work mockup"
              }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Working with this designer transformed our digital presence. Their attention to detail and innovative approach resulted in a product our users absolutely love."
          rating={5}
          author="Sarah Mitchell, CEO at TechStart"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "professional avatar portrait user headshot"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",              alt: "professional avatar portrait user headshot"
            },
            {
              src: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              alt: "professional avatar portrait user headshot"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Ready to collaborate?"
          description="I'd love to hear about your project and discuss how I can help bring your vision to life. Drop me a message and I'll get back to you within 24 hours."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg"
          imageAlt="portfolio creative workspace design dark"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Send Message"
          termsText="I'll respond to your message within 24 hours. Your privacy is important to me."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Portfolio"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "About", href: "about" },
                { label: "Projects", href: "projects" }
              ]
            },
            {
              items: [
                { label: "Work", href: "work" },
                { label: "Contact", href: "contact" },
                { label: "Resume", href: "https://example.com/resume.pdf" }
              ]
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "GitHub", href: "https://github.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}