"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { MessageSquare } from "lucide-react";

export default function CommunityPage() {
  const navItems = [
    { name: "Community", id: "/community" },
    { name: "Profile", id: "/profile" },
  ];

  const footerColumns = [
    { "items": [] },
    { "items": [] },
    { "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 logo gamified"
          navItems={navItems}
          button={{ text: "Sign Up", href: "/register" }}
        />
      </div>

      <div id="community-blog" data-section="community-blog">
        <BlogCardThree
          carouselMode="buttons"
          animationType="slide-up"
          title="Connect & Inspire"
          description="Share your progress, celebrate achievements, and inspire fellow creators in our vibrant community."
          textboxLayout="default"
          useInvertedBackground={false}
          blogs={[
            {
              id: "blog1",
              category: "Community",
              title: "Celebrating Your First Upload!",
              excerpt: "A huge congratulations to all new creators completing their first mission! Share your experience and tips.",
              imageSrc: "http://img.b2bpic.net/free-photo/trends-fashion-moderm-latest-design-style_53876-21301.jpg",
              imageAlt: "First Upload celebration",
              authorName: "QuestMaster",
              authorAvatar: "http://img.b2bpic.net/free-photo/open-pages-book-e-book-online-learning-graphic-concept_53876-124380.jpg",
              date: "2 days ago",
            },
            {
              id: "blog2",
              category: "Tips",
              title: "Overcoming Creator's Block",
              excerpt: "Feeling stuck? Our community shares effective strategies to reignite your creativity and break through barriers.",
              imageSrc: "http://img.b2bpic.net/free-photo/content-creator-analyzing-newly-released-gaming-tablet-received-from-sponsor_482257-128495.jpg",
              imageAlt: "Creator's Block tips",
              authorName: "CommunityGuide",
              authorAvatar: "http://img.b2bpic.net/free-vector/laptop-with-document-bulb_1223-17.jpg",
              date: "1 week ago",
            },
            {
              id: "blog3",
              category: "Achievements",
              title: "How I Hit Level 50 in 3 Months",
              excerpt: "Learn from a seasoned Creator Quest player on how they optimized their missions and quests for rapid progression.",
              imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150063076.jpg",
              imageAlt: "Level 50 achievement",
              authorName: "XP_Master",
              authorAvatar: "http://img.b2bpic.net/free-photo/young-man-learning-virtual-classroom_23-2149200170.jpg",
              date: "3 weeks ago",
            },
          ]}
        />
      </div>

      <div id="community-faq" data-section="community-faq">
        <FaqSplitMedia
          faqs={[
            {
              id: "c_faq1",
              title: "How do I share my progress?",
              content: "You can share your XP gains, level ups, and achievement badges directly to the Community Feed from your Profile page. Celebrate your wins with fellow creators!",
            },
            {
              id: "c_faq2",
              title: "What are the community guidelines?",
              content: "Our community thrives on positivity and mutual support. Please refer to our full Community Guidelines section (link in footer) for detailed rules on respectful interaction and content sharing.",
            },
            {
              id: "c_faq3",
              title: "How can I encourage other creators?",
              content: "Engage with their posts, leave constructive comments, and 'like' their achievements! You can also send virtual high-fives and messages of encouragement directly.",
            },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/multiethnic-secret-agents-discussing-isolated-mockup-display_482257-125698.jpg?_wi=1"
          imageAlt="Community FAQ support"
          mediaAnimation="opacity"
          title="Community Rules & Help"
          description="Everything you need to know about engaging with other creators and making the most of our supportive community."
          tag="Support"
          tagIcon={MessageSquare}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </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 logo gamified"
          logoText="Creator Quest RPG"
          columns={footerColumns}
          useInvertedBackground={true}
        />
      </div>
    </ThemeProvider>
  );
}