"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="medium"
        background="blurBottom"
        cardStyle="inset"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "Vehicles",
          id: "#vehicles",
        },
        {
          name: "Why Us?",
          id: "#features",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="DriveEase Rentals"
      button={{
        text: "Book Now",
        href: "#contact",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{
        variant: "radial-gradient",
      }}
      title="Your Journey Starts Here: DriveEase Rentals"
      description="Explore a world of comfort and convenience with our premium car rental services. Book your perfect ride today and experience the road like never before!"
      buttons={[
        {
          text: "Browse Vehicles",
          href: "#vehicles",
        },
        {
          text: "Book Now",
          href: "#contact",
        },
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-sunset-cote-d-azur-french-rivera-france_181624-45824.jpg",
          imageAlt: "Luxury sports car in a city",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-people-campervan_23-2149295112.jpg",
          imageAlt: "White SUV on a scenic mountain road",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-travelling-by-electro-car_1303-20469.jpg",
          imageAlt: "Compact city car parked downtown",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-senior-couple-standing-near-car_23-2149390986.jpg",
          imageAlt: "Classic vintage car on an open road",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-environmentally-friendly-city-with-green-spaces_23-2150780628.jpg",
          imageAlt: "Electric car at a charging station",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-enjoying-road-trip_23-2148732197.jpg",
          imageAlt: "Red convertible driving along the coast",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardEight
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Easy Online Booking",
          description: "Our intuitive platform makes booking your desired vehicle quick and hassle-free, accessible from any device.",
          imageSrc: "http://img.b2bpic.net/free-photo/fashion-girl-walking-sspring-park_1157-21318.jpg",
          imageAlt: "Online booking interface on a mobile device",
        },
        {
          title: "Wide Selection of Vehicles",
          description: "From economy cars to luxury SUVs, our diverse fleet offers a vehicle for every occasion and budget.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-choosing-car_1303-22399.jpg",
          imageAlt: "Diverse car fleet in a modern showroom",
        },
        {
          title: "24/7 Roadside Assistance",
          description: "Travel with peace of mind knowing our dedicated support team is available around the clock for any emergencies.",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-student-greeting-her-professor-laptop-web-video-call_482257-131843.jpg",
          imageAlt: "Customer support representative with headset",
        },
      ]}
      title="Why Choose DriveEase?"
      description="Experience seamless car rentals tailored to your needs. We prioritize your convenience, safety, and satisfaction every step of the way."
    />
  </div>

  <div id="vehicles" data-section="vehicles">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "economy",
          name: "Economy Hatchback",
          price: "$35/day",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-friends-refuel-car-gas-station-holiday-trip-friends_1153-6816.jpg",
          imageAlt: "Silver economy hatchback",
        },
        {
          id: "sedan",
          name: "Mid-Size Sedan",
          price: "$50/day",
          imageSrc: "http://img.b2bpic.net/free-photo/car-highway-speed-motion-sunset-road-driving_169016-68669.jpg",
          imageAlt: "Blue mid-size sedan",
        },
        {
          id: "luxury-suv",
          name: "Luxury SUV",
          price: "$120/day",
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-elegant-couple-car-salon_1157-22016.jpg",
          imageAlt: "Black luxury SUV",
        },
        {
          id: "convertible",
          name: "Sports Convertible",
          price: "$150/day",
          imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-5501.jpg",
          imageAlt: "Red sports convertible",
        },
        {
          id: "minivan",
          name: "Family Minivan",
          price: "$80/day",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-couple-sitting-trunk-car-while-road-trip_23-2148851240.jpg",
          imageAlt: "White family minivan",
        },
        {
          id: "ev",
          name: "Electric City Car",
          price: "$70/day",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-charging-electro-car-electric-gas-station_1157-35448.jpg",
          imageAlt: "Modern electric compact car",
        },
      ]}
      title="Our Fleet: Your Perfect Ride Awaits"
      description="From compact city cars to spacious SUVs and luxurious sedans, find the ideal vehicle for your next adventure or business trip."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "customers",
          value: "15,000+",
          description: "Happy Customers Served",
        },
        {
          id: "vehicles",
          value: "500+",
          description: "Vehicles in Our Fleet",
        },
        {
          id: "years",
          value: "10+",
          description: "Years in Business",
        },
      ]}
      title="Numbers That Speak For Themselves"
      description="Reliability and customer satisfaction are at the core of our service. Our growth reflects our commitment to excellence."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "daily",
          badge: "Standard",
          price: "$45",
          subtitle: "Per day rental",
          buttons: [
            {
              text: "Select Daily",
              href: "#contact",
            },
          ],
          features: [
            "Standard mileage allowance",
            "Basic insurance included",
            "24/7 Roadside assistance",
          ],
        },
        {
          id: "weekly",
          badge: "Popular",
          badgeIcon: Sparkles,
          price: "$280",
          subtitle: "Per week rental (Save 12%)",
          buttons: [
            {
              text: "Select Weekly",
              href: "#contact",
            },
          ],
          features: [
            "Unlimited mileage",
            "Premium insurance coverage",
            "Free additional driver",
            "Flexible pickup/return",
          ],
        },
        {
          id: "monthly",
          badge: "Best Value",
          price: "$950",
          subtitle: "Per month rental (Save 20%)",
          buttons: [
            {
              text: "Select Monthly",
              href: "#contact",
            },
          ],
          features: [
            "Unlimited mileage",
            "Premium insurance coverage",
            "Free additional driver",
            "Long-term support",
            "Priority vehicle upgrade",
          ],
        },
      ]}
      title="Flexible Plans, Transparent Pricing"
      description="Choose from our simple and straightforward rental options designed to fit every budget and journey, with no hidden fees."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          name: "Sarah Johnson",
          role: "Marketing Manager",
          company: "Global Solutions",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/modern-man-bridge_23-2147961613.jpg",
        },
        {
          id: "2",
          name: "Michael Chen",
          role: "Software Engineer",
          company: "InnovateTech",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/elderly-business-woman-office-isolated_1303-21365.jpg",
        },
        {
          id: "3",
          name: "Emily Rodriguez",
          role: "Travel Blogger",
          company: "Wanderlust Diaries",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-with-lovely-dog_23-2148320196.jpg",
        },
        {
          id: "4",
          name: "David Kim",
          role: "Entrepreneur",
          company: "Startup Ventures",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-taking-selfie_23-2149487077.jpg",
        },
        {
          id: "5",
          name: "Jessica Lee",
          role: "Graphic Designer",
          company: "Creative Hub",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-smiling-woman-vacation-printed-t-shirt-straw-hat-summer-fashion-hands-holding-pineapple_285396-3952.jpg",
        },
        {
          id: "6",
          name: "Robert Miller",
          role: "Financial Analyst",
          company: "Fortune Funds",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/older-woman-enjoying-hike-nature_23-2149274911.jpg",
        },
      ]}
      title="What Our Customers Say"
      description="Hear from happy travelers who chose DriveEase for their adventures. Their positive experiences are our greatest reward."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "TravelCo",
        "ExploreHub",
        "VoyageFast",
        "DestinationPro",
        "RentWise",
        "GlobalRoutes",
        "JourneyJoy",
      ]}
      title="Trusted by Leading Travel Partners"
      description="Our commitment to quality service has earned us partnerships with top travel agencies and booking platforms worldwide."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "What documents do I need to rent a car?",
          content: "You will need a valid driver's license, a credit card in your name, and a form of identification (like a passport).",
        },
        {
          id: "q2",
          title: "Can I pick up and drop off the car at different locations?",
          content: "Yes, we offer flexible one-way rental options. Additional fees may apply depending on the locations.",
        },
        {
          id: "q3",
          title: "What is your cancellation policy?",
          content: "Cancellations made 24 hours in advance receive a full refund. Cancellations within 24 hours may incur a small fee.",
        },
      ]}
      sideTitle="Got Questions? We've Got Answers."
      sideDescription="Find quick solutions to common queries about our car rental service, booking process, and policies."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Ready to Roll?"
      title="Book Your Next Adventure Today!"
      description="Contact our friendly team for personalized assistance, special requests, or to get a custom quote for your car rental."
      buttons={[
        {
          text: "Get a Quote",
          href: "#",
        },
        {
          text: "Call Us",
          href: "tel:+1234567890",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="DriveEase"
      leftLink={{
        text: "Privacy Policy",
        href: "#",
      }}
      rightLink={{
        text: "Terms of Service",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
