"use client";

import { Users, BookOpen, Heart } from 'lucide-react';
import Link from 'next/link';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function AboutPage() {
  return (
    <ThemeProvider 
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="medium"
      background="aurora"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      {/* Navigation */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Remember"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Books", id: "/books" },
            { name: "Members", id: "#leadership" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Join Now",            href: "/contact"
          }}
          navItemClassName="text-sm font-medium"
          buttonClassName="px-6 py-2"
        />
      </div>

      {/* About Our Story */}
      <div id="about-story" data-section="about-story">
        <TextSplitAbout
          title="Our Story"
          description={[
            "Remember was born from a simple belief: that books have the power to transform lives and create meaningful connections between people. Founded in 2020 by a group of passionate readers who met at a local coffee shop, we started with just five members and a shared love for great literature.",            "What began as informal discussions over coffee has grown into a vibrant community of over 200 active members. We've created a space where every voice matters, where diverse perspectives are celebrated, and where the magic of storytelling brings us together month after month.",            "Our name 'Remember' reflects our mission to help people remember the joy of reading, the power of shared stories, and the importance of human connection in an increasingly digital world."
          ]}
          buttons={[
            { text: "Join Our Community", href: "/contact" }
          ]}
          useInvertedBackground="noInvert"
          showBorder={true}
          titleClassName="text-5xl font-extrabold"
          descriptionClassName="text-lg leading-relaxed"
        />
      </div>

      {/* Our Values */}
      <div id="about-values" data-section="about-values">
        <TextSplitAbout
          title="Our Values"
          description={[
            "Inclusivity is at the heart of everything we do. We welcome readers of all backgrounds, experience levels, and literary preferences. Whether you're a lifelong bibliophile or just rediscovering your love for reading, you belong here.",            "We believe in the power of diverse perspectives to enrich our understanding of literature and life. Our book selections span cultures, genres, and time periods, ensuring every member discovers something new and meaningful.",            "Respect and open-mindedness guide our discussions. We create a safe space where members can share their thoughts, ask questions, and explore different viewpoints without judgment."
          ]}
          useInvertedBackground="invertDefault"
          showBorder={false}
          titleClassName="text-4xl font-extrabold"
          descriptionClassName="text-base leading-relaxed"
        />
      </div>

      {/* Leadership Team */}
      <div id="leadership" data-section="leadership">
        <TeamCardOne
          title="Our Leadership Team"
          description="Meet the dedicated volunteers who help make Remember a welcoming and engaging community for all members"
          tag="Leadership"
          tagIcon={Heart}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          gridVariant="four-items-2x2-equal-grid"
          members={[
            {
              id: "1",              name: "Marcus Johnson",              role: "Co-Founder & Facilitator",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",              imageAlt: "Marcus Johnson"
            },
            {
              id: "2",              name: "Sarah Chen",              role: "Community Manager",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Events Coordinator",              imageSrc: "https://img.b2bpic.net/free-photo/serious-beautiful-middle-aged-business-woman_1262-3072.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "James Park",              role: "Book Selection Committee",              imageSrc: "https://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg",              imageAlt: "James Park"
            }
          ]}
          carouselMode="buttons"
          containerClassName="w-full"
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Remember"
          copyrightText="© 2025 Remember Book Club. All rights reserved."
          columns={[
            {
              title: "Community",              items: [
                { label: "About Us", href: "#about-story" },
                { label: "Home", href: "/" },
                { label: "Events", href: "/" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Book List", href: "/books" },
                { label: "Discussion Guides", href: "#" },
                { label: "FAQ", href: "/" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "Newsletter", href: "#" },
                { label: "Join Now", href: "/contact" }
              ]
            }
          ]}
          containerClassName="w-full"
          logoTextClassName="text-xl font-bold"
        />
      </div>
    </ThemeProvider>
  );
}