"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";

const navItems = [
  {
    label: "Home",    href: "/"
  },
  {
    label: "Dashboard",    href: "/dashboard"
  },
  {
    label: "Missions",    href: "/missions"
  },
  {
    label: "Skill Tree",    href: "/skill-tree"
  },
  {
    label: "Achievements",    href: "/achievements"
  },
  {
    label: "Leaderboard",    href: "/leaderboard"
  },
  {
    label: "Community",    href: "/community"
  },
  {
    label: "Profile",    href: "/profile"
  }
];

const achievementBadgesProducts = [
  {
    id: "a1",    brand: "Milestone",    name: "First Upload",    price: "Unlocked",    rating: 5,
    reviewCount: "New",    imageSrc: "http://img.b2bpic.net/free-vector/purple-hexagon-frames-game-avatars_107791-18126.jpg",    imageAlt: "First Upload Achievement Badge"
  },
  {
    id: "a2",    brand: "Streak",    name: "7-Day Streak",    price: "Unlocked",    rating: 5,
    reviewCount: "Consistent",    imageSrc: "http://img.b2bpic.net/free-photo/top-view-champagne-bottle-table_23-2148578907.jpg",    imageAlt: "7-Day Streak Achievement Badge"
  },
  {
    id: "a3",    brand: "Volume",    name: "100 Missions Completed",    price: "Unlocked",    rating: 5,
    reviewCount: "Dedicated",    imageSrc: "http://img.b2bpic.net/free-vector/set-military-game-progress-badges_107791-19708.jpg",    imageAlt: "100 Missions Completed Badge"
  },
  {
    id: "a4",    brand: "Impact",    name: "Viral Creator",    price: "Unlocked",    rating: 5,
    reviewCount: "Influencer",    imageSrc: "http://img.b2bpic.net/free-photo/pleased-pretty-caucasian-woman-sitting-table-with-makeup-tools-holding-looking-winner-cup-isolated-purple-wall-with-copy-space_141793-121092.jpg?_wi=2",    imageAlt: "Viral Creator Achievement Badge"
  },
  {
    id: "a5",    brand: "Community",    name: "Community Leader",    price: "Unlocked",    rating: 5,
    reviewCount: "Connected",    imageSrc: "http://img.b2bpic.net/free-photo/positive-woman-recording-video-home_23-2148586299.jpg",    imageAlt: "Community Leader Badge"
  },
  {
    id: "a6",brand: "Mastery",    name: "Skill Tree Master",    price: "Unlocked",    rating: 5,
    reviewCount: "Expert",    imageSrc: "http://img.b2bpic.net/free-photo/top-view-beautiful-rpg-still-life-items_23-2149282445.jpg?_wi=2",    imageAlt: "Skill Tree Master Achievement"
  }
];

const achievementDetailsFeatures = [
  {
    id: "ach_f1",    title: "Consistency Badges",    tags: [
      "Streaks",      "Habits"
    ],
    imageSrc: "http://img.b2bpic.net/free-photo/pause-icon-multimedia-entertainment-perforated-paper_53876-16455.jpg",    imageAlt: "Consistency Badge"
  },
  {
    id: "ach_f2",    title: "Impact Awards",    tags: [
      "Reach",      "Engagement"
    ],
    imageSrc: "http://img.b2bpic.net/free-vector/influencer-marketing-concept-with-symbols-laptop_23-2147685875.jpg",    imageAlt: "Impact Award"
  },
  {
    id: "ach_f3",    title: "Skill Mastery Trophies",    tags: [
      "Expertise",      "Growth"
    ],
    imageSrc: "http://img.b2bpic.net/free-vector/abstract-banner-data-visualization-big-data-processing-cloud-storage-server-hosting_39422-978.jpg",    imageAlt: "Skill Mastery Trophy"
  }
];

export default function AchievementsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="large"
      background="noiseDiagonalGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Creator Quest RPG"
          logoSrc="http://img.b2bpic.net/free-vector/gradient-metaverse-concept-labels_23-2149516151.jpg"
          logoAlt="Creator Quest RPG Logo"
          navItems={navItems.map(item => ({ name: item.label, id: item.href }))}
          button={{
            text: "Sign Up",            href: "/register"
          }}
        />
      </div>

      <div id="achievement-badges" data-section="achievement-badges">
        <ProductCardTwo
          products={achievementBadgesProducts}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          title="Your Milestones of Success"
          description="Every step you take on Creator Quest earns you recognition. Collect unique achievement badges as you grow."
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="achievement-details" data-section="achievement-details">
        <FeatureCardTwentyThree
          animationType="slide-up"
          title="Achievement Categories"
          description="Explore different types of achievements and plan your path to greatness."
          textboxLayout="default"
          useInvertedBackground={true}
          features={achievementDetailsFeatures}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoSrc="http://img.b2bpic.net/free-vector/gradient-metaverse-concept-labels_23-2149516151.jpg"
          logoAlt="Creator Quest RPG Logo"
          logoText="Creator Quest RPG"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Dashboard", href: "/dashboard" },
                { label: "Missions", href: "/missions" }
              ]
            },
            {
              items: [
                { label: "Skill Tree", href: "/skill-tree" },
                { label: "Achievements", href: "/achievements" },
                { label: "Leaderboard", href: "/leaderboard" }
              ]
            },
            {
              items: [
                { label: "Community", href: "/community" },
                { label: "Profile", href: "/profile" },
                { label: "Settings", href: "/settings" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Contact Us", href: "/contact" }
              ]
            }
          ]}
          useInvertedBackground={true}
        />
      </div>
    </ThemeProvider>
  );
}