"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import Link from 'next/link';
import { Users } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="floatingGradient"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Events", id: "/events" },
            { name: "Projects", id: "/projects" },
            { name: "Join", id: "/join" },
            { name: "Resources", id: "/resources" },
            { name: "Contact", id: "/contact" },
            { name: "Leadership", id: "/leadership" }
          ]}
          brandName="Computer Club"
          button={{ text: "Join Now", href: "/join" }}
        />
      </div>

      <div id="about-detailed" data-section="about-detailed">
        <TextSplitAbout
          title="Our Story & Mission"
          description={[
            "Founded in 2020, our tech club has grown from a small group of coding enthusiasts to a thriving community of over 150 students. We believe that technology is most powerful when it brings people together to solve real-world problems.",
            "Our mission is to create an inclusive environment where students can explore their passion for technology, develop essential skills, and build lasting connections that extend beyond their academic years.",
            "Through mentorship, collaborative projects, and hands-on workshops, we're not just learning about technology – we're shaping the future of innovation together."
          ]}
          buttons={[
            { text: "Join Our Community", href: "/join" },
            { text: "Meet Our Team", href: "/leadership" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="values-section" data-section="values-section">
        <TextSplitAbout
          title="Our Core Values"
          description={[
            "Innovation: We encourage creative thinking and bold experimentation. Every project is an opportunity to push boundaries and explore new possibilities in technology.",
            "Inclusion: Our community welcomes students from all backgrounds and skill levels. We believe diversity of thought and experience makes us stronger and more creative.",
            "Growth: We're committed to continuous learning and helping each member reach their full potential through mentorship, peer collaboration, and challenging projects."
          ]}
          useInvertedBackground={true}
          showBorder={true}
        />
      </div>

      <div id="member-testimonials" data-section="member-testimonials">
        <TestimonialCardOne
          testimonials={[
            {
              id: "testimonial-4",
              name: "Sarah Chen",
              role: "Computer Science Student",
              company: "University Tech Program",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-together-while-sitting-cafe_273609-13272.jpg?_wi=1",
              imageAlt: "Sarah Chen, Computer Science Student"
            },
            {
              id: "testimonial-5",
              name: "Marcus Johnson",
              role: "Software Engineering Intern",
              company: "StartupTech Inc.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/jolly-venture-company-employees-delighted-after-securing-funding-from-investors_482257-125222.jpg",
              imageAlt: "Marcus Johnson, Software Engineering Intern"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          title="Member Success Stories"
          description="Discover how our club has helped members launch their careers and pursue their passion for technology."
          useInvertedBackground={false}
          textboxLayout="default"
        />
      </div>

      <FooterSimple
        columns={[
          {
            title: "Explore",
            items: [
              { label: "Home", href: "/" },
              { label: "About", href: "/about" },
              { label: "Events", href: "/events" },
              { label: "Projects", href: "/projects" }
            ]
          },
          {
            title: "Resources",
            items: [
              { label: "Learning Materials", href: "/resources" },
              { label: "Join", href: "/join" },
              { label: "Leadership", href: "/leadership" },
              { label: "Community Guidelines", href: "#" }
            ]
          },
          {
            title: "Connect",
            items: [
              { label: "Contact Us", href: "/contact" },
              { label: "Join Our Discord", href: "#" },
              { label: "Follow on Social Media", href: "#" },
              { label: "Newsletter Signup", href: "#" }
            ]
          }
        ]}
        bottomLeftText="© 2023 TechConnect Club. All rights reserved."
        bottomRightText="Designed with ❤️ for students by students"
        ariaLabel="Site footer"
      />
    </ThemeProvider>
  );
}