"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';
import { useState } from 'react';

export default function LandingPage() {
  const [flippedCards, setFlippedCards] = useState<{ [key: string]: boolean }>({});

  const toggleFlip = (id: string) => {
    setFlippedCards(prev => ({
      ...prev,
      [id]: !prev[id]
    }));
  };

  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">
        <div className="py-16 md:py-24">
          <div className="w-content-width mx-auto px-6">
            <div className="mb-12">
              <h2 className="text-4xl md:text-5xl font-bold mb-4">What Our Members Say</h2>
              <p className="text-lg text-foreground/75">Real stories from computer club members about their learning journey and growth.</p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {[
                {
                  id: "1",                  name: "Alex Chen",                  handle: "@AlexDev",                  shortText: "Landed dream job at top tech company",                  fullText: "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?_wi=1"
                },
                {
                  id: "2",                  name: "Sarah Mitchell",                  handle: "@SarahCodes",                  shortText: "Built impressive portfolio through projects",                  fullText: "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?_wi=2"
                },
                {
                  id: "3",                  name: "Jordan Lee",                  handle: "@JordanDev",                  shortText: "Full-stack development in just months",                  fullText: "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?_wi=3"
                },
                {
                  id: "4",                  name: "Maya Patel",                  handle: "@MayaCode",                  shortText: "Won first place in hackathon",                  fullText: "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?_wi=4"
                },
                {
                  id: "5",                  name: "David Brown",                  handle: "@DavidDeveloper",                  shortText: "Built a supportive tech network",                  fullText: "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?_wi=5"
                },
                {
                  id: "6",                  name: "Lisa Wong",                  handle: "@LisaTech",                  shortText: "Discovered career possibilities",                  fullText: "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?_wi=6"
                }
              ].map((testimonial) => (
                <div
                  key={testimonial.id}
                  className="h-64 cursor-pointer perspective"
                  onClick={() => toggleFlip(testimonial.id)}
                  style={{
                    perspective: '1000px'
                  }}
                >
                  <div
                    className="relative w-full h-full transition-transform duration-500"
                    style={{
                      transformStyle: 'preserve-3d',
                      transform: flippedCards[testimonial.id] ? 'rotateY(180deg)' : 'rotateY(0deg)'
                    }}
                  >
                    {/* Front side */}
                    <div
                      className="absolute w-full h-full bg-card rounded-lg p-6 flex flex-col justify-between border border-accent/20"
                      style={{
                        backfaceVisibility: 'hidden',
                        WebkitBackfaceVisibility: 'hidden'
                      }}
                    >
                      <div>
                        <div className="flex items-center gap-3 mb-4">
                          {testimonial.imageSrc && (
                            <img
                              src={testimonial.imageSrc}
                              alt={testimonial.name}
                              className="w-12 h-12 rounded-full object-cover"
                            />
                          )}
                          <div>
                            <p className="font-semibold text-foreground">{testimonial.name}</p>
                            <p className="text-sm text-foreground/60">{testimonial.handle}</p>
                          </div>
                        </div>
                        <p className="text-sm text-foreground/80 line-clamp-4">{testimonial.shortText}</p>
                      </div>
                      <p className="text-xs text-accent text-center mt-4">Click to read full testimonial</p>
                    </div>

                    {/* Back side */}
                    <div
                      className="absolute w-full h-full bg-primary-cta rounded-lg p-6 flex flex-col justify-between border border-accent/20"
                      style={{
                        backfaceVisibility: 'hidden',
                        WebkitBackfaceVisibility: 'hidden',
                        transform: 'rotateY(180deg)'
                      }}
                    >
                      <div>
                        <p className="text-primary-cta-text text-sm leading-relaxed">{testimonial.fullText}</p>
                      </div>
                      <div className="flex items-center gap-2 mt-4">
                        {testimonial.imageSrc && (
                          <img
                            src={testimonial.imageSrc}
                            alt={testimonial.name}
                            className="w-10 h-10 rounded-full object-cover"
                          />
                        )}
                        <div>
                          <p className="text-sm font-semibold text-primary-cta-text">{testimonial.name}</p>
                          <p className="text-xs text-primary-cta-text/70">{testimonial.handle}</p>
                        </div>
                      </div>
                      <p className="text-xs text-primary-cta-text/50 text-center mt-2">Click to go back</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </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>
  );
}
