"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import {
  MessageSquare,
  TrendingUp,
  Folder,
  BookOpen,
  CheckCircle,
  Trophy,
} from "lucide-react";

export default function SkillsPage() {
  const navItems = [
    { name: "Dashboard", id: "dashboard" },
    { name: "Projects", id: "projects" },
    { name: "Skills", id: "skills" },
    { name: "Goals", id: "goals" },
    { name: "Achievements", id: "achievements" },
    { name: "Profile", id: "profile" },
  ];

  const footerColumns = [
    {
      title: "Product",
      items: [
        { label: "Dashboard", href: "/dashboard" },
        { label: "Features", href: "#features" },
        { label: "Pricing", href: "#" },
        { label: "Export", href: "#" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "#" },
        { label: "Blog", href: "#" },
        { label: "Careers", href: "#" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Cookie Policy", href: "#" },
        { label: "Security", href: "#" },
      ],
    },
    {
      title: "Connect",
      items: [
        { label: "Twitter", href: "https://twitter.com" },
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "GitHub", href: "https://github.com" },
        { label: "Discord", href: "https://discord.com" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeLargeTitles"
      background="grid"
      cardStyle="solid"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Trackfolio"
          bottomLeftText="Track Your Journey"
          bottomRightText="hello@trackfolio.io"
        />
      </div>

      {/* Testimonials Section */}
      <div id="testimonials" data-section="testimonials">
        <div className="mx-auto px-4 md:px-6">
          <TestimonialCardTen
            title="Skills Development Success Stories"
            description="Learn from others who've mastered their skill tracking journey with Trackfolio."
            testimonials={[
              {
                id: "1",
                title: "From Beginner to Advanced",
                quote: "Trackfolio helped me visualize my skill progression. I went from struggling with basic JavaScript to mastering full-stack development in just 8 months!",
                name: "Jessica Thompson",
                role: "Computer Science Student",
                imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
              },
              {
                id: "2",
                title: "Perfect Skill Portfolio",
                quote: "I used Trackfolio to document all my technical skills. It made my resume stand out and helped me land interviews at my dream companies.",
                name: "David Park",
                role: "Junior Developer",
                imageSrc: "http://img.b2bpic.net/free-photo/business-man-by-skyscraper_1303-13654.jpg",
              },
              {
                id: "3",
                title: "Visual Progress Tracking",
                quote: "The progress bars and skill levels are incredibly motivating. I can see exactly how far I've come and what areas need more focus.",
                name: "Priya Kapoor",
                role: "UI/UX Designer",
                imageSrc: "http://img.b2bpic.net/free-photo/funny-smiling-woman-with-ringlets-wears-glasses-blue-jacket-poses-pink_291650-1102.jpg",
              },
              {
                id: "4",
                title: "Skills That Impress",
                quote: "My employers were impressed with how well I documented my skills in Trackfolio. It shows dedication and professional growth.",
                name: "Michael Chen",
                role: "Full Stack Developer",
                imageSrc: "http://img.b2bpic.net/free-photo/young-it-engineer_1098-18393.jpg",
              },
              {
                id: "5",
                title: "Learning Path Made Easy",
                quote: "Trackfolio helped me create a structured learning path for all my technical and soft skills. The visualization is amazing!",
                name: "Aisha Patel",
                role: "Product Manager",
                imageSrc: "http://img.b2bpic.net/free-photo/business-woman-working-home_23-2148162643.jpg",
              },
              {
                id: "6",
                title: "Career Growth Accelerated",
                quote: "By tracking my skills consistently, I identified my strengths and growth areas. This helped me accelerate my career transition.",
                name: "James Wilson",
                role: "Data Analyst",
                imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-man-listening-music_23-2147839945.jpg",
              },
            ]}
            textboxLayout="default"
            useInvertedBackground={false}
            tag="User Testimonials"
            tagIcon={MessageSquare}
            tagAnimation="slide-up"
            buttons={[{ text: "Start Your Free Account", href: "#" }]}
            buttonAnimation="slide-up"
          />
        </div>
      </div>

      {/* Metrics Section */}
      <div id="metrics" data-section="metrics">
        <div className="mx-auto px-4 md:px-6">
          <MetricCardOne
            title="Skills Development Analytics"
            description="Monitor your skill growth and improvement with comprehensive statistics."
            tag="Statistics"
            tagIcon={TrendingUp}
            tagAnimation="slide-up"
            metrics={[
              {
                id: "technical",
                value: "25+",
                title: "Technical Skills",
                description: "Tracked programming and tools",
                icon: BookOpen,
              },
              {
                id: "soft",
                value: "12+",
                title: "Soft Skills",
                description: "Communication and leadership",
                icon: CheckCircle,
              },
              {
                id: "advanced",
                value: "8",
                title: "Advanced Level",
                description: "Expert mastery achieved",
                icon: Trophy,
              },
              {
                id: "improving",
                value: "20+",
                title: "Skills in Progress",
                description: "Currently developing",
                icon: TrendingUp,
              },
            ]}
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            buttons={[{ text: "View Skill Dashboard", href: "/dashboard" }]}
            buttonAnimation="slide-up"
          />
        </div>
      </div>

      {/* FAQ Section */}
      <div id="faq" data-section="faq">
        <div className="mx-auto px-4 md:px-6">
          <FaqSplitText
            sideTitle="Skills Tracking FAQ"
            sideDescription="Everything you need to know about tracking and developing your skills with Trackfolio."
            faqs={[
              {
                id: "1",
                title: "How do I add a new skill?",
                content: "Navigate to the Skills section and click 'Add Skill'. Enter the skill name, starting level (beginner, intermediate, advanced), and any relevant details. You can attach projects or certificates as proof.",
              },
              {
                id: "2",
                title: "What skill levels are available?",
                content: "We offer five levels: Beginner, Elementary, Intermediate, Advanced, and Expert. Progress through levels as you develop your skills, and track the time spent on each level.",
              },
              {
                id: "3",
                title: "Can I see my skill progression over time?",
                content: "Yes! Your skill analytics page shows detailed progress graphs, including time spent, projects completed, and overall proficiency trends. Track your improvement month over month.",
              },
              {
                id: "4",
                title: "How do I categorize skills?",
                content: "Skills can be organized by category: Technical (programming, tools), Soft Skills (communication, leadership), Creative, and Language Skills. Custom categories are available on premium plans.",
              },
              {
                id: "5",
                title: "Can I link projects to skills?",
                content: "Absolutely! Link projects to relevant skills to show practical application. This creates a powerful portfolio narrative connecting skills to real-world work.",
              },
              {
                id: "6",
                title: "How do I showcase skills to employers?",
                content: "Export your skills profile as a PDF or share a web link. You can customize which skills to showcase and highlight your top achievements for each skill.",
              },
            ]}
            faqsAnimation="slide-up"
            useInvertedBackground={false}
            buttons={[{ text: "Contact Support", href: "#contact" }]}
            buttonAnimation="slide-up"
          />
        </div>
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 Trackfolio. All rights reserved."
          bottomRightText="Made with ❤️ for portfolio builders"
        />
      </div>
    </ThemeProvider>
  );
}