"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Award, BookOpen, Briefcase, Code, GitBranch, Mail, MessageSquare, Sparkles, TrendingUp, Trophy, Users, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="noise"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="CompClub"
          navItems={[
            { name: "About", id: "about" },
            { name: "Features", id: "features" },
            { name: "Community", id: "testimonials" },
            { name: "Join", id: "contact" }
          ]}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="CompClub"
          description="Explore the future of technology. Connect with fellow tech enthusiasts, build groundbreaking projects, and master the skills shaping tomorrow's digital world."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Join Now", href: "#contact" },
            { text: "Learn More", href: "#features" }
          ]}
          layoutOrder="default"
          imageSrc="http://img.b2bpic.net/free-photo/group-young-people-casual-clothes-working-modern-office_146671-16433.jpg"
          imageAlt="Computer Club Community"
          frameStyle="card"
          buttonAnimation="slide-up"
          mediaAnimation="opacity"
        />
      </div>
      
      <div id="about" data-section="about">
        <AboutMetric
          title="Building the Next Generation of Tech Leaders Through Collaboration, Learning, and Innovation"
          metrics={[
            { icon: Users, label: "Active Members", value: "500+" },
            { icon: Code, label: "Projects Completed", value: "150+" },
            { icon: Award, label: "Competitions Won", value: "25+" },
            { icon: Zap, label: "Monthly Workshops", value: "12" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="What We Offer"
          description="Discover the opportunities and resources available to every member of our thriving computer club community."
          tag="Features"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          accordionItems={[
            {
              id: "1",              title: "Hands-On Coding Workshops",              content: "Weekly sessions where members learn cutting-edge programming languages, frameworks, and development techniques. From beginner fundamentals to advanced system design, our expert mentors guide you every step of the way."
            },
            {
              id: "2",              title: "Collaborative Project Development",              content: "Work on real-world projects with fellow enthusiasts. Build applications, contribute to open source, and create portfolios that showcase your technical excellence to potential employers."
            },
            {
              id: "3",              title: "Industry Expert Talks & Networking",              content: "Connect with software engineers, data scientists, and tech leaders from top companies. Gain insider insights into the industry, career paths, and emerging technologies shaping our digital future."
            },
            {
              id: "4",              title: "Hackathon & Competition Events",              content: "Participate in exciting hackathons and coding competitions to test your skills, earn recognition, and win prizes. Build your competitive edge while having fun with the community."
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
          imageAlt="Coding Workshop"
          mediaAnimation="opacity"
          useInvertedBackground={false}
          mediaPosition="left"
          buttons={[
            { text: "Explore Programs", href: "#" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Impact"
          description="Measurable outcomes showcasing the success and growth of our computer club community."
          tag="Success Stories"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            { id: "1", icon: BookOpen, title: "Topics Mastered", value: "50+" },
            { id: "2", icon: GitBranch, title: "Code Repositories", value: "200+" },
            { id: "3", icon: Trophy, title: "Success Rate", value: "92%" },
            { id: "4", icon: Briefcase, title: "Job Placements", value: "85+" }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          buttons={[
            { text: "View Success Stories", href: "#" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Our Members Say"
          description="Real stories from computer club members about their learning journey and growth."
          tag="Community Voices"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Alex Chen",              handle: "@AlexDev",              testimonial: "CompClub transformed my coding skills. The workshops and mentorship helped me land my dream job at a top tech company. Grateful for this amazing community!",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg",              imageAlt: "Alex Chen"
            },
            {
              id: "2",              name: "Sarah Mitchell",              handle: "@SarahCodes",              testimonial: "The collaborative projects here are incredible. I've built friendships and a portfolio that actually impresses recruiters. Best decision ever!",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "3",              name: "Jordan Lee",              handle: "@JordanDev",              testimonial: "From zero experience to building full-stack applications in just a few months. The mentorship here is unmatched. Highly recommend CompClub!",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg",              imageAlt: "Jordan Lee"
            },
            {
              id: "4",              name: "Maya Patel",              handle: "@MayaCode",              testimonial: "The hackathons taught me so much about teamwork and problem-solving. Plus, winning first place was the cherry on top!",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg",              imageAlt: "Maya Patel"
            },
            {
              id: "5",              name: "David Brown",              handle: "@DavidDeveloper",              testimonial: "CompClub isn't just about coding. It's about building a network of passionate people who genuinely want to help each other succeed.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg",              imageAlt: "David Brown"
            },
            {
              id: "6",              name: "Lisa Wong",              handle: "@LisaTech",              testimonial: "The industry expert talks opened my eyes to so many career possibilities. This community has given me the confidence to pursue my tech dreams.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg",              imageAlt: "Lisa Wong"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Join Our Community", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          speed={40}
          topMarqueeDirection="left"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Involved"
          title="Ready to Join CompClub?"
          description="Sign up for our newsletter to receive updates about upcoming workshops, events, and opportunities. Be part of a thriving community of tech enthusiasts!"
          tagIcon={Mail}
          tagAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Sign Up"
          termsText="We respect your privacy. Unsubscribe anytime. Check out our Community Guidelines and Terms."
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBase
          logoText="CompClub"
          copyrightText="© 2025 CompClub. All rights reserved."
          columns={[
            {
              title: "Community",              items: [
                { label: "About Us", href: "#about" },
                { label: "Events", href: "#features" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "Tutorials", href: "#" },
                { label: "Code Repository", href: "https://github.com" },
                { label: "FAQ", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Discord", href: "https://discord.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Instagram", href: "https://instagram.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}