"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { ArrowRight, Github, Linkedin, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmall"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "About", id: "about" },
            { name: "Events", id: "events" },
            { name: "Members", id: "members" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Join Now", href: "contact" }}
          brandName="TechClub"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="TechClub"
          description="Innovating Together: Your Gateway to Technology, Collaboration, and Growth"
          buttons={[
            { text: "Join Our Community", href: "contact" },
            { text: "Explore Events", href: "events" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/digital-environment-scene_23-2151873107.jpg"
          imageAlt="Computer Club Community"
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Us"
          title="Welcome to TechClub - Where Passion for Technology Meets Innovation and Community"
          useInvertedBackground={false}
          buttons={[{ text: "Learn More", href: "#events" }]}
        />
      </div>

      <div id="events" data-section="events">
        <FeatureCardTwentySix
          title="Upcoming Events"
          description="Join us for exciting workshops, competitions, and networking sessions designed to elevate your technical skills"
          tag="Featured"
          features={[
            {
              title: "Spring Hackathon 2025",              description: "48-hour coding challenge with prizes and mentorship from industry professionals",              imageSrc: "http://img.b2bpic.net/free-photo/team-software-engineers-doing-brainstorming-office_482257-123976.jpg",              imageAlt: "Hackathon Event",              buttonIcon: ArrowRight,
              buttonHref: "contact"},
            {
              title: "Advanced Web Development Workshop",              description: "Master modern frameworks and best practices with hands-on coding sessions",              imageSrc: "http://img.b2bpic.net/free-photo/digital-environment-scene_23-2151873107.jpg",              imageAlt: "Web Development Workshop",              buttonIcon: ArrowRight,
              buttonHref: "contact"},
            {
              title: "Tech Leaders Networking Night",              description: "Connect with industry veterans and fellow developers in an inspiring atmosphere",              imageSrc: "http://img.b2bpic.net/free-photo/diverse-business-people-dinner-party_53876-98341.jpg",              imageAlt: "Networking Event",              buttonIcon: ArrowRight,
              buttonHref: "contact"},
            {
              title: "AI & Machine Learning Summit",              description: "Explore cutting-edge AI applications with presentations from tech innovators",              imageSrc: "http://img.b2bpic.net/free-photo/experts-optimize-factory-equipment-energy-output-videocall-meeting_482257-126691.jpg",              imageAlt: "AI Summit",              buttonIcon: ArrowRight,
              buttonHref: "contact"},
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="By The Numbers"
          description="Our Impact and Growing Community Strength"
          tag="Statistics"
          metrics={[
            { id: "1", value: "500+", description: "Active Members" },
            { id: "2", value: "48", description: "Annual Events" },
            { id: "3", value: "25K+", description: "Lines of Code Shared" },
            { id: "4", value: "15+", description: "Years of Excellence" },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Alex Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "professional portrait avatar user profile"},
            {
              id: "2",              name: "Sarah Martinez",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "professional portrait avatar user profile"},
            {
              id: "3",              name: "David Chen",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "professional portrait avatar user profile"},
            {
              id: "4",              name: "Emma Williams",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "professional portrait avatar user profile"},
          ]}
          cardTitle="Over 500 tech enthusiasts trust TechClub to fuel their passion for innovation and learning"
          cardTag="Member Stories"
          cardAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="members" data-section="members">
        <TeamCardTwo
          title="Meet Our Leadership"
          description="Dedicated volunteers driving innovation and community growth"
          tag="Leadership Team"
          members={[
            {
              id: "1",              name: "Michael Torres",              role: "President",              description: "Full-stack developer passionate about mentoring the next generation of tech leaders and fostering innovation",              imageSrc: "http://img.b2bpic.net/free-photo/young-man-using-portable-notebook-cafe-sitting-table-by-window-typing-something-frowning_343059-118.jpg",              imageAlt: "tech professional developer portrait coder student",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Github, url: "https://github.com" },
              ],
            },
            {
              id: "2",              name: "Jessica Lee",              role: "Vice President",              description: "Cloud architect and event organizer bringing industry expertise to TechClub events and workshops",              imageSrc: "http://img.b2bpic.net/free-photo/young-man-using-portable-notebook-cafe-sitting-table-by-window-typing-something-frowning_343059-118.jpg",              imageAlt: "tech professional developer portrait coder student",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Twitter, url: "https://twitter.com" },
              ],
            },
            {
              id: "3",              name: "James Park",              role: "Treasurer",              description: "Data scientist and financial strategist ensuring TechClub resources are allocated effectively",              imageSrc: "http://img.b2bpic.net/free-photo/young-man-using-portable-notebook-cafe-sitting-table-by-window-typing-something-frowning_343059-118.jpg",              imageAlt: "tech professional developer portrait coder student",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Github, url: "https://github.com" },
              ],
            },
            {
              id: "4",              name: "Priya Patel",              role: "Event Coordinator",              description: "UX designer and community builder creating engaging experiences for all TechClub members",              imageSrc: "http://img.b2bpic.net/free-photo/young-man-using-portable-notebook-cafe-sitting-table-by-window-typing-something-frowning_343059-118.jpg",              imageAlt: "tech professional developer portrait coder student",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Twitter, url: "https://twitter.com" },
              ],
            },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about TechClub membership, events, and opportunities"
          tag="Help Center"
          faqs={[
            {
              id: "1",              title: "How do I join TechClub?",              content: "Joining is simple! Fill out our membership form on the Contact page, attend our next event, and become part of our vibrant community. Membership is open to all skill levels, from beginners to experienced developers."},
            {
              id: "2",              title: "What types of events does TechClub organize?",              content: "We host a variety of events including hackathons, coding workshops, tech talks, networking nights, and collaborative projects. Events cater to different interests like web development, mobile apps, AI, cloud computing, and more."},
            {
              id: "3",              title: "Is there a membership fee?",              content: "TechClub membership is completely free! We believe in making technology education accessible to everyone. Some premium workshops may have a small fee to cover materials, but attendance at regular events is always complimentary."},
            {
              id: "4",              title: "Can beginners join TechClub?",              content: "Absolutely! We welcome members of all skill levels. Our events range from beginner-friendly introductions to advanced technical deep dives. More experienced members often mentor newcomers, creating a supportive learning environment."},
            {
              id: "5",              title: "How often does TechClub meet?",              content: "We host events throughout the year, with a mix of monthly meetings, quarterly workshops, and special annual events like our spring hackathon. Event schedules are posted on our website and social media channels."},
            {
              id: "6",              title: "Can I volunteer or help organize events?",              content: "We always welcome volunteers! If you're interested in helping organize events, manage social media, or lead workshops, please reach out to us at contact@techclub.org. Every contribution helps us grow our community."},
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          title="Join the Tech Revolution"
          description="Ready to connect with passionate developers and innovators? Sign up for our newsletter to stay updated on upcoming events, workshops, and exclusive opportunities."
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground={false}
          inputPlaceholder="your.email@example.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to receive updates about TechClub events and opportunities."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="TechClub"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Code of Conduct", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}
