Service Suggestion Grid

import { ServiceSuggestionGrid } from "@/components/ui/service-suggestion-grid";

// Demo component to showcase the ServiceSuggestionGrid
const ServiceSuggestionGridDemo = () => {
  const services = [
    {
      title: "Ride",
      description: "Go anywhere with Uber. Request a ride, hop in, and go.",
      imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-iMa1InVGtssLycAQNqMjjPs8GkWMHd.png&w=1000&q=75",
      imageAlt: "3D illustration of a white car",
      ctaText: "Details",
      href: "#ride",
    },
    {
      title: "Reserve",
      description: "Reserve your ride in advance so you can relax on the day of your trip.",
      imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-ij7GEZhfmzLNlLgDJVhkST8FIm5rJV.png&w=1000&q=75",
      imageAlt: "3D illustration of a calendar and clock",
      ctaText: "Details",
      href: "#reserve",
    },
    {
      title: "Intercity",
      description: "Get convenient, affordable outstation cabs anytime at your doorstep.",
      imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-jUUd9iY5M09GRL9rsdfb188bh2kEwX.png&w=1000&q=75",
      imageAlt: "3D illustration of a car with luggage",
      ctaText: "Details",
      href: "#intercity",
    },
    {
      title: "Courier",
      description: "Uber makes same-day item delivery easier than ever.",
      imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-HNciDluT0NAzIwovOE2g7EpZORt7CQ.png&w=1000&q=75",
      imageAlt: "3D illustration of a person carrying a box",
      ctaText: "Details",
      href: "#courier",
    },
    {
      title: "Rentals",
      description: "Request a trip for a block of time and make multiple stops.",
      imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-ZY8MgKs5A5Kh8GgGf4F23WojfxaeAQ.png&w=1000&q=75",
      imageAlt: "3D illustration of a car and a clock",
      ctaText: "Details",
      href: "#rentals",
    },
    {
      title: "Bike",
      description: "Get affordable motorbike rides in minutes at your doorstep.",
      imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-14CWzVxggDq97J5rWOEHyLU4embdRr.png&w=1000&q=75",
      imageAlt: "3D illustration of a motorcycle",
      ctaText: "Details",
      href: "#bike",
    },
  ];

  return (
    <div className="w-full bg-background flex items-center justify-center p-4">
      <ServiceSuggestionGrid items={services} />
    </div>
  );
};

export default ServiceSuggestionGridDemo;