"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Flame } from "lucide-react";

export default function CategoriesPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Browse Games", id: "browse" },
    { name: "Categories", id: "categories" },
    { name: "Top Rated", id: "toprated" },
    { name: "About", id: "about" },
  ];

  const footerColumns = [
    {
      title: "Games",
      items: [
        { label: "Browse All Games", href: "/browse" },
        { label: "Featured Games", href: "#featured-games" },
        { label: "Top Rated", href: "/browse" },
        { label: "New Releases", href: "/browse" },
      ],
    },
    {
      title: "Categories",
      items: [
        { label: "Action", href: "/categories" },
        { label: "Puzzle", href: "/categories" },
        { label: "Strategy", href: "/categories" },
        { label: "Casual", href: "/categories" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/about" },
        { label: "Contact", href: "mailto:play@knockgames.com" },
        { label: "Blog", href: "#" },
        { label: "Careers", href: "#" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Cookie Policy", href: "#" },
        { label: "Disclaimer", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Knock Games"
          bottomLeftText="Discover Amazing Games"
          bottomRightText="play@knockgames.com"
        />
      </div>

      <div id="categories-feature" data-section="categories-feature">
        <FeatureCardSixteen
          title="Browse All Game Categories"
          description="Explore our comprehensive collection of Android games organized by category. From intense action games to relaxing puzzle experiences, discover titles tailored to your gaming preferences."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          negativeCard={{
            items: [
              "Generic game listings",
              "Difficult navigation",
              "No category filtering",
              "Unclear game descriptions",
            ],
          }}
          positiveCard={{
            items: [
              "Detailed category organization",
              "Intuitive search and filters",
              "Easy category discovery",
              "Comprehensive game information",
            ],
          }}
          buttons={[{ text: "Start Browsing", href: "/browse" }]}
          buttonAnimation="slide-up"
          ariaLabel="Category exploration section"
        />
      </div>

      <div id="category-games" data-section="category-games">
        <ProductCardThree
          title="Popular Games by Category"
          description="Explore trending games from each major category on the Play Store. These handpicked selections represent the best in each genre."
          tag="Hot Now"
          tagIcon={Flame}
          tagAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          carouselMode="buttons"
          products={[
            {
              id: "action-1",
              name: "Action Adventure Pro",
              price: "Free",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-warrior-princess_23-2151663248.jpg?_wi=3",
              imageAlt: "Action Adventure Pro game",
            },
            {
              id: "puzzle-1",
              name: "Brain Challenge Master",
              price: "Free",
              imageSrc: "http://img.b2bpic.net/free-vector/flat-design-escape-room-invitation_23-2149906790.jpg?_wi=3",
              imageAlt: "Brain Challenge Master game",
            },
            {
              id: "casual-1",
              name: "Casual Fun Time",
              price: "Free",
              imageSrc: "http://img.b2bpic.net/free-photo/joyful-healthy-woman-earphones-listening-music-while-using-smartphone_8353-6938.jpg?_wi=3",
              imageAlt: "Casual Fun Time game",
            },
          ]}
          buttons={[{ text: "See All Categories", href: "/browse" }]}
          buttonAnimation="opacity"
          ariaLabel="Category games showcase section"
        />
      </div>

      <div id="category-faq" data-section="category-faq">
        <FaqDouble
          title="Game Categories Guide"
          description="Learn more about our game categories and find the perfect games for your style."
          textboxLayout="default"
          useInvertedBackground={true}
          faqsAnimation="opacity"
          faqs={[
            {
              id: "cat-faq-1",
              title: "What are the main game categories?",
              content: "We offer 12+ main categories including Action, Adventure, Puzzle, Strategy, Casual, Educational, Racing, Sports, RPG, Simulation, Arcade, and Multiplayer. Each category contains hundreds of carefully curated games.",
            },
            {
              id: "cat-faq-2",
              title: "How are games selected for categories?",
              content: "Our team of gaming experts manually reviews and categorizes each game based on gameplay mechanics, theme, and user experience. We ensure accurate categorization to help you find exactly what you're looking for.",
            },
            {
              id: "cat-faq-3",
              title: "Can a game belong to multiple categories?",
              content: "Yes, some games may fit into multiple categories. For example, a strategy RPG would appear in both Strategy and RPG sections. We tag games with all relevant categories for your convenience.",
            },
            {
              id: "cat-faq-4",
              title: "How do you update category recommendations?",
              content: "Our category algorithms update daily based on Play Store trends, player ratings, downloads, and community feedback. New trending games are added to their respective categories weekly.",
            },
            {
              id: "cat-faq-5",
              title: "Is there a category for indie games?",
              content: "Yes! We have a dedicated Indie Games section showcasing creative games from independent developers. These games often offer unique gameplay and innovative mechanics.",
            },
            {
              id: "cat-faq-6",
              title: "Can I filter games by category and rating?",
              content: "Absolutely! You can combine category filters with rating filters to find games that match your exact preferences. Filter by rating, downloads, release date, and more.",
            },
          ]}
          buttons={[{ text: "Browse All Games", href: "/browse" }]}
          buttonAnimation="opacity"
          ariaLabel="Categories FAQ section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 Knock Games. All rights reserved."
          bottomRightText="Discover. Play. Enjoy."
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}