"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitLarge from '@/components/sections/hero/HeroSplitLarge';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Bike, Instagram, Facebook, Twitter, Linkedin, Globe } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="outline-light"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "About", id: "about" },
            { name: "Features", id: "features" },
            { name: "Team", id: "team" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Join Ride", href: "contact" }}
          brandName="Rider's Hub"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitLarge
          title="Ride Together, Live Bold"
          description="Join a passionate community of motorcycle enthusiasts united by the open road. Experience camaraderie, exclusive events, and unforgettable adventures with riders who share your passion."
          tag="Welcome to the Pack"
          tagIcon={Bike}
          buttons={[
            { text: "Find Your Chapter", href: "contact" },
            { text: "Learn More", href: "about" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/long-shot-man-riding-motorbike_23-2150810233.jpg"
          imageAlt="Motorcycle rider on open road"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "United by passion," },
            { type: "image", src: "https://img.b2bpic.net/free-photo/full-shot-happy-friends-ready-prom_23-2149096505.jpg", alt: "Biker community" },
            { type: "text", content: "connected by the ride" }
          ]}
          buttons={[
            { text: "Join Our Community", href: "contact" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          title="Why Ride With Us"
          description="Discover what makes our biking community the ultimate destination for motorcycle enthusiasts"
          features={[
            {
              id: 1,
              title: "Exclusive Riding Events",              description: "Join organized rides, track days, and charity events designed for every skill level. Connect with experienced riders while exploring scenic routes and building lasting friendships on two wheels.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/full-shot-happy-friends-ready-prom_23-2149096505.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/full-shot-happy-friends-ready-prom_23-2149096505.jpg" }
            },
            {
              id: 2,
              title: "Safety & Expertise",              description: "Access professional safety training, maintenance workshops, and expert guidance. Our certified instructors and veteran riders ensure you ride smarter and stay protected on every journey.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-male-holding-his-motorcycle-helmet-with-blurred-distance_181624-26350.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/long-shot-man-riding-motorbike_23-2150810233.jpg" }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Community Impact"
          description="Real numbers reflecting our commitment to the biker lifestyle and community growth"
          metrics={[
            {
              id: "1",              value: "15K+",              title: "Active Riders",              description: "Members across our chapters nationwide",              imageSrc: "https://img.b2bpic.net/free-photo/happy-friends-with-motorcycle-full-shot_23-2149096502.jpg"
            },
            {
              id: "2",              value: "200+",              title: "Annual Events",              description: "Organized rides, rallies, and meetups",              imageSrc: "https://img.b2bpic.net/free-photo/dirt-bike-rider-with-his-motorcycle-racing-circuits-adventure_23-2151482725.jpg"
            },
            {
              id: "3",              value: "50K+",              title: "Miles Ridden",              description: "Collective journeys every month",              imageSrc: "https://img.b2bpic.net/free-photo/long-shot-man-riding-motorbike_23-2150810233.jpg"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTwo
          title="Meet Our Crew Leaders"
          description="Experienced riders leading chapters and shaping our community vision"
          members={[
            {
              id: "1",              name: "Marcus Stone",              role: "National Director",              description: "Veteran rider with 25 years on the road. Passionate about building inclusive communities where every rider belongs.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-male-biker-yellow-helmet-side-busy-road-thailand-sunset-time_343596-2829.jpg",              socialLinks: [
                { icon: Instagram, url: "https://instagram.com" },
                { icon: Facebook, url: "https://facebook.com" }
              ]
            },
            {
              id: "2",              name: "Sierra Reeves",              role: "Events Coordinator",              description: "Organizes epic rides and community gatherings. Her energy and dedication unite riders across regions.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-biker-protection-holds-black-helmet-isolated-grey-background_613910-7302.jpg",              socialLinks: [
                { icon: Instagram, url: "https://instagram.com" },
                { icon: Twitter, url: "https://twitter.com" }
              ]
            },
            {
              id: "3",              name: "Jake Thompson",              role: "Safety & Training Lead",              description: "MSF certified instructor dedicated to ensuring every rider develops skills and confidence for the open road.",              imageSrc: "https://img.b2bpic.net/free-photo/man-choosed-motorcycles-moto-shop-guy-black-jacket-man-helmet_1157-43598.jpg",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Instagram, url: "https://instagram.com" }
              ]
            },
            {
              id: "4",              name: "Elena Cross",              role: "Community Manager",              description: "Bridges members across chapters and ensures our community thrives with shared values and mutual respect.",              imageSrc: "https://img.b2bpic.net/free-photo/handsome-sexy-man-motorbike_1303-22182.jpg",              socialLinks: [
                { icon: Instagram, url: "https://instagram.com" },
                { icon: Globe, url: "https://example.com" }
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Stories from Our Riders"
          description="Real experiences from community members who've found their tribe"
          testimonials={[
            {
              id: "1",              name: "David Chen",              role: "Rider, Chicago Chapter",              testimonial: "Joining this community transformed my riding. I found lifelong friends, learned invaluable safety skills, and discovered remote roads I never knew existed. The camaraderie is unmatched.",              imageSrc: "https://img.b2bpic.net/free-photo/handsome-man-biker-travelling-mototrcycle_1303-22138.jpg"
            },
            {
              id: "2",              name: "Rachel Williams",              role: "Rider, Austin Chapter",              testimonial: "As a solo female rider, I was nervous about fitting in. This community welcomed me with open arms. Now I lead rides and mentor new riders. Best decision ever.",              imageSrc: "https://img.b2bpic.net/free-photo/motor-biker-wears-shearling-denim-jacket-black-blank-henley-shirt-holds-vintage-beige-motorcycle-helmet-isolated-center-white-brick-wall_346278-970.jpg"
            },
            {
              id: "3",              name: "Tony Martinez",              role: "Rider, Miami Chapter",              testimonial: "The safety training programs saved my life on the highway. Professional instructors, genuine community support, and real camaraderie. This is what riding is all about.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-male-biker-yellow-helmet-side-busy-road-thailand-sunset-time_343596-2837.jpg"
            },
            {
              id: "4",              name: "Lisa Anderson",              role: "Rider, Denver Chapter",              testimonial: "Every ride brings new adventures and friendships. The community events are perfectly organized, the people are authentic, and the riding is unforgettable. Highly recommend.",              imageSrc: "https://img.b2bpic.net/free-photo/handsome-man-biker-travelling-mototrcycle_1303-22142.jpg"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Ride?"
          description="Join our community and start your next adventure. Connect with thousands of passionate riders, attend exclusive events, and become part of something bigger."
          inputs={[
            {
              label: "Full Name",              type: "text",              placeholder: "Your name",              required: true
            },
            {
              label: "Email Address",              type: "email",              placeholder: "your@email.com",              required: true
            },
            {
              label: "Preferred Chapter",              type: "text",              placeholder: "e.g., Chicago, Austin, Miami",              required: false
            }
          ]}
          textarea={{
            label: "Tell Us About Your Ride",            placeholder: "Your motorcycle model, riding experience, interests...",            required: false
          }}
          buttonText="Join the Pack"
          imageSrc="https://img.b2bpic.net/free-photo/person-taking-driver-s-license-exam_23-2149891421.jpg"
          imageAlt="Motorcycle community"
          mediaPosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Rider's Hub"
          columns={[
            {
              title: "Community",              items: [
                { label: "Find a Chapter", href: "https://example.com" },
                { label: "Events Calendar", href: "https://example.com" },
                { label: "Local Groups", href: "https://example.com" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Safety Training", href: "https://example.com" },
                { label: "Maintenance Tips", href: "https://example.com" },
                { label: "Route Guides", href: "https://example.com" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Join Us", href: "contact" },
                { label: "Social Media", href: "https://instagram.com" },
                { label: "Contact Support", href: "contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Rider's Hub | United by the Ride"
        />
      </div>
    </ThemeProvider>
  );
}