"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, CheckCircle, Zap, Award, TrendingUp, BarChart3, Users, Globe, Car, Star, Heart, HelpCircle, Phone } from "lucide-react";

export default function CarRentalPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumLarge"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="CarsRent"
          navItems={[
            { name: "Vehicles", id: "vehicles" },
            { name: "How It Works", id: "process" },
            { name: "Pricing", id: "pricing" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Premium Car Rentals"
          bottomRightText="support@carsrentrentals.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="CarsRent"
          description="Experience premium car rentals with unbeatable prices, instant booking, and 24/7 support. Choose from our fleet of luxury vehicles for every journey."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Book Now", href: "#pricing" },
            { text: "View Fleet", href: "#vehicles" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/elegant-uber-driver-giving-taxi-ride_23-2149241747.jpg"
          imageAlt="Premium rental vehicle"
          frameStyle="browser"
        />
      </div>

      <div id="vehicles" data-section="vehicles">
        <ProductCardThree
          title="Our Vehicle Fleet"
          description="Select from our premium collection of well-maintained rental vehicles"
          tag="Latest Models"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "1",              name: "Compact Sedan",              price: "$45/day",              imageSrc: "https://img.b2bpic.net/free-photo/woman-getting-taxi-car_23-2149149625.jpg",              imageAlt: "Compact sedan rental",              initialQuantity: 1
            },
            {
              id: "2",              name: "Premium SUV",              price: "$85/day",              imageSrc: "https://img.b2bpic.net/free-photo/elegant-uber-driver-giving-taxi-ride_23-2149241745.jpg",              imageAlt: "Premium SUV rental",              initialQuantity: 1
            },
            {
              id: "3",              name: "Sports Coupe",              price: "$120/day",              imageSrc: "https://img.b2bpic.net/free-photo/it-has-few-special-functions-female-customer-modern-stylish-bearded-businessman-automobile-saloon_146671-16061.jpg",              imageAlt: "Sports coupe rental",              initialQuantity: 1
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          buttons={[
            { text: "Explore More Vehicles", href: "#contact" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEight
          title="CarsRent"
          description="Experience unmatched service and value at every step of your journey"
          tag="Our Advantages"
          tagIcon={CheckCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Instant Booking",              description: "Book your vehicle in seconds with our mobile-optimized platform",              imageSrc: "https://img.b2bpic.net/free-photo/day-office-travel-agency_23-2150769962.jpg"
            },
            {
              id: 2,
              title: "24/7 Support",              description: "Our customer service team is always ready to help with any questions",              imageSrc: "https://img.b2bpic.net/free-photo/man-holding-smartphone-indoors_23-2149321587.jpg"
            },
            {
              id: 3,
              title: "Full Coverage Insurance",              description: "Complete peace of mind with comprehensive insurance included in every rental",              imageSrc: "https://img.b2bpic.net/free-photo/online-booking-traveling-plane-flight-concept_53876-133675.jpg"
            },
            {
              id: 4,
              title: "Global Locations",              description: "Pick up and drop off at multiple convenient locations worldwide",              imageSrc: "https://img.b2bpic.net/free-photo/woman-with-papers-browsing-laptop_23-2147802086.jpg"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Simple Transparent Pricing"
          description="Choose the perfect rental plan for your needs with no hidden fees"
          tag="Flexible Plans"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "daily",              badge: "Popular",              badgeIcon: Sparkles,
              price: "$45-120",              subtitle: "Perfect for short trips",              features: [
                "Unlimited mileage",                "Free cancellation",                "Flexible return",                "Roadside assistance"
              ]
            },
            {
              id: "weekly",              badge: "Best Value",              badgeIcon: Award,
              price: "$280-750",              subtitle: "Great for week-long travels",              features: [
                "30% discount on daily rate",                "Free upgrades available",                "Complimentary delivery",                "Priority support"
              ]
            },
            {
              id: "monthly",              badge: "Business",              badgeIcon: TrendingUp,
              price: "$900-2400",              subtitle: "Extended rental solutions",              features: [
                "50% discount on daily rate",                "Dedicated account manager",                "Flexible swap options",                "Corporate invoicing"
              ]
            }
          ]}
          buttons={[
            { text: "Get Special Offer", href: "#contact" }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <MetricCardOne
          title="CarsRent by Numbers"
          description="Join thousands of satisfied customers worldwide who trust our service"
          tag="Our Track Record"
          tagIcon={BarChart3}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "50k+",              title: "Happy Customers",              description: "Satisfied renters worldwide trust us",              icon: Users
            },
            {
              id: "2",              value: "15",              title: "Countries",              description: "Global presence and service coverage",              icon: Globe
            },
            {
              id: "3",              value: "500+",              title: "Vehicles",              description: "Premium fleet across all locations",              icon: Car
            },
            {
              id: "4",              value: "4.8/5",              title: "Rating",              description: "Exceptional customer satisfaction score",              icon: Star
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Customers Say"
          description="Real feedback from real travelers who've experienced our service"
          tag="Customer Reviews"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          showRating={true}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              handle: "@sarahtravels",              testimonial: "Booking with CarsRent was incredibly easy. The vehicle was pristine and the entire experience exceeded my expectations. Highly recommend!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "James Chen",              handle: "@jamesadventures",              testimonial: "Best car rental service I've used in years. Great selection, affordable prices, and their support team is fantastic.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-portrait-successful-happy-smiling-young-woman-beige-jacket-glasses-standing-lobby-office-reception-greeting-business-client-with-pleasant-grin-inviting-company_197531-30568.jpg",              imageAlt: "James Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              handle: "@emmaontour",              testimonial: "The convenience factor is unbeatable. Instant booking, perfect vehicle, and hassle-free return. Already booked my next rental!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-successful-businesswoman-with-charming-smile-posing-street-with-interesting-architecture-background_613910-3354.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "Michael Park",              handle: "@miketravel",              testimonial: "Professional service from start to finish. The vehicles are well-maintained and the pricing is transparent. Worth every penny.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/afro-american-woman-smiling-close-up_23-2148336947.jpg",              imageAlt: "Michael Park"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our rental process and policies"
          tag="Help Center"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What is the minimum age to rent a vehicle?",              content: "The minimum age is 21 years old with a valid driver's license. Renters between 21-25 may be subject to a young driver surcharge of $10-15 per day."
            },
            {
              id: "2",              title: "Is insurance included in the rental price?",              content: "Yes, comprehensive insurance coverage is included in all our rental rates. This includes collision, liability, and theft protection. You have the option to add premium coverage for additional peace of mind."
            },
            {
              id: "3",              title: "Can I cancel my reservation?",              content: "Absolutely! Cancellations made 48 hours before your rental start date receive a full refund. Cancellations within 48 hours may incur a small fee. Check your booking confirmation for specific terms."
            },
            {
              id: "4",              title: "What payment methods do you accept?",              content: "We accept all major credit cards (Visa, Mastercard, American Express), digital wallets (Apple Pay, Google Pay), and bank transfers. A valid credit card is required at pickup."
            },
            {
              id: "5",              title: "Are there mileage restrictions?",              content: "All our daily and weekly rentals include unlimited mileage at no extra charge. Monthly rentals also feature unlimited mileage. You're free to drive as much as you need!"
            },
            {
              id: "6",              title: "What if I damage the rental vehicle?",              content: "Our comprehensive insurance covers most damages. You may be responsible for a deductible (typically $500-1000 depending on coverage). We always recommend documenting the vehicle's condition at pickup."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Book Your Rental?"
          ctaDescription="Get in touch with our booking team today and secure your perfect vehicle for an unforgettable journey."
          ctaButton={{ text: "Book a Rental", href: "tel:+1-800-GASORGAZ" }}
          ctaIcon={Phone}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I modify my existing reservation?",              content: "You can modify your reservation anytime through your account dashboard or by calling our support team at +1-800-CARSRENT. Changes are subject to availability and pricing adjustments."
            },
            {
              id: "2",              title: "Do you offer corporate or fleet rates?",              content: "Yes! We offer special corporate rates for businesses with recurring rental needs. Contact our B2B team at corporate@carsrentrentals.com for custom quotes and partnership opportunities."
            },
            {
              id: "3",              title: "What happens if I return the vehicle late?",              content: "Late returns incur an hourly fee of $15-25 depending on the vehicle class. If you anticipate being late, please contact us immediately to discuss options and potential fee waivers."
            },
            {
              id: "4",              title: "Can I pick up a vehicle at one location and return it at another?",              content: "Yes, we offer one-way rental options at most of our locations. One-way fees typically range from $30-100 depending on distance. Select this option during booking for additional details."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="CarsRent"
          copyrightText="© 2025 CarsRent Rentals. All rights reserved."
          columns={[
            {
              title: "Rentals",              items: [
                { label: "Browse Vehicles", href: "vehicles" },
                { label: "Pricing", href: "pricing" },
                { label: "Locations", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "contact" },
                { label: "FAQ", href: "faq" },
                { label: "Terms & Conditions", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}