"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import {
  Eye,
  TrendingUp,
  Target,
  Award,
  Share2,
  Move,
  Folder,
  BookOpen,
  CheckCircle,
  Trophy,
} from "lucide-react";

export default function ProjectsPage() {
  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>

      {/* Features Section */}
      <div id="features" data-section="features">
        <div className="mx-auto px-4 md:px-6">
          <FeatureCardTwentySix
            title="Project Management at Your Fingertips"
            description="Complete control over your portfolio projects with intuitive tools designed for modern creators."
            tag="Project Features"
            tagIcon={Eye}
            tagAnimation="slide-up"
            features={[
              {
                title: "Project Dashboard",
                description: "Overview of all your projects with status tracking, progress bars, and quick stats.",
                buttonIcon: Eye,
                imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-gradient-template_23-2148376261.jpg",
              },
              {
                title: "Skills Tracker",
                description: "Monitor your skill development from beginner to advanced with visual progress indicators.",
                buttonIcon: TrendingUp,
                imageSrc: "http://img.b2bpic.net/free-vector/collection-gradient-infographic-elements_23-2148215458.jpg",
              },
              {
                title: "Goals Management",
                description: "Set and track both short-term and long-term goals with checkboxes and progress tracking.",
                buttonIcon: Target,
                imageSrc: "http://img.b2bpic.net/free-vector/flat-mobile-application-set-business-startup_81522-4048.jpg",
              },
              {
                title: "Achievements Hub",
                description: "Showcase your certificates, awards, and milestones with image uploads and links.",
                buttonIcon: Award,
                imageSrc: "http://img.b2bpic.net/free-vector/set-flat-vintage-badges-ribbons_23-2147549154.jpg",
              },
              {
                title: "Portfolio Export",
                description: "Generate and share your portfolio as a professional document or web link.",
                buttonIcon: Share2,
                imageSrc: "http://img.b2bpic.net/free-photo/close-up-code-laptop-screen-server-hub-employees-reading-paperwork_482257-122503.jpg",
              },
              {
                title: "Drag & Drop Interface",
                description: "Organize your content intuitively with drag-and-drop card arrangement.",
                buttonIcon: Move,
                imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-business-card-desk-high-angle_23-2149343436.jpg",
              },
            ]}
            textboxLayout="default"
            useInvertedBackground={false}
            buttons={[{ text: "Explore All Features", 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="Track Your Project Growth"
            description="Monitor your portfolio expansion with real-time statistics."
            tag="Statistics"
            tagIcon={TrendingUp}
            tagAnimation="slide-up"
            metrics={[
              {
                id: "projects",
                value: "50+",
                title: "Projects",
                description: "Completed and in-progress work",
                icon: Folder,
              },
              {
                id: "skills",
                value: "30+",
                title: "Skills",
                description: "Tracked and progressed",
                icon: BookOpen,
              },
              {
                id: "goals",
                value: "100%",
                title: "Goals Completed",
                description: "Success rate tracking",
                icon: CheckCircle,
              },
              {
                id: "achievements",
                value: "15+",
                title: "Achievements",
                description: "Certificates and awards",
                icon: Trophy,
              },
            ]}
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            buttons={[{ text: "View Full Analytics", 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="Project Management FAQ"
            sideDescription="Learn more about managing your projects effectively with Trackfolio."
            faqs={[
              {
                id: "1",
                title: "How do I create a new project?",
                content: "Creating a project is simple. Click the 'New Project' button on your dashboard, add a title and description, and start tracking. You can customize details, set deadlines, and organize projects into categories.",
              },
              {
                id: "2",
                title: "Can I collaborate with team members?",
                content: "Yes! You can invite team members to specific projects and set permission levels. Team members can view, comment, and contribute to project tracking in real-time.",
              },
              {
                id: "3",
                title: "How do I export my projects?",
                content: "Navigate to your project dashboard and click 'Export'. Choose your format (PDF, CSV, or web link) and customize what data to include before exporting.",
              },
              {
                id: "4",
                title: "Can I set milestones for projects?",
                content: "Absolutely! Add milestones to track important project phases. Set dates, descriptions, and mark them as complete as you progress through your project.",
              },
              {
                id: "5",
                title: "Is there a limit to project count?",
                content: "Free tier users can create up to 25 projects. Premium members have unlimited project creation. Upgrade anytime to unlock more features.",
              },
              {
                id: "6",
                title: "How are projects organized?",
                content: "Projects can be organized by status (planning, active, completed), category (work, learning, personal), or priority. Use filtering and search to find projects quickly.",
              },
            ]}
            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>
  );
}