"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import Link from 'next/link';
import { Brain, Code, Shield, Calendar, Users, Clock } from 'lucide-react';

export default function EventsPage() {
  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="featured-events" data-section="featured-events">
        <FeatureCardTwentyFive
          title="Featured Events This Month"
          description="Don't miss these exciting opportunities to learn, network, and showcase your skills. Each event is designed to provide hands-on experience and valuable connections."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              title: "AI Workshop Series",
              description: "Explore machine learning fundamentals with interactive demos and real-world applications. Perfect for beginners and intermediate learners.",
              icon: Brain,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/digital-environment-scene_23-2151873107.jpg?_wi=1", imageAlt: "Participants working on AI projects" },
                { imageSrc: "http://img.b2bpic.net/free-photo/group-young-people-doing-experiments-robotics-laboratory-girls-protective-glasses_1268-24389.jpg", imageAlt: "Instructor presenting AI concepts" }
              ]
            },
            {
              title: "Hackathon 2024",
              description: "Showcase your coding prowess in our annual hackathon. Build innovative solutions with mentors and win exciting prizes.",
              icon: Code,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/team-software-engineers-doing-brainstorming-office_482257-123976.jpg", imageAlt: "Team collaborating on a hackathon project" },
                { imageSrc: "http://img.b2bpic.net/free-photo/digital-environment-scene_23-2151873107.jpg?_wi=2", imageAlt: "Judges reviewing hackathon submissions" }
              ]
            }
          ]}
          buttons={[
            { text: "Register Now", href: "/join" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="event-stats" data-section="event-stats">
        <MetricCardOne
          metrics={[
            {
              id: "event-1",
              value: "24",
              title: "Events This Year",
              description: "Regular workshops, seminars, and hands-on learning sessions.",
              icon: Calendar
            },
            {
              id: "event-2",
              value: "150",
              title: "Average Attendance",
              description: "Active participation from our vibrant tech community.",
              icon: Users
            },
            {
              id: "event-3",
              value: "96",
              title: "Hours of Learning",
              description: "Dedicated time for skill development and knowledge sharing.",
              icon: Clock
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          title="Event Highlights"
          description="See the impact of our events on the tech community and student learning experience."
          useInvertedBackground={true}
          textboxLayout="default"
        />
      </div>

      <div id="upcoming-events" data-section="upcoming-events">
        <FeatureCardTwentyFive
          title="Coming Soon"
          description="Stay tuned for these exciting events coming up in the next quarter. Mark your calendars and prepare for amazing learning opportunities."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              title: "Web Development Bootcamp",
              description: "Master modern web development with React, Next.js, and full-stack technologies in this intensive weekend workshop.",
              icon: Code,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-together-conference-room_158595-5236.jpg", imageAlt: "Web development workshop" },
                { imageSrc: "http://img.b2bpic.net/free-photo/creative-team-watching-content-pc-together_74855-9772.jpg", imageAlt: "Students coding together" }
              ]
            },
            {
              title: "Tech Career Fair",
              description: "Connect with industry professionals and explore internship and job opportunities at leading tech companies.",
              icon: Users,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-people-office_23-2149173705.jpg?_wi=1", imageAlt: "Career fair networking" },
                { imageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-together-while-sitting-cafe_273609-13272.jpg?_wi=2", imageAlt: "Professional discussions" }
              ]
            }
          ]}
        />
      </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>
  );
}