"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Sparkles, MessageSquare, Award, ScrollText, Crown, Settings } from "lucide-react";

export default function SkillTreePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Missions", id: "/missions" },
    { name: "Skill Tree", id: "/skill-tree" }
  ];

  const footerNavColumns = [
    { 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" }] }
  ];

  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}
          button={{ text: "Sign Up", href: "/register" }}
        />
      </div>

      <div id="skill-tree-metrics" data-section="skill-tree-metrics">
        <MetricCardEleven
          animationType="slide-up"
          title="Grow Your Creator Skills"
          description="Invest XP into your Creator Skill Tree to enhance key abilities that drive your success."
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            { id: "st1", value: "90%", title: "Confidence", description: "Master public speaking and on-camera presence.", imageSrc: "http://img.b2bpic.net/free-photo/black-teen-smiling-girl-headset-playing-video-games-video-game-club_1268-25918.jpg" },
            { id: "st2", value: "85%", title: "Editing", description: "Produce polished, engaging video content.", imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-human-hands-holding-blocks-mobile-application-icons_23-2147844581.jpg" },
            { id: "st3", value: "70%", title: "Storytelling", description: "Craft compelling narratives that captivate your audience.", imageSrc: "http://img.b2bpic.net/free-photo/hands-working-laptop-glasses-notebook-cones-office-supplies_1163-2756.jpg" }
          ]}
        />
      </div>

      <div id="skill-tree-features" data-section="skill-tree-features">
        <FeatureCardTwentyThree
          animationType="slide-up"
          title="Specialized Skill Branches"
          description="Each skill branch offers unique missions and challenges to hone your expertise."
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            { id: "st_f1", title: "Speaking & Presentation", tags: ["Voice", "Delivery"], imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-attractive-female-white-t-shirt-posing-holding-cup-pink-background_140725-26199.jpg", imageAlt: "Speaking skill icon" },
            { id: "st_f2", title: "Branding & Identity", tags: ["Visuals", "Messaging"], imageSrc: "http://img.b2bpic.net/free-vector/inbound-marketing_23-2148031792.jpg", imageAlt: "Branding skill icon" },
            { id: "st_f3", title: "Creativity & Innovation", tags: ["Ideas", "Originality"], imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-woman-recording-video-her-room-has-camera-coffee-table-reviewing_1258-255259.jpg", imageAlt: "Creativity skill icon" }
          ]}
        />
      </div>

      <div id="skill-building-about" data-section="skill-building-about">
        <TextSplitAbout
          title="Deep Dive into Skill Building"
          description={[
            "The Skill Tree isn't just about unlocking; it's about active development. Engage in targeted mini-games and exercises to truly embed new proficiencies.",            "Each node on the tree comes with a recommended learning path, including external resources and in-app practice modules. Master new skills, gain confidence, and see immediate impact on your content."
          ]}
          useInvertedBackground={false}
          buttons={[
            { text: "Explore Skill Modules", href: "/skill-tree#modules" }
          ]}
        />
      </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={footerNavColumns}
          useInvertedBackground={true}
        />
      </div>
    </ThemeProvider>
  );
}
