"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import ProductCardSix from '@/components/sections/product/ProductCardSix';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { CheckCircle, Mail, Sparkles } from "lucide-react";

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="radialGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="outline"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Alex Johnson"
          button={{
            text: "Get In Touch",
            href: "contact"
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Smart, Creative & Ready to Contribute"
          description="A passionate developer and designer bringing innovation to every project. Let's build something amazing together."
          tag="Portfolio"
          tagIcon={Sparkles}
          buttons={[
            {
              text: "View My Work",
              href: "projects"
            },
            {
              text: "Contact Me",
              href: "contact"
            }
          ]}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890613975-qn26d6fo.jpg",
              imageAlt: "Portfolio project showcase"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140103339-f3be0gdh.jpg",
              imageAlt: "Creative workspace and design work"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890614841-r9nrnxwb.jpg",
              imageAlt: "Web design and development project"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320179601-o8gildtx.jpg",
              imageAlt: "Coding and programming project"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320185368-un006460.jpg",
              imageAlt: "Innovation and technology project"
            }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <ParallaxAbout
          title="Driven by Curiosity & Excellence"
          description="I'm a dedicated professional with a passion for solving complex problems through thoughtful design and clean code. My internship experience has shaped me into a collaborative team player who brings fresh perspectives and technical expertise to every challenge."
          tag="About Me"
          tagIcon={CheckCircle}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890615933-0neupp6r.jpg"
          imageAlt="Professional workspace"
          buttons={[
            {
              text: "Download Resume",
              href: "#"
            }
          ]}
        />
      </div>
      
      <div id="skills" data-section="skills">
        <FeatureCardEight
          title="Core Competencies"
          description="Skills developed through hands-on internship experience and continuous learning"
          tag="Skills"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Problem Solving",
              description: "Breaking down complex challenges into actionable solutions with analytical thinking and creative approaches",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890613975-qn26d6fo.jpg"
            },
            {
              id: 2,
              title: "Technical Development",
              description: "Full-stack development expertise in modern frameworks and languages with clean, maintainable code",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890617132-yvy0u2kp.jpg"
            },
            {
              id: 3,
              title: "User Experience Design",
              description: "Creating intuitive interfaces and experiences with attention to detail and user-centered thinking",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890617949-iq0qbvod.jpg"
            },
            {
              id: 4,
              title: "Team Collaboration",
              description: "Working effectively across departments, communicating clearly, and contributing to collective success",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890618746-4oj97n04.jpg"
            }
          ]}
        />
      </div>
      
      <div id="projects" data-section="projects">
        <ProductCardSix
          title="Featured Projects"
          description="Showcasing my best work and accomplishments"
          tag="Portfolio"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          carouselMode="buttons"
          products={[
            {
              id: "1",
              name: "E-Commerce Platform",
              price: "Featured",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620033-sckgfvwd.jpg",
              imageAlt: "E-commerce web application"
            },
            {
              id: "2",
              name: "Mobile App Design",
              price: "Featured",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620807-l4c3d1a4.jpg",
              imageAlt: "Mobile application interface design"
            },
            {
              id: "3",
              name: "Analytics Dashboard",
              price: "Featured",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890613975-qn26d6fo.jpg",
              imageAlt: "Data analytics platform"
            }
          ]}
        />
      </div>
      
      <div id="achievements" data-section="achievements">
        <MetricCardSeven
          title="By The Numbers"
          description="Measurable impact and growth through dedication and hard work"
          tag="Achievements"
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",
              value: "10+",
              title: "Projects Completed",
              items: [
                "Full-stack applications",
                "Cross-functional collaboration",
                "Production deployments"
              ]
            },
            {
              id: "2",
              value: "6",
              title: "Months Internship Experience",
              items: [
                "Real-world problem solving",
                "Client presentations",
                "Mentorship opportunities"
              ]
            },
            {
              id: "3",
              value: "95%",
              title: "Project Success Rate",
              items: [
                "On-time deliverables",
                "Client satisfaction",
                "Quality standards met"
              ]
            },
            {
              id: "4",
              value: "3",
              title: "Awards & Recognition",
              items: [
                "Internship excellence award",
                "Technical innovation",
                "Team player recognition"
              ]
            }
          ]}
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEleven
          title="What People Say"
          description="Feedback from mentors, colleagues, and supervisors"
          tag="Testimonials"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              nameTitle: "Sarah Chen, Engineering Manager",
              quote: "Alex demonstrates exceptional technical skills and a genuine desire to learn. They consistently delivered high-quality work and were a great addition to our team.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766169052172-9u05npy6.jpg",
              imageAlt: "Sarah Chen"
            },
            {
              id: "2",
              nameTitle: "Michael Rodriguez, Senior Developer",
              quote: "Working with Alex was a pleasure. Their problem-solving approach is thoughtful, and they're always willing to collaborate and ask great questions.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "Michael Rodriguez"
            },
            {
              id: "3",
              nameTitle: "Jessica Park, Product Lead",
              quote: "Alex brought fresh ideas to our team and took ownership of their projects. They show real promise for a successful career in tech.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Jessica Park"
            },
            {
              id: "4",
              nameTitle: "David Thompson, CTO",
              quote: "Impressive work ethic and technical foundation. Alex is well-prepared for the next phase of their career and will make a strong impact anywhere they go.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890622062-lbpgvj8v.jpg",
              imageAlt: "David Thompson"
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          title="Ready for Your Next Opportunity"
          description="I'm actively seeking internship and entry-level positions where I can continue growing and making meaningful contributions. Let's connect and explore how I can add value to your team."
          tagIcon={Mail}
          inputPlaceholder="your@email.com"
          buttonText="Send Message"
          termsText="I'll get back to you within 24 hours. We respect your privacy."
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Navigate",
              items: [
                {
                  label: "Home",
                  href: "hero"
                },
                {
                  label: "About",
                  href: "about"
                },
                {
                  label: "Skills",
                  href: "skills"
                },
                {
                  label: "Projects",
                  href: "projects"
                }
              ]
            },
            {
              title: "Connect",
              items: [
                {
                  label: "LinkedIn",
                  href: "https://linkedin.com"
                },
                {
                  label: "GitHub",
                  href: "https://github.com"
                },
                {
                  label: "Email",
                  href: "mailto:alex@email.com"
                },
                {
                  label: "Contact",
                  href: "contact"
                }
              ]
            },
            {
              title: "Resources",
              items: [
                {
                  label: "Resume",
                  href: "#"
                },
                {
                  label: "Portfolio",
                  href: "projects"
                },
                {
                  label: "Blog",
                  href: "#"
                },
                {
                  label: "Case Studies",
                  href: "#"
                }
              ]
            }
          ]}
          copyrightText="© 2025 Alex Johnson. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}