Refactor: Replace emojis with Lucide React icons

src/pages/Manufacturers.tsx

@@ -5,7 +5,7 @@ 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, Globe, MapPin } from 'lucide-react';
+import { Search, Filter, SlidersHorizontal, Globe, MapPin, Factory, FerrisWheel, Ruler, Hammer, Building2 } from 'lucide-react';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { useNavigate } from 'react-router-dom';
@@ -59,11 +59,11 @@ export default function Manufacturers() {
 
   const getCompanyIcon = (type: string) => {
     switch (type) {
-      case 'manufacturer': return '🏭';
-      case 'operator': return '🎡';
-      case 'designer': return '📐';
-      case 'contractor': return '🔨';
-      default: return '🏢';
+      case 'manufacturer': return <Factory className="w-5 h-5" />;
+      case 'operator': return <FerrisWheel className="w-5 h-5" />;
+      case 'designer': return <Ruler className="w-5 h-5" />;
+      case 'contractor': return <Hammer className="w-5 h-5" />;
+      default: return <Building2 className="w-5 h-5" />;
     }
   };
 
@@ -107,7 +107,7 @@ export default function Manufacturers() {
         {/* Page Header */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
-            <div className="text-4xl">🏭</div>
+            <Factory className="w-10 h-10 text-primary" />
             <h1 className="text-4xl font-bold">Manufacturers & Companies</h1>
           </div>
           <p className="text-lg text-muted-foreground">
@@ -172,7 +172,7 @@ export default function Manufacturers() {
                   <div className="flex items-start justify-between">
                     <div className="flex-1">
                       <div className="flex items-center gap-2 mb-2">
-                        <span className="text-2xl">{getCompanyIcon(company.company_type)}</span>
+                        <span className="flex items-center">{getCompanyIcon(company.company_type)}</span>
                         <Badge variant="outline" className="text-xs">
                           {formatCompanyType(company.company_type)}
                         </Badge>
@@ -238,7 +238,7 @@ export default function Manufacturers() {
           </div>
         ) : (
           <div className="text-center py-12">
-            <div className="text-6xl mb-4">🏭</div>
+            <Factory className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
             <h3 className="text-xl font-semibold mb-2">No companies found</h3>
             <p className="text-muted-foreground">
               Try adjusting your search criteria or filters

src/pages/ParkDetail.tsx

@@ -16,7 +16,13 @@ import {
   ArrowLeft,
   Users,
   Zap,
-  Camera
+  Camera,
+  Castle,
+  FerrisWheel,
+  Waves,
+  Tent,
+  Theater,
+  Train
 } from 'lucide-react';
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { MeasurementDisplay } from '@/components/ui/measurement-display';
@@ -80,11 +86,11 @@ export default function ParkDetail() {
 
   const getParkTypeIcon = (type: string) => {
     switch (type) {
-      case 'theme_park': return '🏰';
-      case 'amusement_park': return '🎢';
-      case 'water_park': return '🏊';
-      case 'family_entertainment': return '🎪';
-      default: return '🎡';
+      case 'theme_park': return <Castle className="w-20 h-20" />;
+      case 'amusement_park': return <FerrisWheel className="w-20 h-20" />;
+      case 'water_park': return <Waves className="w-20 h-20" />;
+      case 'family_entertainment': return <Tent className="w-20 h-20" />;
+      default: return <FerrisWheel className="w-20 h-20" />;
     }
   };
 
@@ -96,13 +102,13 @@ export default function ParkDetail() {
 
   const getRideIcon = (category: string) => {
     switch (category) {
-      case 'roller_coaster': return '🎢';
-      case 'water_ride': return '🌊';
-      case 'dark_ride': return '🎭';
-      case 'flat_ride': return '🎡';
-      case 'kiddie_ride': return '🎠';
-      case 'transportation': return '🚂';
-      default: return '🎢';
+      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" />;
+      case 'flat_ride': return <FerrisWheel className="w-5 h-5" />;
+      case 'kiddie_ride': return <FerrisWheel className="w-5 h-5" />;
+      case 'transportation': return <Train className="w-5 h-5" />;
+      default: return <FerrisWheel className="w-5 h-5" />;
     }
   };
 
@@ -167,7 +173,7 @@ export default function ParkDetail() {
               />
             ) : (
               <div className="flex items-center justify-center h-full">
-                <div className="text-8xl opacity-50">
+                <div className="opacity-50">
                   {getParkTypeIcon(park.park_type)}
                 </div>
               </div>
@@ -235,7 +241,7 @@ export default function ParkDetail() {
           </Card>
           <Card>
             <CardContent className="p-4 text-center">
-              <div className="text-2xl font-bold">{getParkTypeIcon(park.park_type)}</div>
+              <div className="flex items-center justify-center mb-2">{getParkTypeIcon(park.park_type)}</div>
               <div className="text-sm text-muted-foreground">{formatParkType(park.park_type)}</div>
             </CardContent>
           </Card>
@@ -280,7 +286,7 @@ export default function ParkDetail() {
                           className="flex items-center gap-3 p-3 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors"
                           onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}
                         >
-                          <div className="text-2xl">{getRideIcon(ride.category)}</div>
+                          <div className="flex items-center">{getRideIcon(ride.category)}</div>
                           <div className="flex-1">
                             <h4 className="font-medium">{ride.name}</h4>
                             <p className="text-sm text-muted-foreground">
@@ -388,7 +394,7 @@ export default function ParkDetail() {
                 >
                   <CardContent className="p-4">
                     <div className="flex items-start gap-3 mb-3">
-                      <div className="text-2xl">{getRideIcon(ride.category)}</div>
+                      <div className="flex items-center">{getRideIcon(ride.category)}</div>
                       <div className="flex-1">
                         <h3 className="font-medium">{ride.name}</h3>
                         <p className="text-sm text-muted-foreground">

src/pages/Parks.tsx

@@ -14,7 +14,8 @@ import {
   Search,
   ChevronDown,
   Sliders,
-  X
+  X,
+  FerrisWheel
 } from 'lucide-react';
 import { Park } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
@@ -364,7 +365,7 @@ export default function Parks() {
           </div>
         ) : (
           <div className="text-center py-12">
-            <div className="text-6xl mb-4 opacity-50">🎢</div>
+            <FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
             <h3 className="text-xl font-semibold mb-2">No parks found</h3>
             <p className="text-muted-foreground mb-4">
               Try adjusting your search terms or filters

src/pages/RideDetail.tsx

@@ -19,7 +19,11 @@ import {
   Camera,
   Heart,
   RotateCcw,
-  AlertTriangle
+  AlertTriangle,
+  FerrisWheel,
+  Waves,
+  Theater,
+  Train
 } from 'lucide-react';
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { MeasurementDisplay } from '@/components/ui/measurement-display';
@@ -82,13 +86,13 @@ export default function RideDetail() {
 
   const getRideIcon = (category: string) => {
     switch (category) {
-      case 'roller_coaster': return '🎢';
-      case 'water_ride': return '🌊';
-      case 'dark_ride': return '🎭';
-      case 'flat_ride': return '🎡';
-      case 'kiddie_ride': return '🎠';
-      case 'transportation': return '🚂';
-      default: return '🎢';
+      case 'roller_coaster': return <FerrisWheel className="w-20 h-20" />;
+      case 'water_ride': return <Waves className="w-20 h-20" />;
+      case 'dark_ride': return <Theater className="w-20 h-20" />;
+      case 'flat_ride': return <FerrisWheel className="w-20 h-20" />;
+      case 'kiddie_ride': return <FerrisWheel className="w-20 h-20" />;
+      case 'transportation': return <Train className="w-20 h-20" />;
+      default: return <FerrisWheel className="w-20 h-20" />;
     }
   };
 
@@ -159,7 +163,7 @@ export default function RideDetail() {
               />
             ) : (
               <div className="flex items-center justify-center h-full">
-                <div className="text-8xl opacity-50">
+                <div className="opacity-50">
                   {getRideIcon(ride.category)}
                 </div>
               </div>
@@ -273,7 +277,7 @@ export default function RideDetail() {
           {ride.drop_height_meters && (
             <Card>
               <CardContent className="p-4 text-center">
-                <div className="text-2xl mb-2">⬇️</div>
+                <TrendingDown className="w-6 h-6 mx-auto mb-2 text-destructive" />
                 <div className="text-2xl font-bold text-destructive">
                   <MeasurementDisplay value={ride.drop_height_meters} type="distance" />
                 </div>
@@ -285,7 +289,7 @@ export default function RideDetail() {
           {ride.max_g_force && (
             <Card>
               <CardContent className="p-4 text-center">
-                <div className="text-2xl mb-2">⚡</div>
+                <Zap className="w-6 h-6 mx-auto mb-2 text-warning" />
                 <div className="text-2xl font-bold text-warning">{ride.max_g_force}g</div>
                 <div className="text-sm text-muted-foreground">max G-force</div>
               </CardContent>
@@ -352,7 +356,7 @@ export default function RideDetail() {
                   </CardHeader>
                   <CardContent className="space-y-4">
                     <div className="flex items-center gap-3">
-                      <div className="text-2xl">{getRideIcon(ride.category)}</div>
+                      <div className="flex items-center">{getRideIcon(ride.category)}</div>
                       <div>
                         <div className="font-medium">Category</div>
                         <div className="text-sm text-muted-foreground">

src/pages/Rides.tsx

@@ -4,7 +4,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
-import { Filter, SlidersHorizontal, Zap, Clock, Star } from 'lucide-react';
+import { Filter, SlidersHorizontal, Zap, Clock, Star, FerrisWheel, Waves, Theater, Train } from 'lucide-react';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
 import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { Ride } from '@/types/database';
@@ -77,13 +77,13 @@ export default function Rides() {
 
   const getRideIcon = (category: string) => {
     switch (category) {
-      case 'roller_coaster': return '🎢';
-      case 'water_ride': return '🌊';
-      case 'dark_ride': return '🎭';
-      case 'flat_ride': return '🎡';
-      case 'kiddie_ride': return '🎠';
-      case 'transportation': return '🚂';
-      default: return '🎢';
+      case 'roller_coaster': return <FerrisWheel className="w-16 h-16" />;
+      case 'water_ride': return <Waves className="w-16 h-16" />;
+      case 'dark_ride': return <Theater className="w-16 h-16" />;
+      case 'flat_ride': return <FerrisWheel className="w-16 h-16" />;
+      case 'kiddie_ride': return <FerrisWheel className="w-16 h-16" />;
+      case 'transportation': return <Train className="w-16 h-16" />;
+      default: return <FerrisWheel className="w-16 h-16" />;
     }
   };
 
@@ -146,7 +146,7 @@ export default function Rides() {
         {/* Page Header */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
-            <div className="text-4xl">🎢</div>
+            <FerrisWheel className="w-10 h-10 text-primary" />
             <h1 className="text-4xl font-bold">Rides & Attractions</h1>
           </div>
           <p className="text-lg text-muted-foreground">
@@ -233,7 +233,7 @@ export default function Rides() {
                         className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                       />
                     ) : (
-                      <div className="text-6xl opacity-50">
+                      <div className="opacity-50 flex items-center justify-center">
                         {getRideIcon(ride.category)}
                       </div>
                     )}
@@ -256,7 +256,7 @@ export default function Rides() {
                         <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
                           {ride.name}
                         </h3>
-                        <span className="text-xl">{getRideIcon(ride.category)}</span>
+                        <span className="flex items-center">{getRideIcon(ride.category)}</span>
                       </div>
                       
                       {ride.park?.name && (
@@ -327,7 +327,7 @@ export default function Rides() {
           </div>
         ) : (
           <div className="text-center py-12">
-            <div className="text-6xl mb-4">🎢</div>
+            <FerrisWheel className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
             <h3 className="text-xl font-semibold mb-2">No rides found</h3>
             <p className="text-muted-foreground">
               Try adjusting your search criteria or filters

src/pages/Search.tsx

@@ -5,7 +5,7 @@ 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 { Search, MapPin, Zap, Star, Castle, FerrisWheel, Factory } from 'lucide-react';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
 import { useSearch, SearchResult } from '@/hooks/useSearch';
 
@@ -59,10 +59,10 @@ export default function SearchPage() {
 
   const getTypeIcon = (type: string) => {
     switch (type) {
-      case 'park': return '🏰';
-      case 'ride': return '🎢';
-      case 'company': return '🏭';
-      default: return '🔍';
+      case 'park': return <Castle className="w-8 h-8" />;
+      case 'ride': return <FerrisWheel className="w-8 h-8" />;
+      case 'company': return <Factory className="w-8 h-8" />;
+      default: return <Search className="w-8 h-8" />;
     }
   };
 
@@ -151,7 +151,7 @@ export default function SearchPage() {
                   >
                     <CardContent className="p-6">
                       <div className="flex items-start gap-4">
-                        <div className="text-3xl">{getTypeIcon(result.type)}</div>
+                        <div className="flex items-center justify-center">{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">
@@ -198,7 +198,7 @@ export default function SearchPage() {
             {/* No Results */}
             {!loading && query && filteredResults.length === 0 && (
               <div className="text-center py-12">
-                <div className="text-6xl mb-4 opacity-50">🔍</div>
+                <Search className="w-16 h-16 mb-4 opacity-50 mx-auto" />
                 <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
@@ -220,7 +220,7 @@ export default function SearchPage() {
         {/* Initial State */}
         {!query && (
           <div className="text-center py-12">
-            <div className="text-6xl mb-4 opacity-50">🔍</div>
+            <Search className="w-16 h-16 mb-4 opacity-50 mx-auto" />
             <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