"use client"

import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Code, GitBranch, HelpCircle, Sparkles, Star, Target, Users, Zap } from "lucide-react";

export default function TechClubPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="TechClub"
          navItems={[
            { name: "About", id: "about" },
            { name: "Features", id: "features" },
            { name: "Team", id: "team" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Join Us",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          title="Connect, Code, and Grow Together"
          description="Join our vibrant computer club where passionate members collaborate on projects, share knowledge, and push the boundaries of technology. From beginners to experts, there's a place for everyone."
          tag="Welcome to TechClub"
          tagIcon={Zap}
          tagAnimation="slide-up"
          rating={5}
          ratingText="Trusted by 200+ members"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/technology-unicorn-venture-workspace-with-pc-used-conduct-code-reviews_482257-118729.jpg",              imageAlt: "Computer club workspace with coding setup"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/young-employees-sitting-office-table-using-laptop-team-work-brainstorming-meeting-concept_146671-15635.jpg",              imageAlt: "Team collaboration on tech projects"
            }
          ]}
          buttons={[
            { text: "Explore Events", href: "#features" },
            { text: "Meet the Team", href: "#team" }
          ]}
          background={{ variant: "glowing-orb" }}
          mediaAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Our Mission"
          tagIcon={Target}
          title="We are a community dedicated to fostering innovation, creativity, and technical excellence through collaboration and continuous learning."
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttons={[
            { text: "Learn More About Us", href: "#team" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyFive
          title="What Makes TechClub Special"
          description="Discover the core offerings that make our computer club the premier destination for tech enthusiasts."
          tag="Our Features"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          features={[
            {
              title: "Hands-On Workshops",              description: "Learn from experienced developers through interactive coding sessions, hackathons, and technical talks.",              icon: Code,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg?_wi=1",                  imageAlt: "Programming workshop session"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/typing-keyboard-business-people-manager-working-their-new-project-classroom_146671-16320.jpg?_wi=1",                  imageAlt: "Collaborative learning environment"
                }
              ]
            },
            {
              title: "Project Collaboration",              description: "Work with peers on real-world projects that build your portfolio and technical skills.",              icon: GitBranch,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/social-network-design_24877-49592.jpg",                  imageAlt: "Team working on collaborative project"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/diverse-business-people-dinner-party_53876-98341.jpg?_wi=1",                  imageAlt: "Project showcase event"
                }
              ]
            },
            {
              title: "Networking Opportunities",              description: "Connect with industry professionals, mentors, and fellow tech enthusiasts at our exclusive events.",              icon: Users,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/diverse-business-people-dinner-party_53876-98341.jpg?_wi=2",                  imageAlt: "Networking event gathering"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg?_wi=2",                  imageAlt: "Professional mentorship session"
                }
              ]
            },
            {
              title: "Skill Development",              description: "Build expertise across multiple technologies with our structured learning paths and certification programs.",              icon: Zap,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/typing-keyboard-business-people-manager-working-their-new-project-classroom_146671-16320.jpg?_wi=2",                  imageAlt: "Advanced skill training"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg?_wi=3",                  imageAlt: "Technical certification program"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardEleven
          title="Meet Our Leadership"
          description="The dedicated team driving innovation and community growth at TechClub."
          tag="Team Members"
          tagIcon={Users}
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          groups={[
            {
              id: "leadership",              groupTitle: "Founders & Directors",              members: [
                {
                  id: "1",                  title: "Alex Chen",                  subtitle: "President & Co-Founder",                  detail: "alex@techclub.com",                  imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=1",                  imageAlt: "Alex Chen"
                },
                {
                  id: "2",                  title: "Jordan Kim",                  subtitle: "Vice President & Co-Founder",                  detail: "jordan@techclub.com",                  imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=2",                  imageAlt: "Jordan Kim"
                },
                {
                  id: "3",                  title: "Sam Rivera",                  subtitle: "Events Director",                  detail: "sam@techclub.com",                  imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=3",                  imageAlt: "Sam Rivera"
                }
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Member Success Stories"
          description="Hear from club members whose lives have been transformed through our community."
          tag="Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Maria Santos",              role: "Software Engineer",              company: "TechCorp",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=4",              imageAlt: "Maria Santos"
            },
            {
              id: "2",              name: "David Park",              role: "Full Stack Developer",              company: "StartupXYZ",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=5",              imageAlt: "David Park"
            },
            {
              id: "3",              name: "Emma Wilson",              role: "Product Manager",              company: "CloudSync",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=6",              imageAlt: "Emma Wilson"
            },
            {
              id: "4",              name: "James Liu",              role: "Data Scientist",              company: "AI Innovations",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=7",              imageAlt: "James Liu"
            }
          ]}
          kpiItems={[
            { value: "200+", label: "Active Members" },
            { value: "50+", label: "Events Per Year" },
            { value: "85%", label: "Career Growth Rate" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about TechClub membership, events, and activities."
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "How do I join TechClub?",              content: "Joining TechClub is simple! Visit our contact section at the bottom of the page, fill out the membership form, and attend your first event. There's no application process, just pure enthusiasm for technology."
            },
            {
              id: "2",              title: "Are there membership fees?",              content: "TechClub is completely free for all members! We believe technology should be accessible to everyone. However, optional donations help us host more events and workshops."
            },
            {
              id: "3",              title: "What's the skill level requirement?",              content: "We welcome members of all skill levels—from complete beginners to advanced developers. Our workshops are designed to accommodate everyone, and our community is incredibly supportive."
            },
            {
              id: "4",              title: "How often do you host events?",              content: "We host events multiple times per month, including weekly coding meetups, monthly workshops, and quarterly hackathons. Check our events calendar for the latest schedule."
            },
            {
              id: "5",              title: "Can I propose a project or workshop?",              content: "Absolutely! We encourage community members to propose workshops, projects, and ideas. Contact any of our leadership team, and we'll help bring your ideas to life."
            },
            {
              id: "6",              title: "Is there a Discord or online community?",              content: "Yes! We have a thriving Discord server where members collaborate, share resources, and stay connected. You'll get the invitation link upon joining TechClub."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to join our community and start your tech journey? Contact us today to become a member and attend your first event."
          animationType="reveal-blur"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Contact Us", href: "mailto:hello@techclub.com" },
            { text: "Join Now", href: "#" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "About Us", href: "#about" },
                { label: "Features", href: "#features" },
                { label: "Events", href: "#" },
                { label: "Membership", href: "#" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Team", href: "#team" },
                { label: "Discord", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Testimonials", href: "#testimonials" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Contact", href: "#contact" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 TechClub. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}