"use client";

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 Link from "next/link";
import { Eye, TrendingUp, Target, Award, Share2, Move } from "lucide-react";

export default function GoalsPage() {
  const navItems = [
    { name: "Goals", id: "goals" },
    { name: "Achievements", id: "achievements" },
  ];

  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"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Trackfolio"
          bottomLeftText="Track Your Journey"
          bottomRightText="hello@trackfolio.io"
        />
      </div>

      <div id="goals-features" data-section="goals-features">
        <FeatureCardTwentySix
          title="Smart Goals Management"
          description="Set, track, and achieve your portfolio goals with our intelligent goal management system. Break down your objectives into actionable milestones and monitor progress in real-time."
          tag="Goal Management"
          tagIcon={Target}
          tagAnimation="slide-up"
          features={[
            {
              title: "Goal Setting",
              description: "Create both short-term and long-term goals with custom deadlines and priority levels.",
              buttonIcon: Target,
              imageSrc: "http://img.b2bpic.net/free-vector/flat-mobile-application-set-business-startup_81522-4048.jpg?_wi=3",
              imageAlt: "goal tracking checklist interface",
            },
            {
              title: "Progress Tracking",
              description: "Monitor your progress with visual indicators, percentage completion, and milestone checkpoints.",
              buttonIcon: TrendingUp,
              imageSrc: "http://img.b2bpic.net/free-vector/collection-gradient-infographic-elements_23-2148215458.jpg?_wi=3",
              imageAlt: "skill progression bar chart graph",
            },
            {
              title: "Goal Categories",
              description: "Organize goals by category such as learning, career, personal development, and skills.",
              buttonIcon: Eye,
              imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-gradient-template_23-2148376261.jpg?_wi=3",
              imageAlt: "dashboard overview analytics statistics",
            },
            {
              title: "Deadline Alerts",
              description: "Receive timely reminders for upcoming deadlines and milestones to stay on track.",
              buttonIcon: Award,
              imageSrc: "http://img.b2bpic.net/free-vector/set-flat-vintage-badges-ribbons_23-2147549154.jpg?_wi=3",
              imageAlt: "achievement badges awards showcase",
            },
            {
              title: "Goal Analytics",
              description: "Analyze your goal completion rate and identify patterns in your achievement history.",
              buttonIcon: Share2,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-code-laptop-screen-server-hub-employees-reading-paperwork_482257-122503.jpg?_wi=4",
              imageAlt: "document export download interface",
            },
            {
              title: "Collaborative Goals",
              description: "Share goals with team members and collaborate on group objectives for projects.",
              buttonIcon: Move,
              imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-business-card-desk-high-angle_23-2149343436.jpg?_wi=3",
              imageAlt: "drag drop interface cards reordering",
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            {
              text: "Explore Goal Features",
              href: "#",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="goals-metrics" data-section="goals-metrics">
        <MetricCardOne
          title="Your Goals Overview"
          description="Key metrics about your goal-setting and achievement progress."
          tag="Goal Statistics"
          tagIcon={Target}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "active-goals",
              value: "12",
              title: "Active Goals",
              description: "Currently in progress",
              icon: Target,
            },
            {
              id: "completed-goals",
              value: "28",
              title: "Completed",
              description: "Successfully achieved",
              icon: Award,
            },
            {
              id: "completion-rate",
              value: "85%",
              title: "Success Rate",
              description: "Goal completion ratio",
              icon: TrendingUp,
            },
            {
              id: "upcoming",
              value: "7",
              title: "Due Soon",
              description: "Next 30 days",
              icon: Target,
            },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            {
              text: "View Full Analytics",
              href: "/dashboard",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="goals-faq" data-section="goals-faq">
        <FaqSplitText
          sideTitle="Goals FAQ"
          sideDescription="Find answers to common questions about setting and tracking your portfolio goals effectively."
          faqs={[
            {
              id: "1",
              title: "How do I set effective portfolio goals?",
              content: "Start by identifying what you want to achieve in your portfolio development. Use the SMART method (Specific, Measurable, Achievable, Relevant, Time-bound) to create clear goals. Trackfolio helps you break down larger objectives into smaller, actionable milestones.",
            },
            {
              id: "2",
              title: "Can I set different types of goals?",
              content: "Yes! Trackfolio supports various goal types including learning goals, project completion goals, skill development targets, and career milestones. You can categorize and prioritize your goals to stay organized.",
            },
            {
              id: "3",
              title: "How often should I review my goals?",
              content: "We recommend reviewing your goals weekly to track progress and adjust timelines if needed. Monthly reviews help you assess overall progress and plan for the next phase of your portfolio development.",
            },
            {
              id: "4",
              title: "What happens when I complete a goal?",
              content: "When you complete a goal, it gets marked as achieved and moves to your completed goals section. You'll see your success rate increase and can use these achievements to showcase in your portfolio or for job applications.",
            },
            {
              id: "5",
              title: "Can I edit goals after creating them?",
              content: "Absolutely! You can edit goals at any time to adjust deadlines, change descriptions, or update categories. You can also archive or delete goals if they're no longer relevant to your portfolio journey.",
            },
            {
              id: "6",
              title: "Do goals help with portfolio building?",
              content: "Yes! Goals help you structure your portfolio development in a meaningful way. They keep you accountable and organized, ensuring you're consistently working towards building a strong, diverse portfolio that showcases your growth.",
            },
          ]}
          faqsAnimation="slide-up"
          useInvertedBackground={false}
          buttons={[
            {
              text: "Contact Support",
              href: "#contact",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

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