"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, Code, Users } from "lucide-react";
import Link from "next/link";

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Quick Links",
      items: [
        { label: "Home", href: "/" },
        { label: "About Us", href: "/about" },
      ],
    },
    {
      title: "Connect",
      items: [
        { label: "Contact Us", href: "/contact" },
        { label: "Our Team", href: "/about" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="noise"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: "Home", id: "#home" },
            { name: "About", id: "#about" },
            { name: "Events", id: "#events" },
            { name: "Members", id: "#members" },
            { name: "Contact", id: "#contact" }
          ]}
          brandName="Computer Club"
          button={{ text: "Join Us", href: "/contact" }}
        />
      </div>

      <div id="hero-section" data-section="hero-section">
        <HeroBillboard
          title="Empowering Tech Enthusiasts Since 2018"
          description="Join our vibrant community of students and professionals passionate about computing. Discover cutting-edge technologies, collaborate on exciting projects, and grow your skills in a supportive environment."
          background={{ variant: "radial-gradient" }}
          tag="Innovation Hub"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Explore Events", href: "/about" },
            { text: "Join Our Community", href: "/contact" },
          ]}
          buttonAnimation="slide-up"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/young-coworkers-working-computer-office_329181-20147.jpg", alt: "tech students group of friends laptop users young professionals" },
            { src: "http://img.b2bpic.net/free-photo/smiling-worker-desk_1170-83.jpg", alt: "male student coding computer science young coder" },
            { src: "http://img.b2bpic.net/free-photo/african-american-businesswoman-giving-presentation-female-colleagues-office_637285-9855.jpg", alt: "female student presentation technology classroom" },
          ]}
          avatarText="500+ Members Strong"
          imageSrc="http://img.b2bpic.net/free-photo/joyous-coworkers-having-fun-vibrant-office-while-reviewing-financial-graphs_482257-126650.jpg"
          imageAlt="tech workspace modern office computer setup digital environment"
          mediaAnimation="slide-up"
          marqueeItems={[
            { type: "text", text: "Weekly Workshops" },
            { type: "text", text: "Hackathon Competitions" },
            { type: "text", text: "Industry Networking" },
          ]}
          marqueeSpeed={40}
          showMarqueeCard={true}
          ariaLabel="Hero section showcasing computer club activities"
        />
      </div>

      <div id="features-section" data-section="features-section">
        <FeatureCardSeven
          title="Empower Your Tech Journey"
          description="Join our computer club to unlock a world of learning opportunities, hands-on projects, and community-driven innovation."
          tag="Club Benefits"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="split-description"
          useInvertedBackground={false}
          features={[
            { id: 1, title: "Hands-On Workshops", description: "Learn cutting-edge technologies through interactive sessions led by industry experts.", imageSrc: "http://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg?_wi=1", imageAlt: "coding workshop hands-on learning programming class students coding" },
            { id: 2, title: "Project Collaboration", description: "Work alongside peers on real-world projects that enhance your portfolio and skills.", imageSrc: "http://img.b2bpic.net/free-photo/teamworking-engineers-coding-advanced-ai-algorithm-startup_482257-124943.jpg?_wi=1", imageAlt: "software team collaboration development project tech team" },
            { id: 3, title: "Resource Library", description: "Access exclusive tutorials, tools, and guides to accelerate your technical growth.", imageSrc: "http://img.b2bpic.net/free-photo/library-young-girl-student-using-her-laptop-library_1150-9079.jpg?_wi=1", imageAlt: "tech library digital resources computer books learning materials" },
          ]}
          buttons={[
            { text: "Explore Events", href: "/about" },
            { text: "Join Now", href: "/contact" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="team-section" data-section="team-section">
        <TeamCardOne
          title="Meet Our Leadership Team"
          description="Our dedicated team of passionate tech enthusiasts drives the club's mission forward through innovation, collaboration, and community engagement."
          tag="Core Team"
          tagIcon={Users}
          tagAnimation="blur-reveal"
          members={[
            { id: "member-1", name: "Alex Morgan", role: "Club President", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-senior-businesswoman-sitting-meeting_1262-2246.jpg?_wi=1", imageAlt: "tech leader professional man team manager business executive" },
            { id: "member-2", name: "Jordan Lee", role: "Tech Lead", imageSrc: "http://img.b2bpic.net/free-photo/african-american-businesswoman-giving-presentation-female-colleagues-office_637285-9855.jpg?_wi=1", imageAlt: "female tech expert presentation mentor educator" },
            { id: "member-3", name: "Taylor Kim", role: "Events Coordinator", imageSrc: "http://img.b2bpic.net/free-photo/teens-doing-experiments-robotics-laboratory-boy-girl-protective-glasses-working_1268-23736.jpg?_wi=1", imageAlt: "young tech innovative project student developer creative coder" },
            { id: "member-4", name: "Casey Smith", role: "Community Manager", imageSrc: "http://img.b2bpic.net/free-photo/multiethnic-colleagues-working-laptop-together-office-looking-screen_1098-20303.jpg?_wi=1", imageAlt: "diverse team collaboration tech professionals group work" },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          buttons={[{ text: "View All Members", href: "/about" }]}
          buttonAnimation="opacity"
          textboxLayout="inline-image"
          useInvertedBackground={false}
          ariaLabel="Team section showcasing club leadership"
          textBoxTitleClassName="text-2xl font-bold text-gray-900"
          textBoxDescriptionClassName="text-gray-700 mt-2"
          textBoxTagClassName="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium mt-2"
          textBoxButtonContainerClassName="mt-4 flex space-x-3"
          textBoxButtonClassName="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition duration-300"
          textBoxButtonTextClassName="font-medium"
        />
      </div>
      
      <div id="about-section" data-section="about-section">
        <TextAbout
          tag="ABOUT US"
          tagIcon={Code}
          tagAnimation="slide-up"
          title="Empowering Tech Enthusiasts Since 2018"
          buttons={[
            { text: "Join Our Community", href: "/contact" },
            { text: "Explore Events", href: "/about" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="About section"
        />
      </div>

      <div id="testimonials-section" data-section="testimonials-section">
        <TestimonialCardOne
          title="What Our Members Say"
          description="Hear from our active members about their experiences and growth within our computer club community."
          tag="Community Impact"
          tagIcon={Users}
          tagAnimation="slide-up"
          testimonials={[
            { id: "testimonial-1", name: "Alex Johnson", role: "Software Engineer", company: "Tech Innovations Inc.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/excited-black-manager-showing-thumbs-up-after-successul-negotiation-with-partners-indoor-portrait-asian-employees-with-african-worker-blue-shirt-foreground_197531-25399.jpg?_wi=1", imageAlt: "happy student testimonial positive review member experience" },
            { id: "testimonial-2", name: "Sam Rivera", role: "Computer Science Student", company: "University of Technology", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-man-using-tablet-celebrating-achievement-cafe_1262-18859.jpg?_wi=1", imageAlt: "tech enthusiast success story achievement confidence" },
            { id: "testimonial-3", name: "Taylor Kim", role: "IT Specialist", company: "Global Solutions Ltd.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/that-s-how-success-looks-like-photo-young-team-classical-clothes-celebrating-success-while-holding-drinks-modern-good-lighted-office_146671-13657.jpg?_wi=1", imageAlt: "celebration tech success group achievement community" },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          buttons={[{ text: "View All Testimonials", href: "/about" }]}
          buttonAnimation="opacity"
          textboxLayout="inline-image"
          useInvertedBackground={false}
          ariaLabel="Testimonials section"
        />
      </div>
      
      <div id="footer-section" data-section="footer-section">
        <FooterBase
          columns={footerColumns}
          logoText="CodeCraft Club"
          copyrightText="© 2025 CodeCraft Club. All rights reserved."
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}