"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Activity, Building, Compass, Facebook, Gauge, Info, Instagram, Leaf, Mountain, Smile, Sparkles, Twitter, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="largeSmallSizeMediumTitles"
        background="blurBottom"
        cardStyle="gradient-radial"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Products",
          id: "#products",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="BikeVibe"
      button={{
        text: "Book a Ride",
        href: "#contact",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "glowing-orb",
      }}
      title="Unleash Your Ride with BikeVibe"
      description="Discover the perfect bike for every adventure. From rugged mountain trails to smooth city commutes, BikeVibe offers quality bikes, gear, and services for every cyclist."
      kpis={[
        {
          value: "10+",
          label: "Years in Business",
        },
        {
          value: "200+",
          label: "Bike Models",
        },
        {
          value: "5k+",
          label: "Happy Riders",
        },
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Explore Bikes",
          href: "#products",
        },
        {
          text: "Book a Service",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/young-sports-man-bicycle-european-city-sports-urban-environments_72229-319.jpg?_wi=1"
      imageAlt="Cyclist on a mountain trail at sunset"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/close-up-motorcycle-helmet_23-2151574407.jpg",
          alt: "Happy Cyclist",
        },
        {
          src: "http://img.b2bpic.net/free-photo/woman-travelling-bicycle-town_1303-24301.jpg",
          alt: "Smiling Woman on Bike",
        },
        {
          src: "http://img.b2bpic.net/free-photo/girl-goes-bicycle_1398-264.jpg",
          alt: "Young Girl with Bicycle",
        },
        {
          src: "http://img.b2bpic.net/free-photo/front-view-woman-posing-with-her-bike_23-2148232102.jpg",
          alt: "Woman Cycling in Park",
        },
        {
          src: "http://img.b2bpic.net/free-photo/redhead-bearded-male-dressed-blue-jacket-jeans-retro-bicycle-park_613910-11381.jpg",
          alt: "Senior Man with Bike",
        },
      ]}
      avatarText="Join our community of riders!"
      marqueeItems={[
        {
          type: "text-icon",
          text: "Mountain Biking",
          icon: Mountain,
        },
        {
          type: "text-icon",
          text: "Road Cycling",
          icon: Compass,
        },
        {
          type: "text-icon",
          text: "E-Bike Tours",
          icon: Gauge,
        },
        {
          type: "text-icon",
          text: "City Commutes",
          icon: Building,
        },
        {
          type: "text-icon",
          text: "Kids' Adventures",
          icon: Info,
        },
      ]}
      marqueeSpeed={30}
      showMarqueeCard={true}
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="Our Story"
      title="Pedal into Passion: The BikeVibe Journey"
      description="At BikeVibe, we believe cycling is more than just a hobby—it's a lifestyle. We're dedicated to fostering a vibrant biking community, offering expert advice, premium bikes, and top-tier services to fuel your passion."
      subdescription="Since our humble beginnings, we've grown alongside our community, always striving to provide the best cycling experience. We're here to help you find your perfect ride and embark on unforgettable journeys."
      icon={Activity}
      imageSrc="http://img.b2bpic.net/free-photo/mother-father-cycling-with-daughter_23-2148225794.jpg"
      imageAlt="Person adjusting a bike helmet, preparing for a ride."
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      negativeCard={{
        items: [
          "Limited Selection of Bikes",
          "No Expert Advice Available",
          "Basic Maintenance Only",
          "Lack of Community Rides",
          "Inconvenient Service Hours",
        ],
      }}
      positiveCard={{
        items: [
          "Wide Range of Premium Bikes",
          "Personalized Expert Consultations",
          "Full-Service Repair & Tuning",
          "Organized Group Rides & Events",
          "Flexible Scheduling Options",
        ],
      }}
      title="Why Choose BikeVibe?"
      description="Experience the difference with our comprehensive offerings, tailored to enhance every aspect of your cycling journey."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={true}
      products={[
        {
          id: "mountain-bike-1",
          name: "Trailblazer Pro",
          price: "$1,899",
          imageSrc: "http://img.b2bpic.net/free-photo/young-adult-using-electric-bike-country-side_23-2149124590.jpg",
          imageAlt: "Professional mountain bike in a forest",
          isFavorited: false,
        },
        {
          id: "road-bike-1",
          name: "Velocity Racer",
          price: "$2,250",
          imageSrc: "http://img.b2bpic.net/free-photo/female-cyclist-posing-with-helmet-bicycle_23-2149749623.jpg",
          imageAlt: "Sleek road bike in a racing stance",
          isFavorited: true,
        },
        {
          id: "e-bike-1",
          name: "Urban Glide E-Bike",
          price: "$1,500",
          imageAlt: "Modern electric bike in a city setting",
          isFavorited: false,
          imageSrc: "http://img.b2bpic.net/free-photo/young-sports-man-bicycle-european-city-sports-urban-environments_72229-319.jpg?_wi=2",
        },
        {
          id: "hybrid-bike-1",
          name: "Explorer Hybrid",
          price: "$899",
          imageSrc: "http://img.b2bpic.net/free-photo/back-view-little-girl-hugging-father_23-2148225735.jpg",
          imageAlt: "Versatile hybrid bike in a park",
          isFavorited: false,
        },
        {
          id: "kids-bike-1",
          name: "Junior Adventurer",
          price: "$349",
          imageSrc: "http://img.b2bpic.net/free-photo/boy-riding-bicycle_23-2148551162.jpg",
          imageAlt: "Colorful kids bike in a playground",
          isFavorited: false,
        },
        {
          id: "accessories-1",
          name: "Cycling Essentials Pack",
          price: "$129",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-holding-helmet-bicycle_23-2148225869.jpg",
          imageAlt: "Bike accessories including helmet, gloves, and pump",
          isFavorited: false,
        },
      ]}
      title="Our Premium Bike Collection"
      description="Explore our diverse range of high-quality bikes and accessories, curated for performance, comfort, and style."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "100%",
          title: "Customer Satisfaction",
          description: "Our commitment to quality service ensures every rider leaves happy.",
          icon: Smile,
        },
        {
          id: "m2",
          value: "24/7",
          title: "Roadside Assistance",
          description: "Peace of mind on every journey, with support whenever you need it.",
          icon: Activity,
        },
        {
          id: "m3",
          value: "Eco-Friendly",
          title: "Sustainable Practices",
          description: "Dedicated to promoting green transportation and reducing our carbon footprint.",
          icon: Leaf,
        },
        {
          id: "m4",
          value: "Community",
          title: "Vibrant Bike Clubs",
          description: "Join our growing network of enthusiasts for group rides and events.",
          icon: Users,
        },
      ]}
      title="Our Impact & Dedication"
      description="Driven by passion, we are more than a bike shop; we're a movement towards a healthier, happier, and more sustainable future."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "basic-service",
          tag: "Basic",
          price: "$75",
          period: "per service",
          description: "Essential tune-up for routine maintenance.",
          button: {
            text: "Get Started",
            href: "#contact",
          },
          featuresTitle: "Includes:",
          features: [
            "Brake Adjustment",
            "Gear Tuning",
            "Tire Pressure Check",
            "Basic Cleaning",
          ],
        },
        {
          id: "pro-service",
          tag: "Pro",
          price: "$149",
          period: "per service",
          description: "Comprehensive service for peak performance.",
          button: {
            text: "Choose Pro",
            href: "#contact",
          },
          featuresTitle: "Includes:",
          features: [
            "All Basic Features",
            "Wheel Truing",
            "Bearing Inspection",
            "Advanced Drivetrain Cleaning",
            "Safety Inspection",
          ],
        },
        {
          id: "elite-service",
          tag: "Elite",
          tagIcon: Sparkles,
          price: "$299",
          period: "per service",
          description: "Ultimate care and customization for serious riders.",
          button: {
            text: "Go Elite",
            href: "#contact",
          },
          featuresTitle: "Includes:",
          features: [
            "All Pro Features",
            "Full Component Overhaul",
            "Custom Fitting Session",
            "Suspension Tuning (MTB)",
            "Priority Service & Support",
          ],
        },
      ]}
      title="Our Service & Maintenance Plans"
      description="Keep your ride in top condition with our expert service plans, designed for every type of cyclist."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="BikeVibe transformed my cycling experience! Their expert team helped me find the perfect mountain bike, and their service plans keep it running flawlessly. Highly recommend!"
      rating={5}
      author="Marcus R."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/attractive-macho-man-leather-jacket-smiling-looking-confident-with-hands-crossed-chest-white-b_1258-113169.jpg",
          alt: "Marcus R.",
        },
        {
          src: "http://img.b2bpic.net/free-photo/mechanic-holding-bicycle_1170-2609.jpg",
          alt: "Sarah L.",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-african-american-person-smiling-working-his-living-room_482257-126267.jpg",
          alt: "David K.",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-fit-tired-woman_23-2149036389.jpg",
          alt: "Emily P.",
        },
        {
          src: "http://img.b2bpic.net/free-photo/bicycle-alternative-transport-woman_23-2148760897.jpg",
          alt: "Robert S.",
        },
      ]}
      ratingAnimation="blur-reveal"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",
          title: "What types of bikes do you offer?",
          content: "We offer a wide range of bikes including mountain bikes, road bikes, e-bikes, hybrid bikes, and kids' bikes. Our selection caters to all riding styles and experience levels.",
        },
        {
          id: "faq-2",
          title: "Do you offer bike repair services?",
          content: "Yes, we provide comprehensive bike repair and maintenance services, from basic tune-ups to full component overhauls. You can book a service appointment on our website or visit our shop.",
        },
        {
          id: "faq-3",
          title: "Can I test ride a bike before buying?",
          content: "Absolutely! We encourage test rides to ensure you find the perfect fit. Visit our showroom, and our staff will assist you with setting up a test ride.",
        },
        {
          id: "faq-4",
          title: "What payment methods do you accept?",
          content: "We accept all major credit cards, debit cards, and contactless payments. We also offer financing options through our partners for larger purchases.",
        },
        {
          id: "faq-5",
          title: "Do you organize group rides?",
          content: "Yes, we regularly organize group rides for various skill levels, from casual city rides to challenging mountain excursions. Check our 'Events' section for upcoming rides and how to join.",
        },
      ]}
      sideTitle="Your Questions, Our Answers"
      sideDescription="Find quick answers to the most common questions about our products, services, and community events."
      faqsAnimation="slide-up"
      textPosition="left"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Ready to Ride? Get in Touch!"
      description="Have questions or need assistance? Fill out the form below, and our team will get back to you shortly to help you with your biking needs."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email",
          required: true,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Your Message",
        rows: 5,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-hiker-walking-forest-autumn_181624-34950.jpg"
      imageAlt="Scenic bike path in autumn"
      mediaAnimation="slide-up"
      mediaPosition="right"
      buttonText="Send Message"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="BikeVibe"
      copyrightText="© 2024 BikeVibe. All rights reserved."
      socialLinks={[
        {
          icon: Facebook,
          href: "#",
          ariaLabel: "Facebook",
        },
        {
          icon: Twitter,
          href: "#",
          ariaLabel: "Twitter",
        },
        {
          icon: Instagram,
          href: "#",
          ariaLabel: "Instagram",
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
