feat: Implement modern search with autocomplete

src/components/homepage/SimpleHeroSearch.tsx

@@ -1,13 +1,8 @@
-import { useState } from 'react';
+import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
-import { Search } from 'lucide-react';
+
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
 export function SimpleHeroSearch() {
-  const [searchTerm, setSearchTerm] = useState('');
+  return (
-  const handleSearch = () => {
+    <section className="relative py-24 bg-gradient-to-br from-primary/10 via-secondary/5 to-accent/10">
-    console.log('Searching for:', searchTerm);
-  };
-  return <section className="relative py-24 bg-gradient-to-br from-primary/10 via-secondary/5 to-accent/10">
       <div className="container mx-auto px-4 text-center">
         <div className="max-w-4xl mx-auto space-y-8">
           <h1 className="text-5xl md:text-6xl font-bold leading-tight">
@@ -20,17 +15,18 @@ export function SimpleHeroSearch() {
             The ultimate theme park database. Discover parks, track rides, and connect with enthusiasts.
           </p>
           
-          {/* Simple Search */}
+          {/* Modern Autocomplete Search */}
           <div className="max-w-2xl mx-auto">
-            <div className="relative">
+            <AutocompleteSearch
-              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5" />
+              placeholder="Search parks, rides, or locations..."
-              <Input placeholder="Search parks, rides, or locations..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="pl-12 pr-24 h-14 text-lg bg-background border-border rounded-full shadow-lg" onKeyDown={e => e.key === 'Enter' && handleSearch()} />
+              variant="hero"
-              <Button onClick={handleSearch} className="absolute right-2 top-2 h-10 px-6 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-full">
+              types={['park', 'ride', 'company']}
-                Search
+              limit={6}
-              </Button>
+              showRecentSearches={true}
+            />
           </div>
         </div>
       </div>
-      </div>
+    </section>
-    </section>;
+  );
 }

src/components/parks/ParkSearch.tsx

@@ -1,38 +1,28 @@
-import { useState } from 'react';
+import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
-import { Search, X } from 'lucide-react';
+import { SearchResult } from '@/hooks/useSearch';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
 
 interface ParkSearchProps {
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
+  onResultSelect?: (result: SearchResult) => void;
 }
 
 export function ParkSearch({ 
   value, 
   onChange, 
-  placeholder = "Search parks, locations, descriptions..." 
+  placeholder = "Search parks, locations, descriptions...",
+  onResultSelect 
 }: ParkSearchProps) {
   return (
-    <div className="relative">
+    <AutocompleteSearch
-      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
-      <Input
       placeholder={placeholder}
-        value={value}
+      types={['park']}
-        onChange={(e) => onChange(e.target.value)}
+      limit={8}
-        className="pl-10 pr-10 bg-muted/50 border-border/50 focus:border-primary/50 transition-colors"
+      onSearch={(query) => onChange(query)}
+      onResultSelect={onResultSelect}
+      showRecentSearches={false}
+      className="w-full"
     />
-      {value && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => onChange('')}
-          className="absolute 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>
-      )}
-    </div>
   );
 }

src/components/search/AutocompleteSearch.tsx

