"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
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 BrowsePage() {
  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: "/" },
        { label: "Top Rated", href: "/browse" },
        { label: "New Releases", href: "/browse" },
      ],
    },
    {
      title: "Categories",
      items: [
        { label: "Action", href: "/browse" },
        { label: "Puzzle", href: "/browse" },
        { label: "Strategy", href: "/browse" },
        { label: "Casual", href: "/browse" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/" },
        { 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="browse-collection" data-section="browse-collection">
        <ProductCardThree
          title="Browse All Games"
          description="Explore our complete collection of Android games. Filter by category, rating, or popularity to find exactly what you're looking for."
          tag="Complete Collection"
          tagIcon={Flame}
          tagAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          carouselMode="buttons"
          products={[
            {
              id: "game-1",
              name: "Legends Arena",
              price: "Free",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-warrior-princess_23-2151663248.jpg?_wi=2",
              imageAlt: "Legends Arena game",
            },
            {
              id: "game-2",
              name: "Puzzle Master Pro",
              price: "Free",
              imageSrc: "http://img.b2bpic.net/free-vector/flat-design-escape-room-invitation_23-2149906790.jpg?_wi=2",
              imageAlt: "Puzzle Master Pro game",
            },
            {
              id: "game-3",
              name: "Infinite Runner",
              price: "Free",
              imageSrc: "http://img.b2bpic.net/free-photo/joyful-healthy-woman-earphones-listening-music-while-using-smartphone_8353-6938.jpg?_wi=2",
              imageAlt: "Infinite Runner game",
            },
          ]}
          buttons={[{ text: "View More", href: "/browse" }]}
          buttonAnimation="opacity"
          ariaLabel="Browse all games collection"
        />
      </div>

      <div id="browse-faq" data-section="browse-faq">
        <FaqDouble
          title="Game Browse Guide"
          description="Learn how to navigate our game collection and find the perfect games for your preferences."
          textboxLayout="default"
          useInvertedBackground={true}
          faqsAnimation="opacity"
          faqs={[
            {
              id: "faq-1",
              title: "How can I filter games by category?",
              content: "Use our category filters on the left sidebar to narrow down games by type such as Action, Puzzle, Strategy, RPG, and more. You can combine multiple filters for more specific results.",
            },
            {
              id: "faq-2",
              title: "What do the star ratings mean?",
              content: "Star ratings (1-5) represent the average player satisfaction for each game. 5 stars indicates the highest rated games. Filter by rating to see only top-reviewed games.",
            },
            {
              id: "faq-3",
              title: "Can I sort games by popularity?",
              content: "Yes! Use the sort options to arrange games by Most Downloaded, Most Rated, Newest Releases, or Top Rated. This helps you discover trending games.",
            },
            {
              id: "faq-4",
              title: "How do I save my favorite games?",
              content: "Click the heart icon on any game card to add it to your favorites. Access your saved games from your profile or favorites list for quick reference.",
            },
            {
              id: "faq-5",
              title: "Are there multiplayer game options?",
              content: "Absolutely! Filter by the Multiplayer tag to find games where you can play with friends. We have competitive, cooperative, and social multiplayer games.",
            },
            {
              id: "faq-6",
              title: "How do I get notified about new game releases?",
              content: "Enable notifications in your profile settings to get alerts about new game releases in your favorite categories. You can also subscribe to our newsletter.",
            },
          ]}
          buttons={[{ text: "Back to Home", href: "/" }]}
          buttonAnimation="opacity"
          ariaLabel="Browse guide 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>
  );
}