Travel Slider Hero

import { TravelHeroSlider, HeroSlide } from "@/components/ui/travel-slider-hero"; // Adjust path as needed

// --- Sample Data ---
// Using placeholder images from Unsplash.
// In a real app, these would come from your CMS or API.

const sliderItems: HeroSlide[] = [
  {
    id: "01",
    location: "Switzerland Alps",
    title: "Saint Antönien",
    description:
      "Mount marquise stands apart. Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    href: "/discover/saint-antonien",
    imageUrl:
      "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1920&q=80",
    thumbnail: {
      title: "Saint Antönien",
      subtitle: "Switzerland Alps",
      imageUrl:
        "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=400&q=80",
    },
  },
  {
    id: "02",
    location: "Japan",
    title: "Nagano Prefecture",
    description:
      "Home to the famous 'Snow Monkeys'. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
    href: "/discover/nagano",
    imageUrl:
      "https://plus.unsplash.com/premium_photo-1661964177687-57387c2cbd14?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8SmFwYW58ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&q=60&w=900",
    thumbnail: {
      title: "Nagano",
      subtitle: "Japan",
      imageUrl:
        "https://plus.unsplash.com/premium_photo-1661964177687-57387c2cbd14?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8SmFwYW58ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&q=60&w=900",
    },
  },
  {
    id: "03",
    location: "Sahara Desert - Morocco",
    title: "Marrakech Merzouga",
    description:
      "Experience the vastness of the desert sands. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
    href: "/discover/marrakech",
    imageUrl:
      "https://images.unsplash.com/photo-1486314030120-d5ab85fe58cd?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8U2FoYXJhJTIwRGVzZXJ0fGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=900",
    thumbnail: {
      title: "Marrakech",
      subtitle: "Morocco",
      imageUrl:
        "https://images.unsplash.com/photo-1486314030120-d5ab85fe58cd?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8U2FoYXJhJTIwRGVzZXJ0fGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=900",
    },
  },
  {
    id: "04",
    location: "California, United States",
    title: "Yosemite Nat'l Park",
    description:
      "Awe-inspiring granite cliffs and waterfalls. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.",
    href: "/discover/yosemite",
    imageUrl:
      "https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Q2FsaWZvcm5pYXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=900",
    thumbnail: {
      title: "Yosemite",
      subtitle: "United States",
      imageUrl:
        "https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Q2FsaWZvcm5pYXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=900",
    },
  },
  {
    id: "05",
    location: "Tarifa, Spain",
    title: "Los Lances Beach",
    description:
      "A paradise for kitesurfing and wind sports. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.",
    href: "/discover/los-lances",
    imageUrl:
      "https://images.unsplash.com/photo-1705072383082-661b09de3ab4?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8VGFyaWZhJTJDJTIwU3BhaW58ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&q=60&w=900",
    thumbnail: {
      title: "Los Lances",
      subtitle: "Spain",
      imageUrl:
        "https://images.unsplash.com/photo-1705072383082-661b09de3ab4?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8VGFyaWZhJTJDJTIwU3BhaW58ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&q=60&w=900",
    },
  },
];

/**
 * A demo page to showcase the TravelHeroSlider.
 */
export default function TravelHeroSliderDemo() {
  return (
    <main>
      <TravelHeroSlider items={sliderItems} />
      {/* You can add the rest of your page content below */}
      <div className="h-screen bg-background p-12">
        <h2 className="text-3xl font-bold">Page Content Starts Here</h2>
        <p className="text-muted-foreground mt-4">
          The hero slider above is a self-contained component.
        </p>
      </div>
    </main>
  );
}