"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Github, Linkedin, Twitter, Mail } from "lucide-react";

export default function TechHubClubPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="medium"
      background="fluid"
      cardStyle="inset"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple 
          navItems={[
            {name: "Home", id: "hero"},
            {name: "About", id: "about"},
            {name: "Activities", id: "features"},
            {name: "Team", id: "team"},
            {name: "Contact", id: "contact"}
          ]}
          brandName="TechHub Club"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered 
          title="Welcome to the Computer Club"
          description="Join a vibrant community of tech enthusiasts, developers, and innovators. Build projects, learn new skills, and collaborate with fellow members who share your passion for technology."
          background={{variant: "downward-rays-static"}}
          avatars={[
            {src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg", alt: "Club Member 1"},
            {src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg", alt: "Club Member 2"},
            {src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg", alt: "Club Member 3"}
          ]}
          avatarText="Join 150+ passionate members"
          buttons={[
            {text: "Join Now", href: "contact"},
            {text: "Learn More", href: "about"}
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout 
          heading={[
            {type: "text", content: "Empowering"},
            {type: "image", src: "http://img.b2bpic.net/free-vector/linkedin-picture-template_742173-4956.jpg", alt: "Club emblem"},
            {type: "text", content: "the next generation of tech leaders"}
          ]}
          useInvertedBackground={false}
          buttons={[
            {text: "View Our Projects", href: "features"},
            {text: "Contact Us", href: "contact"}
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSix 
          title="Club Activities & Initiatives"
          description="Discover the diverse programs and events we offer throughout the year to help members grow their technical skills and network."
          tag="What We Do"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Coding Bootcamps",              description: "Intensive workshops on web development, mobile apps, and competitive programming. Learn from experienced developers and practice real-world problem-solving.",              imageSrc: "http://img.b2bpic.net/free-photo/am-i-doing-it-right-group-young-people-casual-clothes-working-modern-office_146671-16514.jpg"
            },
            {
              id: 2,
              title: "Hackathons & Competitions",              description: "Participate in monthly hackathons and coding competitions. Win prizes, build impressive projects, and showcase your skills to the tech community.",              imageSrc: "http://img.b2bpic.net/free-photo/two-creative-designers-working-project-together-sharing-new-ideas-workplace-business-team-work-concept_58466-12412.jpg"
            },
            {
              id: 3,
              title: "Tech Talks & Seminars",              description: "Learn from industry professionals and researchers. Topics range from AI and machine learning to cybersecurity and emerging technologies.",              imageSrc: "http://img.b2bpic.net/free-photo/experts-optimize-factory-equipment-energy-output-videocall-meeting_482257-126691.jpg"
            },
            {
              id: 4,
              title: "Project Collaboration",              description: "Work with peers on collaborative projects. From web apps to hardware projects, team up and bring your ideas to life with mentorship support.",              imageSrc: "http://img.b2bpic.net/free-photo/teamworking-engineers-coding-advanced-ai-algorithm-startup_482257-124943.jpg"
            }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive 
          title="Meet Our Leadership"
          description="Meet the dedicated team members who lead the Computer Club with passion and vision."
          tag="Our Team"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          team={[
            {
              id: "1",              name: "Alex Chen",              role: "President & Co-Founder",              imageSrc: "http://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg"
            },
            {
              id: "2",              name: "Jordan Martinez",              role: "VP of Operations",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg"
            },
            {
              id: "3",              name: "Sarah Johnson",              role: "Events Coordinator",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg"
            },
            {
              id: "4",              name: "Mike Wong",              role: "Technical Director",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg"
            }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo 
          title="Our Impact by the Numbers"
          description="See the growth and achievements of our community throughout the years."
          tag="Stats"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "150+",              description: "Active Members"
            },
            {
              id: "2",              value: "24",              description: "Events Per Year"
            },
            {
              id: "3",              value: "45+",              description: "Completed Projects"
            },
            {
              id: "4",              value: "92%",              description: "Member Satisfaction"
            }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen 
          testimonial="The Computer Club completely transformed my understanding of software development. The mentorship and community support helped me land my dream internship. I've made lifelong friends and collaborators here."
          rating={5}
          author="Emma Davis, Software Engineering Student"
          avatars={[
            {src: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg", alt: "Emma Davis"},
            {src: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg", alt: "Member"},
            {src: "http://img.b2bpic.net/free-vector/set-social-people-media-profile-member_24877-53571.jpg", alt: "Member"},
            {src: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg", alt: "Member"},
            {src: "http://img.b2bpic.net/free-vector/set-social-people-media-profile-member_24877-53571.jpg", alt: "Member"},
            {src: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg", alt: "Member"}
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia 
          title="Frequently Asked Questions"
          description="Get answers to common questions about membership, events, and club activities."
          tag="FAQ"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/help-customer-support-service-concept_53876-120150.jpg"
          imageAlt="FAQ section"
          mediaAnimation="slide-up"
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "How do I join the Computer Club?",              content: "Membership is open to all students with an interest in technology. Simply fill out our membership form at our contact section or attend any of our regular meetings. There are no specific prerequisites or experience requirements."
            },
            {
              id: "2",              title: "Are there membership fees?",              content: "No, membership is completely free! We're supported by university funding and local tech sponsors who believe in supporting the next generation of developers."
            },
            {
              id: "3",              title: "What experience level do I need?",              content: "We welcome members of all experience levels, from complete beginners to experienced developers. Our activities are designed to accommodate everyone, and we have mentors available to help beginners get started."
            },
            {
              id: "4",              title: "When do you meet and hold events?",              content: "We hold general meetings every Friday at 5 PM in the CS Building, Room 301. Special events and workshops are scheduled throughout the year. Check our calendar for upcoming activities."
            },
            {
              id: "5",              title: "Can I participate in hackathons?",              content: "Absolutely! Hackathons are some of our most popular events. Both individual participation and team participation are encouraged. We also host several online hackathons throughout the year."
            },
            {
              id: "6",              title: "How can I get involved as a volunteer?",              content: "We're always looking for passionate volunteers to help organize events, mentor members, and lead workshops. Contact our VP of Operations at jordan.martinez@techhubclub.com to learn about volunteer opportunities."
            }
          ]}
          mediaPosition="left"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter 
          tag="Get In Touch"
          title="Ready to Join the Community?"
          description="Sign up for our newsletter to stay updated on upcoming events, workshops, and member exclusive opportunities. Be part of the Computer Club family."
          background={{variant: "rotated-rays-animated"}}
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonText="Subscribe"
          inputPlaceholder="Enter your email address"
          termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to receive updates about club events and activities."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard 
          logoText="TechHub Club"
          copyrightText="© 2025 Computer Club. Building the future together."
          socialLinks={[
            {icon: Github, href: "https://github.com", ariaLabel: "GitHub"},
            {icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn"},
            {icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter"},
            {icon: Mail, href: "mailto:hello@techhubclub.com", ariaLabel: "Email"}
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
