Refactor: Replace emojis with Lucide React icons

src/components/homepage/ContentTabs.tsx

@@ -4,7 +4,7 @@ import { ParkCard } from '@/components/parks/ParkCard';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Star, TrendingUp, Plus, MapPin, Clock, Zap } from 'lucide-react';
+import { Star, TrendingUp, Plus, MapPin, Clock, Zap, FerrisWheel, Waves, Theater, Train } from 'lucide-react';
 import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { Park, Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
@@ -81,13 +81,13 @@ export function ContentTabs() {
 
   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-6 h-6" />;
+      case 'water_ride': return <Waves className="w-6 h-6" />;
+      case 'dark_ride': return <Theater className="w-6 h-6" />;
+      case 'flat_ride': return <FerrisWheel className="w-6 h-6" />;
+      case 'kiddie_ride': return <FerrisWheel className="w-6 h-6" />;
+      case 'transportation': return <Train className="w-6 h-6" />;
+      default: return <FerrisWheel className="w-6 h-6" />;
     }
   };
 
@@ -120,7 +120,7 @@ export function ContentTabs() {
               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>
           )}
@@ -143,7 +143,7 @@ export function ContentTabs() {
               <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 && (

src/components/homepage/FeaturedParks.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Star, TrendingUp, Award } from 'lucide-react';
+import { Star, TrendingUp, Award, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -53,10 +53,10 @@ export function FeaturedParks() {
       <div className="relative">
         {/* Gradient Background */}
         <div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
-          <div className="text-6xl opacity-50">
-            {park.park_type === 'theme_park' ? '🏰' : 
-             park.park_type === 'amusement_park' ? '🎢' :
-             park.park_type === 'water_park' ? '🏊' : '🎪'}
+          <div className="opacity-50">
+            {park.park_type === 'theme_park' ? <Castle className="w-16 h-16" /> : 
+             park.park_type === 'amusement_park' ? <FerrisWheel className="w-16 h-16" /> :
+             park.park_type === 'water_park' ? <Waves className="w-16 h-16" /> : <Tent className="w-16 h-16" />}
           </div>
           <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
           
@@ -88,7 +88,10 @@ export function FeaturedParks() {
             <div className="flex items-center justify-between text-sm">
               <div className="flex items-center gap-3">
                 <span className="text-primary font-medium">{park.ride_count} rides</span>
-                <span className="text-accent font-medium">{park.coaster_count} 🎢</span>
+                <div className="flex items-center gap-1">
+                  <span className="text-accent font-medium">{park.coaster_count}</span>
+                  <FerrisWheel className="w-3 h-3 text-accent" />
+                </div>
               </div>
               <div className="text-xs text-muted-foreground">
                 {park.review_count} reviews

src/components/layout/Header.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Search, Menu, Zap, MapPin, Star, ChevronDown, Building, Users, Crown, Palette, Shield } from 'lucide-react';
+import { Search, Menu, Zap, MapPin, Star, ChevronDown, Building, Users, Crown, Palette, Shield, FerrisWheel, Factory } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
@@ -40,10 +40,12 @@ export function Header() {
                   Parks
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={() => navigate('/rides')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
-                  🎢 <span className="ml-2">Rides</span>
+                  <FerrisWheel className="w-4 h-4 mr-2" />
+                  Rides
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={() => navigate('/manufacturers')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
-                  🏭 <span className="ml-2">Manufacturers</span>
+                  <Factory className="w-4 h-4 mr-2" />
+                  Manufacturers
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={() => navigate('/operators')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
                   <Building className="w-4 h-4 mr-2" />
@@ -96,10 +98,12 @@ export function Header() {
                   Parks
                 </Button>
                 <Button variant="ghost" className="justify-start" onClick={() => navigate('/rides')}>
-                  🎢 Rides
+                  <FerrisWheel className="w-4 h-4 mr-2" />
+                  Rides
                 </Button>
                 <Button variant="ghost" className="justify-start" onClick={() => navigate('/manufacturers')}>
-                  🏭 Manufacturers
+                  <Factory className="w-4 h-4 mr-2" />
+                  Manufacturers
                 </Button>
                 <Button variant="ghost" className="justify-start" onClick={() => navigate('/operators')}>
                   <Building className="w-4 h-4 mr-2" />

src/components/parks/ParkCard.tsx

@@ -1,4 +1,4 @@
-import { MapPin, Star, Users, Clock } from 'lucide-react';
+import { MapPin, Star, Users, Clock, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -21,11 +21,11 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
 
   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-5 h-5" />;
+      case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
+      case 'water_park': return <Waves className="w-5 h-5" />;
+      case 'family_entertainment': return <Tent className="w-5 h-5" />;
+      default: return <FerrisWheel className="w-5 h-5" />;
     }
   };
 
@@ -50,7 +50,7 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
               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">
               {getParkTypeIcon(park.park_type)}
             </div>
           )}
@@ -73,7 +73,7 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
               <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
                 {park.name}
               </h3>
-              <span className="text-xl">{getParkTypeIcon(park.park_type)}</span>
+              {getParkTypeIcon(park.park_type)}
             </div>
             
             {park.location && (
@@ -105,7 +105,7 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
               </div>
               <div className="flex items-center gap-1">
                 <span className="text-accent font-medium">{park.coaster_count}</span>
-                <span className="text-muted-foreground">🎢</span>
+                <FerrisWheel className="w-3 h-3 text-muted-foreground" />
               </div>
             </div>
             

src/components/parks/ParkGrid.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Search, Filter, MapPin, SlidersHorizontal } from 'lucide-react';
+import { Search, Filter, MapPin, SlidersHorizontal, FerrisWheel } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -240,7 +240,7 @@ export function ParkGrid() {
       {/* Parks Grid */}
       {filteredParks.length === 0 ? (
         <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/components/parks/ParkListView.tsx

@@ -1,4 +1,4 @@
-import { MapPin, Star, Users, Calendar, ExternalLink } from 'lucide-react';
+import { MapPin, Star, Users, Calendar, ExternalLink, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -21,11 +21,11 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
 
   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-5 h-5" />;
+      case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
+      case 'water_park': return <Waves className="w-5 h-5" />;
+      case 'family_entertainment': return <Tent className="w-5 h-5" />;
+      default: return <FerrisWheel className="w-5 h-5" />;
     }
   };
 
@@ -55,7 +55,7 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
                   />
                 ) : (
                   <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center">
-                    <span className="text-3xl opacity-50">
+                    <span className="opacity-50">
                       {getParkTypeIcon(park.park_type)}
                     </span>
                   </div>
@@ -79,7 +79,7 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
                         <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
                           {park.name}
                         </h3>
-                        <span className="text-lg">{getParkTypeIcon(park.park_type)}</span>
+                        {getParkTypeIcon(park.park_type)}
                       </div>
                       
                       {park.location && (
@@ -132,7 +132,7 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
                     </div>
                     <div className="flex items-center gap-1">
                       <span className="text-accent font-medium">{park.coaster_count || 0}</span>
-                      <span className="text-muted-foreground">🎢</span>
+                      <FerrisWheel className="w-3 h-3 text-muted-foreground" />
                     </div>
                     {park.review_count > 0 && (
                       <div className="flex items-center gap-1">

src/components/search/AutocompleteSearch.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState } from 'react';
-import { Search, X, Clock, Zap } from 'lucide-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';
@@ -161,13 +161,13 @@ export function AutocompleteSearch({
   const getResultIcon = (result: SearchResult) => {
     switch (result.type) {
       case 'park':
-        return '🏰';
+        return <Castle className="w-5 h-5" />;
       case 'ride':
-        return '🎢';
+        return <FerrisWheel className="w-5 h-5" />;
       case 'company':
-        return '🏭';
+        return <Factory className="w-5 h-5" />;
       default:
-        return '🔍';
+        return <Search className="w-5 h-5" />;
     }
   };
 
@@ -260,7 +260,7 @@ export function AutocompleteSearch({
                   </>
                 ) : (
                   <>
-                    <div className="text-2xl">{getResultIcon(item as SearchResult)}</div>
+                    <div className="flex items-center justify-center">{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>

src/components/search/SearchResults.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 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 } from 'lucide-react';
+import { MapPin, Star, Search as SearchIcon, Castle, FerrisWheel, Waves, Theater, Factory } from 'lucide-react';
 import { Park, Ride, Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { useNavigate } from 'react-router-dom';
@@ -95,21 +95,21 @@ export function SearchResults({ query, onClose }: SearchResultsProps) {
       case 'park':
         const park = result.data as Park;
         switch (park.park_type) {
-          case 'theme_park': return '🏰';
-          case 'amusement_park': return '🎢';
-          case 'water_park': return '🏊';
-          default: return '🎡';
+          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 '🎢';
-          case 'water_ride': return '🌊';
-          case 'dark_ride': 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" />;
+          default: return <FerrisWheel className="w-5 h-5" />;
         }
       case 'company':
-        return '🏭';
+        return <Factory className="w-5 h-5" />;
     }
   };
 
@@ -189,7 +189,7 @@ export function SearchResults({ query, onClose }: SearchResultsProps) {
           >
             <CardContent className="p-3">
               <div className="flex items-center gap-3">
-                <div className="text-2xl">{getResultIcon(result)}</div>
+                <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">