"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Smartphone, Star, Users, Download } from "lucide-react";

export default function AboutPage() {
  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="about-metrics" data-section="about-metrics">
        <AboutMetric
          title="Our Mission & Impact"
          metrics={[
            { icon: Smartphone, label: "Games Cataloged", value: "50,000+" },
            { icon: Users, label: "Active Community", value: "2M+" },
            { icon: Star, label: "Avg Player Rating", value: "4.8/5" },
            { icon: Download, label: "Downloads Daily", value: "100K+" },
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={true}
          ariaLabel="Knock Games impact metrics"
        />
      </div>

      <div id="about-story" data-section="about-story">
        <FeatureCardSixteen
          title="About Knock Games"
          description="Knock Games was founded with a simple mission: to help Android players discover amazing games in a cluttered marketplace. We believe every gamer deserves a curated, trustworthy platform to find their next favorite game."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          negativeCard={{
            items: [
              "Overwhelming game selection",
              "Unreliable user reviews",
              "No editorial curation",
              "Slow discovery process",
            ],
          }}
          positiveCard={{
            items: [
              "Expertly curated games",
              "Verified authentic reviews",
              "Editorial picks and trends",
              "Fast, intuitive discovery",
            ],
          }}
          buttons={[{ text: "Start Exploring", href: "/browse" }]}
          buttonAnimation="slide-up"
          ariaLabel="About Knock Games story section"
        />
      </div>

      <div id="about-faq" data-section="about-faq">
        <FaqDouble
          title="About Knock Games - Frequently Asked"
          description="Get to know more about our platform, team, and commitment to the gaming community."
          textboxLayout="default"
          useInvertedBackground={true}
          faqsAnimation="opacity"
          faqs={[
            {
              id: "about-faq-1",
              title: "Who created Knock Games?",
              content: "Knock Games was founded by a passionate team of gamers and developers who wanted to make Android game discovery easier and more trustworthy. We're dedicated to supporting both players and game developers.",
            },
            {
              id: "about-faq-2",
              title: "How do you curate games?",
              content: "Our team of gaming experts plays, reviews, and categorizes games daily. We consider gameplay quality, innovation, user reviews, ratings, and community feedback to build our curated catalog.",
            },
            {
              id: "about-faq-3",
              title: "Are you affiliated with Google Play Store?",
              content: "Knock Games is an independent discovery platform. We're not affiliated with Google, but we partner directly with the Play Store to provide you with accurate game information and direct download links.",
            },
            {
              id: "about-faq-4",
              title: "How can game developers submit their games?",
              content: "Developers can contact us at developers@knockgames.com with their game information. We review all submissions and feature high-quality games on our platform to help them reach more players.",
            },
            {
              id: "about-faq-5",
              title: "What's your stance on data privacy?",
              content: "We take privacy seriously and comply with all applicable data protection regulations. We don't sell user data and use your information only to improve your gaming experience.",
            },
            {
              id: "about-faq-6",
              title: "How can I support Knock Games?",
              content: "You can support us by sharing our platform with friends, leaving reviews for games, and providing feedback. Your participation helps us grow and improve the gaming discovery experience for everyone.",
            },
          ]}
          buttons={[{ text: "Contact Us", href: "mailto:play@knockgames.com" }]}
          buttonAnimation="opacity"
          ariaLabel="About Knock Games 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>
  );
}