"use client";

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

export default function MissionsPage() {
  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="daily-missions" data-section="daily-missions">
        <FeatureCardTwentyThree
          animationType="slide-up"
          title="Conquer Your Daily Challenges"
          description="Consistency is key. Our daily missions are designed to build powerful creator habits, one small step at a time."
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            { id: "m_f1", title: "Upload One Short-Form Video", tags: ["Daily", "Production"], imageSrc: "http://img.b2bpic.net/free-photo/download-internet-connection-sharing-networking-concept_53876-148096.jpg", imageAlt: "Upload short-form video mission" },
            { id: "m_f2", title: "Reply to 10 Comments", tags: ["Daily", "Engagement"], imageSrc: "http://img.b2bpic.net/free-photo/female-make-up-blogger-with-streaming-with-camera-laptop-home_23-2148771522.jpg", imageAlt: "Reply to comments mission" },
            { id: "m_f3", title: "Brainstorm 10 Content Ideas", tags: ["Daily", "Creativity"], imageSrc: "http://img.b2bpic.net/free-photo/woman-creating-their-own-vision-board_23-2150270405.jpg", imageAlt: "Brainstorm content ideas mission" }
          ]}
        />
      </div>

      <div id="quest-system" data-section="quest-system">
        <TextSplitAbout
          title="Embark on Epic Creator Quests"
          description={[
            "Our Quest System offers structured challenges to help you master advanced creator skills. From easy tasks to weekly boss battles, each quest is designed to push your boundaries and reward your dedication.",            "Progress through tiers: Easy quests for fundamental skills, Medium quests for refining your craft, and Hard quests to truly test your expertise. Conquer Weekly Boss Challenges for legendary rewards and bragging rights."
          ]}
          useInvertedBackground={true}
          buttons={[
            { text: "View All Quests", href: "/missions#quests" }
          ]}
        />
      </div>

      <div id="mission-progress-metrics" data-section="mission-progress-metrics">
        <MetricCardEleven
          animationType="slide-up"
          title="Track Your Mission Progress"
          description="Detailed insights into your quest for mastery."
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            { id: "m_p_m1", value: "75%", title: "Current Quest Completion", description: "You're on track to conquer this mission!", imageSrc: "http://img.b2bpic.net/free-photo/collage-people-using-reels_23-2149416510.jpg?_wi=2" },
            { id: "m_p_m2", value: "15", title: "Quests Active", description: "Actively pursuing multiple challenges.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-office-supplies_171337-13069.jpg" },
            { id: "m_p_m3", value: "3", title: "Bosses Conquered", description: "Epic victories over weekly challenges.", 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=1" }
          ]}
        />
      </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>
  );
}