@@ -0,0 +1,310 @@
+import { useRef, useEffect, useState } from 'react';
+import { Search, X, Clock, Zap } 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';
+
+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';
+}
+
+export function AutocompleteSearch({
+  onResultSelect,
+  onSearch,
+  placeholder = "Search parks, rides, or companies...",
+  className = "",
+  types = ['park', 'ride', 'company'],
+  limit = 8,
+  showRecentSearches = true,
+  variant = 'default'
+}: AutocompleteSearchProps) {
+  const navigate = useNavigate();
+  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);
+  };
+
+  const handleResultClick = (result: SearchResult | { id: string; type: string; title: string; subtitle: string; data: any }) => {
+    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
+      switch (searchResult.type) {
+        case 'park':
+          navigate(`/parks/${searchResult.slug || searchResult.id}`);
+          break;
+        case 'ride':
+          navigate(`/rides/${searchResult.id}`);
+          break;
+        case 'company':
+          navigate(`/companies/${searchResult.id}`);
+          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 '🏰';
+      case 'ride':
+        return '🎢';
+      case 'company':
+        return '🏭';
+      default:
+        return '🔍';
+    }
+  };
+
+  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 isHero = variant === 'hero';
+
+  return (
+    <div ref={searchRef} className={`relative ${className}`}>
+      <div className="relative">
+        <Search className={`absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground ${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={`${isHero ? 'pl-12 pr-24 h-14 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 ${isHero ? 'right-16 top-2 h-10 w-10' : '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-6 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-full"
+          >
+            Search
+          </Button>
+        )}
+      </div>
+
+      {isOpen && displayItems.length > 0 && (
+        <div className={`absolute top-full mt-1 left-0 right-0 bg-popover border border-border rounded-lg shadow-xl z-50 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.map((item, index) => (
+              <div
+                key={item.id}
+                onClick={() => handleResultClick(item)}
+                className={`flex items-center gap-3 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" />
+                    <div className="flex-1">
+                      <div className="font-medium">{item.title}</div>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div className="text-2xl">{getResultIcon(item as SearchResult)}</div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium truncate">{item.title}</span>
+                        <Badge variant="outline" className={`text-xs ${getTypeColor(item.type)}`}>
+                          {item.type}
+                        </Badge>
+                      </div>
+                      <div className="text-sm text-muted-foreground truncate">
+                        {item.subtitle}
+                      </div>
+                    </div>
+                    {(item as SearchResult).rating && (item as SearchResult).rating! > 0 && (
+                      <div className="flex items-center gap-1">
+                        <Zap className="w-3 h-3 text-yellow-500" />
+                        <span className="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>
+              </div>
+            )}
+
+            {query.length > 0 && results.length > 0 && (
+              <>
+                <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/hooks/useSearch.tsx

@@ -0,0 +1,204 @@
+import { useState, useEffect, useMemo } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { Park, Ride, Company } from '@/types/database';
+
+export interface SearchResult {
+  id: string;
+  type: 'park' | 'ride' | 'company';
+  title: string;
+  subtitle: string;
+  image?: string;
+  rating?: number;
+  slug?: string;
+  data: Park | Ride | Company;
+}
+
+interface UseSearchOptions {
+  types?: ('park' | 'ride' | 'company')[];
+  limit?: number;
+  minQuery?: number;
+  debounceMs?: number;
+}
+
+export function useSearch(options: UseSearchOptions = {}) {
+  const {
+    types = ['park', 'ride', 'company'],
+    limit = 10,
+    minQuery = 2,
+    debounceMs = 300
+  } = options;
+
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [recentSearches, setRecentSearches] = useState<string[]>([]);
+
+  // Debounced query
+  const [debouncedQuery, setDebouncedQuery] = useState('');
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedQuery(query);
+    }, debounceMs);
+
+    return () => clearTimeout(timer);
+  }, [query, debounceMs]);
+
+  // Load recent searches from localStorage
+  useEffect(() => {
+    const stored = localStorage.getItem('thrillwiki_recent_searches');
+    if (stored) {
+      setRecentSearches(JSON.parse(stored));
+    }
+  }, []);
+
+  // Search function
+  const search = async (searchQuery: string) => {
+    if (searchQuery.length < minQuery) {
+      setResults([]);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const searchResults: SearchResult[] = [];
+
+      // Search parks
+      if (types.includes('park')) {
+        const { data: parks } = await supabase
+          .from('parks')
+          .select(`
+            *,
+            location:locations(*),
+            operator:companies!parks_operator_id_fkey(*)
+          `)
+          .or(`name.ilike.%${searchQuery}%,description.ilike.%${searchQuery}%`)
+          .limit(Math.ceil(limit / types.length));
+
+        parks?.forEach((park) => {
+          searchResults.push({
+            id: park.id,
+            type: 'park',
+            title: park.name,
+            subtitle: `${park.location?.city || ''}, ${park.location?.country || ''}`.replace(/^, |, $/, ''),
+            image: park.banner_image_url || park.card_image_url,
+            rating: park.average_rating,
+            slug: park.slug,
+            data: park
+          });
+        });
+      }
+
+      // Search rides
+      if (types.includes('ride')) {
+        const { data: rides } = await supabase
+          .from('rides')
+          .select(`
+            *,
+            park:parks!inner(name, slug),
+            manufacturer:companies!rides_manufacturer_id_fkey(*)
+          `)
+          .or(`name.ilike.%${searchQuery}%,description.ilike.%${searchQuery}%`)
+          .limit(Math.ceil(limit / types.length));
+
+        rides?.forEach((ride) => {
+          searchResults.push({
+            id: ride.id,
+            type: 'ride',
+            title: ride.name,
+            subtitle: `at ${ride.park?.name || 'Unknown Park'}`,
+            image: ride.image_url,
+            rating: ride.average_rating,
+            data: ride
+          });
+        });
+      }
+
+      // Search companies
+      if (types.includes('company')) {
+        const { data: companies } = await supabase
+          .from('companies')
+          .select('*')
+          .or(`name.ilike.%${searchQuery}%,description.ilike.%${searchQuery}%`)
+          .limit(Math.ceil(limit / types.length));
+
+        companies?.forEach((company) => {
+          searchResults.push({
+            id: company.id,
+            type: 'company',
+            title: company.name,
+            subtitle: company.company_type?.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()) || 'Company',
+            image: company.logo_url,
+            data: company
+          });
+        });
+      }
+
+      // Sort by relevance (exact matches first, then partial matches)
+      searchResults.sort((a, b) => {
+        const aExact = a.title.toLowerCase().startsWith(searchQuery.toLowerCase());
+        const bExact = b.title.toLowerCase().startsWith(searchQuery.toLowerCase());
+        
+        if (aExact && !bExact) return -1;
+        if (!aExact && bExact) return 1;
+        
+        return a.title.localeCompare(b.title);
+      });
+
+      setResults(searchResults.slice(0, limit));
+    } catch (error) {
+      console.error('Search error:', error);
+      setResults([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Effect for debounced search
+  useEffect(() => {
+    if (debouncedQuery) {
+      search(debouncedQuery);
+    } else {
+      setResults([]);
+    }
+  }, [debouncedQuery]);
+
+  // Save search to recent searches
+  const saveSearch = (searchQuery: string) => {
+    if (!searchQuery.trim()) return;
+    
+    const updated = [searchQuery, ...recentSearches.filter(s => s !== searchQuery)].slice(0, 5);
+    setRecentSearches(updated);
+    localStorage.setItem('thrillwiki_recent_searches', JSON.stringify(updated));
+  };
+
+  // Clear recent searches
+  const clearRecentSearches = () => {
+    setRecentSearches([]);
+    localStorage.removeItem('thrillwiki_recent_searches');
+  };
+
+  // Get suggestions (recent searches when no query)
+  const suggestions = useMemo(() => {
+    if (query.length > 0) return [];
+    return recentSearches.map(search => ({
+      id: search,
+      type: 'suggestion' as const,
+      title: search,
+      subtitle: 'Recent search',
+      data: null
+    }));
+  }, [query, recentSearches]);
+
+  return {
+    query,
+    setQuery,
+    results,
+    suggestions,
+    loading,
+    recentSearches,
+    saveSearch,
+    clearRecentSearches,
+    search
+  };
+}

src/pages/Rides.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
 import { Header } from '@/components/layout/Header';
 import { Card, CardContent } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
-import { Search, Filter, SlidersHorizontal, Zap, Clock, Star } from 'lucide-react';
+import { Filter, SlidersHorizontal, Zap, Clock, Star } from 'lucide-react';
+import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
 import { Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { useNavigate } from 'react-router-dom';
@@ -160,13 +160,13 @@ export default function Rides() {
         {/* Search and Filters */}
         <div className="mb-8 space-y-4">
           <div className="flex flex-col md:flex-row gap-4">
-            <div className="relative flex-1">
+            <div className="flex-1">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+              <AutocompleteSearch
-              <Input
                 placeholder="Search rides by name, park, or manufacturer..."
-                value={searchQuery}
+                types={['ride']}
-                onChange={(e) => setSearchQuery(e.target.value)}
+                limit={8}
-                className="pl-10"
+                onSearch={(query) => setSearchQuery(query)}
+                showRecentSearches={false}
               />
             </div>
             <div className="flex gap-2">

src/pages/Search.tsx

@@ -0,0 +1,233 @@
+import { useState, useEffect } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { Header } from '@/components/layout/Header';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Search, MapPin, Zap, Star } from 'lucide-react';
+import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
+import { useSearch, SearchResult } from '@/hooks/useSearch';
+
+export default function SearchPage() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const initialQuery = searchParams.get('q') || '';
+  
+  const [activeTab, setActiveTab] = useState('all');
+  const { 
+    query, 
+    setQuery, 
+    results, 
+    loading,
+    search 
+  } = useSearch({ 
+    types: ['park', 'ride', 'company'], 
+    limit: 50 
+  });
+
+  useEffect(() => {
+    if (initialQuery) {
+      setQuery(initialQuery);
+    }
+  }, [initialQuery, setQuery]);
+
+  const filteredResults = results.filter(result => 
+    activeTab === 'all' || result.type === activeTab
+  );
+
+  const resultCounts = {
+    all: results.length,
+    park: results.filter(r => r.type === 'park').length,
+    ride: results.filter(r => r.type === 'ride').length,
+    company: results.filter(r => r.type === 'company').length
+  };
+
+  const handleResultClick = (result: SearchResult) => {
+    switch (result.type) {
+      case 'park':
+        navigate(`/parks/${result.slug || result.id}`);
+        break;
+      case 'ride':
+        navigate(`/rides/${result.id}`);
+        break;
+      case 'company':
+        navigate(`/companies/${result.id}`);
+        break;
+    }
+  };
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case 'park': return '🏰';
+      case 'ride': return '🎢';
+      case 'company': return '🏭';
+      default: return '🔍';
+    }
+  };
+
+  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';
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      
+      <main className="container mx-auto px-4 py-8">
+        {/* Search Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <Search className="w-8 h-8 text-primary" />
+            <h1 className="text-4xl font-bold">Search Results</h1>
+          </div>
+          
+          {query && (
+            <p className="text-lg text-muted-foreground mb-6">
+              Results for "{query}"
+            </p>
+          )}
+
+          {/* Search Bar */}
+          <div className="max-w-2xl">
+            <AutocompleteSearch
+              placeholder="Search parks, rides, or companies..."
+              types={['park', 'ride', 'company']}
+              limit={8}
+              onSearch={(newQuery) => {
+                const params = new URLSearchParams();
+                params.set('q', newQuery);
+                navigate(`/search?${params.toString()}`, { replace: true });
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Results */}
+        {query && (
+          <>
+            {/* Filter Tabs */}
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
+              <TabsList>
+                <TabsTrigger value="all">
+                  All ({resultCounts.all})
+                </TabsTrigger>
+                <TabsTrigger value="park">
+                  Parks ({resultCounts.park})
+                </TabsTrigger>
+                <TabsTrigger value="ride">
+                  Rides ({resultCounts.ride})
+                </TabsTrigger>
+                <TabsTrigger value="company">
+                  Companies ({resultCounts.company})
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+
+            {/* Loading State */}
+            {loading && (
+              <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>
+            )}
+
+            {/* Results Grid */}
+            {!loading && filteredResults.length > 0 && (
+              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {filteredResults.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 items-start gap-4">
+                        <div className="text-3xl">{getTypeIcon(result.type)}</div>
+                        <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-3 truncate">
+                            {result.subtitle}
+                          </p>
+
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                              {result.type === 'park' && (
+                                <div className="flex items-center gap-1">
+                                  <MapPin className="w-3 h-3 text-muted-foreground" />
+                                </div>
+                              )}
+                              {result.type === 'ride' && (
+                                <div className="flex items-center gap-1">
+                                  <Zap className="w-3 h-3 text-secondary" />
+                                </div>
+                              )}
+                            </div>
+                            
+                            {result.rating && result.rating > 0 && (
+                              <div className="flex items-center gap-1">
+                                <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+                                <span className="text-sm font-medium">{result.rating.toFixed(1)}</span>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            )}
+
+            {/* No Results */}
+            {!loading && query && filteredResults.length === 0 && (
+              <div className="text-center py-12">
+                <div className="text-6xl mb-4 opacity-50">🔍</div>
+                <h3 className="text-xl font-semibold mb-2">No results found</h3>
+                <p className="text-muted-foreground mb-4">
+                  Try searching for something else or adjust your search terms
+                </p>
+                <Button 
+                  onClick={() => {
+                    setQuery('');
+                    navigate('/search');
+                  }}
+                  variant="outline"
+                >
+                  Clear search
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Initial State */}
+        {!query && (
+          <div className="text-center py-12">
+            <div className="text-6xl mb-4 opacity-50">🔍</div>
+            <h3 className="text-xl font-semibold mb-2">Start your search</h3>
+            <p className="text-muted-foreground">
+              Search for theme parks, rides, or companies to get started
+            </p>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}