"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ArrowRight, Handshake, Star, Target, TrendingUp, Users, Zap } from "lucide-react";

export default function TechClubPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="TechClub"
          navItems={[
            { name: "About", id: "about" },
            { name: "Features", id: "features" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Join Now",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          title="Welcome to the Computer Club"
          description="Unite with fellow tech enthusiasts, learn cutting-edge technologies, and collaborate on innovative projects. Join our vibrant community of developers, engineers, and technology lovers."
          tag="Tech Community"
          tagIcon={Zap}
          tagAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/man-woman-giving-high-five-working-cafe_1262-1018.jpg",              imageAlt: "Computer club members collaborating"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/am-i-doing-it-right-group-young-people-casual-clothes-working-modern-office_146671-16514.jpg",              imageAlt: "Coding workshop session"
            }
          ]}
          rating={5}
          ratingText="Trusted by 500+ members"
          buttons={[
            { text: "Join the Club", href: "#contact" },
            { text: "Learn More", href: "#about" }
          ]}
          buttonAnimation="slide-up"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Building Tomorrow's Tech Leaders"
          description="Our computer club is dedicated to fostering a collaborative environment where technology enthusiasts come together to learn, share knowledge, and innovate. We organize workshops, hackathons, coding competitions, and networking events to help members grow their skills and connect with like-minded professionals."
          tag="Our Mission"
          tagIcon={Target}
          tagAnimation="slide-up"
          metrics={[
            { value: "500+", title: "Active Members" },
            { value: "50+", title: "Annual Events" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/group-young-businesspeople-meeting-office_171337-7269.jpg"
          imageAlt="Computer club collaboration"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentySix
          title="What We Offer"
          description="Explore the diverse opportunities and resources available to our club members"
          tag="Club Benefits"
          tagIcon={Star}
          tagAnimation="slide-up"
          features={[
            {
              title: "Expert Workshops",              description: "Learn from industry professionals in hands-on technical workshops covering latest technologies",              imageSrc: "http://img.b2bpic.net/free-photo/yoga-class-concept_53876-31177.jpg",              imageAlt: "Workshop session",              buttonIcon: ArrowRight
            },
            {
              title: "Networking Events",              description: "Connect with fellow tech enthusiasts and build meaningful professional relationships",              imageSrc: "http://img.b2bpic.net/free-photo/friends-hanging-out-with-each-other_53876-40981.jpg",              imageAlt: "Networking event",              buttonIcon: ArrowRight
            },
            {
              title: "Collaborative Projects",              description: "Work on real-world projects with teammates and gain practical development experience",              imageSrc: "http://img.b2bpic.net/free-photo/african-american-skilled-analyst-reviewing-monthly-revenue-balance_482257-122687.jpg",              imageAlt: "Project collaboration",              buttonIcon: ArrowRight
            },
            {
              title: "Competitions",              description: "Compete in hackathons and coding challenges to test your skills and win prizes",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-winning-videogame_23-2149349984.jpg",              imageAlt: "Hackathon competition",              buttonIcon: ArrowRight
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Impact"
          description="See the impressive results and achievements of our computer club community"
          tag="By The Numbers"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "500+",              title: "Club Members",              description: "Active community of passionate tech enthusiasts",              imageSrc: "http://img.b2bpic.net/free-photo/group-diverse-friends-taking-photo-together_53876-48764.jpg",              imageAlt: "Community members"
            },
            {
              id: "2",              value: "50+",              title: "Events Annually",              description: "Workshops, hackathons, and networking opportunities",              imageSrc: "http://img.b2bpic.net/free-photo/diverse-business-people-dinner-party_53876-98341.jpg",              imageAlt: "Event gathering"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Leadership"
          description="The dedicated team driving our club's vision and growth"
          tag="Leadership Team"
          tagIcon={Users}
          tagAnimation="slide-up"
          members={[
            {
              id: "1",              name: "Alex Johnson",              role: "Club President",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=1",              imageAlt: "Alex Johnson"
            },
            {
              id: "2",              name: "Maria Chen",              role: "VP Engineering",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=2",              imageAlt: "Maria Chen"
            },
            {
              id: "3",              name: "David Kumar",              role: "Events Coordinator",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=3",              imageAlt: "David Kumar"
            },
            {
              id: "4",              name: "Sarah Williams",              role: "Membership Lead",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=4",              imageAlt: "Sarah Williams"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="socialproof" data-section="socialproof">
        <SocialProofOne
          title="Trusted by Tech Communities"
          description="Partner organizations and sponsors who support our mission"
          tag="Partners"
          tagIcon={Handshake}
          tagAnimation="slide-up"
          names={["TechCorp", "InnovateLabs", "CodeStream", "DevHub", "CloudTech", "DataFlow", "SecureNet", "FutureLab"]}
          textboxLayout="default"
          useInvertedBackground={true}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Join Our Community"
          description="Ready to connect with fellow tech enthusiasts? Fill out the form below to join the computer club and start your journey with us."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
            { name: "skills", type: "text", placeholder: "Your Tech Skills", required: false }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your interests and goals...",            rows: 5,
            required: true
          }}
          imageSrc="http://img.b2bpic.net/free-photo/binary-code-with-globe-laptop-computer_1048-6189.jpg"
          imageAlt="Technology and communication"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Join Now"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-vector/blue-pink-digital-tech-network-dotted-particle-banner_1017-62590.jpg"
          imageAlt="Technology background"
          columns={[
            {
              title: "Quick Links",              items: [
                { label: "About", href: "#about" },
                { label: "Features", href: "#features" },
                { label: "Team", href: "#team" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Join Us", href: "#contact" },
                { label: "Events", href: "#" },
                { label: "Resources", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            }
          ]}
          logoText="TechClub"
          copyrightText="© 2025 Computer Club | Empowering Tech Enthusiasts"
        />
      </div>
    </ThemeProvider>
  );
}