feat: Implement modern search with autocomplete

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">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
-              <Input
+            <div className="flex-1">
+              <AutocompleteSearch
                 placeholder="Search rides by name, park, or manufacturer..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10"
+                types={['ride']}
+                limit={8}
+                onSearch={(query) => setSearchQuery(query)}
+                showRecentSearches={false}
               />
             </div>
             <div className="flex gap-2">