"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Car, Sparkles } from "lucide-react";

export default function ProductsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="large"
      background="floatingGradient"
      cardStyle="inset"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Volva Sh"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Fleet", id: "fleet" },
            { name: "Why Us", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" }
          ]}
          button={{
            text: "Book Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Our Complete Product Lineup"
          description="Explore our extensive collection of premium vehicles. From luxury sedans to high-performance sports cars, find the perfect vehicle for your journey."
          tag="All Vehicles"
          tagIcon={Sparkles}
          background={{ variant: "gradient-bars" }}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/luxury-car-speeds-by-modern-building-dusk-generative-ai_188544-8048.jpg",              imageAlt: "Luxury sports car"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/elegant-uber-driver-giving-taxi-ride_23-2149241745.jpg",              imageAlt: "Premium family SUV"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/handsome-bearded-male-sunglasses-dressed-black-suit-sitting-luxury-car-against-skyscraper_613910-19325.jpg",              imageAlt: "Elegant sedan"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/fashionable-ladies-going-out-car_132075-12211.jpg",              imageAlt: "Modern electric vehicle"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/black-sedan-wet-highway-rain-rainy-drive_169016-69903.jpg",              imageAlt: "Luxury automobile"
            }
          ]}
          buttons={[
            { text: "Browse All", href: "#fleet" },
            { text: "Book Now", href: "contact" }
          ]}
        />
      </div>

      <div id="fleet" data-section="fleet">
        <ProductCardFour
          title="Complete Vehicle Fleet"
          description="Browse our complete inventory of premium rental vehicles. Each vehicle is meticulously maintained and inspected for safety and comfort."
          tag="All Available Vehicles"
          tagIcon={Car}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          gridVariant="uniform-all-items-equal"
          products={[
            {
              id: "1",              name: "Luxury Sedan",              price: "$120/day",              variant: "Premium | Leather | 5 Seats",              imageSrc: "https://img.b2bpic.net/free-photo/grey-coupe-rainy-highway-motion-focus_169016-69693.jpg",              imageAlt: "Luxury sedan"
            },
            {
              id: "2",              name: "Executive SUV",              price: "$150/day",              variant: "Spacious | AWD | 7 Seats",              imageSrc: "https://img.b2bpic.net/free-photo/white-car-turning-city-street-modern-urban-motion_169016-69787.jpg",              imageAlt: "Executive SUV"
            },
            {
              id: "3",              name: "Sports Car",              price: "$180/day",              variant: "High Performance | Convertible | 2 Seats",              imageSrc: "https://img.b2bpic.net/free-photo/elegant-uber-driver-giving-taxi-ride_23-2149241747.jpg",              imageAlt: "Sports car"
            },
            {
              id: "4",              name: "Compact Coupe",              price: "$90/day",              variant: "Fuel Efficient | Automatic | 2 Seats",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-car-speeds-by-modern-building-dusk-generative-ai_188544-8048.jpg",              imageAlt: "Compact coupe"
            },
            {
              id: "5",              name: "Family Van",              price: "$160/day",              variant: "Spacious | AC | 8 Seats",              imageSrc: "https://img.b2bpic.net/free-photo/black-sedan-wet-highway-rain-rainy-drive_169016-69903.jpg",              imageAlt: "Family van"
            },
            {
              id: "6",              name: "Premium Truck",              price: "$140/day",              variant: "Powerful | 4WD | Cargo Space",              imageSrc: "https://img.b2bpic.net/free-photo/fashionable-ladies-going-out-car_132075-12211.jpg",              imageAlt: "Premium truck"
            }
          ]}
          carouselMode="buttons"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Volva Sh"
          copyrightText="© 2025 Volva Sh Car Rentals. All rights reserved."
          columns={[
            {
              title: "Service",              items: [
                { label: "Fleet", href: "fleet" },
                { label: "Pricing", href: "pricing" },
                { label: "Booking", href: "contact" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Why Choose Us", href: "features" },
                { label: "Testimonials", href: "testimonials" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact", href: "contact" },
                { label: "FAQ", href: "faq" },
                { label: "Support", href: "contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
