"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Bike, Heart, Compass, Zap, TrendingUp, Users, Star } from "lucide-react";

export default function RideHQPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="radialGradient"
      cardStyle="gradient-subtle"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="outline"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Community", id: "about" },
            { name: "Features", id: "feature" },
            { name: "Stories", id: "testimonial" },
            { name: "Join", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "contact" }}
          brandName="RideHQ"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Ride Together, Connect Stronger"
          description="Join thousands of passionate riders exploring new routes, discovering hidden gems, and building lifelong friendships through organized group rides and community events."
          tag="The Rider's Movement"
          tagIcon={Bike}
          kpis={[
            { value: "12,450+", label: "Active Riders" },
            { value: "89,000+", label: "Miles Ridden Together" },
            { value: "340+", label: "Community Events" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/full-shot-happy-friends-ready-prom_23-2149096505.jpg"
          imageAlt="Motorcycle riders community group"
          imagePosition="right"
          buttons={[
            { text: "Join the Community", href: "contact" },
            { text: "Browse Rides", href: "feature" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Our Mission"
          tagIcon={Heart}
          title="We believe every ride is an adventure, and every rider deserves a community that celebrates the freedom of the open road."
          description="Marcus Thompson"
          subdescription="Founder & Community Lead"
          icon={Compass}
          imageSrc="https://img.b2bpic.net/free-photo/portrait-smiling-handsome-stylish-redhead-biker-black-leather-jacket-holds-motorcycle-helmet-posing-studio-isolated-dark-background_613910-5351.jpg"
          imageAlt="Founder Marcus Thompson on motorcycle"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardNine
          title="Smart Ride Discovery & Planning"
          description="Find the perfect ride, connect with fellow enthusiasts, and plan your next adventure with our comprehensive rider platform."
          tag="Platform Features"
          tagIcon={Zap}
          features={[
            {
              id: 1,
              title: "Route Finder",              description: "Discover curated motorcycle routes with difficulty ratings, scenic highlights, and real rider reviews to find your perfect ride.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-vector/workout-tracker-app_23-2148623423.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_52683-118055.jpg" }
            },
            {
              id: 2,
              title: "Event Calendar",              description: "Browse organized group rides, rallies, and community events near you. RSVP, check weather, and connect with other riders before you ride.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_52683-118055.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-vector/workout-tracker-app_23-2148623423.jpg" }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metric" data-section="metric">
        <MetricCardSeven
          title="Growing Strong Every Day"
          description="Our community continues to expand with passionate riders joining us to explore, learn, and celebrate the motorcycle lifestyle."
          tag="Community Growth"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",              value: "12.4K",              title: "Active Community Members",              items: [
                "Members from 45+ countries",                "All skill levels welcome",                "Average 4.8★ community rating"
              ]
            },
            {
              id: "2",              value: "340+",              title: "Organized Group Rides",              items: [
                "Monthly weekend events",                "Beginner to advanced routes",                "100% safety-focused planning"
              ]
            },
            {
              id: "3",              value: "89K",              title: "Miles Ridden Together",              items: [
                "Average 250 miles per event",                "Scenic route discovery",                "Community ride tracker"
              ]
            },
            {
              id: "4",              value: "98%",              title: "Member Satisfaction",              items: [
                "Post-ride feedback system",                "Continuous improvements",                "Community-driven features"
              ]
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardEleven
          title="Meet the Community Leaders"
          description="Experienced riders and organizers dedicated to building the best motorcycle community experience."
          tag="Community Team"
          tagIcon={Users}
          groups={[
            {
              id: "leaders",              groupTitle: "Leadership",              members: [
                {
                  id: "1",                  title: "Marcus Thompson",                  subtitle: "Founder & Community Lead",                  detail: "marcus@ridehq.com",                  imageSrc: "https://img.b2bpic.net/free-photo/person-taking-driver-s-license-exam_23-2149891423.jpg"
                },
                {
                  id: "2",                  title: "Sarah Chen",                  subtitle: "Events Coordinator",                  detail: "sarah@ridehq.com",                  imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-man-with-motorbike-outdoors_23-2150620932.jpg"
                }
              ]
            },
            {
              id: "organizers",              groupTitle: "Regional Organizers",              members: [
                {
                  id: "3",                  title: "James Rodriguez",                  subtitle: "West Coast Lead",                  detail: "james@ridehq.com",                  imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-young-afro-american-man_171337-10268.jpg"
                },
                {
                  id: "4",                  title: "Emma Williams",                  subtitle: "East Coast Lead",                  detail: "emma@ridehq.com",                  imageSrc: "https://img.b2bpic.net/free-photo/front-view-man-with-cool-motorcycle_23-2150868382.jpg"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardEleven
          title="Stories from Our Riders"
          description="Hear from community members about their experiences, friendships, and unforgettable adventures."
          tag="Rider Testimonials"
          tagIcon={Star}
          testimonials={[
            {
              id: "1",              nameTitle: "Alex Martinez, Adventure Seeker",              quote: "I never thought I'd find such a welcoming community. Through RideHQ, I've made friends from all over and discovered routes I never would have found alone. The organized rides are perfectly planned, and everyone looks out for each other.",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-people-with-motorbike-outdoors_23-2150620967.jpg"
            },
            {
              id: "2",              nameTitle: "Jessica Liu, Weekend Warrior",              quote: "As a solo female rider, I was nervous about joining group rides. But this community is incredibly inclusive and supportive. I've become part of something special, and every weekend ride is an adventure I look forward to.",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-smiley-man-motorcycle_23-2148703218.jpg"
            },
            {
              id: "3",              nameTitle: "David Thompson, Long-Distance Rider",              quote: "The event calendar has completely changed how I plan my trips. I've attended rides in three different regions, met amazing people, and had experiences I'll never forget. This is what community means.",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-senior-woman-with-motorcycle_23-2150909356.jpg"
            },
            {
              id: "4",              nameTitle: "Nina Patel, New Rider",              quote: "Coming from beginner rides, I felt supported every step of the way. The community helped me build confidence, improve my skills, and most importantly, fall in love with riding. I'm so grateful for RideHQ.",              imageSrc: "https://img.b2bpic.net/free-photo/smiley-woman-posing-with-helmet-her-motorcycle_23-2148685257.jpg"
            },
            {
              id: "5",              nameTitle: "Chris Anderson, Motorcycle Enthusiast",              quote: "The attention to detail in ride planning is incredible. Safety briefings, route scouting, group dynamics—everything is handled with care. I've never felt safer on group rides, and that's because of this amazing team.",              imageSrc: "https://img.b2bpic.net/free-photo/positive-bearded-redhead-male-leather-jacket-holds-motorcycle-helmet-grey-background_613910-9915.jpg"
            },
            {
              id: "6",              nameTitle: "Lauren Kim, Community Ambassador",              quote: "What started as joining a ride has turned into a second family. I'm now a regional organizer, and helping other riders discover their passion for the road is the most rewarding thing I've done. This community changed my life.",              imageSrc: "https://img.b2bpic.net/free-photo/low-angle-old-woman-with-cool-motorcycle_23-2150742842.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Got Questions? We've Got Answers"
          sideDescription="Learn everything you need to know about joining our community, organizing rides, and making the most of your riding experience."
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "Who can join RideHQ?",              content: "Anyone with a passion for motorcycles is welcome! We have riders of all experience levels, from brand new riders taking their first group ride to veteran riders with decades of experience. We're an inclusive community that celebrates every type of rider and motorcycle."
            },
            {
              id: "2",              title: "What types of rides are organized?",              content: "We organize a variety of rides to match different interests and skill levels. These include scenic weekend cruises, challenging technical routes, breakfast and social rides, multi-day adventures, and skill-building sessions. Check our events calendar to find rides that match your style."
            },
            {
              id: "3",              title: "Is there a cost to join?",              content: "Community membership is completely free! You'll get access to our event calendar, ride planning tools, community forum, and member directory. Some premium features and exclusive events may have optional fees, but all core features are always free."
            },
            {
              id: "4",              title: "How do you ensure safety on group rides?",              content: "Safety is our top priority. All rides include experienced leaders, comprehensive safety briefings, designated meet-up points, and communication protocols. We follow strict group riding etiquette, conduct regular bike checks, and have emergency response procedures in place."
            },
            {
              id: "5",              title: "Can I organize my own rides?",              content: "Absolutely! Member-organized rides are the heart of our community. We provide all the tools you need: route planning features, rider communication systems, and safety guidelines. Our support team will help you every step of the way."
            },
            {
              id: "6",              title: "What if I don't have a motorcycle yet?",              content: "We welcome aspiring riders! You can join social events, attend beginner workshops, and learn from experienced community members. We also have resources to help you prepare for ownership and can connect you with local training programs."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Join the Ride"
          description="Become part of our thriving motorcycle community. Fill out the form below and we'll get you set up with your first ride."
          useInvertedBackground="invertDefault"
          buttonText="Join Now"
          inputs={[
            {
              label: "Name",              type: "text",              placeholder: "Your name",              required: true
            },
            {
              label: "Email",              type: "email",              placeholder: "your@email.com",              required: true
            },
            {
              label: "Motorcycle",              type: "text",              placeholder: "e.g., Harley-Davidson Street 750",              required: false
            },
            {
              label: "Experience",              type: "text",              placeholder: "e.g., Beginner, 5 years, Expert",              required: true
            }
          ]}
          textarea={{
            label: "Message",            placeholder: "What type of rides interest you? What's your riding style? Any specific goals or preferences?",            required: false
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="RideHQ"
          columns={[
            {
              title: "Community",              items: [
                { label: "Find Rides", href: "feature" },
                { label: "Events Calendar", href: "feature" },
                { label: "Member Directory", href: "team" },
                { label: "Rider Stories", href: "testimonial" }
              ]
            },
            {
              title: "Get Involved",              items: [
                { label: "Organize a Ride", href: "contact" },
                { label: "Become a Leader", href: "contact" },
                { label: "Safety Guidelines", href: "faq" },
                { label: "Community Forum", href: "hero" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Beginner Guide", href: "feature" },
                { label: "Motorcycle Tips", href: "faq" },
                { label: "Route Library", href: "feature" },
                { label: "Support", href: "contact" }
              ]
            },
            {
              title: "About",              items: [
                { label: "Our Mission", href: "about" },
                { label: "The Team", href: "team" },
                { label: "Community Values", href: "about" },
                { label: "Contact Us", href: "contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}