"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Zap, Heart, Star } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="fluid"
      cardStyle="subtle-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="ComputerClub"
          navItems={[
            { name: "About", id: "about" },
            { name: "Activities", id: "features" },
            { name: "Community", id: "testimonials" },
            { name: "Contact", id: "contact" },
            { name: "Members", id: "socialproof" }
          ]}
          button={{
            text: "Join Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          tag="Welcome to Tech Excellence"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="Join the Computer Club Community"
          description="Connect with fellow tech enthusiasts, expand your skills, and build amazing projects together. From coding workshops to hardware hacking, we create opportunities for growth and innovation."
          background={{ variant: "plain" }}
          imageSrc="http://img.b2bpic.net/free-photo/asian-female-developer-coding-cloud-computing-applications-pc_482257-124536.jpg"
          imageAlt="computer laptop tech workspace coding"
          buttons={[
            { text: "Become a Member", href: "contact" },
            { text: "Learn More", href: "about" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="About Us"
          tagIcon={Heart}
          tagAnimation="slide-up"
          title="Building Tomorrow's Tech Leaders"
          description="Our Computer Club is dedicated to fostering a vibrant community where students and professionals collaborate, learn, and innovate. We provide hands-on experience with the latest technologies, mentorship from industry experts, and a supportive environment where ideas flourish and careers thrive."
          metrics={[
            { value: "500+", title: "Active Members" },
            { value: "50+", title: "Workshops & Events" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/group-young-businesspeople-meeting-office_171337-7269.jpg"
          imageAlt="team collaboration working computer group"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSix
          tag="What We Offer"
          tagAnimation="slide-up"
          title="Club Activities & Programs"
          description="Discover the diverse range of programs and activities designed to accelerate your tech journey"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Coding Bootcamps",              description: "Intensive workshops covering web development, mobile apps, data structures, and competitive programming. Learn industry-standard languages and frameworks from experienced mentors.",              imageSrc: "http://img.b2bpic.net/free-photo/diverse-programmers-discussing-about-html-code-compiling-discovers-errors-standing-front-multiple-screens-startup-office-software-developers-working-server-interface-development_482257-64363.jpg",              imageAlt: "coding programming development computer tech"
            },
            {
              id: 2,
              title: "Networking Events",              description: "Connect with like-minded tech enthusiasts, industry professionals, and potential collaborators. Share ideas, build relationships, and discover exciting career opportunities.",              imageSrc: "http://img.b2bpic.net/free-photo/yes_53876-47102.jpg",              imageAlt: "networking meeting people discussion group"
            },
            {
              id: 3,
              title: "Hackathons & Competitions",              description: "Participate in exciting hackathons where you can showcase your skills, win prizes, and build cutting-edge projects. Compete in coding competitions and technical challenges.",              imageSrc: "http://img.b2bpic.net/free-photo/diversity-group-students-using-laptop-books_53876-64941.jpg",              imageAlt: "learning education knowledge study training"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTag="Member Stories"
          cardTagIcon={Star}
          cardTitle="Thousands of members are transforming their tech careers through our community"
          cardAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Alex Chen",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "portrait person avatar professional face"
            },
            {
              id: "2",              name: "Sarah Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "portrait person avatar professional face"
            },
            {
              id: "3",              name: "James Park",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "portrait person avatar professional face"
            },
            {
              id: "4",              name: "Emma Thompson",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "portrait person avatar professional face"
            },
            {
              id: "5",              name: "Marcus Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "portrait person avatar professional face"
            },
            {
              id: "6",              name: "Lisa Wang",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "portrait person avatar professional face"
            }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="socialproof" data-section="socialproof">
        <SocialProofOne
          tag="Trusted Technologies"
          tagAnimation="slide-up"
          title="Partnered With Industry Leaders"
          description="Our members work with and learn from the world's most innovative technology companies"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Microsoft",            "Apple",            "Google",            "GitHub",            "AWS",            "Linux Foundation",            "Python Software Foundation",            "JavaScript Community"
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Join Our Community"
          description="Ready to take your tech skills to the next level? Fill out the form below and become part of our thriving Computer Club. We'll get back to you with membership details, upcoming events, and ways to get involved."
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Full Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Your Email Address",              required: true
            },
            {
              name: "skills",              type: "text",              placeholder: "Your Tech Skills",              required: false
            },
            {
              name: "interests",              type: "text",              placeholder: "Areas of Interest (e.g., Web Dev, AI, Cybersecurity)",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us a bit about yourself and why you want to join...",            rows: 5,
            required: false
          }}
          imageSrc="http://img.b2bpic.net/free-vector/male-hand-holding-gadget-messages-notification_81522-4433.jpg"
          imageAlt="contact communication message form connection"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Submit & Join"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Club",              items: [
                { label: "About Us", href: "#about" },
                { label: "Activities", href: "#features" },
                { label: "Events", href: "#testimonials" },
                { label: "Join Now", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Tutorials", href: "#" },
                { label: "Documentation", href: "#" },
                { label: "Code Repository", href: "#" },
                { label: "Discord Server", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact Us", href: "#contact" },
                { label: "Feedback", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Computer Club | Building Tomorrow's Tech Leaders"
        />
      </div>
    </ThemeProvider>
  );
}
