"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Award, Code, Sparkles, Star, TrendingUp, User } from "lucide-react";

export default function Portfolio() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumLarge"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Portfolio"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Projects", id: "projects" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get In Touch",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Creative Designer & Developer"
          description="Crafting exceptional digital experiences through innovative design and cutting-edge development. Transforming ideas into elegant solutions."
          tag="Welcome to My Portfolio"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          buttons={[
            { text: "View My Work", href: "projects" },
            { text: "Contact Me", href: "contact" }
          ]}
          carouselItems={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-psd/minimal-magazine-cover-landing-page-template_23-2149660314.jpg",              imageAlt: "portfolio creative design showcase"
            },
            {
              id: "2",              imageSrc: "https://img.b2bpic.net/free-psd/emotional-wellbeing-landing-page_23-2149170499.jpg",              imageAlt: "project design creative work"
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-business-template-design_23-2149752068.jpg",              imageAlt: "digital design portfolio mockup"
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-psd/plant-care-template-design_23-2150262440.jpg",              imageAlt: "creative work design project"
            },
            {
              id: "5",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-interior-landing-page-design-template_23-2149263407.jpg",              imageAlt: "portfolio showcase design creative"
            },
            {
              id: "6",              imageSrc: "https://img.b2bpic.net/free-vector/modern-blog-landing-page-template_23-2148402691.jpg",              imageAlt: "design portfolio creative work"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Me"
          tagIcon={User}
          title="I'm a passionate designer and developer dedicated to creating beautiful, functional digital experiences. With expertise in UI/UX design, web development, and brand strategy, I help businesses stand out in the digital landscape."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Download Resume", href: "#" }
          ]}
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardThree
          title="Featured Projects"
          description="A selection of my best work across web design, app development, and branding. Each project represents a unique challenge and creative solution."
          tag="Portfolio"
          tagIcon={Code}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          gridVariant="two-columns-alternating-heights"
          products={[
            {
              id: "1",              name: "Mobile App Design System",              price: "View Project",              imageSrc: "https://img.b2bpic.net/free-psd/landing-page-template-professional-business_23-2150623079.jpg",              imageAlt: "mobile app design interface"
            },
            {
              id: "2",              name: "E-Commerce Website Redesign",              price: "View Project",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-business-template-design_23-2149752076.jpg",              imageAlt: "website design digital ui"
            },
            {
              id: "3",              name: "Brand Identity Package",              price: "View Project",              imageSrc: "https://img.b2bpic.net/free-psd/creative-template-design_23-2150217599.jpg",              imageAlt: "branding identity design logo"
            },
            {
              id: "4",              name: "SaaS Dashboard Interface",              price: "View Project",              imageSrc: "https://img.b2bpic.net/free-psd/autumn-template-design_23-2150608983.jpg",              imageAlt: "web design interface digital"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Impact & Experience"
          description="Proven track record of delivering exceptional results"
          tag="Statistics"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",              value: "50+",              title: "Projects",              description: "Completed with excellence",              icon: Code
            },
            {
              id: "2",              value: "95%",              title: "Satisfaction",              description: "Client satisfaction rate",              icon: Star
            },
            {
              id: "3",              value: "8+",              title: "Years",              description: "Of design experience",              icon: Award
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Work Together"
          description="I'm always excited to collaborate on new projects and ideas. Get in touch to discuss how I can help bring your vision to life."
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164813.jpg"
          imageAlt="workspace office desk creative"
          mediaPosition="right"
          buttonText="Send Message"
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Your Email",              required: true
            },
            {
              name: "subject",              type: "text",              placeholder: "Project Subject",              required: true
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell me about your project...",            rows: 5,
            required: true
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Portfolio"
          columns={[
            {
              items: [
                { label: "Home", href: "hero" },
                { label: "About", href: "about" },
                { label: "Projects", href: "projects" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "contact" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "GitHub", href: "https://github.com" }
              ]
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Dribbble", href: "https://dribbble.com" },
                { label: "Email", href: "mailto:hello@portfolio.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}