"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Zap, Award, HelpCircle, CheckCircle } from "lucide-react";

export default function EventsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="medium"
      background="noise"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="FitnessaCollective"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Trainers", id: "trainers" },
            { name: "Events", id: "events" },
            { name: "Communities", id: "communities" },
            { name: "About", id: "about" },
          ]}
        />
      </div>

      {/* Events Hero Section */}
      <div id="hero" data-section="hero" className="mx-auto px-4 md:px-6">
        <HeroBillboardRotatedCarousel
          title="Discover Premium Fitness Events in Mumbai"
          description="Explore exclusive fitness events, workshops, marathons, and wellness seminars curated for elite athletes and fitness enthusiasts. Connect with trainers, compete, and celebrate fitness culture."
          background={{ variant: "rotated-rays-animated-grid" }}
          tag="Live Events & Workshops"
          tagIcon={Zap}
          tagAnimation="blur-reveal"
          buttons={[
            {
              text: "Browse Events",
              href: "/events",
            },
            {
              text: "Find Trainers",
              href: "/trainers",
            },
          ]}
          buttonAnimation="slide-up"
          carouselItems={[
            {
              id: "carousel-event-1",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8SAGkNg6dDslfeJ9cLBIp5dqh/a-high-energy-fitness-event-with-multipl-1773869258030-f5c16adb.png?_wi=2",
              imageAlt: "High-energy fitness event with participants",
            },
            {
              id: "carousel-event-2",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8SAGkNg6dDslfeJ9cLBIp5dqh/a-vibrant-running-club-gathering-in-mumb-1773869258095-cec51798.png?_wi=2",
              imageAlt: "Dynamic running club gathering in Mumbai",
            },
            {
              id: "carousel-event-3",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8SAGkNg6dDslfeJ9cLBIp5dqh/a-serene-yoga-session-in-a-premium-minim-1773869258752-f7368676.png?_wi=2",
              imageAlt: "Serene yoga session in premium fitness studio",
            },
            {
              id: "carousel-event-4",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8SAGkNg6dDslfeJ9cLBIp5dqh/an-intense-crossfit-training-session-wit-1773869258530-13cf5455.png?_wi=2",
              imageAlt: "Intense CrossFit training session",
            },
            {
              id: "carousel-event-5",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8SAGkNg6dDslfeJ9cLBIp5dqh/a-holistic-wellness-experience-showing-a-1773869257943-ea686a20.png?_wi=2",
              imageAlt: "Holistic wellness experience and meditation",
            },
            {
              id: "carousel-event-6",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8SAGkNg6dDslfeJ9cLBIp5dqh/a-professional-personal-trainer-conducti-1773869257907-f7c81841.png?_wi=2",
              imageAlt: "Professional trainer conducting fitness session",
            },
          ]}
          autoPlay={true}
          autoPlayInterval={5000}
          ariaLabel="Events hero carousel showcasing fitness events in Mumbai"
        />
      </div>

      {/* Events Categories Section */}
      <div id="features" data-section="features" className="mx-auto px-4 md:px-6">
        <FeatureCardTwentyFour
          title="Featured Event Categories"
          description="Explore diverse fitness events tailored to every level. From marathon training to yoga workshops, CrossFit competitions to wellness retreats—find your perfect fitness experience."
          tag="Event Types"
          tagIcon={Award}
          tagAnimation="blur-reveal"
          features={[
            {
              id: "feature-events-1",
              title: "Marathon & Running Events",
              author: "Endurance Training",
              description: "Participate in organized marathons, half-marathons, and trail running events across Mumbai. Join pace groups and train with experienced runners for your fitness goals.",
              tags: [
                "Marathons",
                "Trail Runs",
                "Pace Groups",
              ],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8SAGkNg6dDslfeJ9cLBIp5dqh/a-vibrant-running-club-gathering-in-mumb-1773869258095-cec51798.png?_wi=3",
              imageAlt: "Vibrant fitness events and running activities",
            },
            {
              id: "feature-events-2",
              title: "Yoga & Wellness Workshops",
              author: "Mindfulness Programs",
              description: "Attend specialized yoga classes, meditation sessions, and holistic wellness workshops led by certified instructors. Perfect for all levels seeking balance and inner peace.",
              tags: [
                "Yoga",
                "Meditation",
                "Wellness",
              ],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8SAGkNg6dDslfeJ9cLBIp5dqh/a-serene-yoga-session-in-a-premium-minim-1773869258752-f7368676.png?_wi=3",
              imageAlt: "Wellness events and yoga workshops",
            },
            {
              id: "feature-events-3",
              title: "CrossFit & Strength Competitions",
              author: "High-Intensity Training",
              description: "Test your limits in organized CrossFit competitions, strength challenges, and high-intensity training events. Compete with the community and celebrate athletic excellence.",
              tags: [
                "CrossFit",
                "Competitions",
                "Strength",
              ],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8SAGkNg6dDslfeJ9cLBIp5dqh/an-intense-crossfit-training-session-wit-1773869258530-13cf5455.png?_wi=3",
              imageAlt: "High-intensity fitness competitions and events",
            },
          ]}
          animationType="slide-up"
          textboxLayout="split"
          useInvertedBackground={false}
        />
      </div>

      {/* Events FAQ Section */}
      <div id="faq" data-section="faq" className="mx-auto px-4 md:px-6">
        <FaqDouble
          title="Events Frequently Asked Questions"
          description="Get answers about upcoming events, registration, pricing, and how to make the most of your fitness event experience at FitnessaCollective."
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="blur-reveal"
          faqs={[
            {
              id: "faq-events-1",
              title: "How do I register for fitness events?",
              content: "Browse our events calendar, select your preferred event, and click register. You'll receive instant confirmation and details. Payment is simple and secure through multiple payment methods.",
            },
            {
              id: "faq-events-2",
              title: "What is the typical event duration?",
              content: "Events vary—marathons typically take 3-4 hours, yoga workshops are 60-90 minutes, and CrossFit competitions are 2-3 hours. Check specific event details for exact timing.",
            },
            {
              id: "faq-events-3",
              title: "Are events suitable for beginners?",
              content: "Many events are designed for all levels. We clearly mark beginner-friendly events. Advanced events also have prerequisites listed. Choose what suits your fitness level.",
            },
            {
              id: "faq-events-4",
              title: "What should I bring to an event?",
              content: "Bring water, appropriate workout attire, and any personal fitness equipment you prefer. Most venues provide essentials like mats and weights for strength events.",
            },
            {
              id: "faq-events-5",
              title: "Can I cancel my event registration?",
              content: "Yes, cancellations are accepted up to 48 hours before the event for full refund. Cancellations within 48 hours may incur a nominal fee.",
            },
            {
              id: "faq-events-6",
              title: "How do I get notified about new events?",
              content: "Subscribe to event notifications in your dashboard. You'll receive alerts for events matching your interests, fitness level, and preferred locations.",
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          faqsAnimation="slide-up"
          animationType="smooth"
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="FitnessaCollective"
          columns={[
            {
              title: "Platform",
              items: [
                {
                  label: "Find Trainers",
                  href: "/trainers",
                },
                {
                  label: "Discover Events",
                  href: "/events",
                },
                {
                  label: "Join Communities",
                  href: "/communities",
                },
                {
                  label: "Dashboard",
                  href: "#",
                },
              ],
            },
            {
              title: "Company",
              items: [
                {
                  label: "About Us",
                  href: "#",
                },
                {
                  label: "Careers",
                  href: "#",
                },
                {
                  label: "Blog",
                  href: "#",
                },
                {
                  label: "Press",
                  href: "#",
                },
              ],
            },
            {
              title: "Support",
              items: [
                {
                  label: "Help Center",
                  href: "#",
                },
                {
                  label: "Contact Us",
                  href: "#",
                },
                {
                  label: "Safety Guidelines",
                  href: "#",
                },
                {
                  label: "Community Standards",
                  href: "#",
                },
              ],
            },
            {
              title: "Legal",
              items: [
                {
                  label: "Privacy Policy",
                  href: "#",
                },
                {
                  label: "Terms of Service",
                  href: "#",
                },
                {
                  label: "Cookie Policy",
                  href: "#",
                },
                {
                  label: "Accessibility",
                  href: "#",
                },
              ],
            },
          ]}
          copyrightText="© 2025 FitnessaCollective. All rights reserved. Transforming Mumbai's fitness culture."
        />
      </div>
    </ThemeProvider>
  );
}