Refactor code structure and remove redundant changes

src-old/components/rides/CoasterStatistics.tsx

@@ -0,0 +1,95 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { RideCoasterStat } from "@/types/database";
+import { TrendingUp } from "lucide-react";
+import { useUnitPreferences } from "@/hooks/useUnitPreferences";
+import { convertValueFromMetric, detectUnitType, getMetricUnit, getDisplayUnit } from "@/lib/units";
+
+interface CoasterStatisticsProps {
+  statistics?: RideCoasterStat[];
+}
+
+export const CoasterStatistics = ({ statistics }: CoasterStatisticsProps) => {
+  const { preferences } = useUnitPreferences();
+  
+  if (!statistics || statistics.length === 0) {
+    return null;
+  }
+
+  const getDisplayValue = (stat: RideCoasterStat) => {
+    if (!stat.unit) {
+      return stat.stat_value.toLocaleString();
+    }
+
+    const unitType = detectUnitType(stat.unit);
+    if (unitType === 'unknown') {
+      return `${stat.stat_value.toLocaleString()} ${stat.unit}`;
+    }
+
+    // stat.unit is the metric unit stored in DB (e.g., "km/h")
+    // Get the target display unit based on user preference (e.g., "mph" for imperial)
+    const displayUnit = getDisplayUnit(stat.unit, preferences.measurement_system);
+    
+    // Convert from metric (stat.unit) to display unit
+    const convertedValue = convertValueFromMetric(
+      stat.stat_value,
+      displayUnit,  // Target unit (mph, ft, in)
+      stat.unit     // Source metric unit (km/h, m, cm)
+    );
+    
+    return `${convertedValue.toLocaleString()} ${displayUnit}`;
+  };
+
+  // Group stats by category
+  const groupedStats = statistics.reduce((acc, stat) => {
+    const category = stat.category || 'General';
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(stat);
+    return acc;
+  }, {} as Record<string, RideCoasterStat[]>);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <TrendingUp className="h-5 w-5" />
+          Coaster Statistics
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {Object.entries(groupedStats).map(([category, stats]) => (
+            <div key={category}>
+              <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
+                {category}
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-3 max-w-4xl mx-auto">
+                {stats
+                  .sort((a, b) => a.display_order - b.display_order)
+                  .map((stat) => (
+                    <div
+                      key={stat.id}
+                      className="flex justify-between items-center p-3 rounded-lg bg-muted/50"
+                    >
+                      <div className="flex flex-col">
+                        <span className="text-sm font-medium">{stat.stat_name}</span>
+                        {stat.description && (
+                          <span className="text-xs text-muted-foreground">
+                            {stat.description}
+                          </span>
+                        )}
+                      </div>
+                      <span className="text-sm font-semibold">
+                        {getDisplayValue(stat)}
+                      </span>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

src-old/components/rides/FormerNames.tsx

@@ -0,0 +1,101 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { History } from 'lucide-react';
+import { RideNameHistory } from '@/types/database';
+import { format } from 'date-fns';
+import { parseDateForDisplay } from '@/lib/dateUtils';
+
+interface FormerName {
+  name: string;
+  from_year?: number;
+  to_year?: number;
+}
+
+interface FormerNamesProps {
+  formerNames?: FormerName[];
+  nameHistory?: RideNameHistory[]; // New relational data
+  currentName: string;
+}
+
+export function FormerNames({ formerNames, nameHistory, currentName }: FormerNamesProps) {
+  // Use new relational data if available, fallback to legacy JSON
+  const names = nameHistory || formerNames;
+  
+  if (!names || names.length === 0) {
+    return null;
+  }
+  
+  // Normalize data structure
+  const normalizedNames = names.map((item) => {
+    if ('former_name' in item) {
+      // New relational format (RideNameHistory)
+      return {
+        name: item.former_name,
+        date_changed: item.date_changed,
+        reason: item.reason,
+        from_year: item.from_year,
+        to_year: item.to_year,
+        order: item.order_index,
+      };
+    } else {
+      // Legacy JSON format (FormerName)
+      return {
+        name: item.name,
+        from_year: item.from_year,
+        to_year: item.to_year,
+        order: 0,
+      };
+    }
+  }).sort((a, b) => a.order - b.order);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <History className="w-5 h-5" />
+          Ride History
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          <div className="flex items-start gap-3">
+            <div className="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-primary" />
+            <div className="flex-1">
+              <div className="font-medium">{currentName}</div>
+              <div className="text-sm text-muted-foreground">Current name</div>
+            </div>
+            <Badge variant="default">Current</Badge>
+          </div>
+
+          {normalizedNames.map((former, index) => (
+            <div key={index} className="flex items-start gap-3">
+              <div className="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-muted-foreground" />
+              <div className="flex-1">
+                <div className="font-medium">{former.name}</div>
+                <div className="text-sm text-muted-foreground space-y-1">
+                  {(former.from_year || former.to_year) && (
+                    <div>
+                      {former.from_year && former.to_year 
+                        ? `${former.from_year} - ${former.to_year}`
+                        : former.from_year 
+                        ? `Since ${former.from_year}`
+                        : `Until ${former.to_year}`
+                      }
+                    </div>
+                  )}
+                  {former.date_changed && (
+                    <div>Changed: {format(parseDateForDisplay(former.date_changed), 'MMM d, yyyy')}</div>
+                  )}
+                  {former.reason && (
+                    <div className="italic">{former.reason}</div>
+                  )}
+                </div>
+              </div>
+              <Badge variant="outline">Former</Badge>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src-old/components/rides/RatingDistribution.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '@/lib/supabaseClient';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { Star } from 'lucide-react';
+
+interface RatingDistributionProps {
+  rideId: string;
+  totalReviews: number;
+  averageRating: number;
+}
+
+interface RatingCount {
+  rating: number;
+  count: number;
+}
+
+export function RatingDistribution({ rideId, totalReviews, averageRating }: RatingDistributionProps) {
+  const [distribution, setDistribution] = useState<RatingCount[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchDistribution() {
+      const { data, error } = await supabase
+        .from('reviews')
+        .select('rating')
+        .eq('ride_id', rideId)
+        .eq('moderation_status', 'approved');
+
+      if (!error && data) {
+        const counts = [5, 4, 3, 2, 1].map(rating => ({
+          rating,
+          count: data.filter(r => r.rating === rating).length
+        }));
+        setDistribution(counts);
+      }
+      setLoading(false);
+    }
+
+    fetchDistribution();
+  }, [rideId]);
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Rating Breakdown</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="text-center pb-4 border-b border-border">
+          <div className="flex items-center justify-center gap-2 mb-2">
+            <Star className="w-8 h-8 fill-yellow-400 text-yellow-400" />
+            <span className="text-4xl font-bold">{averageRating.toFixed(1)}</span>
+          </div>
+          <div className="text-sm text-muted-foreground">
+            Based on {totalReviews} {totalReviews === 1 ? 'review' : 'reviews'}
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          {distribution.map(({ rating, count }) => {
+            const percentage = totalReviews > 0 ? (count / totalReviews) * 100 : 0;
+            return (
+              <div key={rating} className="flex items-center gap-3">
+                <div className="flex items-center gap-1 w-16">
+                  <span className="text-sm font-medium">{rating}</span>
+                  <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+                </div>
+                <Progress value={percentage} className="flex-1 h-2" />
+                <span className="text-sm text-muted-foreground w-12 text-right">
+                  {count}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src-old/components/rides/RecentPhotosPreview.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '@/lib/supabaseClient';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Camera } from 'lucide-react';
+
+interface RecentPhotosPreviewProps {
+  rideId: string;
+  onViewAll: () => void;
+}
+
+interface Photo {
+  id: string;
+  image_url: string;
+  caption: string | null;
+}
+
+export function RecentPhotosPreview({ rideId, onViewAll }: RecentPhotosPreviewProps) {
+  const [photos, setPhotos] = useState<Photo[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchPhotos() {
+      const { data, error } = await supabase
+        .from('reviews')
+        .select(`
+          id,
+          user_id,
+          created_at,
+          review_photos!inner(
+            cloudflare_image_url,
+            caption,
+            order_index,
+            id
+          )
+        `)
+        .eq('ride_id', rideId)
+        .eq('moderation_status', 'approved')
+        .order('created_at', { ascending: false })
+        .limit(10);
+
+      if (!error && data) {
+        const allPhotos: Photo[] = [];
+        data.forEach((review: any) => {
+          if (review.review_photos && Array.isArray(review.review_photos)) {
+            review.review_photos.forEach((photo: any) => {
+              if (allPhotos.length < 4) {
+                allPhotos.push({
+                  id: photo.id || Math.random().toString(),
+                  image_url: photo.cloudflare_image_url,
+                  caption: photo.caption || null
+                });
+              }
+            });
+          }
+        });
+        setPhotos(allPhotos);
+      }
+      setLoading(false);
+    }
+
+    fetchPhotos();
+  }, [rideId]);
+
+  if (loading || photos.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Camera className="w-5 h-5" />
+          Recent Photos
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          {photos.map((photo) => (
+            <div
+              key={photo.id}
+              className="aspect-square rounded-lg overflow-hidden bg-accent cursor-pointer hover:opacity-80 transition-opacity"
+              onClick={onViewAll}
+            >
+              <img
+                src={photo.image_url}
+                alt={photo.caption || 'Ride photo'}
+                className="w-full h-full object-cover"
+              />
+            </div>
+          ))}
+        </div>
+        <div className="mt-4 text-center">
+          <Button variant="outline" onClick={onViewAll} className="w-full">
+            View All Photos
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src-old/components/rides/RideCard.tsx

@@ -0,0 +1,169 @@
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Star, MapPin, Clock, Zap, FerrisWheel, Waves, Theater, Train, ArrowUp, CheckCircle, Calendar, Hammer, XCircle } from 'lucide-react';
+import { MeasurementDisplay } from '@/components/ui/measurement-display';
+import { Ride } from '@/types/database';
+import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
+
+interface RideCardProps {
+  ride: Ride;
+  showParkName?: boolean;
+  className?: string;
+  parkSlug?: string;
+}
+
+export function RideCard({ ride, showParkName = true, className, parkSlug }: RideCardProps) {
+  const navigate = useNavigate();
+
+  const handleRideClick = () => {
+    const slug = parkSlug || ride.park?.slug;
+    navigate(`/parks/${slug}/rides/${ride.slug}`);
+  };
+
+  const getRideIcon = (category: string) => {
+    switch (category) {
+      case 'roller_coaster': return <FerrisWheel className="w-6 h-6" />;
+      case 'water_ride': return <Waves className="w-6 h-6" />;
+      case 'dark_ride': return <Theater className="w-6 h-6" />;
+      case 'flat_ride': return <FerrisWheel className="w-6 h-6" />;
+      case 'kiddie_ride': return <FerrisWheel className="w-6 h-6" />;
+      case 'transportation': return <Train className="w-6 h-6" />;
+      default: return <FerrisWheel className="w-6 h-6" />;
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'operating': return 'bg-green-500/50 text-green-200 border-green-500/50';
+      case 'seasonal': return 'bg-yellow-500/50 text-yellow-200 border-yellow-500/50';
+      case 'under_construction': return 'bg-blue-500/50 text-blue-200 border-blue-500/50';
+      default: return 'bg-red-500/50 text-red-200 border-red-500/50';
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'operating': return <CheckCircle className="w-3 h-3" />;
+      case 'seasonal': return <Calendar className="w-3 h-3" />;
+      case 'under_construction': return <Hammer className="w-3 h-3" />;
+      default: return <XCircle className="w-3 h-3" />;
+    }
+  };
+
+  const formatCategory = (category: string) => {
+    return category.split('_').map(word => 
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  };
+
+  return (
+    <Card 
+      className={`group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300 ${className}`}
+      onClick={handleRideClick}
+    >
+      <div className="relative overflow-hidden">
+        {/* Image/Icon Section */}
+        <div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
+          {(ride.card_image_url || ride.card_image_id || ride.image_url) ? (
+            <img 
+              src={ride.card_image_url || getCloudflareImageUrl(ride.card_image_id || '', 'card') || ride.image_url || ''}
+              srcSet={ride.card_image_id ? `
+                ${getCloudflareImageUrl(ride.card_image_id, 'cardthumb')} 600w,
+                ${getCloudflareImageUrl(ride.card_image_id, 'card')} 1200w
+              ` : undefined}
+              sizes="(max-width: 640px) 600px, 1200px"
+              alt={ride.name}
+              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+              loading="lazy"
+            />
+          ) : (
+            <div className="flex items-center justify-center w-20 h-20">
+              <div className="relative">
+                <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
+                <div className="relative w-12 h-12 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
+                  {getRideIcon(ride.category)}
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {/* Gradient Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
+          
+          {/* Status Badge */}
+          <Badge 
+            className={`absolute top-3 right-3 ${getStatusColor(ride.status)} backdrop-blur-sm border shadow-lg font-medium text-xs px-2.5 py-1 inline-flex items-center gap-1.5`}
+          >
+            {getStatusIcon(ride.status)}
+            <span>{ride.status.replace('_', ' ').toUpperCase()}</span>
+          </Badge>
+        </div>
+
+        <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
+          {/* Header */}
+          <div className="space-y-0.5 min-w-0">
+            <h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2 break-words group-hover:drop-shadow-[0_0_8px_rgba(var(--primary),0.5)] transition-all duration-300">
+              {ride.name}
+            </h3>
+            
+            {showParkName && ride.park?.name && (
+              <Badge className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-background/80 backdrop-blur-md border-border/50 text-foreground shadow-lg shadow-primary/10 hover:shadow-xl hover:shadow-primary/20 hover:border-primary/50 transition-all duration-300 group/badge max-w-[calc(100%-1rem)]">
+                <div className="w-4 h-4 rounded-full bg-gradient-to-br from-primary to-primary/50 flex items-center justify-center shadow-sm group-hover/badge:scale-110 transition-transform flex-shrink-0">
+                  <MapPin className="w-2.5 h-2.5 text-primary-foreground" />
+                </div>
+                <span className="font-medium truncate text-xs min-w-0">
+                  {ride.park.name}
+                </span>
+              </Badge>
+            )}
+          </div>
+
+          {/* Stats & Rating */}
+          <div className="flex flex-col gap-1.5">
+            {/* Stats Row */}
+            {(Number(ride.max_speed_kmh || 0) > 0 || Number(ride.max_height_meters || 0) > 0 || Number(ride.duration_seconds || 0) > 0) && (
+              <div className="flex items-center gap-3 flex-wrap text-sm">
+                {Number(ride.max_speed_kmh || 0) > 0 && (
+                  <div className="flex items-center gap-1 min-w-0">
+                    <Zap className="w-4 h-4 text-primary/70 flex-shrink-0" />
+                    <span className="font-medium whitespace-nowrap">
+                      <MeasurementDisplay value={ride.max_speed_kmh || 0} type="speed" />
+                    </span>
+                  </div>
+                )}
+                {Number(ride.max_height_meters || 0) > 0 && (
+                  <div className="flex items-center gap-1 min-w-0">
+                    <ArrowUp className="w-4 h-4 text-accent/70 flex-shrink-0" />
+                    <span className="font-medium whitespace-nowrap">
+                      <MeasurementDisplay value={ride.max_height_meters || 0} type="distance" />
+                    </span>
+                  </div>
+                )}
+                {Number(ride.duration_seconds || 0) > 0 && (
+                  <div className="flex items-center gap-1 min-w-0">
+                    <Clock className="w-4 h-4 text-secondary/70 flex-shrink-0" />
+                    <span className="font-medium whitespace-nowrap">
+                      {Math.floor((ride.duration_seconds || 0) / 60)}<span className="text-muted-foreground text-xs ml-0.5">min</span>
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
+            
+            {/* Rating */}
+            {(ride.average_rating != null && ride.average_rating > 0) && (
+              <div className="inline-flex items-center gap-1 text-sm">
+                <Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
+                <span className="font-semibold text-foreground">{ride.average_rating.toFixed(1)}</span>
+                {(ride.review_count != null && ride.review_count > 0) && (
+                  <span className="text-muted-foreground">({ride.review_count})</span>
+                )}
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </div>
+    </Card>
+  );
+}

src-old/components/rides/RideCardMemo.tsx

@@ -0,0 +1,19 @@
+/**
+ * Memoized Ride Card Component
+ * Optimized for grid rendering performance
+ */
+
+import React from 'react';
+import { RideCard } from './RideCard';
+import type { Ride } from '@/types/database';
+
+interface RideCardMemoProps {
+  ride: Ride;
+  showParkName?: boolean;
+  className?: string;
+  parkSlug?: string;
+}
+
+export const RideCardMemo = React.memo<RideCardMemoProps>(RideCard);
+
+RideCardMemo.displayName = 'RideCardMemo';

src-old/components/rides/RideFilters.tsx

@@ -0,0 +1,516 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Separator } from '@/components/ui/separator';
+import { RotateCcw } from 'lucide-react';
+import { supabase } from '@/lib/supabaseClient';
+import { FilterRangeSlider } from '@/components/filters/FilterRangeSlider';
+import { TimeZoneIndependentDateRangePicker } from '@/components/filters/TimeZoneIndependentDateRangePicker';
+import { FilterSection } from '@/components/filters/FilterSection';
+import { FilterMultiSelectCombobox } from '@/components/filters/FilterMultiSelectCombobox';
+import { MultiSelectOption } from '@/components/ui/multi-select-combobox';
+import { Ride } from '@/types/database';
+import { useUnitPreferences } from '@/hooks/useUnitPreferences';
+import { 
+  convertValueToMetric, 
+  convertValueFromMetric, 
+  getDisplayUnit 
+} from '@/lib/units';
+
+export interface RideFilterState {
+  categories: string[];
+  status: string;
+  countries: string[];
+  statesProvinces: string[];
+  cities: string[];
+  parks: string[];
+  manufacturers: string[];
+  designers: string[];
+  coasterTypes: string[];
+  seatingTypes: string[];
+  intensityLevels: string[];
+  trackMaterials: string[];
+  supportMaterials: string[];
+  propulsionMethods: string[];
+  minSpeed: number;
+  maxSpeed: number;
+  minHeight: number;
+  maxHeight: number;
+  minLength: number;
+  maxLength: number;
+  minInversions: number;
+  maxInversions: number;
+  openingDateFrom: string | null;
+  openingDateTo: string | null;
+  hasInversions: boolean;
+  operatingOnly: boolean;
+}
+
+export const defaultRideFilters: RideFilterState = {
+  categories: [],
+  status: 'all',
+  countries: [],
+  statesProvinces: [],
+  cities: [],
+  parks: [],
+  manufacturers: [],
+  designers: [],
+  coasterTypes: [],
+  seatingTypes: [],
+  intensityLevels: [],
+  trackMaterials: [],
+  supportMaterials: [],
+  propulsionMethods: [],
+  minSpeed: 0,
+  maxSpeed: 200,
+  minHeight: 0,
+  maxHeight: 150,
+  minLength: 0,
+  maxLength: 3000,
+  minInversions: 0,
+  maxInversions: 14,
+  openingDateFrom: null,
+  openingDateTo: null,
+  hasInversions: false,
+  operatingOnly: false,
+};
+
+interface RideFiltersProps {
+  filters: RideFilterState;
+  onFiltersChange: (filters: RideFilterState) => void;
+  rides: Ride[];
+}
+
+export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProps) {
+  const { preferences } = useUnitPreferences();
+  const system = preferences.measurement_system;
+
+  // Fetch unique filter options
+  const { data: locations } = useQuery({
+    queryKey: ['filter-locations'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('locations')
+        .select('country, state_province, city')
+        .not('country', 'is', null);
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: parks } = useQuery({
+    queryKey: ['filter-parks'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('parks')
+        .select('id, name')
+        .order('name');
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: manufacturers } = useQuery({
+    queryKey: ['filter-manufacturers'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('companies')
+        .select('id, name')
+        .eq('company_type', 'manufacturer')
+        .order('name');
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: designers } = useQuery({
+    queryKey: ['filter-designers'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('companies')
+        .select('id, name')
+        .eq('company_type', 'designer')
+        .order('name');
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const countryOptions: MultiSelectOption[] = useMemo(() => {
+    const countries = new Set(locations?.map(l => l.country).filter(Boolean) || []);
+    return Array.from(countries).sort().map(c => ({ label: c, value: c }));
+  }, [locations]);
+
+  const stateOptions: MultiSelectOption[] = useMemo(() => {
+    const states = new Set(locations?.map(l => l.state_province).filter((s): s is string => s != null) || []);
+    return Array.from(states).sort().map(s => ({ label: s, value: s }));
+  }, [locations]);
+
+  const cityOptions: MultiSelectOption[] = useMemo(() => {
+    const cities = new Set(locations?.map(l => l.city).filter((c): c is string => c != null) || []);
+    return Array.from(cities).sort().map(c => ({ label: c, value: c }));
+  }, [locations]);
+
+  const parkOptions: MultiSelectOption[] = useMemo(() => {
+    return (parks || []).map(p => ({ label: p.name, value: p.id }));
+  }, [parks]);
+
+  const manufacturerOptions: MultiSelectOption[] = useMemo(() => {
+    return (manufacturers || []).map(m => ({ label: m.name, value: m.id }));
+  }, [manufacturers]);
+
+  const designerOptions: MultiSelectOption[] = useMemo(() => {
+    return (designers || []).map(d => ({ label: d.name, value: d.id }));
+  }, [designers]);
+
+  const categoryOptions: MultiSelectOption[] = [
+    { label: 'Roller Coasters', value: 'roller_coaster' },
+    { label: 'Flat Rides', value: 'flat_ride' },
+    { label: 'Water Rides', value: 'water_ride' },
+    { label: 'Dark Rides', value: 'dark_ride' },
+    { label: 'Kiddie Rides', value: 'kiddie_ride' },
+    { label: 'Transportation', value: 'transportation' },
+  ];
+
+  const statusOptions = [
+    { value: 'all', label: 'All Status' },
+    { value: 'operating', label: 'Operating' },
+    { value: 'seasonal', label: 'Seasonal' },
+    { value: 'under_construction', label: 'Under Construction' },
+    { value: 'closed', label: 'Closed' },
+  ];
+
+  const coasterTypeOptions: MultiSelectOption[] = [
+    { label: 'Steel', value: 'steel' },
+    { label: 'Wood', value: 'wood' },
+    { label: 'Hybrid', value: 'hybrid' },
+    { label: 'Inverted', value: 'inverted' },
+    { label: 'Suspended', value: 'suspended' },
+    { label: 'Flying', value: 'flying' },
+    { label: 'Wing', value: 'wing' },
+    { label: 'Dive', value: 'dive' },
+  ];
+
+  const seatingTypeOptions: MultiSelectOption[] = [
+    { label: 'Sit Down', value: 'sit_down' },
+    { label: 'Stand Up', value: 'stand_up' },
+    { label: 'Inverted', value: 'inverted' },
+    { label: 'Flying', value: 'flying' },
+    { label: 'Floorless', value: 'floorless' },
+  ];
+
+  const intensityOptions: MultiSelectOption[] = [
+    { label: 'Family', value: 'family' },
+    { label: 'Moderate', value: 'moderate' },
+    { label: 'Thrill', value: 'thrill' },
+    { label: 'Extreme', value: 'extreme' },
+  ];
+
+  const trackMaterialOptions: MultiSelectOption[] = [
+    { label: 'Steel', value: 'steel' },
+    { label: 'Wood', value: 'wood' },
+  ];
+
+  const supportMaterialOptions: MultiSelectOption[] = [
+    { label: 'Steel', value: 'steel' },
+    { label: 'Wood', value: 'wood' },
+  ];
+
+  const propulsionMethodOptions: MultiSelectOption[] = [
+    { label: 'Chain Lift', value: 'chain_lift' },
+    { label: 'Cable Lift', value: 'cable_lift' },
+    { label: 'Launched (LIM/LSM)', value: 'launched_lim_lsm' },
+    { label: 'Hydraulic Launch', value: 'hydraulic_launch' },
+    { label: 'Compressed Air', value: 'compressed_air' },
+    { label: 'Flywheel', value: 'flywheel' },
+    { label: 'Gravity', value: 'gravity' },
+    { label: 'Other', value: 'other' },
+  ];
+
+  // Calculate display ranges based on user preferences
+  const speedUnit = getDisplayUnit('km/h', system);
+  const heightUnit = getDisplayUnit('m', system);
+  const lengthUnit = getDisplayUnit('m', system);
+
+  // Convert metric filter ranges to display units for sliders
+  const displaySpeedMin = Math.round(convertValueFromMetric(0, speedUnit, 'km/h'));
+  const displaySpeedMax = Math.round(convertValueFromMetric(200, speedUnit, 'km/h'));
+  const displayHeightMin = Math.round(convertValueFromMetric(0, heightUnit, 'm'));
+  const displayHeightMax = Math.round(convertValueFromMetric(150, heightUnit, 'm'));
+  const displayLengthMin = Math.round(convertValueFromMetric(0, lengthUnit, 'm'));
+  const displayLengthMax = Math.round(convertValueFromMetric(3000, lengthUnit, 'm'));
+
+  // Convert current metric filter values to display units
+  const currentSpeedMin = Math.round(convertValueFromMetric(filters.minSpeed, speedUnit, 'km/h'));
+  const currentSpeedMax = Math.round(convertValueFromMetric(filters.maxSpeed, speedUnit, 'km/h'));
+  const currentHeightMin = Math.round(convertValueFromMetric(filters.minHeight, heightUnit, 'm'));
+  const currentHeightMax = Math.round(convertValueFromMetric(filters.maxHeight, heightUnit, 'm'));
+  const currentLengthMin = Math.round(convertValueFromMetric(filters.minLength, lengthUnit, 'm'));
+  const currentLengthMax = Math.round(convertValueFromMetric(filters.maxLength, lengthUnit, 'm'));
+
+  const resetFilters = () => {
+    onFiltersChange(defaultRideFilters);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Filter Rides</h3>
+        <Button variant="ghost" size="sm" onClick={resetFilters}>
+          <RotateCcw className="w-4 h-4 mr-2" />
+          Reset
+        </Button>
+      </div>
+
+      {/* Basic Filters */}
+      <FilterSection title="Basic Filters">
+        <div className="grid grid-cols-1 gap-4">
+          <FilterMultiSelectCombobox
+            label="Categories"
+            options={categoryOptions}
+            value={filters.categories}
+            onChange={(value) => onFiltersChange({ ...filters, categories: value })}
+            placeholder="Select categories"
+          />
+
+          <div className="space-y-2">
+            <Label>Status</Label>
+            <Select
+              value={filters.status}
+              onValueChange={(value) => onFiltersChange({ ...filters, status: value })}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {statusOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      {/* Geographic Filters */}
+      <FilterSection title="Location">
+        <div className="grid grid-cols-1 gap-4">
+          <FilterMultiSelectCombobox
+            label="Countries"
+            options={countryOptions}
+            value={filters.countries}
+            onChange={(value) => onFiltersChange({ ...filters, countries: value })}
+            placeholder="Select countries"
+          />
+          <FilterMultiSelectCombobox
+            label="States/Provinces"
+            options={stateOptions}
+            value={filters.statesProvinces}
+            onChange={(value) => onFiltersChange({ ...filters, statesProvinces: value })}
+            placeholder="Select states"
+          />
+          <FilterMultiSelectCombobox
+            label="Cities"
+            options={cityOptions}
+            value={filters.cities}
+            onChange={(value) => onFiltersChange({ ...filters, cities: value })}
+            placeholder="Select cities"
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      {/* Relationship Filters */}
+      <FilterSection title="Parks & Companies">
+        <div className="grid grid-cols-1 gap-4">
+          <FilterMultiSelectCombobox
+            label="Parks"
+            options={parkOptions}
+            value={filters.parks}
+            onChange={(value) => onFiltersChange({ ...filters, parks: value })}
+            placeholder="Select parks"
+          />
+          <FilterMultiSelectCombobox
+            label="Manufacturers"
+            options={manufacturerOptions}
+            value={filters.manufacturers}
+            onChange={(value) => onFiltersChange({ ...filters, manufacturers: value })}
+            placeholder="Select manufacturers"
+          />
+          <FilterMultiSelectCombobox
+            label="Designers"
+            options={designerOptions}
+            value={filters.designers}
+            onChange={(value) => onFiltersChange({ ...filters, designers: value })}
+            placeholder="Select designers"
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      {/* Coaster-Specific Filters */}
+      <FilterSection title="Coaster Details">
+        <div className="grid grid-cols-1 gap-4">
+          <FilterMultiSelectCombobox
+            label="Coaster Type"
+            options={coasterTypeOptions}
+            value={filters.coasterTypes}
+            onChange={(value) => onFiltersChange({ ...filters, coasterTypes: value })}
+            placeholder="Select types"
+          />
+          <FilterMultiSelectCombobox
+            label="Seating Type"
+            options={seatingTypeOptions}
+            value={filters.seatingTypes}
+            onChange={(value) => onFiltersChange({ ...filters, seatingTypes: value })}
+            placeholder="Select seating"
+          />
+          <FilterMultiSelectCombobox
+            label="Intensity"
+            options={intensityOptions}
+            value={filters.intensityLevels}
+            onChange={(value) => onFiltersChange({ ...filters, intensityLevels: value })}
+            placeholder="Select intensity"
+          />
+          <FilterMultiSelectCombobox
+            label="Track Material"
+            options={trackMaterialOptions}
+            value={filters.trackMaterials}
+            onChange={(value) => onFiltersChange({ ...filters, trackMaterials: value })}
+            placeholder="Select material"
+          />
+          <FilterMultiSelectCombobox
+            label="Support Material"
+            options={supportMaterialOptions}
+            value={filters.supportMaterials}
+            onChange={(value) => onFiltersChange({ ...filters, supportMaterials: value })}
+            placeholder="Select support material"
+          />
+          <FilterMultiSelectCombobox
+            label="Propulsion Method"
+            options={propulsionMethodOptions}
+            value={filters.propulsionMethods}
+            onChange={(value) => onFiltersChange({ ...filters, propulsionMethods: value })}
+            placeholder="Select propulsion"
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      {/* Numeric Range Filters */}
+      <FilterSection title="Statistics">
+        <div className="grid grid-cols-1 gap-4">
+          <FilterRangeSlider
+            label="Speed"
+            value={[currentSpeedMin, currentSpeedMax]}
+            onChange={([displayMin, displayMax]) => {
+              // Convert display values back to metric for storage
+              const metricMin = Math.round(convertValueToMetric(displayMin, speedUnit));
+              const metricMax = Math.round(convertValueToMetric(displayMax, speedUnit));
+              onFiltersChange({ ...filters, minSpeed: metricMin, maxSpeed: metricMax });
+            }}
+            min={displaySpeedMin}
+            max={displaySpeedMax}
+            step={system === 'metric' ? 5 : 2}
+            formatValue={(v) => `${v} ${speedUnit}`}
+          />
+          <FilterRangeSlider
+            label="Height"
+            value={[currentHeightMin, currentHeightMax]}
+            onChange={([displayMin, displayMax]) => {
+              // Convert display values back to metric for storage
+              const metricMin = Math.round(convertValueToMetric(displayMin, heightUnit));
+              const metricMax = Math.round(convertValueToMetric(displayMax, heightUnit));
+              onFiltersChange({ ...filters, minHeight: metricMin, maxHeight: metricMax });
+            }}
+            min={displayHeightMin}
+            max={displayHeightMax}
+            step={system === 'metric' ? 5 : 10}
+            formatValue={(v) => `${v} ${heightUnit}`}
+          />
+          <FilterRangeSlider
+            label="Length"
+            value={[currentLengthMin, currentLengthMax]}
+            onChange={([displayMin, displayMax]) => {
+              // Convert display values back to metric for storage
+              const metricMin = Math.round(convertValueToMetric(displayMin, lengthUnit));
+              const metricMax = Math.round(convertValueToMetric(displayMax, lengthUnit));
+              onFiltersChange({ ...filters, minLength: metricMin, maxLength: metricMax });
+            }}
+            min={displayLengthMin}
+            max={displayLengthMax}
+            step={system === 'metric' ? 50 : 100}
+            formatValue={(v) => `${v} ${lengthUnit}`}
+          />
+          <FilterRangeSlider
+            label="Inversions"
+            value={[filters.minInversions, filters.maxInversions]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minInversions: min, maxInversions: max })}
+            min={0}
+            max={14}
+            step={1}
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      {/* Date Filters */}
+      <FilterSection title="Dates">
+        <div className="grid grid-cols-1 gap-4">
+          <TimeZoneIndependentDateRangePicker
+            label="Opening Date Range"
+            fromDate={filters.openingDateFrom}
+            toDate={filters.openingDateTo}
+            onFromChange={(date) => onFiltersChange({ ...filters, openingDateFrom: date })}
+            onToChange={(date) => onFiltersChange({ ...filters, openingDateTo: date })}
+            fromPlaceholder="From date"
+            toPlaceholder="To date"
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      {/* Boolean Filters */}
+      <FilterSection title="Other Options">
+        <div className="space-y-3">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="hasInversions"
+              checked={filters.hasInversions}
+              onCheckedChange={(checked) =>
+                onFiltersChange({ ...filters, hasInversions: checked as boolean })
+              }
+            />
+            <Label htmlFor="hasInversions" className="cursor-pointer">
+              Has inversions
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="operatingOnly"
+              checked={filters.operatingOnly}
+              onCheckedChange={(checked) =>
+                onFiltersChange({ ...filters, operatingOnly: checked as boolean })
+              }
+            />
+            <Label htmlFor="operatingOnly" className="cursor-pointer">
+              Operating only
+            </Label>
+          </div>
+        </div>
+      </FilterSection>
+    </div>
+  );
+}

src-old/components/rides/RideHighlights.tsx

@@ -0,0 +1,86 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Zap, TrendingUp, Award, Sparkles } from 'lucide-react';
+import { MeasurementDisplay } from '@/components/ui/measurement-display';
+
+interface RideHighlight {
+  icon: React.ReactNode;
+  label: string;
+  value: React.ReactNode;
+}
+
+interface RideWithStats {
+  id: string;
+  name: string;
+  max_speed_kmh?: number;
+  max_height_meters?: number;
+  inversions?: number;
+  average_rating?: number;
+}
+
+interface RideHighlightsProps {
+  ride: RideWithStats;
+}
+
+export function RideHighlights({ ride }: RideHighlightsProps) {
+  const highlights: RideHighlight[] = [];
+
+  // Add speed highlight if notable
+  if (ride.max_speed_kmh && ride.max_speed_kmh > 60) {
+    highlights.push({
+      icon: <Zap className="w-5 h-5 text-amber-500" />,
+      label: 'High Speed',
+      value: <MeasurementDisplay value={ride.max_speed_kmh} type="speed" className="inline" />
+    });
+  }
+
+  // Add height highlight if notable
+  if (ride.max_height_meters && ride.max_height_meters > 30) {
+    highlights.push({
+      icon: <TrendingUp className="w-5 h-5 text-blue-500" />,
+      label: 'Tall Structure',
+      value: <MeasurementDisplay value={ride.max_height_meters} type="height" className="inline" />
+    });
+  }
+
+  // Add inversions highlight
+  if (ride.inversions && ride.inversions > 0) {
+    highlights.push({
+      icon: <Sparkles className="w-5 h-5 text-purple-500" />,
+      label: 'Inversions',
+      value: `${ride.inversions} ${ride.inversions === 1 ? 'inversion' : 'inversions'}`
+    });
+  }
+
+  // Add rating highlight if high
+  if (ride.average_rating && ride.average_rating >= 4.0) {
+    highlights.push({
+      icon: <Award className="w-5 h-5 text-yellow-500" />,
+      label: 'Highly Rated',
+      value: `${ride.average_rating.toFixed(1)} stars`
+    });
+  }
+
+  if (highlights.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Ride Highlights</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {highlights.map((highlight, index) => (
+            <div key={index} className="flex flex-col items-center text-center p-4 rounded-lg bg-accent/50">
+              <div className="mb-2">{highlight.icon}</div>
+              <div className="font-medium text-sm mb-1">{highlight.label}</div>
+              <div className="text-xs text-muted-foreground">{highlight.value}</div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src-old/components/rides/RideListView.tsx

@@ -0,0 +1,149 @@
+import { MapPin, Star, Zap, Ruler, Clock, Factory, Castle } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Ride } from '@/types/database';
+import { cn } from '@/lib/utils';
+
+interface RideListViewProps {
+  rides: Ride[];
+  onRideClick: (ride: Ride) => void;
+}
+
+export function RideListView({ rides, onRideClick }: RideListViewProps) {
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'operating': return 'bg-green-500/20 text-green-400 border-green-500/30';
+      case 'seasonal': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+      case 'under_construction': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+      case 'closed': return 'bg-red-500/20 text-red-400 border-red-500/30';
+      default: return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
+    }
+  };
+
+  const formatCategory = (category: string) => {
+    return category.split('_').map(word => 
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  };
+
+  return (
+    <div className="space-y-3">
+      {rides.map((ride, index) => (
+        <Card 
+          key={ride.id}
+          className={cn(
+            "group overflow-hidden cursor-pointer",
+            "border-border/40 bg-gradient-to-br from-card via-card/95 to-card/90",
+            "hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5",
+            "transition-all duration-500 animate-fade-in-up"
+          )}
+          style={{ animationDelay: `${index * 50}ms` }}
+          onClick={() => onRideClick(ride)}
+        >
+          <CardContent className="p-0">
+            <div className="flex flex-col sm:flex-row">
+              {/* Image */}
+              <div className="w-full h-40 sm:w-40 sm:h-auto md:w-48 flex-shrink-0 self-stretch relative overflow-hidden">
+                {ride.card_image_url ? (
+                  <>
+                    <img 
+                      src={ride.card_image_url} 
+                      alt={ride.name}
+                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                  </>
+                ) : (
+                  <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative overflow-hidden">
+                    <Castle className="w-12 h-12 opacity-50 z-10 relative" />
+                    <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-transparent group-hover:scale-110 transition-transform duration-700" />
+                  </div>
+                )}
+                
+                {/* Status Badge */}
+                <Badge 
+                  className={cn(
+                    "absolute top-2 left-2 text-xs border backdrop-blur-sm",
+                    getStatusColor(ride.status)
+                  )}
+                >
+                  {ride.status.replace('_', ' ').toUpperCase()}
+                </Badge>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[160px]">
+                <div className="space-y-3">
+                  {/* Header */}
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <h3 className="font-bold text-lg md:text-xl group-hover:text-primary transition-colors duration-300 line-clamp-1 mb-1.5">
+                        {ride.name}
+                      </h3>
+                      
+                      {ride.park && (
+                        <div className="flex items-center text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300 mb-1">
+                          <Castle className="w-3.5 h-3.5 mr-1.5 flex-shrink-0" />
+                          <span className="line-clamp-1 font-medium">{ride.park.name}</span>
+                        </div>
+                      )}
+
+                      {ride.park?.location && (
+                        <div className="flex items-center text-xs text-muted-foreground">
+                          <MapPin className="w-3 h-3 mr-1 flex-shrink-0" />
+                          <span className="line-clamp-1">
+                            {ride.park.location.city && `${ride.park.location.city}, `}
+                            {ride.park.location.country}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Rating */}
+                    {(ride.average_rating != null && ride.average_rating > 0) && (
+                      <div className="flex items-center gap-1.5 ml-4 flex-shrink-0 bg-yellow-400/10 px-3 py-1.5 rounded-full group-hover:bg-yellow-400/20 transition-colors duration-300">
+                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                        <span className="font-semibold text-foreground">{ride.average_rating.toFixed(1)}</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Tags */}
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <Badge variant="outline" className="text-xs backdrop-blur-sm border-primary/20 group-hover:border-primary/40 transition-colors duration-300">
+                      {formatCategory(ride.category)}
+                    </Badge>
+                    {ride.manufacturer && (
+                      <Badge variant="outline" className="text-xs backdrop-blur-sm border-accent/20 group-hover:border-accent/40 transition-colors duration-300">
+                        <Factory className="w-3 h-3 mr-1" />
+                        {ride.manufacturer.name}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="flex items-center justify-between mt-4 pt-3 border-t border-border/50">
+                  <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                    {ride.review_count && ride.review_count > 0 && (
+                      <span className="text-xs">{ride.review_count} reviews</span>
+                    )}
+                  </div>
+
+                  <Button 
+                    size="sm" 
+                    className="bg-gradient-to-r from-primary to-secondary hover:shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all duration-300 flex-shrink-0"
+                  >
+                    <span className="hidden sm:inline">View Details</span>
+                    <span className="sm:hidden">View</span>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

src-old/components/rides/RideModelCard.tsx

@@ -0,0 +1,104 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { FerrisWheel } from 'lucide-react';
+import { RideModel } from '@/types/database';
+import { useNavigate } from 'react-router-dom';
+import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
+
+interface RideModelCardProps {
+  model: RideModel;
+  manufacturerSlug: string;
+}
+
+export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
+  const navigate = useNavigate();
+
+  const formatCategory = (category: string | null | undefined) => {
+    if (!category) return 'Unknown';
+    return category.split('_').map(word => 
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  };
+
+  const formatRideType = (type: string | null | undefined) => {
+    if (!type) return 'Unknown';
+    return type.split('_').map(word => 
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  };
+
+  // Safely extract ride count and image data
+  const extendedModel = model as RideModel & { 
+    ride_count?: number;
+    card_image_url?: string;
+    card_image_id?: string;
+  };
+  
+  const rideCount = extendedModel.ride_count || 0;
+  const cardImageUrl = extendedModel.card_image_url;
+  const cardImageId = extendedModel.card_image_id;
+
+  return (
+    <Card 
+      className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300"
+      onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models/${model.slug}`)}
+    >
+      <div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 relative overflow-hidden">
+        {(cardImageUrl || cardImageId) ? (
+          <>
+            <img 
+              src={cardImageUrl || getCloudflareImageUrl(cardImageId, 'card')}
+              srcSet={cardImageId ? `
+                ${getCloudflareImageUrl(cardImageId, 'cardthumb')} 600w,
+                ${getCloudflareImageUrl(cardImageId, 'card')} 1200w
+              ` : undefined}
+              sizes="(max-width: 640px) 600px, 1200px"
+              alt={model.name}
+              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+              loading="lazy"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
+          </>
+        ) : (
+          <div className="flex items-center justify-center h-full">
+            <div className="relative">
+              <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
+              <div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
+                <FerrisWheel className="w-8 h-8 text-primary/70" />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
+        <div className="space-y-0.5 min-w-0">
+          <h3 className="font-bold text-base line-clamp-2 break-words group-hover:text-primary transition-all duration-300 group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
+            {model.name}
+          </h3>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2 text-sm">
+          {model.category && (
+            <Badge variant="secondary" className="text-xs">
+              {formatCategory(model.category)}
+            </Badge>
+          )}
+          {model.ride_type && (
+            <Badge variant="outline" className="text-xs">
+              {formatRideType(model.ride_type)}
+            </Badge>
+          )}
+        </div>
+
+        {rideCount > 0 && (
+          <div className="flex items-center gap-1 text-sm">
+            <FerrisWheel className="w-4 h-4 text-primary/70 flex-shrink-0" />
+            <span className="font-medium">{rideCount}</span>
+            <span className="text-muted-foreground">installations</span>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

src-old/components/rides/SimilarRides.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { supabase } from '@/lib/supabaseClient';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { RideCard } from '@/components/rides/RideCard';
+
+interface SimilarRidesProps {
+  currentRideId: string;
+  parkId: string;
+  parkSlug: string;
+  category: string;
+}
+
+interface SimilarRide {
+  id: string;
+  name: string;
+  slug: string;
+  image_url: string | null;
+  average_rating: number | null;
+  status: string;
+  category: string;
+  description: string | null;
+  max_speed_kmh: number | null;
+  max_height_meters: number | null;
+  duration_seconds: number | null;
+  review_count: number | null;
+  park: {
+    name: string;
+    slug: string;
+  };
+}
+
+export function SimilarRides({ currentRideId, parkId, parkSlug, category }: SimilarRidesProps) {
+  const [rides, setRides] = useState<SimilarRide[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchSimilarRides() {
+      const { data, error } = await supabase
+        .from('rides')
+        .select(`
+          id, 
+          name, 
+          slug, 
+          image_url, 
+          average_rating, 
+          status,
+          category,
+          description,
+          max_speed_kmh,
+          max_height_meters,
+          duration_seconds,
+          review_count,
+          park:parks!inner(name, slug)
+        `)
+        .eq('park_id', parkId)
+        .eq('category', category)
+        .neq('id', currentRideId)
+        .order('average_rating', { ascending: false })
+        .limit(4);
+
+      if (!error && data) {
+        setRides(data);
+      }
+      setLoading(false);
+    }
+
+    fetchSimilarRides();
+  }, [currentRideId, parkId, category]);
+
+  if (loading || rides.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Similar Rides You Might Enjoy</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-5 xl:gap-4">
+          {rides.map((ride) => (
+            <RideCard 
+              key={ride.id} 
+              ride={ride} 
+              showParkName={false}
+              parkSlug={parkSlug}
+            />
+          ))}
+        </div>
+        <div className="mt-4 text-center">
+          <Button variant="outline" asChild>
+            <Link to={`/parks/${parkSlug}/rides`}>View All Rides</Link>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src-old/components/rides/TechnicalSpecifications.tsx

@@ -0,0 +1,95 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { RideTechnicalSpec } from "@/types/database";
+import { Wrench } from "lucide-react";
+import { useUnitPreferences } from "@/hooks/useUnitPreferences";
+import { convertValueFromMetric, detectUnitType, getMetricUnit, getDisplayUnit } from "@/lib/units";
+
+interface TechnicalSpecificationsProps {
+  specifications?: RideTechnicalSpec[];
+}
+
+export const TechnicalSpecifications = ({ specifications }: TechnicalSpecificationsProps) => {
+  const { preferences } = useUnitPreferences();
+  
+  if (!specifications || specifications.length === 0) {
+    return null;
+  }
+
+  const getDisplayValue = (spec: RideTechnicalSpec) => {
+    // If no unit, return as-is
+    if (!spec.unit) {
+      return spec.spec_value;
+    }
+
+    const unitType = detectUnitType(spec.unit);
+    if (unitType === 'unknown') {
+      return `${spec.spec_value} ${spec.unit}`;
+    }
+
+    const numericValue = parseFloat(spec.spec_value);
+    
+    if (isNaN(numericValue)) {
+      return spec.spec_value;
+    }
+
+    // spec.unit is the metric unit stored in DB (e.g., "km/h")
+    // Get the target display unit based on user preference (e.g., "mph" for imperial)
+    const displayUnit = getDisplayUnit(spec.unit, preferences.measurement_system);
+    
+    // Convert from metric (spec.unit) to display unit
+    const convertedValue = convertValueFromMetric(
+      numericValue,
+      displayUnit,  // Target unit (mph, ft, in)
+      spec.unit     // Source metric unit (km/h, m, cm)
+    );
+    
+    return `${convertedValue.toLocaleString()} ${displayUnit}`;
+  };
+
+  // Group specs by category
+  const groupedSpecs = specifications.reduce((acc, spec) => {
+    const category = spec.category || 'General';
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(spec);
+    return acc;
+  }, {} as Record<string, RideTechnicalSpec[]>);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Wrench className="h-5 w-5" />
+          Technical Specifications
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {Object.entries(groupedSpecs).map(([category, specs]) => (
+            <div key={category}>
+              <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
+                {category}
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-3 max-w-4xl mx-auto">
+                {specs
+                  .sort((a, b) => a.display_order - b.display_order)
+                  .map((spec) => (
+                    <div
+                      key={spec.id}
+                      className="flex justify-between items-center p-3 rounded-lg bg-muted/50"
+                    >
+                      <span className="text-sm font-medium">{spec.spec_name}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {getDisplayValue(spec)}
+                      </span>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};