"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Award, Briefcase, Calendar, Car, Clock, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="mediumLargeSizeMediumTitles"
        background="fluid"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Fleet",
          id: "#fleet",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
      ]}
      brandName="LuxuryRide"
      button={{
        text: "Book Now",
        href: "#contact",
      }}
      animateOnLoad={true}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{
        variant: "plain",
      }}
      title="Experience Unrivaled Luxury Travel"
      description="Book a premium ride with LuxuryRide. Our professional chauffeurs and exquisite fleet ensure comfort, punctuality, and an unparalleled journey for every occasion."
      buttons={[
        {
          text: "Book Your Ride Now",
          href: "#contact",
        },
        {
          text: "Explore Our Fleet",
          href: "#fleet",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/side-view-valet-parking-car_23-2149901433.jpg"
      imageAlt="Luxury black car waiting in city at night"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/driver-with-opened-car-door_23-2149184241.jpg",
          alt: "Driver with opened car door",
        },
        {
          src: "http://img.b2bpic.net/free-photo/driver-dressed-elegant-costume_23-2149184248.jpg",
          alt: "Driver dressed in elegant costume",
        },
        {
          src: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273242.jpg",
          alt: "Taxi driver getting ready for customer",
        },
        {
          src: "http://img.b2bpic.net/free-photo/businesswoman-travelling-by-car-backseat-reading-text-message-smartphone-while-driving-meeting_197531-22616.jpg",
          alt: "Businesswoman travelling by car on backseat, reading text message on smartphone while driving on meeting",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-businesswoman-against-gray-background_23-2147943800.jpg",
          alt: "Portrait of young businesswoman against gray background",
        },
      ]}
      avatarText="Trusted by 5000+ happy clients"
      marqueeItems={[
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/business-man-sitting-back-sit-car-using-tablet_1303-24082.jpg",
          alt: "Business man sitting on the back sit of a car using tablet",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/stylish-young-businessman-sitting-car-with-open-door_23-2147874075.jpg",
          alt: "Stylish young businessman sitting in the car with an open door",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/young-businessman-walking-street_1157-35735.jpg",
          alt: "Young businessman walking on the street",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/stylish-bearded-male-eyeglasses-with-tattoo-his-arm-using-portable-tablet-pc-back-seat-car_613910-12300.jpg",
          alt: "Stylish bearded male in eyeglasses with tattoo on his arm using portable tablet PC on a back seat of a car.",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/pensive-elegant-afro-etnicity-businessman-is-sitting-car-as-passenger-while-working-his-laptop_613910-21700.jpg",
          alt: "Pensive elegant afro etnicity businessman is sitting in the car as a passenger while working on his laptop.",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Committed to Excellence in Every Journey"
      description="At LuxuryRide, we redefine the standard of luxury transport. With a relentless focus on safety, comfort, and punctuality, our distinguished service ensures every trip is an experience in itself."
      metrics={[
        {
          value: "10+",
          title: "Years of Service",
        },
        {
          value: "5000+",
          title: "Satisfied Clients",
        },
        {
          value: "24/7",
          title: "Dedicated Support",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/elegant-mature-male-browsing-tablet_23-2148673395.jpg"
      imageAlt="Professional driver smiling in a luxury car interior"
      mediaAnimation="opacity"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureHoverPattern
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          icon: Car,
          title: "Seamless Airport Transfers",
          description: "Reliable and punctual rides to and from all major airports. Avoid stress with our pre-booked service.",
        },
        {
          icon: Briefcase,
          title: "Executive Business Travel",
          description: "Professional transport for corporate events, meetings, and client pickups. Make a lasting impression.",
        },
        {
          icon: Calendar,
          title: "Special Event Chauffeur",
          description: "Arrive in style at weddings, concerts, and galas. Your special moments deserve exceptional transport.",
        },
      ]}
      title="Our Premium Services for Every Occasion"
      description="Whether it's a critical business meeting, a special night out, or simply reliable airport transport, our diverse range of services is tailored to meet your every need with utmost care and luxury."
    />
  </div>

  <div id="fleet" data-section="fleet">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          brand: "Mercedes-Benz",
          name: "Luxury Sedan",
          price: "From $85",
          rating: 5,
          reviewCount: "250",
          imageSrc: "http://img.b2bpic.net/free-photo/working-back-seat-car_1098-18496.jpg",
          imageAlt: "Luxury Mercedes-Benz Sedan",
        },
        {
          id: "p2",
          brand: "Cadillac",
          name: "Executive SUV",
          price: "From $120",
          rating: 4,
          reviewCount: "180",
          imageSrc: "http://img.b2bpic.net/free-photo/professional-safeguards-team-work_23-2148404065.jpg",
          imageAlt: "Cadillac Executive SUV",
        },
        {
          id: "p3",
          brand: "Mercedes-Benz",
          name: "Group Van",
          price: "From $150",
          rating: 5,
          reviewCount: "95",
          imageSrc: "http://img.b2bpic.net/free-photo/simple-comfortable-female-customer-modern-stylish-bearded-businessman-automobile-saloon_146671-16077.jpg",
          imageAlt: "Mercedes-Benz Group Van",
        },
        {
          id: "p4",
          brand: "Rolls-Royce",
          name: "Stretch Limousine",
          price: "Custom Quote",
          rating: 5,
          reviewCount: "60",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-financially-independence-while-buying-car_23-2149434364.jpg",
          imageAlt: "Rolls-Royce Stretch Limousine",
        },
        {
          id: "p5",
          brand: "Tesla",
          name: "Electric Luxury",
          price: "From $90",
          rating: 5,
          reviewCount: "120",
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-businessman-standing-near-car-use-laptop_1157-27344.jpg",
          imageAlt: "Tesla Electric Luxury Car",
        },
        {
          id: "p6",
          brand: "Classic",
          name: "Vintage Collection",
          price: "Custom Quote",
          rating: 4,
          reviewCount: "40",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-sexy-fashion-blond-girl-model-with-bright-makeup-curly-hairstyle-retro-style-sitting-old-car_158538-9242.jpg",
          imageAlt: "Vintage Luxury Car",
        },
      ]}
      title="Our Diverse Fleet: Choose Your Perfect Ride"
      description="Explore our meticulously maintained fleet of high-end vehicles, each selected for its comfort, safety, and sophisticated style. From executive sedans to spacious SUVs, we have a vehicle to match every preference and occasion."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "99.9%",
          title: "Punctuality Rate",
          description: "Our commitment to timeliness is unmatched. We ensure you're always on schedule.",
          icon: Clock,
        },
        {
          id: "m2",
          value: "200+",
          title: "Professional Chauffeurs",
          description: "Our experienced drivers are meticulously vetted and trained for superior service.",
          icon: Users,
        },
        {
          id: "m3",
          value: "5-Star",
          title: "Service Rating",
          description: "Consistently rated excellent by our clients for exceptional quality and comfort.",
          icon: Award,
        },
      ]}
      title="Why LuxuryRide Stands Apart"
      description="Our dedication to delivering a superior travel experience is reflected in our unwavering standards and exceptional service metrics. Choose confidence, choose comfort, choose LuxuryRide."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          title: "Truly a First-Class Experience",
          quote: "LuxuryRide consistently exceeds expectations. The vehicles are pristine, and the drivers are the epitome of professionalism. My go-to for all business travel.",
          name: "David S.",
          role: "CEO, TechInnovate",
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-3693.jpg",
          imageAlt: "David S.",
        },
        {
          id: "t2",
          title: "Punctual and Extremely Comfortable",
          quote: "For airport transfers, there's no better choice. Always on time, incredibly comfortable, and a stress-free experience every single time. Highly recommended!",
          name: "Sarah L.",
          role: "Marketing Director",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businesswoman-talking-mobile-phone_1262-16443.jpg",
          imageAlt: "Sarah L.",
        },
        {
          id: "t3",
          title: "The Only Service We Trust",
          quote: "Our company relies on LuxuryRide for all executive transport. Their attention to detail and discreet service is unparalleled. An essential partner.",
          name: "Robert M.",
          role: "COO, Global Ventures",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-european-man-with-grey-hair-beard-smiles-pleasantly-looks-directly-front-being-good-mood-has-lucky-day-wears-spectacles-sweater-isolated-blue-wall_273609-44285.jpg",
          imageAlt: "Robert M.",
        },
        {
          id: "t4",
          title: "Luxury Redefined for Special Events",
          quote: "We booked a chauffeur for our wedding anniversary, and it was perfect. The car was stunning, and our driver was fantastic. Made our evening truly memorable.",
          name: "Emily H.",
          role: "Event Planner",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",
          imageAlt: "Emily H.",
        },
        {
          id: "t5",
          title: "Exceptional Service, Every Time",
          quote: "From booking to drop-off, the process is seamless. The quality of service and the vehicles are consistently top-notch. LuxuryRide is a class act.",
          name: "Michael B.",
          role: "Financial Advisor",
          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-bearded-male-dressed-suit_613910-5596.jpg",
          imageAlt: "Michael B.",
        },
      ]}
      title="Hear From Our Valued Clients"
      description="Our commitment to superior service is best reflected in the words of those we serve. Read what our clients have to say about their LuxuryRide experience."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "How do I book a ride?",
          content: "Booking is simple! You can book directly through our website, mobile app, or by calling our 24/7 customer service line. We recommend booking at least 24 hours in advance for guaranteed availability.",
        },
        {
          id: "q2",
          title: "What types of vehicles do you offer?",
          content: "Our diverse fleet includes luxury sedans, executive SUVs, spacious group vans, and even stretch limousines, catering to all your travel needs. Explore our 'Fleet' section for more details.",
        },
        {
          id: "q3",
          title: "Can I request a specific driver?",
          content: "While we cannot guarantee a specific driver for every booking, you can add a request in your booking notes, and we will do our best to accommodate it based on availability. All our chauffeurs are highly professional.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-women-traveling-by-car_23-2148687107.jpg"
      imageAlt="Chauffeur opening a car door for a client"
      mediaAnimation="slide-up"
      mediaPosition="left"
      title="Frequently Asked Questions"
      description="Have questions about our services? Find quick answers to common inquiries below. If you need further assistance, our customer support team is always ready to help."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      text="Ready to experience the ultimate in luxury transportation? Book your journey with LuxuryRide today."
      buttons={[
        {
          text: "Get a Custom Quote",
          href: "#",
        },
        {
          text: "Call Us Now",
          href: "tel:+1234567890",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Our Fleet",
              href: "#fleet",
            },
            {
              label: "Careers",
              href: "#",
            },
          ],
        },
        {
          title: "Services",
          items: [
            {
              label: "Airport Transfers",
              href: "#services",
            },
            {
              label: "Executive Travel",
              href: "#services",
            },
            {
              label: "Special Events",
              href: "#services",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Contact Us",
              href: "#contact",
            },
            {
              label: "Privacy Policy",
              href: "#",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 LuxuryRide. All rights reserved."
      bottomRightText="Designed for unmatched luxury"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
