"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Cpu, Zap, Palette, BookOpen, Clock, Linkedin, Mail } from "lucide-react";
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';

export default function PortfolioPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="medium"
        background="noise"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={[
              { name: "Work", id: "hero" },
              { name: "Experience", id: "experience" },
              { name: "About", id: "about" },
              { name: "Services", id: "features" },
              { name: "Contact", id: "contact" }
            ]}
            brandName="Portfolio"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroSplitDualMedia
            title="Creative Digital Designer"
            description="Crafting meaningful digital experiences that blend aesthetic beauty with functional precision. Focused on building human-centric products that make an impact."
            background={{ variant: "sparkles-gradient" }}
            tag="Available for Hire"
            rating={5}
            ratingText="Over 50+ successful projects completed"
            mediaItems={[
                { imageSrc: "https://img.b2bpic.net/free-photo/designer-working-office_23-2148494956.jpg", imageAlt: "Hero Image 1" },
                { imageSrc: "https://img.b2bpic.net/free-photo/workspace-home-office_23-2148494956.jpg", imageAlt: "Hero Image 2" }
            ]}
            buttons={[{ text: "View My Work", href: "#features" }]}
          />
        </div>

        <div id="experience" data-section="experience">
          <MetricCardFourteen
            title="Professional Journey"
            tag="Timeline"
            metrics={[
                { id: "2024", value: "Senior Designer", description: "Leading UX initiatives for enterprise SaaS products." },
                { id: "2021", value: "UX Lead", description: "Managed design teams and scaled component libraries." },
                { id: "2018", value: "Front-end Dev", description: "Building accessible interfaces for global clients." }
            ]}
            metricsAnimation="slide-up"
          />
        </div>

        <div id="about" data-section="about">
          <TextSplitAbout
            title="My Philosophy"
            description={["I believe that great design is not just about aesthetics, but about solving problems for the user. My approach combines research, creative exploration, and technical execution to deliver solutions that resonate.", "With a background in both front-end engineering and UI/UX design, I bridge the gap between creative vision and implementation excellence."]}
            useInvertedBackground={false}
          />
        </div>

        <div id="problems" data-section="problems">
          <MetricCardThree
            title="What I Bring"
            metrics={[
              { id: "1", icon: Cpu, title: "Web Development", value: "Modern" },
              { id: "2", icon: Zap, title: "Performance Optimization", value: "Speed" },
              { id: "3", icon: Palette, title: "UX Design", value: "Clean" },
              { id: "4", icon: BookOpen, title: "Technical Writing", value: "Clear" }
            ]}
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={false}
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardSix
            title="Featured Projects"
            description="A selection of projects where design meets code to solve real-world problems."
            textboxLayout="split"
            features={[
              { title: "SaaS Dashboard", description: "High-performance interface for financial analytics.", imageSrc: "https://img.b2bpic.net/free-photo/dashboard-ui-concept_23-2148814057.jpg" },
              { title: "Mobile Design System", description: "Unified component library for scalable apps.", imageSrc: "https://img.b2bpic.net/free-photo/mobile-app-ui_23-2148814057.jpg" }
            ]}
            useInvertedBackground={false}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardFifteen
            testimonial="Their work truly transformed our online presence. Professional, creative, and always delivered ahead of schedule."
            author="Jane Doe, CEO"
            rating={5}
            ratingAnimation="slide-up"
            avatarsAnimation="opacity"
            avatars={[{ src: "https://img.b2bpic.net/free-photo/happy-woman_23-2148814057.jpg", alt: "Client" }]
            }
            useInvertedBackground={false}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCTA
            tag="Get In Touch"
            title="Portfolio Inquiries"
            description="Interested in collaborating or have a question about my work? I'm always open to discussing new projects and creative opportunities."
            buttons={[{ text: "Send an Email", href: "mailto:hello@portfolio.com" }, { text: "LinkedIn", href: "https://linkedin.com/in/me" }]}
            background={{ variant: "plain" }}
            useInvertedBackground={false}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseCard
            logoText="Portfolio"
            columns={[
                { title: "Navigation", items: [{ label: "Home", href: "#" }, { label: "Projects", href: "#features" }, { label: "Contact", href: "#contact" }] },
                { title: "Connect", items: [{ label: "LinkedIn", href: "https://linkedin.com" }, { label: "Email", href: "mailto:hello@portfolio.com" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
