"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Zap, BookOpen, Calendar, Star, Sparkles } from "lucide-react";

export default function AIWorkshopsSite() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumLarge"
      background="plain"
      cardStyle="gradient-mesh"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="AIWorkshops"
          navItems={[
            { name: "About", id: "about" },
            { name: "Workshops", id: "workshops" },
            { name: "Features", id: "features" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Register Now",            href: "contact"
          }}
          className="backdrop-blur-md bg-background/80 border border-accent/20"
          buttonClassName="bg-gradient-to-r from-primary-cta to-secondary-cta hover:shadow-lg hover:shadow-primary-cta/50"
          buttonTextClassName="font-semibold"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Master Artificial Intelligence"
          description="Cutting-edge workshops and lectures on AI, machine learning, and neural networks. Learn from industry experts in futuristic, hands-on sessions."
          tag="Future of Learning"
          tagIcon={Zap}
          imageSrc="https://img.b2bpic.net/free-photo/geometric-bokeh_1017-3221.jpg"
          imageAlt="AI technology and neural networks visualization"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "Explore Workshops", href: "workshops" },
            { text: "Register Today", href: "contact" }
          ]}
          className="min-h-screen"
          titleClassName="text-5xl md:text-6xl font-extrabold bg-gradient-to-r from-primary-cta via-secondary-cta to-primary-cta bg-clip-text text-transparent drop-shadow-lg"
          descriptionClassName="text-lg md:text-xl text-secondary-cta/90 font-light"
          tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-cta/20 border border-primary-cta/50 text-primary-cta font-semibold"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Revolutionizing" },
            { type: "text", content: "AI Education Through" },
            { type: "text", content: "Immersive Experiences" }
          ]}
          buttons={[
            { text: "Learn More", href: "features" }
          ]}
          useInvertedBackground="invertDefault"
          headingClassName="text-4xl md:text-5xl font-bold bg-gradient-to-r from-secondary-cta via-primary-cta to-secondary-cta bg-clip-text text-transparent"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSix
          title="Our Curriculum"
          description="Progressive learning path from fundamentals to advanced applications"
          tag="Learning Journey"
          tagIcon={BookOpen}
          features={[
            {
              id: 1,
              title: "AI Fundamentals",              description: "Master the core concepts of artificial intelligence, machine learning algorithms, and foundational neural network architecture.",              imageSrc: "https://img.b2bpic.net/free-photo/ai-operator-runs-code-data-center_482257-85899.jpg",              imageAlt: "AI fundamentals visualization"
            },
            {
              id: 2,
              title: "Deep Learning Mastery",              description: "Explore convolutional networks, recurrent architectures, and transformers for advanced deep learning applications.",              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-technology-concept_23-2151908109.jpg",              imageAlt: "Deep learning workshop"
            },
            {
              id: 3,
              title: "NLP & Language Models",              description: "Build advanced natural language processing systems and understand large language models from scratch.",              imageSrc: "https://img.b2bpic.net/free-photo/it-professionals-using-artificial-intelligence-augmented-reality-hologram_482257-91045.jpg",              imageAlt: "Natural language processing"
            },
            {
              id: 4,
              title: "Computer Vision",              description: "Master image recognition, object detection, and visual understanding with cutting-edge computer vision techniques.",              imageSrc: "https://img.b2bpic.net/free-photo/call-center-worker-using-ai-tech-laptop-reply-customers-closeup_482257-125822.jpg",              imageAlt: "Computer vision applications"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          titleClassName="text-4xl md:text-5xl font-bold text-white"
          descriptionClassName="text-lg text-secondary-cta/80"
          tagClassName="inline-block px-4 py-2 rounded-full bg-primary-cta/20 border border-primary-cta/50 text-primary-cta font-semibold"
          stepNumberClassName="text-3xl font-bold text-primary-cta"
        />
      </div>

      <div id="workshops" data-section="workshops">
        <ProductCardOne
          title="Featured Workshops"
          description="Hands-on intensive workshops designed for AI enthusiasts and professionals"
          tag="Upcoming Sessions"
          tagIcon={Calendar}
          products={[
            {
              id: "workshop-deep-learning",              name: "Deep Learning Intensive",              price: "$299",              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-technology-concept_23-2151908109.jpg",              imageAlt: "Deep Learning Intensive Workshop"
            },
            {
              id: "workshop-nlp",              name: "NLP & LLMs Workshop",              price: "$349",              imageSrc: "https://img.b2bpic.net/free-photo/it-professionals-using-artificial-intelligence-augmented-reality-hologram_482257-91045.jpg",              imageAlt: "NLP and Language Models Workshop"
            },
            {
              id: "workshop-vision",              name: "Computer Vision Bootcamp",              price: "$379",              imageSrc: "https://img.b2bpic.net/free-photo/call-center-worker-using-ai-tech-laptop-reply-customers-closeup_482257-125822.jpg",              imageAlt: "Computer Vision Bootcamp"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          titleClassName="text-4xl md:text-5xl font-bold bg-gradient-to-r from-primary-cta to-secondary-cta bg-clip-text text-transparent"
          descriptionClassName="text-lg text-secondary-cta/80"
          tagClassName="inline-block px-4 py-2 rounded-full bg-secondary-cta/20 border border-secondary-cta/50 text-secondary-cta font-semibold"
          cardClassName="group relative border border-primary-cta/30 hover:border-primary-cta/80 transition-all duration-300 rounded-none bg-gradient-to-br from-background to-card hover:shadow-lg hover:shadow-primary-cta/20"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Success Stories"
          description="Hear from professionals who transformed their careers through our workshops"
          tag="Student Reviews"
          tagIcon={Star}
          testimonials={[
            {
              id: "1",              title: "Career Transformation Through AI",              quote: "The deep learning workshop completely changed my perspective on AI. I went from curiosity to building production models in just 8 weeks.",              name: "Sarah Chen",              role: "ML Engineer",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              title: "Expert Instruction at Its Best",              quote: "The instructors are cutting-edge practitioners who share real-world insights. This isn't theoretical - it's practical AI education.",              name: "Marcus Johnson",              role: "Data Scientist",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",              title: "Industry-Ready Skills",              quote: "I completed the NLP bootcamp and landed a senior AI position within 3 months. The curriculum is exactly what companies are looking for.",              name: "Elena Rodriguez",              role: "AI Product Manager",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Elena Rodriguez"
            },
            {
              id: "4",              title: "Game-Changing Education",              quote: "Outstanding platform with exceptional mentorship. The hands-on projects and real datasets prepare you for actual industry challenges.",              name: "David Kim",              role: "Computer Vision Specialist",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              imageAlt: "David Kim"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          titleClassName="text-4xl md:text-5xl font-bold text-white"
          descriptionClassName="text-lg text-secondary-cta/80"
          tagClassName="inline-block px-4 py-2 rounded-full bg-primary-cta/20 border border-primary-cta/50 text-primary-cta font-semibold"
          quoteCardClassName="border-l-4 border-primary-cta bg-gradient-to-br from-card to-background/50 p-8 rounded-none"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Questions?"
          sideDescription="Find answers to common questions about our AI workshops and learning programs"
          textPosition="left"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What prerequisites do I need for the workshops?",              content: "Basic Python programming knowledge and high school mathematics are recommended. We provide refresher materials for those who need them. No prior AI experience is required."
            },
            {
              id: "2",              title: "How long are the workshops?",              content: "Our intensive workshops range from 4-8 weeks, meeting 3-4 times per week with approximately 20-25 hours of instruction. Self-paced options are also available."
            },
            {
              id: "3",              title: "Do you offer certificates?",              content: "Yes! All completed workshops receive official certificates of completion recognized by leading tech companies. Our certificates include verification of completed projects and assessments."
            },
            {
              id: "4",              title: "What's your instructor experience?",              content: "Our instructors are active AI researchers and industry practitioners with 10+ years of experience, working at top companies like Google, OpenAI, and Meta."
            },
            {
              id: "5",              title: "Is there job placement assistance?",              content: "We provide career mentoring, resume review, and connections to our partner companies. Many graduates have secured positions at top tech firms."
            },
            {
              id: "6",              title: "What if I have technical issues?",              content: "24/7 technical support is available via Discord. Our support team responds within 2 hours, and we have detailed documentation and video tutorials."
            }
          ]}
          sideTitleClassName="text-4xl md:text-5xl font-bold text-white"
          sideDescriptionClassName="text-lg text-secondary-cta/80 mt-4"
          accordionTitleClassName="text-lg font-semibold text-white group-hover:text-primary-cta transition-colors"
          accordionContentClassName="text-secondary-cta/80 leading-relaxed"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Sparkles}
          title="Ready to Master AI?"
          description="Join thousands of professionals transforming their careers. Register for our next workshop and unlock your potential in artificial intelligence."
          useInvertedBackground="noInvert"
          inputPlaceholder="your@email.com"
          buttonText="Register Now"
          termsText="We respect your privacy. Unsubscribe at any time. Check our privacy policy for details."
          tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-secondary-cta/20 border border-secondary-cta/50 text-secondary-cta font-semibold"
          titleClassName="text-4xl md:text-5xl font-bold text-white"
          descriptionClassName="text-lg text-secondary-cta/80"
          contentClassName="bg-gradient-to-br from-card/80 to-background border border-primary-cta/30 rounded-none p-8 md:p-12"
          formClassName="mt-8"
          inputClassName="w-full px-6 py-3 bg-background border-b-2 border-secondary-cta/30 focus:border-secondary-cta text-white placeholder-secondary-cta/50 rounded-none focus:outline-none transition-colors"
          buttonClassName="mt-4 w-full bg-gradient-to-r from-primary-cta to-secondary-cta hover:shadow-lg hover:shadow-primary-cta/50 py-3 px-8 font-bold rounded-none transition-all duration-300"
          buttonTextClassName="text-background font-bold"
          termsClassName="text-sm text-secondary-cta/60 mt-4 text-center"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="AIWorkshops"
          columns={[
            {
              items: [
                { label: "About Us", href: "about" },
                { label: "Our Mission", href: "about" },
                { label: "Instructors", href: "about" }
              ]
            },
            {
              items: [
                { label: "Workshops", href: "workshops" },
                { label: "Curriculum", href: "features" },
                { label: "Schedule", href: "workshops" }
              ]
            },
            {
              items: [
                { label: "Community", href: "https://discord.com" },
                { label: "Testimonials", href: "testimonials" },
                { label: "Blog", href: "https://blog.aiworkshops.com" }
              ]
            },
            {
              items: [
                { label: "Support", href: "contact" },
                { label: "FAQ", href: "faq" },
                { label: "Contact", href: "contact" }
              ]
            }
          ]}
          logoClassName="text-4xl font-bold bg-gradient-to-r from-primary-cta to-secondary-cta bg-clip-text text-transparent"
          containerClassName="bg-gradient-to-b from-background to-card border-t border-primary-cta/20"
          columnClassName="flex flex-col gap-4"
          itemClassName="text-secondary-cta/80 hover:text-primary-cta transition-colors flex items-center gap-2 group"
          iconClassName="w-4 h-4 text-primary-cta group-hover:translate-x-1 transition-transform"
        />
      </div>
    </ThemeProvider>
  );
}