"use client";

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

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" },
    ],
  },
];

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

      {/* Hero Section */}
      <div id="hero" data-section="hero">
        <HeroSplitTestimonial
          title="Track Your Portfolio Like Never Before"
          description="Trackfolio helps students and beginners organize their projects, skills, and achievements in one beautiful, intuitive dashboard. Build your personal brand with confidence."
          tag="Portfolio Management"
          tagIcon={Briefcase}
          tagAnimation="slide-up"
          buttons={[
            { text: "Get Started", href: "/dashboard" },
            { text: "Learn More", href: "#features" },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-vector/user-panel-infographic-template-dashboard_23-2148378205.jpg"
          imageAlt="Trackfolio Dashboard Interface"
          mediaAnimation="slide-up"
          background={{ variant: "grid" }}
          testimonials={[
            {
              name: "Sarah Chen",
              handle: "@sarahcodes",
              testimonial:
                "Trackfolio helped me organize my portfolio and land my first dev job!",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman_23-2148137687.jpg",
              imageAlt: "Sarah Chen",
            },
            {
              name: "Marcus Lee",
              handle: "@marcusdesigns",
              testimonial:
                "Finally, a tool that makes tracking my design projects effortless.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/teenager-boy-portrait_23-2148105678.jpg",
              imageAlt: "Marcus Lee",
            },
            {
              name: "Emma Rodriguez",
              handle: "@emmastudies",
              testimonial:
                "As a student, this has been a game-changer for managing my coursework.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/young-girl-student-with-book-her-hands-goes-university_169016-66761.jpg",
              imageAlt: "Emma Rodriguez",
            },
            {
              name: "Alex Kim",
              handle: "@alexbuilds",
              testimonial:
                "The best way to showcase everything I've learned and built.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-man-outdoor_23-2148514954.jpg",
              imageAlt: "Alex Kim",
            },
          ]}
          useInvertedBackground={false}
          imagePosition="right"
        />
      </div>

      {/* Features Section */}
      <div id="features" data-section="features">
        <FeatureCardTwentySix
          title="Powerful Features for Portfolio Management"
          description="Everything you need to track, organize, and showcase your projects, skills, and achievements."
          tag="Key Features"
          tagIcon={Sparkles}
          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",
              imageAlt: "Project Dashboard Feature",
            },
            {
              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",
              imageAlt: "Skills Tracker Feature",
            },
            {
              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",
              imageAlt: "Goals Management Feature",
            },
            {
              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",
              imageAlt: "Achievements Hub Feature",
            },
            {
              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",
              imageAlt: "Portfolio Export Feature",
            },
            {
              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",
              imageAlt: "Drag and Drop Interface",
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Explore All Features", href: "#" }]}
          buttonAnimation="slide-up"
        />
      </div>

      {/* Metrics Section */}
      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Track Your Progress in Numbers"
          description="See your portfolio growth with key metrics and statistics."
          tag="Statistics"
          tagIcon={BarChart3}
          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>

      {/* Testimonials Section */}
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="What Users Say About Trackfolio"
          description="Join hundreds of students and professionals who are already tracking their portfolios."
          testimonials={[
            {
              id: "1",
              title: "Life-Changing Tool",
              quote:
                "Trackfolio transformed how I manage my projects. It's like having a personal portfolio manager in my pocket.",
              name: "Jessica Thompson",
              role: "Computer Science Student",
              imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
              imageAlt: "Jessica Thompson",
            },
            {
              id: "2",
              title: "Perfect for Beginners",
              quote:
                "As a junior developer, I needed a way to track my learning journey. Trackfolio is exactly what I was looking for.",
              name: "David Park",
              role: "Junior Developer",
              imageSrc: "http://img.b2bpic.net/free-photo/business-man-by-skyscraper_1303-13654.jpg",
              imageAlt: "David Park",
            },
            {
              id: "3",
              title: "Impressive Interface",
              quote:
                "The dark mode and clean design make tracking my portfolio enjoyable. Love the simplicity!",
              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",
              imageAlt: "Priya Kapoor",
            },
            {
              id: "4",
              title: "Helps with Job Search",
              quote:
                "I used Trackfolio to organize my projects and it made my job search so much easier. Highly recommend!",
              name: "Michael Chen",
              role: "Full Stack Developer",
              imageSrc: "http://img.b2bpic.net/free-photo/young-it-engineer_1098-18393.jpg",
              imageAlt: "Michael Chen",
            },
            {
              id: "5",
              title: "Best Portfolio Tool",
              quote:
                "Clear, intuitive, and powerful. This is hands down the best portfolio tracking tool available.",
              name: "Aisha Patel",
              role: "Product Manager",
              imageSrc: "http://img.b2bpic.net/free-photo/business-woman-working-home_23-2148162643.jpg",
              imageAlt: "Aisha Patel",
            },
            {
              id: "6",
              title: "Changed My Career",
              quote:
                "With Trackfolio's help organizing my work, I landed interviews at top companies. Thank you!",
              name: "James Wilson",
              role: "Data Analyst",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-man-listening-music_23-2147839945.jpg",
              imageAlt: "James Wilson",
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          tag="User Testimonials"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          buttons={[{ text: "Start Your Free Account", href: "#" }]}
          buttonAnimation="slide-up"
        />
      </div>

      {/* FAQ Section */}
      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Find answers to common questions about Trackfolio and how it can help you manage your portfolio."
          faqs={[
            {
              id: "1",
              title: "What is Trackfolio?",
              content:
                "Trackfolio is a modern portfolio management tool designed for students and beginners. It helps you organize projects, track skills, set goals, and showcase achievements in one beautiful dashboard.",
            },
            {
              id: "2",
              title: "Is Trackfolio free to use?",
              content:
                "Yes! Trackfolio offers a free tier with all essential features. Premium plans are available for users who want advanced analytics and export options.",
            },
            {
              id: "3",
              title: "Can I export my portfolio?",
              content:
                "Absolutely! You can export your portfolio as a PDF document or generate a shareable web link to showcase your work to potential employers or clients.",
            },
            {
              id: "4",
              title: "Is my data secure?",
              content:
                "We take security seriously. All data is encrypted and stored securely. You have full control over your information and can delete it anytime.",
            },
            {
              id: "5",
              title: "Can I collaborate with others?",
              content:
                "Yes! You can invite team members to your portfolio and collaborate on shared projects. Perfect for group assignments and team portfolios.",
            },
            {
              id: "6",
              title: "Is there a mobile app?",
              content:
                "Trackfolio is fully responsive and works beautifully on mobile devices. A dedicated mobile app is coming soon!",
            },
          ]}
          faqsAnimation="slide-up"
          useInvertedBackground={false}
          buttons={[{ text: "Contact Support", href: "#contact" }]}
          buttonAnimation="slide-up"
        />
      </div>

      {/* Contact Section */}
      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Have questions? We'd love to hear from you. Send us a message and we'll respond within 24 hours."
          inputs={[
            {
              name: "name",
              type: "text",
              placeholder: "Your Name",
              required: true,
            },
            {
              name: "email",
              type: "email",
              placeholder: "Your Email",
              required: true,
            },
          ]}
          textarea={{
            name: "message",
            placeholder: "Your Message",
            rows: 5,
            required: true,
          }}
          imageSrc="http://img.b2bpic.net/free-vector/flat-customer-service-week-horizontal-banner-template_23-2149670591.jpg"
          imageAlt="Contact us to learn more about Trackfolio"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Send Message"
          useInvertedBackground={false}
        />
      </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>
  );
}