Refactor code structure and remove redundant changes

src-old/components/search/AdvancedRideFilters.tsx

@@ -0,0 +1,279 @@
+import { useState } from 'react';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { ChevronDown, Plus, X } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+export interface TechnicalSpecFilter {
+  spec_name: string;
+  spec_value?: string;
+  min_value?: number;
+  max_value?: number;
+  operator: 'equals' | 'contains' | 'range' | 'has_spec';
+}
+
+export interface CoasterStatFilter {
+  stat_name: string;
+  min_value?: number;
+  max_value?: number;
+}
+
+interface AdvancedRideFiltersProps {
+  technicalSpecFilters: TechnicalSpecFilter[];
+  coasterStatFilters: CoasterStatFilter[];
+  onTechnicalSpecFiltersChange: (filters: TechnicalSpecFilter[]) => void;
+  onCoasterStatFiltersChange: (filters: CoasterStatFilter[]) => void;
+}
+
+const COMMON_TECH_SPECS = [
+  'Track Material',
+  'Manufacturer Model',
+  'Train Configuration',
+  'Launch System',
+  'Braking System',
+  'Control System',
+  'Safety System',
+];
+
+const COMMON_COASTER_STATS = [
+  'Max Speed',
+  'Height',
+  'Drop Height',
+  'Length',
+  'Duration',
+  'Inversions',
+  'G-Force',
+  'Capacity',
+];
+
+export function AdvancedRideFilters({
+  technicalSpecFilters,
+  coasterStatFilters,
+  onTechnicalSpecFiltersChange,
+  onCoasterStatFiltersChange,
+}: AdvancedRideFiltersProps) {
+  const [isSpecsOpen, setIsSpecsOpen] = useState(false);
+  const [isStatsOpen, setIsStatsOpen] = useState(false);
+
+  const addTechnicalSpecFilter = () => {
+    onTechnicalSpecFiltersChange([
+      ...technicalSpecFilters,
+      { spec_name: '', operator: 'has_spec' },
+    ]);
+  };
+
+  const updateTechnicalSpecFilter = (index: number, updates: Partial<TechnicalSpecFilter>) => {
+    const updated = [...technicalSpecFilters];
+    updated[index] = { ...updated[index], ...updates };
+    onTechnicalSpecFiltersChange(updated);
+  };
+
+  const removeTechnicalSpecFilter = (index: number) => {
+    onTechnicalSpecFiltersChange(technicalSpecFilters.filter((_, i) => i !== index));
+  };
+
+  const addCoasterStatFilter = () => {
+    onCoasterStatFiltersChange([
+      ...coasterStatFilters,
+      { stat_name: '' },
+    ]);
+  };
+
+  const updateCoasterStatFilter = (index: number, updates: Partial<CoasterStatFilter>) => {
+    const updated = [...coasterStatFilters];
+    updated[index] = { ...updated[index], ...updates };
+    onCoasterStatFiltersChange(updated);
+  };
+
+  const removeCoasterStatFilter = (index: number) => {
+    onCoasterStatFiltersChange(coasterStatFilters.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Technical Specifications Filters */}
+      <Collapsible open={isSpecsOpen} onOpenChange={setIsSpecsOpen}>
+        <CollapsibleTrigger asChild>
+          <div className="flex items-center justify-between cursor-pointer p-3 bg-muted/50 rounded-lg hover:bg-muted transition-colors">
+            <div className="flex items-center gap-2">
+              <h4 className="font-semibold">Technical Specifications</h4>
+              {technicalSpecFilters.length > 0 && (
+                <Badge variant="secondary">{technicalSpecFilters.length}</Badge>
+              )}
+            </div>
+            <ChevronDown className={`w-4 h-4 transition-transform ${isSpecsOpen ? 'rotate-180' : ''}`} />
+          </div>
+        </CollapsibleTrigger>
+        
+        <CollapsibleContent className="space-y-3 pt-3">
+          {technicalSpecFilters.map((filter, index) => (
+            <div key={index} className="p-3 border rounded-lg space-y-3">
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
+                  <div className="space-y-2">
+                    <Label>Specification Name</Label>
+                    <Select
+                      value={filter.spec_name}
+                      onValueChange={(value) => updateTechnicalSpecFilter(index, { spec_name: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select specification" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {COMMON_TECH_SPECS.map((spec) => (
+                          <SelectItem key={spec} value={spec}>
+                            {spec}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label>Filter Type</Label>
+                    <Select
+                      value={filter.operator}
+                      onValueChange={(value: 'equals' | 'contains' | 'range' | 'has_spec') => 
+                        updateTechnicalSpecFilter(index, { operator: value })
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="has_spec">Has Specification</SelectItem>
+                        <SelectItem value="equals">Equals Value</SelectItem>
+                        <SelectItem value="contains">Contains Text</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => removeTechnicalSpecFilter(index)}
+                >
+                  <X className="w-4 h-4" />
+                </Button>
+              </div>
+
+              {(filter.operator === 'equals' || filter.operator === 'contains') && (
+                <div className="space-y-2">
+                  <Label>Value</Label>
+                  <Input
+                    value={filter.spec_value || ''}
+                    onChange={(e) => updateTechnicalSpecFilter(index, { spec_value: e.target.value })}
+                    placeholder="Enter value to match"
+                  />
+                </div>
+              )}
+            </div>
+          ))}
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={addTechnicalSpecFilter}
+            className="w-full"
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            Add Technical Spec Filter
+          </Button>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* Coaster Statistics Filters */}
+      <Collapsible open={isStatsOpen} onOpenChange={setIsStatsOpen}>
+        <CollapsibleTrigger asChild>
+          <div className="flex items-center justify-between cursor-pointer p-3 bg-muted/50 rounded-lg hover:bg-muted transition-colors">
+            <div className="flex items-center gap-2">
+              <h4 className="font-semibold">Coaster Statistics</h4>
+              {coasterStatFilters.length > 0 && (
+                <Badge variant="secondary">{coasterStatFilters.length}</Badge>
+              )}
+            </div>
+            <ChevronDown className={`w-4 h-4 transition-transform ${isStatsOpen ? 'rotate-180' : ''}`} />
+          </div>
+        </CollapsibleTrigger>
+        
+        <CollapsibleContent className="space-y-3 pt-3">
+          {coasterStatFilters.map((filter, index) => (
+            <div key={index} className="p-3 border rounded-lg space-y-3">
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex-1 space-y-3">
+                  <div className="space-y-2">
+                    <Label>Statistic Name</Label>
+                    <Select
+                      value={filter.stat_name}
+                      onValueChange={(value) => updateCoasterStatFilter(index, { stat_name: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select statistic" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {COMMON_COASTER_STATS.map((stat) => (
+                          <SelectItem key={stat} value={stat}>
+                            {stat}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-2">
+                      <Label>Min Value</Label>
+                      <Input
+                        type="number"
+                        value={filter.min_value || ''}
+                        onChange={(e) =>
+                          updateCoasterStatFilter(index, {
+                            min_value: e.target.value ? parseFloat(e.target.value) : undefined,
+                          })
+                        }
+                        placeholder="Min"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label>Max Value</Label>
+                      <Input
+                        type="number"
+                        value={filter.max_value || ''}
+                        onChange={(e) =>
+                          updateCoasterStatFilter(index, {
+                            max_value: e.target.value ? parseFloat(e.target.value) : undefined,
+                          })
+                        }
+                        placeholder="Max"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => removeCoasterStatFilter(index)}
+                >
+                  <X className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+          ))}
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={addCoasterStatFilter}
+            className="w-full"
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            Add Coaster Stat Filter
+          </Button>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}

src-old/components/search/AutocompleteSearch.tsx

@@ -0,0 +1,397 @@
+import { useRef, useEffect, useState } from 'react';
+import { Search, X, Clock, Zap, Castle, FerrisWheel, Factory } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { useSearch, SearchResult } from '@/hooks/useSearch';
+import { useNavigate } from 'react-router-dom';
+import { useToast } from '@/components/ui/use-toast';
+
+interface AutocompleteSearchProps {
+  onResultSelect?: (result: SearchResult) => void;
+  onSearch?: (query: string) => void;
+  placeholder?: string;
+  className?: string;
+  types?: ('park' | 'ride' | 'company')[];
+  limit?: number;
+  showRecentSearches?: boolean;
+  variant?: 'default' | 'hero';
+}
+
+const DEFAULT_SEARCH_TYPES: ('park' | 'ride' | 'company')[] = ['park', 'ride', 'company'];
+
+export function AutocompleteSearch({
+  onResultSelect,
+  onSearch,
+  placeholder = "Search parks, rides, or companies...",
+  className = "",
+  types = DEFAULT_SEARCH_TYPES,
+  limit = 8,
+  showRecentSearches = true,
+  variant = 'default'
+}: AutocompleteSearchProps) {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const searchRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  const {
+    query,
+    setQuery,
+    results,
+    suggestions,
+    loading,
+    saveSearch,
+    clearRecentSearches
+  } = useSearch({ types, limit });
+
+  const displayItems = query.length > 0 ? results : (showRecentSearches ? suggestions : []);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setSelectedIndex(-1);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Handle keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isOpen) return;
+
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          setSelectedIndex(prev => Math.min(prev + 1, displayItems.length - 1));
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setSelectedIndex(prev => Math.max(prev - 1, -1));
+          break;
+        case 'Enter':
+          event.preventDefault();
+          if (selectedIndex >= 0 && displayItems[selectedIndex]) {
+            handleResultClick(displayItems[selectedIndex]);
+          } else if (query) {
+            handleSearch();
+          }
+          break;
+        case 'Escape':
+          setIsOpen(false);
+          setSelectedIndex(-1);
+          inputRef.current?.blur();
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, selectedIndex, displayItems, query]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setQuery(value);
+    setIsOpen(true);
+    setSelectedIndex(-1);
+  };
+
+  const handleInputFocus = () => {
+    setIsOpen(true);
+  };
+
+  type SearchResultOrSuggestion = SearchResult | { 
+    id: string; 
+    type: 'suggestion'; 
+    title: string; 
+    subtitle: string; 
+    data: Record<string, unknown> | null;
+  };
+
+  const handleResultClick = (result: SearchResultOrSuggestion) => {
+    if (result.type === 'suggestion') {
+      setQuery(result.title);
+      setIsOpen(false);
+      return;
+    }
+
+    const searchResult = result as SearchResult;
+    saveSearch(searchResult.title);
+    
+    if (onResultSelect) {
+      onResultSelect(searchResult);
+    } else {
+      // Default navigation with null/undefined safety checks
+      switch (searchResult.type) {
+        case 'park':
+          const parkIdentifier = searchResult.slug || searchResult.id;
+          if (parkIdentifier) {
+            navigate(`/parks/${parkIdentifier}`);
+          } else {
+            toast({
+              title: "Navigation Error",
+              description: "Unable to navigate to this park. Missing park identifier.",
+              variant: "destructive",
+            });
+            navigate(`/search?q=${encodeURIComponent(searchResult.title)}`);
+          }
+          break;
+        case 'ride':
+          const parkSlug = (searchResult.data as { park?: { slug?: string } })?.park?.slug;
+          const rideSlug = searchResult.slug;
+          const rideId = searchResult.id;
+          
+          if (parkSlug && rideSlug) {
+            navigate(`/parks/${parkSlug}/rides/${rideSlug}`);
+          } else if (rideId) {
+            navigate(`/rides/${rideId}`);
+          } else {
+            toast({
+              title: "Navigation Error",
+              description: "Unable to navigate to this ride. Missing ride identifier.",
+              variant: "destructive",
+            });
+            navigate(`/search?q=${encodeURIComponent(searchResult.title)}`);
+          }
+          break;
+        case 'company':
+          const companyType = (searchResult.data as { company_type?: string })?.company_type;
+          const companySlug = searchResult.slug;
+          
+          if (companyType && companySlug) {
+            switch (companyType) {
+              case 'operator':
+                navigate(`/operators/${companySlug}`);
+                break;
+              case 'property_owner':
+                navigate(`/owners/${companySlug}`);
+                break;
+              case 'manufacturer':
+                navigate(`/manufacturers/${companySlug}`);
+                break;
+              case 'designer':
+                navigate(`/designers/${companySlug}`);
+                break;
+              default:
+                toast({
+                  title: "Unknown Company Type",
+                  description: `Unable to navigate to this company type. Showing search results instead.`,
+                  variant: "default",
+                });
+                navigate(`/search?q=${encodeURIComponent(searchResult.title)}`);
+            }
+          } else {
+            toast({
+              title: "Navigation Error",
+              description: "Unable to navigate to this company. Missing required information.",
+              variant: "destructive",
+            });
+            navigate(`/search?q=${encodeURIComponent(searchResult.title)}`);
+          }
+          break;
+      }
+    }
+    
+    setIsOpen(false);
+    setSelectedIndex(-1);
+  };
+
+  const handleSearch = () => {
+    if (!query.trim()) return;
+    
+    saveSearch(query);
+    
+    if (onSearch) {
+      onSearch(query);
+    } else {
+      // Default search behavior - navigate to search results
+      navigate(`/search?q=${encodeURIComponent(query)}`);
+    }
+    
+    setIsOpen(false);
+    setSelectedIndex(-1);
+  };
+
+  const handleClear = () => {
+    setQuery('');
+    setIsOpen(false);
+    setSelectedIndex(-1);
+    inputRef.current?.focus();
+  };
+
+  const getResultIcon = (result: SearchResult) => {
+    switch (result.type) {
+      case 'park':
+        return <Castle className="w-5 h-5" />;
+      case 'ride':
+        return <FerrisWheel className="w-5 h-5" />;
+      case 'company':
+        return <Factory className="w-5 h-5" />;
+      default:
+        return <Search className="w-5 h-5" />;
+    }
+  };
+
+  const getTypeColor = (type: string) => {
+    switch (type) {
+      case 'park':
+        return 'bg-primary/10 text-primary border-primary/20';
+      case 'ride':
+        return 'bg-secondary/10 text-secondary border-secondary/20';      
+      case 'company':
+        return 'bg-accent/10 text-accent border-accent/20';
+      default:
+        return 'bg-muted text-muted-foreground';
+    }
+  };
+
+  const getTypeLabel = (type: string) => {
+    switch (type) {
+      case 'park':
+        return 'Park';
+      case 'ride':
+        return 'Ride';
+      case 'company':
+        return 'Manufacturer';
+      default:
+        return type.charAt(0).toUpperCase() + type.slice(1);
+    }
+  };
+
+  const isHero = variant === 'hero';
+
+  return (
+    <div ref={searchRef} className={`relative w-full min-w-0 ${className}`}>
+      <div className="relative w-full min-w-0">
+        <Search className={`absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground flex-shrink-0 pointer-events-none ${isHero ? 'w-5 h-5' : 'w-4 h-4'}`} />
+        <Input
+          ref={inputRef}
+          placeholder={placeholder}
+          value={query}
+          onChange={handleInputChange}
+          onFocus={handleInputFocus}
+          onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+          className={`w-full ${isHero ? 'pl-12 pr-28 sm:pr-32 h-14 text-base sm:text-lg rounded-full' : 'pl-10 pr-10'} bg-background/95 backdrop-blur border-border/50 focus:border-primary/50 transition-all duration-300 ${
+            isOpen ? 'shadow-lg shadow-primary/10' : ''
+          }`}
+        />
+        {query && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleClear}
+            className={`absolute flex-shrink-0 ${isHero ? 'right-16 sm:right-20 top-2 h-10 w-10 min-w-[40px]' : 'right-1 top-1/2 transform -translate-y-1/2 h-8 w-8'} p-0 hover:bg-muted`}
+          >
+            <X className="w-3 h-3" />
+          </Button>
+        )}
+        {isHero && (
+          <Button
+            onClick={handleSearch}
+            className="absolute right-2 top-2 h-10 px-4 sm:px-6 text-sm sm:text-base min-w-[70px] bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-full flex-shrink-0"
+          >
+            <span className="hidden xs:inline">Search</span>
+            <Search className="w-4 h-4 xs:hidden" />
+          </Button>
+        )}
+      </div>
+
+      {isOpen && (displayItems.length > 0 || loading) && (
+        <div className={`absolute top-full mt-1 left-0 right-0 bg-popover border border-border rounded-lg shadow-xl z-[100] max-h-96 overflow-y-auto ${isHero ? 'max-w-2xl mx-auto' : ''}`}>
+          <div className="p-2">
+            {query.length === 0 && showRecentSearches && suggestions.length > 0 && (
+              <>
+                <div className="flex items-center justify-between px-3 py-2">
+                  <span className="text-sm text-muted-foreground">Recent searches</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={clearRecentSearches}
+                    className="text-xs text-muted-foreground hover:text-foreground"
+                  >
+                    Clear
+                  </Button>
+                </div>
+                <Separator className="my-2" />
+              </>
+            )}
+
+            {displayItems.length > 0 && displayItems.map((item, index) => (
+              <div
+                key={item.id}
+                onClick={() => handleResultClick(item)}
+                className={`flex items-start gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg cursor-pointer transition-colors ${
+                  index === selectedIndex
+                    ? 'bg-accent/10 border border-accent/20'
+                    : 'hover:bg-muted/50'
+                }`}
+              >
+                {item.type === 'suggestion' ? (
+                  <>
+                    <Clock className="w-4 h-4 text-muted-foreground flex-shrink-0 mt-0.5" />
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{item.title}</div>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex flex-col gap-1">
+                        <span className="font-semibold text-foreground text-sm sm:text-base line-clamp-1 text-left">{item.title}</span>
+                        <div className="flex items-center gap-2 flex-wrap justify-start">
+                          <Badge variant="outline" className={`text-[10px] sm:text-xs font-medium whitespace-nowrap flex-shrink-0 ${getTypeColor(item.type)}`}>
+                            {getTypeLabel(item.type)}
+                          </Badge>
+                          {item.subtitle && (
+                            <Badge variant="secondary" className="text-[10px] sm:text-xs whitespace-nowrap flex-shrink-0">
+                              {item.subtitle}
+                            </Badge>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    {((item as SearchResult).rating ?? 0) > 0 && (
+                      <div className="flex items-center gap-1 flex-shrink-0">
+                        <Zap className="w-3 h-3 text-yellow-500" />
+                        <span className="text-xs sm:text-sm font-medium">{(item as SearchResult).rating!.toFixed(1)}</span>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            ))}
+
+            {loading && (
+              <div className="flex items-center justify-center p-4">
+                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
+                <span className="text-sm text-muted-foreground ml-2">Searching...</span>
+              </div>
+            )}
+
+            {query.length > 0 && results.length > 0 && !loading && (
+              <>
+                <Separator className="my-2" />
+                <Button
+                  variant="ghost"
+                  onClick={handleSearch}
+                  className="w-full text-left justify-start text-primary hover:text-primary hover:bg-primary/10"
+                >
+                  <Search className="w-4 h-4 mr-2" />
+                  View all results for "{query}"
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src-old/components/search/EnhancedSearchResults.tsx

@@ -0,0 +1,243 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Star, MapPin, Zap, Factory, Clock, Users, Calendar, Ruler, Gauge, Building } from 'lucide-react';
+import { SearchResult } from '@/hooks/useSearch';
+import { MeasurementDisplay } from '@/components/ui/measurement-display';
+
+interface EnhancedSearchResultsProps {
+  results: SearchResult[];
+  loading: boolean;
+  hasMore?: boolean;
+  onLoadMore?: () => void;
+}
+
+export function EnhancedSearchResults({ results, loading, hasMore, onLoadMore }: EnhancedSearchResultsProps) {
+  const navigate = useNavigate();
+
+  const handleResultClick = (result: SearchResult) => {
+    switch (result.type) {
+      case 'park':
+        navigate(`/parks/${result.slug || result.id}`);
+        break;
+      case 'ride':
+        // Need to get park slug for ride navigation
+        navigate(`/rides/${result.id}`);
+        break;
+      case 'company':
+        navigate(`/companies/${result.id}`);
+        break;
+    }
+  };
+
+  const getTypeIcon = (type: string, size = 'w-6 h-6') => {
+    switch (type) {
+      case 'park': return <MapPin className={size} />;
+      case 'ride': return <Zap className={size} />;
+      case 'company': return <Factory className={size} />;
+      default: return <MapPin className={size} />;
+    }
+  };
+
+  const getTypeColor = (type: string) => {
+    switch (type) {
+      case 'park':
+        return 'bg-primary/10 text-primary border-primary/20';
+      case 'ride':
+        return 'bg-secondary/10 text-secondary border-secondary/20';      
+      case 'company':
+        return 'bg-accent/10 text-accent border-accent/20';
+      default:
+        return 'bg-muted text-muted-foreground';
+    }
+  };
+
+  const renderParkDetails = (result: SearchResult) => {
+    if (result.type !== 'park') return null;
+    const parkData = result.data as { ride_count?: number; opening_date?: string; status?: string };
+    
+    return (
+      <div className="flex flex-wrap gap-2 mt-3">
+        {parkData?.ride_count && (
+          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Zap className="w-3 h-3" />
+            <span>{parkData.ride_count} rides</span>
+          </div>
+        )}
+        {parkData?.opening_date && (
+          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Calendar className="w-3 h-3" />
+            <span>Opened {parkData.opening_date.split('-')[0]}</span>
+          </div>
+        )}
+        {parkData?.status && (
+          <Badge variant="outline" className="text-xs">
+            {parkData.status.replace('_', ' ')}
+          </Badge>
+        )}
+      </div>
+    );
+  };
+
+  const renderRideDetails = (result: SearchResult) => {
+    if (result.type !== 'ride') return null;
+    const rideData = result.data as { category?: string; max_height_meters?: number; max_speed_kmh?: number; intensity_level?: string };
+    
+    return (
+      <div className="flex flex-wrap gap-2 mt-3">
+        {rideData?.category && (
+          <Badge variant="outline" className="text-xs">
+            {rideData.category.replace('_', ' ')}
+          </Badge>
+        )}
+        {rideData?.max_height_meters && (
+          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Ruler className="w-3 h-3" />
+            <MeasurementDisplay value={rideData.max_height_meters} type="height" className="inline" />
+          </div>
+        )}
+        {rideData?.max_speed_kmh && (
+          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Gauge className="w-3 h-3" />
+            <MeasurementDisplay value={rideData.max_speed_kmh} type="speed" className="inline" />
+          </div>
+        )}
+        {rideData?.intensity_level && (
+          <Badge variant="outline" className="text-xs">
+            {rideData.intensity_level}
+          </Badge>
+        )}
+      </div>
+    );
+  };
+
+  const renderCompanyDetails = (result: SearchResult) => {
+    if (result.type !== 'company') return null;
+    const companyData = result.data as { company_type?: string; founded_year?: number; headquarters_location?: string };
+    
+    return (
+      <div className="flex flex-wrap gap-2 mt-3">
+        {companyData?.company_type && (
+          <Badge variant="outline" className="text-xs">
+            {companyData.company_type.replace('_', ' ')}
+          </Badge>
+        )}
+        {companyData?.founded_year && (
+          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Calendar className="w-3 h-3" />
+            <span>Founded {companyData.founded_year}</span>
+          </div>
+        )}
+        {companyData?.headquarters_location && (
+          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Building className="w-3 h-3" />
+            <span>{companyData.headquarters_location}</span>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (loading && results.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  if (results.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-4">
+        {results.map((result) => (
+          <Card
+            key={result.id}
+            onClick={() => handleResultClick(result)}
+            className="group cursor-pointer hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 border-border/50 hover:border-primary/50"
+          >
+            <CardContent className="p-6">
+              <div className="flex gap-4">
+                {/* Image placeholder or actual image */}
+                <div className="flex-shrink-0">
+                  {result.image ? (
+                    <img
+                      src={result.image}
+                      alt={result.title}
+                      className="w-16 h-16 object-cover rounded-lg"
+                    />
+                  ) : (
+                    <div className="w-16 h-16 bg-muted rounded-lg flex items-center justify-center">
+                      {getTypeIcon(result.type, 'w-8 h-8')}
+                    </div>
+                  )}
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-2">
+                        <h3 className="font-semibold text-lg group-hover:text-primary transition-colors truncate">
+                          {result.title}
+                        </h3>
+                        <Badge variant="outline" className={`text-xs ${getTypeColor(result.type)}`}>
+                          {result.type}
+                        </Badge>
+                      </div>
+                      
+                      <p className="text-muted-foreground text-sm mb-2">
+                        {result.subtitle}
+                      </p>
+
+                      {/* Type-specific details */}
+                      {result.type === 'park' && renderParkDetails(result)}
+                      {result.type === 'ride' && renderRideDetails(result)}
+                      {result.type === 'company' && renderCompanyDetails(result)}
+                    </div>
+
+                    {/* Rating */}
+                    {result.rating && result.rating > 0 && (
+                      <div className="flex items-center gap-1 flex-shrink-0">
+                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                        <span className="text-sm font-medium">{result.rating.toFixed(1)}</span>
+                        {result.data?.review_count && (
+                          <span className="text-xs text-muted-foreground">
+                            ({result.data.review_count})
+                          </span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Load More Button */}
+      {hasMore && (
+        <div className="flex justify-center py-4">
+          <Button
+            onClick={onLoadMore}
+            variant="outline"
+            disabled={loading}
+            className="min-w-32"
+          >
+            {loading ? (
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
+            ) : (
+              'Load More'
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

src-old/components/search/MobileSearch.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { Search, X } from 'lucide-react';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { SearchResults } from './SearchResults';
+
+interface MobileSearchProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function MobileSearch({ open, onOpenChange }: MobileSearchProps) {
+  const [query, setQuery] = useState('');
+
+  const handleClose = () => {
+    setQuery('');
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="h-screen max-w-full p-0 gap-0 rounded-none">
+        <div className="flex flex-col h-full">
+          {/* Search Header */}
+          <div className="sticky top-0 z-10 bg-background border-b border-border p-3 sm:p-4 space-y-3">
+            <div className="flex items-center gap-2 min-w-0">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleClose}
+                className="shrink-0 h-11 w-11 min-w-[44px]"
+              >
+                <X className="h-5 w-5" />
+              </Button>
+              <div className="relative flex-1 min-w-0">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4 flex-shrink-0 pointer-events-none" />
+                <Input
+                  autoFocus
+                  placeholder="Search..."
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  className="pl-10 pr-3 h-11 text-sm w-full"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Search Results */}
+          <div className="flex-1 overflow-auto">
+            {query.length >= 1 ? (
+              <SearchResults query={query} onClose={handleClose} />
+            ) : (
+              <div className="p-6 space-y-4">
+                <div className="text-center py-12">
+                  <Search className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+                  <h3 className="text-lg font-semibold mb-2">Start searching</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Find parks, rides, and manufacturers
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src-old/components/search/SearchDropdown.tsx

@@ -0,0 +1,69 @@
+import { useState, useRef, useEffect } from 'react';
+import { Search } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { SearchResults } from './SearchResults';
+
+export function SearchDropdown() {
+  const [query, setQuery] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const searchRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setIsFocused(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setQuery(value);
+    setIsOpen(value.length >= 1);
+  };
+
+  const handleInputFocus = () => {
+    setIsFocused(true);
+    if (query.length >= 1) {
+      setIsOpen(true);
+    }
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setQuery('');
+    inputRef.current?.blur();
+  };
+
+  return (
+    <div ref={searchRef} className={`relative w-full min-w-0 transition-all duration-300 ${isFocused ? 'scale-105' : ''}`}>
+      <div className="relative w-full min-w-0">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4 flex-shrink-0" />
+        <Input
+          ref={inputRef}
+          id="search-input"
+          name="search"
+          placeholder="Search parks, rides..."
+          value={query}
+          onChange={handleInputChange}
+          onFocus={handleInputFocus}
+          className={`pl-10 pr-4 w-full bg-muted/50 border-border/50 focus:border-primary/50 transition-all duration-300 ${
+            isFocused ? 'shadow-lg shadow-primary/10' : ''
+          }`}
+        />
+      </div>
+      
+      {isOpen && (
+        <div className="absolute top-full mt-1 left-0 right-0 bg-popover border border-border rounded-lg shadow-xl z-[100] max-w-2xl">
+          <SearchResults query={query} onClose={handleClose} />
+        </div>
+      )}
+    </div>
+  );
+}

src-old/components/search/SearchFilters.tsx

@@ -0,0 +1,487 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Slider } from '@/components/ui/slider';
+import { Badge } from '@/components/ui/badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { ChevronDown, Filter, X } from 'lucide-react';
+import { Combobox } from '@/components/ui/combobox';
+import { useCountries, useStatesProvinces, useManufacturers, useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
+import { DateRangePicker, DateRange } from '@/components/ui/date-range-picker';
+import { AdvancedRideFilters, TechnicalSpecFilter, CoasterStatFilter } from './AdvancedRideFilters';
+
+export interface SearchFilters {
+  // Park filters
+  parkType?: string;
+  country?: string;
+  stateProvince?: string;
+  status?: string;
+  openingYearMin?: number;
+  openingYearMax?: number;
+  openingDateRange?: DateRange;
+  ratingMin?: number;
+  ratingMax?: number;
+  rideCountMin?: number;
+  rideCountMax?: number;
+  
+  // Ride filters
+  rideCategory?: string;
+  rideType?: string;
+  manufacturer?: string;
+  heightMin?: number;
+  heightMax?: number;
+  speedMin?: number;
+  speedMax?: number;
+  intensityLevel?: string;
+  rideDateRange?: DateRange;
+  technicalSpecFilters?: TechnicalSpecFilter[];
+  coasterStatFilters?: CoasterStatFilter[];
+  
+  // Company filters
+  companyType?: string;
+  foundedYearMin?: number;
+  foundedYearMax?: number;
+  companyDateRange?: DateRange;
+  headquarters?: string;
+}
+
+interface SearchFiltersProps {
+  filters: SearchFilters;
+  onFiltersChange: (filters: SearchFilters) => void;
+  activeTab: string;
+}
+
+export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }: SearchFiltersProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Fetch autocomplete data
+  const { countries, loading: countriesLoading } = useCountries();
+  const { statesProvinces, loading: statesLoading } = useStatesProvinces(filters.country);
+  const { manufacturers, loading: manufacturersLoading } = useManufacturers();
+  const { headquarters, loading: headquartersLoading } = useCompanyHeadquarters();
+
+  const updateFilter = (key: keyof SearchFilters, value: any) => {
+    onFiltersChange({ ...filters, [key]: value });
+  };
+
+  const clearFilters = () => {
+    onFiltersChange({});
+  };
+
+  const hasActiveFilters = Object.values(filters).some(value => value !== undefined && value !== '');
+
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <Card className="w-full">
+        <CollapsibleTrigger asChild>
+          <CardHeader className="cursor-pointer hover:bg-muted/50 transition-colors">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Filter className="w-5 h-5" />
+                <CardTitle className="text-lg">Filters</CardTitle>
+                {hasActiveFilters && (
+                  <Badge variant="secondary" className="ml-2">
+                    Active
+                  </Badge>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                {hasActiveFilters && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      clearFilters();
+                    }}
+                    className="text-xs"
+                  >
+                    <X className="w-4 h-4 mr-1" />
+                    Clear
+                  </Button>
+                )}
+                <ChevronDown className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+              </div>
+            </div>
+          </CardHeader>
+        </CollapsibleTrigger>
+        
+        <CollapsibleContent>
+          <CardContent className="space-y-6">
+            {/* Park Filters */}
+            {(activeTab === 'all' || activeTab === 'park') && (
+              <div className="space-y-4">
+                <h4 className="font-semibold text-primary">Park Filters</h4>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="parkType">Park Type</Label>
+                    <Select
+                      value={filters.parkType || ''}
+                      onValueChange={(value) => updateFilter('parkType', value || undefined)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="All types" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="theme_park">Theme Park</SelectItem>
+                        <SelectItem value="amusement_park">Amusement Park</SelectItem>
+                        <SelectItem value="water_park">Water Park</SelectItem>
+                        <SelectItem value="family_entertainment_center">Family Entertainment Center</SelectItem>
+                        <SelectItem value="indoor_park">Indoor Park</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="status">Status</Label>
+                    <Select
+                      value={filters.status || ''}
+                      onValueChange={(value) => updateFilter('status', value || undefined)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="All statuses" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="operating">Operating</SelectItem>
+                        <SelectItem value="closed">Closed</SelectItem>
+                        <SelectItem value="under_construction">Under Construction</SelectItem>
+                        <SelectItem value="seasonal">Seasonal</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label>Country</Label>
+                    <Combobox
+                      options={countries}
+                      value={filters.country}
+                      onValueChange={(value) => updateFilter('country', value || undefined)}
+                      placeholder="Select country"
+                      searchPlaceholder="Search countries..."
+                      loading={countriesLoading}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label>State/Province</Label>
+                    <Combobox
+                      options={statesProvinces}
+                      value={filters.stateProvince}
+                      onValueChange={(value) => updateFilter('stateProvince', value || undefined)}
+                      placeholder="Select state/province"
+                      searchPlaceholder="Search states/provinces..."
+                      loading={statesLoading}
+                      disabled={!filters.country}
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label>Opening Date Range</Label>
+                    <DateRangePicker
+                      value={filters.openingDateRange}
+                      onChange={(range) => updateFilter('openingDateRange', range)}
+                      placeholder="Select opening date range"
+                      disableFuture={true}
+                      fromYear={1800}
+                      presets={[
+                        {
+                          label: "Last 10 years",
+                          range: {
+                            from: new Date(new Date().getFullYear() - 10, 0, 1),
+                            to: new Date(),
+                          },
+                        },
+                        {
+                          label: "Last 25 years", 
+                          range: {
+                            from: new Date(new Date().getFullYear() - 25, 0, 1),
+                            to: new Date(),
+                          },
+                        },
+                        {
+                          label: "Before 2000",
+                          range: {
+                            from: new Date(1800, 0, 1),
+                            to: new Date(1999, 11, 31),
+                          },
+                        },
+                      ]}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label>Rating Range</Label>
+                      <Badge variant="outline">
+                        {filters.ratingMin || 0} - {filters.ratingMax || 5}
+                      </Badge>
+                    </div>
+                    <Slider
+                      value={[filters.ratingMin || 0, filters.ratingMax || 5]}
+                      onValueChange={([min, max]) => {
+                        updateFilter('ratingMin', min);
+                        updateFilter('ratingMax', max);
+                      }}
+                      min={0}
+                      max={5}
+                      step={0.1}
+                      className="w-full"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label>Number of Rides</Label>
+                      <Badge variant="outline">
+                        {filters.rideCountMin || 0} - {filters.rideCountMax || 100}+
+                      </Badge>
+                    </div>
+                    <Slider
+                      value={[filters.rideCountMin || 0, filters.rideCountMax || 100]}
+                      onValueChange={([min, max]) => {
+                        updateFilter('rideCountMin', min);
+                        updateFilter('rideCountMax', max);
+                      }}
+                      min={0}
+                      max={100}
+                      step={1}
+                      className="w-full"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Ride Filters */}
+            {(activeTab === 'all' || activeTab === 'ride') && (
+              <div className="space-y-4">
+                <h4 className="font-semibold text-secondary">Ride Filters</h4>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="rideCategory">Category</Label>
+                    <Select
+                      value={filters.rideCategory || ''}
+                      onValueChange={(value) => updateFilter('rideCategory', value || undefined)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="All categories" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="roller_coaster">Roller Coaster</SelectItem>
+                        <SelectItem value="flat_ride">Flat Ride</SelectItem>
+                        <SelectItem value="water_ride">Water Ride</SelectItem>
+                        <SelectItem value="dark_ride">Dark Ride</SelectItem>
+                        <SelectItem value="family_ride">Family Ride</SelectItem>
+                        <SelectItem value="thrill_ride">Thrill Ride</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="intensityLevel">Intensity Level</Label>
+                    <Select
+                      value={filters.intensityLevel || ''}
+                      onValueChange={(value) => updateFilter('intensityLevel', value || undefined)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="All levels" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="mild">Mild</SelectItem>
+                        <SelectItem value="moderate">Moderate</SelectItem>
+                        <SelectItem value="intense">Intense</SelectItem>
+                        <SelectItem value="extreme">Extreme</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Manufacturer</Label>
+                  <Combobox
+                    options={manufacturers}
+                    value={filters.manufacturer}
+                    onValueChange={(value) => updateFilter('manufacturer', value || undefined)}
+                    placeholder="Select manufacturer"
+                    searchPlaceholder="Search manufacturers..."
+                    loading={manufacturersLoading}
+                  />
+                </div>
+
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label>Opening Date Range</Label>
+                    <DateRangePicker
+                      value={filters.rideDateRange}
+                      onChange={(range) => updateFilter('rideDateRange', range)}
+                      placeholder="Select ride opening date range"
+                      disableFuture={true}
+                      fromYear={1800}
+                      presets={[
+                        {
+                          label: "Recent (last 5 years)",
+                          range: {
+                            from: new Date(new Date().getFullYear() - 5, 0, 1),
+                            to: new Date(),
+                          },
+                        },
+                        {
+                          label: "Modern era (2000+)",
+                          range: {
+                            from: new Date(2000, 0, 1),
+                            to: new Date(),
+                          },
+                        },
+                        {
+                          label: "Classic era (before 2000)",
+                          range: {
+                            from: new Date(1800, 0, 1),
+                            to: new Date(1999, 11, 31),
+                          },
+                        },
+                      ]}
+                    />
+                  </div>
+                  
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label>Height Range (meters)</Label>
+                      <Badge variant="outline">
+                        {filters.heightMin || 0}m - {filters.heightMax || 200}m
+                      </Badge>
+                    </div>
+                    <Slider
+                      value={[filters.heightMin || 0, filters.heightMax || 200]}
+                      onValueChange={([min, max]) => {
+                        updateFilter('heightMin', min);
+                        updateFilter('heightMax', max);
+                      }}
+                      min={0}
+                      max={200}
+                      step={1}
+                      className="w-full"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label>Speed Range (km/h)</Label>
+                      <Badge variant="outline">
+                        {filters.speedMin || 0} - {filters.speedMax || 200}+ km/h
+                      </Badge>
+                    </div>
+                    <Slider
+                      value={[filters.speedMin || 0, filters.speedMax || 200]}
+                      onValueChange={([min, max]) => {
+                        updateFilter('speedMin', min);
+                        updateFilter('speedMax', max);
+                      }}
+                      min={0}
+                      max={200}
+                      step={5}
+                      className="w-full"
+                    />
+                  </div>
+                </div>
+
+                {/* Advanced Ride Filters */}
+                <div className="pt-4 border-t">
+                  <AdvancedRideFilters
+                    technicalSpecFilters={filters.technicalSpecFilters || []}
+                    coasterStatFilters={filters.coasterStatFilters || []}
+                    onTechnicalSpecFiltersChange={(filters) => updateFilter('technicalSpecFilters', filters)}
+                    onCoasterStatFiltersChange={(filters) => updateFilter('coasterStatFilters', filters)}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Company Filters */}
+            {(activeTab === 'all' || activeTab === 'company') && (
+              <div className="space-y-4">
+                <h4 className="font-semibold text-accent">Company Filters</h4>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="companyType">Company Type</Label>
+                    <Select
+                      value={filters.companyType || ''}
+                      onValueChange={(value) => updateFilter('companyType', value || undefined)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="All types" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="manufacturer">Manufacturer</SelectItem>
+                        <SelectItem value="operator">Operator</SelectItem>
+                        <SelectItem value="designer">Designer</SelectItem>
+                        <SelectItem value="contractor">Contractor</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label>Headquarters</Label>
+                    <Combobox
+                      options={headquarters}
+                      value={filters.headquarters}
+                      onValueChange={(value) => updateFilter('headquarters', value || undefined)}
+                      placeholder="Select headquarters"
+                      searchPlaceholder="Search headquarters..."
+                      loading={headquartersLoading}
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Founded Date Range</Label>
+                  <DateRangePicker
+                    value={filters.companyDateRange}
+                    onChange={(range) => updateFilter('companyDateRange', range)}
+                    placeholder="Select founding date range"
+                    disableFuture={true}
+                    fromYear={1800}
+                    presets={[
+                      {
+                        label: "Founded after 2000",
+                        range: {
+                          from: new Date(2000, 0, 1),
+                          to: new Date(),
+                        },
+                      },
+                      {
+                        label: "Founded 1950-2000",
+                        range: {
+                          from: new Date(1950, 0, 1),
+                          to: new Date(1999, 11, 31),
+                        },
+                      },
+                      {
+                        label: "Founded before 1950",
+                        range: {
+                          from: new Date(1800, 0, 1),
+                          to: new Date(1949, 11, 31),
+                        },
+                      },
+                    ]}
+                  />
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </CollapsibleContent>
+      </Card>
+    </Collapsible>
+  );
+}

src-old/components/search/SearchResults.tsx

@@ -0,0 +1,204 @@
+import { useState, useEffect } from 'react';
+import { useDebouncedValue } from '@/hooks/useDebouncedValue';
+import { useGlobalSearch } from '@/hooks/search/useGlobalSearch';
+import { formatLocationShort } from '@/lib/locationFormatter';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { MapPin, Star, Search as SearchIcon, Castle, FerrisWheel, Waves, Theater, Factory } from 'lucide-react';
+import { Park, Ride, Company } from '@/types/database';
+import { supabase } from '@/lib/supabaseClient';
+import { useNavigate } from 'react-router-dom';
+import { getErrorMessage } from '@/lib/errorHandler';
+import { logger } from '@/lib/logger';
+
+interface SearchResultsProps {
+  query: string;
+  onClose: () => void;
+}
+
+type SearchResult = {
+  type: 'park' | 'ride' | 'company';
+  data: Park | Ride | Company;
+};
+
+export function SearchResults({ query, onClose }: SearchResultsProps) {
+  const navigate = useNavigate();
+  
+  // Debounce search query
+  const debouncedQuery = useDebouncedValue(query, 300);
+  
+  // Use global search hook with caching
+  const { data, isLoading: loading } = useGlobalSearch(debouncedQuery);
+  
+  // Flatten results
+  const results: SearchResult[] = [
+    ...(data?.parks || []).map(park => ({ type: 'park' as const, data: park })),
+    ...(data?.rides || []).map(ride => ({ type: 'ride' as const, data: ride })),
+    ...(data?.companies || []).map(company => ({ type: 'company' as const, data: company })),
+  ];
+
+  const handleResultClick = (result: SearchResult) => {
+    onClose();
+    
+    switch (result.type) {
+      case 'park':
+        navigate(`/parks/${(result.data as Park).slug}`);
+        break;
+      case 'ride':
+        const ride = result.data as Ride;
+        if (ride.park && typeof ride.park === 'object' && 'slug' in ride.park) {
+          navigate(`/parks/${ride.park.slug}/rides/${ride.slug}`);
+        }
+        break;
+      case 'company':
+        // Navigate to manufacturer page when implemented
+        break;
+    }
+  };
+
+  const getResultIcon = (result: SearchResult) => {
+    switch (result.type) {
+      case 'park':
+        const park = result.data as Park;
+        switch (park.park_type) {
+          case 'theme_park': return <Castle className="w-5 h-5" />;
+          case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
+          case 'water_park': return <Waves className="w-5 h-5" />;
+          default: return <FerrisWheel className="w-5 h-5" />;
+        }
+      case 'ride':
+        const ride = result.data as Ride;
+        switch (ride.category) {
+          case 'roller_coaster': return <FerrisWheel className="w-5 h-5" />;
+          case 'water_ride': return <Waves className="w-5 h-5" />;
+          case 'dark_ride': return <Theater className="w-5 h-5" />;
+          default: return <FerrisWheel className="w-5 h-5" />;
+        }
+      case 'company':
+        return <Factory className="w-5 h-5" />;
+    }
+  };
+
+  const getResultTitle = (result: SearchResult) => {
+    return result.data.name;
+  };
+
+  const getResultSubtitle = (result: SearchResult) => {
+    switch (result.type) {
+      case 'park':
+        const park = result.data as Park;
+        return park.location ? formatLocationShort(park.location) : 'Theme Park';
+      case 'ride':
+        const ride = result.data as Ride;
+        return ride.park && typeof ride.park === 'object' && 'name' in ride.park 
+          ? `at ${ride.park.name}` 
+          : 'Ride';
+      case 'company':
+        const company = result.data as Company;
+        return company.company_type.replace('_', ' ');
+    }
+  };
+
+  const getResultRating = (result: SearchResult) => {
+    if (result.type === 'park' || result.type === 'ride') {
+      const data = result.data as Park | Ride;
+      return (data.average_rating != null && data.average_rating > 0) ? data.average_rating : null;
+    }
+    return null;
+  };
+
+  if (query.length < 2) {
+    return (
+      <div className="p-6 text-center">
+        <SearchIcon className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
+        <p className="text-muted-foreground">
+          Start typing to search parks, rides, and manufacturers...
+        </p>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <div className="animate-pulse space-y-3">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="h-16 bg-muted rounded"></div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (results.length === 0) {
+    return (
+      <div className="p-6 text-center">
+        <SearchIcon className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
+        <p className="text-muted-foreground">
+          No results found for "{query}"
+        </p>
+        <p className="text-sm text-muted-foreground mt-1">
+          Try searching for park names, ride names, or locations
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-h-96 overflow-y-auto">
+      <div className="p-2 space-y-1">
+        {results.map((result, index) => (
+          <Card 
+            key={`${result.type}-${result.data.id}-${index}`}
+            className="cursor-pointer hover:bg-muted/50 transition-colors"
+            onClick={() => handleResultClick(result)}
+          >
+            <CardContent className="p-3">
+              <div className="flex items-center gap-3">
+                <div className="flex items-center justify-center">{getResultIcon(result)}</div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <h4 className="font-medium text-sm truncate">
+                      {getResultTitle(result)}
+                    </h4>
+                    <Badge variant="secondary" className="text-xs">
+                      {result.type}
+                    </Badge>
+                  </div>
+                  <p className="text-xs text-muted-foreground truncate">
+                    {getResultSubtitle(result)}
+                  </p>
+                </div>
+                {getResultRating(result) && (
+                  <div className="flex items-center gap-1">
+                    <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+                    <span className="text-xs font-medium">
+                      {getResultRating(result)?.toFixed(1)}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+      
+      {results.length > 0 && (
+        <div className="p-3 border-t">
+          <Button 
+            variant="outline" 
+            size="sm" 
+            className="w-full"
+            onClick={() => {
+              onClose();
+              navigate(`/search?q=${encodeURIComponent(query)}`);
+            }}
+          >
+            View all results for "{query}"
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

src-old/components/search/SearchSortOptions.tsx

@@ -0,0 +1,99 @@
+import { SortAsc, SortDesc, ArrowUpDown } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+
+export interface SortOption {
+  field: string;
+  direction: 'asc' | 'desc';
+}
+
+interface SearchSortOptionsProps {
+  sort: SortOption;
+  onSortChange: (sort: SortOption) => void;
+  activeTab: string;
+}
+
+export function SearchSortOptions({ sort, onSortChange, activeTab }: SearchSortOptionsProps) {
+  const getSortOptions = () => {
+    const commonOptions = [
+      { value: 'relevance', label: 'Relevance' },
+      { value: 'name', label: 'Name' },
+      { value: 'rating', label: 'Rating' },
+      { value: 'reviews', label: 'Review Count' },
+    ];
+
+    const parkOptions = [
+      ...commonOptions,
+      { value: 'rides', label: 'Ride Count' },
+      { value: 'coasters', label: 'Coaster Count' },
+      { value: 'opening', label: 'Opening Date' },
+    ];
+
+    const rideOptions = [
+      ...commonOptions,
+      { value: 'height', label: 'Height' },
+      { value: 'speed', label: 'Speed' },
+      { value: 'opening', label: 'Opening Date' },
+      { value: 'intensity', label: 'Intensity' },
+    ];
+
+    const companyOptions = [
+      ...commonOptions.filter(opt => opt.value !== 'rating'), // Companies might not have ratings
+      { value: 'founded', label: 'Founded Year' },
+      { value: 'parks', label: 'Parks Count' },
+      { value: 'rides', label: 'Rides Count' },
+    ];
+
+    switch (activeTab) {
+      case 'park':
+        return parkOptions;
+      case 'ride':
+        return rideOptions;
+      case 'company':
+        return companyOptions;
+      default:
+        return commonOptions;
+    }
+  };
+
+  const toggleDirection = () => {
+    onSortChange({
+      ...sort,
+      direction: sort.direction === 'asc' ? 'desc' : 'asc'
+    });
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <Select 
+        value={sort.field} 
+        onValueChange={(field) => onSortChange({ ...sort, field })}
+      >
+        <SelectTrigger className="w-48 bg-muted/50 border-border/50">
+          <ArrowUpDown className="w-4 h-4 mr-2" />
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {getSortOptions().map(option => (
+            <SelectItem key={option.value} value={option.value}>
+              Sort by {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={toggleDirection}
+        className="shrink-0 bg-muted/50 border-border/50"
+      >
+        {sort.direction === 'asc' ? (
+          <SortAsc className="w-4 h-4" />
+        ) : (
+          <SortDesc className="w-4 h-4" />
+        )}
+      </Button>
+    </div>
+  );
+}