"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function AboutPage() {
  const navItems = [
    { name: 'Home', id: '/' },
    { name: 'About', id: '/about' },
    { name: 'Features', id: '/#features' },
    { name: 'Showcase', id: '/#product' },
    { name: 'News', id: '/blog' },
    { name: 'Shop', id: '/shop' },
    { name: 'Team', id: '/#team' },
    { name: 'Contact', id: '/#contact' }
  ];

  const footerColumns = [
    { items: [{ label: 'About Us', href: '/about' }, { label: 'Features', href: '#features' }, { label: 'News', href: '/blog' }] },
    { items: [{ label: 'Community', href: '#product' }, { label: 'Team', href: '#team' }, { label: 'FAQ', href: '#faq' }] },
    { items: [{ label: 'Contact', href: '#contact' }, { label: 'Privacy Policy', href: '#' }, { label: 'Terms of Service', href: '#' }] }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="medium"
      background="noise"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Star Wars Fan Club"
          navItems={navItems}
        />
      </div>

      <main className="min-h-screen flex flex-col items-center justify-center py-20 px-4 sm:px-6 lg:px-8">
        <div id="about-community" data-section="about-community" className="w-full max-w-content-width mx-auto text-center pt-20 pb-10">
          <h1 className="text-4xl sm:text-5xl font-bold text-foreground mb-6">
            Our Community: United by the Force
          </h1>
          <p className="text-lg text-foreground/80 leading-relaxed max-w-3xl mx-auto">
            Welcome to the heart of the Star Wars Fan Club – our vibrant and growing community!
            We are a diverse group of enthusiasts from across the galaxy, united by a shared
            passion for the epic sagas, compelling characters, and rich lore of Star Wars.
            Here, you'll find fellow fans eager to discuss theories, share fan art, celebrate
            milestones, and relive iconic moments. Whether you're a seasoned Jedi Master or
            a curious Padawan, there's a place for you to connect, engage, and deepen your
            love for a galaxy far, far away. Join us as we explore new horizons, debate the
            mysteries of the Force, and keep the spirit of Star Wars alive!
          </p>
        </div>
      </main>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={footerColumns}
          logoText="Star Wars Fan Club"
          containerClassName="bg-background-accent text-foreground"
        />
      </div>
    </ThemeProvider>
  );
}
