"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Portfolio"
          navItems={[
            { name: "About", id: "about" },
            { name: "Work", id: "work" },
            { name: "Impact", id: "metrics" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get in Touch", href: "#contact" }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="PORTFOLIO"
          description="Crafting beautiful digital experiences through thoughtful design and strategic development. Specializing in web design, branding, and digital products that drive impact."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "View My Work", href: "#work" },
            { text: "Get in Touch", href: "#contact" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282085.jpg"
          imageAlt="Portfolio workspace and creative projects"
          frameStyle="browser"
        />
      </div>
      
      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="About Me"
          title="Creative Designer & Developer"
          description="I'm a passionate designer with 8+ years of experience creating compelling digital experiences. I blend strategic thinking with creative problem-solving to deliver designs that not only look beautiful but drive measurable business results. My expertise spans web design, user experience, branding, and digital strategy."
          metrics={[
            { value: "50+", title: "Projects Completed" },
            { value: "15+", title: "Years Combined Expertise" }
          ]}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-65.jpg"
          imageAlt="Professional portrait in creative workspace"
        />
      </div>
      
      <div id="work" data-section="work">
        <ProductCardFour
          title="Featured Projects"
          description="Explore a selection of recent work showcasing diverse design challenges and innovative solutions across different industries and mediums."
          tag="Portfolio Gallery"
          products={[
            {
              id: "1",              name: "E-Commerce Platform Redesign",              price: "2024",              variant: "Web Design, UX Strategy",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-man-working-with-tablet_23-2149930989.jpg",              imageAlt: "E-commerce platform redesign project"
            },
            {
              id: "2",              name: "Brand Identity & Web Presence",              price: "2024",              variant: "Branding, Web Design",              imageSrc: "https://img.b2bpic.net/free-vector/social-page-application-ui-design-concept_1284-45234.jpg",              imageAlt: "Brand identity and website project"
            },
            {
              id: "3",              name: "Mobile App Design System",              price: "2023",              variant: "App Design, UI/UX",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-hands-holding-paper_23-2149930960.jpg",              imageAlt: "Mobile app design system"
            },
            {
              id: "4",              name: "SaaS Platform Interface",              price: "2023",              variant: "Product Design, UX",              imageSrc: "https://img.b2bpic.net/free-psd/landing-page-swimming-club-template_23-2148463354.jpg",              imageAlt: "SaaS platform interface design"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Impact by Numbers"
          description="Measurable results that demonstrate the value I bring to every project and partnership."
          tag="Achievements"
          metrics={[
            {
              id: "1",              value: "98%",              title: "Client Satisfaction Rate",              items: [
                "Long-term partnerships maintained",                "Repeat business from satisfied clients",                "Positive testimonials and referrals"
              ]
            },
            {
              id: "2",              value: "40%",              title: "Average Conversion Increase",              items: [
                "Enhanced user experience design",                "Strategic UX improvements",                "Data-driven optimization"
              ]
            },
            {
              id: "3",              value: "8",              title: "Years of Expertise",              items: [
                "Web design and development",                "Brand strategy and identity",                "Digital product development"
              ]
            },
            {
              id: "4",              value: "50+",              title: "Successful Projects",              items: [
                "Diverse industry experience",                "Multiple award nominations",                "Portfolio spanning all sectors"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Clients Say"
          description="Don't just take my word for it. Here's what my clients have to say about working together."
          tag="Testimonials"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              handle: "@sarahmitchell",              testimonial: "Working with this designer transformed our entire digital presence. The attention to detail and strategic thinking resulted in a 45% increase in conversions. Highly recommend!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",              imageAlt: "Sarah Mitchell, CEO"
            },
            {
              id: "2",              name: "James Chen",              handle: "@jameschen_co",              testimonial: "Exceptional creativity combined with solid technical knowledge. Delivered the project on time and exceeded our expectations. A true professional.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",              imageAlt: "James Chen, Founder"
            },
            {
              id: "3",              name: "Emma Rodriguez",              handle: "@emmadesigns",              testimonial: "The brand identity work was outstanding. They understood our vision perfectly and created something that truly resonates with our target audience.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-black-t-shirt-isolated-pink-wall_141793-82450.jpg",              imageAlt: "Emma Rodriguez, Marketing Director"
            },
            {
              id: "4",              name: "David Thompson",              handle: "@davidthompson",              testimonial: "Collaborative, responsive, and incredibly talented. Made the entire design process smooth and enjoyable. Can't wait to work together again!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-people-avatar-collection_23-2148074529.jpg",              imageAlt: "David Thompson, Product Manager"
            }
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Work Together"
          description="Have a project in mind? I'd love to hear about it. Fill out the form below and I'll get back to you as soon as possible."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
            { name: "company", type: "text", placeholder: "Company or Business", required: false },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: false }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell me about your project, goals, and timeline...",            rows: 6,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/smiling-woman-using-smartphone-couch_53876-96944.jpg"
          imageAlt="Contact and communication illustration"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg"
          imageAlt="Creative workspace and professional studio"
          columns={[
            {
              title: "Navigation",              items: [
                { label: "Home", href: "#" },
                { label: "About", href: "#about" },
                { label: "Work", href: "#work" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Web Design", href: "#" },
                { label: "UX/UI Design", href: "#" },
                { label: "Branding", href: "#" },
                { label: "Consulting", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "LinkedIn", href: "#" },
                { label: "Twitter", href: "#" },
                { label: "Dribbble", href: "#" },
                { label: "Email", href: "#" }
              ]
            }
          ]}
          logoText="Portfolio"
          copyrightText="© 2025 | All Rights Reserved"
        />
      </div>
    </ThemeProvider>
  );
}