From 070ce33026206dfb5a2440f2de9337dd1206472d Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 29 Sep 2025 13:07:59 +0000
Subject: [PATCH] Visual edit in Lovable

---
 src/pages/ParkDetail.tsx | 269 +++++++++++++--------------------------
 1 file changed, 91 insertions(+), 178 deletions(-)

diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index 59da5712..7aaa368a 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -6,66 +6,44 @@ import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Separator } from '@/components/ui/separator';
-import { 
-  MapPin, 
-  Star, 
-  Clock, 
-  Phone, 
-  Globe, 
-  Calendar,
-  ArrowLeft,
-  Users,
-  Zap,
-  Camera,
-  Castle,
-  FerrisWheel,
-  Waves,
-  Tent,
-  Theater,
-  Train
-} from 'lucide-react';
+import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Camera, Castle, FerrisWheel, Waves, Tent, Theater, Train } from 'lucide-react';
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { Park, Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
-
 export default function ParkDetail() {
-  const { slug } = useParams<{ slug: string }>();
+  const {
+    slug
+  } = useParams<{
+    slug: string;
+  }>();
   const navigate = useNavigate();
   const [park, setPark] = useState<Park | null>(null);
   const [rides, setRides] = useState<Ride[]>([]);
   const [loading, setLoading] = useState(true);
-
   useEffect(() => {
     if (slug) {
       fetchParkData();
     }
   }, [slug]);
-
   const fetchParkData = async () => {
     try {
       // Fetch park details
-      const { data: parkData } = await supabase
-        .from('parks')
-        .select(`
+      const {
+        data: parkData
+      } = await supabase.from('parks').select(`
           *, 
           location:locations(*), 
           operator:companies!parks_operator_id_fkey(*),
           property_owner:companies!parks_property_owner_id_fkey(*)
-        `)
-        .eq('slug', slug)
-        .maybeSingle();
-
+        `).eq('slug', slug).maybeSingle();
       if (parkData) {
         setPark(parkData);
 
         // Fetch park rides
-        const { data: ridesData } = await supabase
-          .from('rides')
-          .select(`*`)
-          .eq('park_id', parkData.id)
-          .order('name');
-
+        const {
+          data: ridesData
+        } = await supabase.from('rides').select(`*`).eq('park_id', parkData.id).order('name');
         setRides(ridesData || []);
       }
     } catch (error) {
@@ -74,47 +52,55 @@ export default function ParkDetail() {
       setLoading(false);
     }
   };
-
   const getStatusColor = (status: string) => {
     switch (status) {
-      case 'operating': return 'bg-green-500/20 text-green-400 border-green-500/30';
-      case 'seasonal': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
-      case 'under_construction': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
-      default: return 'bg-red-500/20 text-red-400 border-red-500/30';
+      case 'operating':
+        return 'bg-green-500/20 text-green-400 border-green-500/30';
+      case 'seasonal':
+        return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+      case 'under_construction':
+        return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+      default:
+        return 'bg-red-500/20 text-red-400 border-red-500/30';
     }
   };
-
   const getParkTypeIcon = (type: string) => {
     switch (type) {
-      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" />;
+      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" />;
     }
   };
-
   const formatParkType = (type: string) => {
-    return type.split('_').map(word => 
-      word.charAt(0).toUpperCase() + word.slice(1)
-    ).join(' ');
+    return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
   };
-
   const getRideIcon = (category: string) => {
     switch (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" />;
-      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" />;
+      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" />;
     }
   };
-
   if (loading) {
-    return (
-      <div className="min-h-screen bg-background">
+    return <div className="min-h-screen bg-background">
         <Header />
         <div className="container mx-auto px-4 py-8">
           <div className="animate-pulse space-y-6">
@@ -123,13 +109,10 @@ export default function ParkDetail() {
             <div className="h-4 bg-muted rounded w-1/3"></div>
           </div>
         </div>
-      </div>
-    );
+      </div>;
   }
-
   if (!park) {
-    return (
-      <div className="min-h-screen bg-background">
+    return <div className="min-h-screen bg-background">
         <Header />
         <div className="container mx-auto px-4 py-8">
           <div className="text-center py-12">
@@ -143,21 +126,14 @@ export default function ParkDetail() {
             </Button>
           </div>
         </div>
-      </div>
-    );
+      </div>;
   }
-
-  return (
-    <div className="min-h-screen bg-background">
+  return <div className="min-h-screen bg-background">
       <Header />
       
       <main className="container mx-auto px-4 py-8">
         {/* Back Button */}
-        <Button 
-          variant="ghost" 
-          onClick={() => navigate('/parks')}
-          className="mb-6"
-        >
+        <Button variant="ghost" onClick={() => navigate('/parks')} className="mb-6">
           <ArrowLeft className="w-4 h-4 mr-2" />
           Back to Parks
         </Button>
@@ -165,19 +141,11 @@ export default function ParkDetail() {
         {/* Hero Section */}
         <div className="relative mb-8">
           <div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
-            {park.banner_image_url ? (
-              <img 
-                src={park.banner_image_url} 
-                alt={park.name}
-                className="w-full h-full object-cover"
-              />
-            ) : (
-              <div className="flex items-center justify-center h-full">
+            {park.banner_image_url ? <img src={park.banner_image_url} alt={park.name} className="w-full h-full object-cover" /> : <div className="flex items-center justify-center h-full">
                 <div className="opacity-50">
                   {getParkTypeIcon(park.park_type)}
                 </div>
-              </div>
-            )}
+              </div>}
             <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
             
             {/* Park Title Overlay */}
@@ -195,16 +163,13 @@ export default function ParkDetail() {
                   <h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
                     {park.name}
                   </h1>
-                  {park.location && (
-                    <div className="flex items-center text-white/90 text-lg">
+                  {park.location && <div className="flex items-center text-white/90 text-lg">
                       <MapPin className="w-5 h-5 mr-2" />
                       {park.location.city && `${park.location.city}, `}{park.location.country}
-                    </div>
-                  )}
+                    </div>}
                 </div>
                 
-                {park.average_rating > 0 && (
-                  <div className="bg-black/20 backdrop-blur-sm rounded-lg p-4 text-center">
+                {park.average_rating > 0 && <div className="bg-black/20 backdrop-blur-sm rounded-lg p-4 text-center">
                     <div className="flex items-center gap-2 text-white mb-1">
                       <Star className="w-5 h-5 fill-yellow-400 text-yellow-400" />
                       <span className="text-2xl font-bold">{park.average_rating.toFixed(1)}</span>
@@ -212,8 +177,7 @@ export default function ParkDetail() {
                     <div className="text-white/70 text-sm">
                       {park.review_count} reviews
                     </div>
-                  </div>
-                )}
+                  </div>}
               </div>
             </div>
           </div>
@@ -266,14 +230,12 @@ export default function ParkDetail() {
                     {park.review_count}
                   </div>
                   <div className="text-xs font-medium text-muted-foreground">Reviews</div>
-                  {park.average_rating > 0 && (
-                    <div className="flex items-center justify-center gap-1 mt-1">
+                  {park.average_rating > 0 && <div className="flex items-center justify-center gap-1 mt-1">
                       <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                       <span className="text-xs font-medium text-yellow-500">
                         {park.average_rating.toFixed(1)}
                       </span>
-                    </div>
-                  )}
+                    </div>}
                 </CardContent>
               </Card>
             </div>
@@ -288,12 +250,9 @@ export default function ParkDetail() {
                     </div>
                   </div>
                   <div className="text-xs font-medium text-foreground">
-                    {park.opening_date 
-                      ? `Opened ${new Date(park.opening_date).getFullYear()}`
-                      : 'Opening Soon'
-                    }
+                    {park.opening_date ? `Opened ${new Date(park.opening_date).getFullYear()}` : 'Opening Soon'}
                   </div>
-                  <div className="text-xs text-muted-foreground mt-0.5">Since</div>
+                  
                 </CardContent>
               </Card>
             </div>
@@ -313,8 +272,7 @@ export default function ParkDetail() {
             <div className="grid lg:grid-cols-3 gap-6">
               <div className="lg:col-span-2 space-y-6">
                 {/* Description */}
-                {park.description && (
-                  <Card>
+                {park.description && <Card>
                     <CardHeader>
                       <CardTitle>About {park.name}</CardTitle>
                     </CardHeader>
@@ -323,8 +281,7 @@ export default function ParkDetail() {
                         {park.description}
                       </p>
                     </CardContent>
-                  </Card>
-                )}
+                  </Card>}
 
                 {/* Top Rides Preview */}
                 <Card>
@@ -333,12 +290,7 @@ export default function ParkDetail() {
                   </CardHeader>
                   <CardContent>
                     <div className="grid md:grid-cols-2 gap-4">
-                      {rides.slice(0, 4).map((ride) => (
-                        <div 
-                          key={ride.id} 
-                          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}`)}
-                        >
+                      {rides.slice(0, 4).map(ride => <div key={ride.id} 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="flex items-center">{getRideIcon(ride.category)}</div>
                           <div className="flex-1">
                             <h4 className="font-medium">{ride.name}</h4>
@@ -346,14 +298,11 @@ export default function ParkDetail() {
                               {ride.category.replace('_', ' ')}
                             </p>
                           </div>
-                          {ride.average_rating > 0 && (
-                            <div className="flex items-center gap-1">
+                          {ride.average_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">{ride.average_rating.toFixed(1)}</span>
-                            </div>
-                          )}
-                        </div>
-                      ))}
+                            </div>}
+                        </div>)}
                     </div>
                   </CardContent>
                 </Card>
@@ -366,8 +315,7 @@ export default function ParkDetail() {
                     <CardTitle>Park Information</CardTitle>
                   </CardHeader>
                   <CardContent className="space-y-4">
-                    {park.opening_date && (
-                      <div className="flex items-center gap-3">
+                    {park.opening_date && <div className="flex items-center gap-3">
                         <Calendar className="w-4 h-4 text-muted-foreground" />
                         <div>
                           <div className="font-medium">Opened</div>
@@ -375,11 +323,9 @@ export default function ParkDetail() {
                             {new Date(park.opening_date).getFullYear()}
                           </div>
                         </div>
-                      </div>
-                    )}
+                      </div>}
 
-                    {park.operator && (
-                      <div className="flex items-center gap-3">
+                    {park.operator && <div className="flex items-center gap-3">
                         <Users className="w-4 h-4 text-muted-foreground" />
                         <div>
                           <div className="font-medium">Operator</div>
@@ -387,28 +333,19 @@ export default function ParkDetail() {
                             {park.operator.name}
                           </div>
                         </div>
-                      </div>
-                    )}
+                      </div>}
 
-                    {park.website_url && (
-                      <div className="flex items-center gap-3">
+                    {park.website_url && <div className="flex items-center gap-3">
                         <Globe className="w-4 h-4 text-muted-foreground" />
                         <div>
                           <div className="font-medium">Website</div>
-                          <a 
-                            href={park.website_url} 
-                            target="_blank" 
-                            rel="noopener noreferrer"
-                            className="text-sm text-primary hover:underline"
-                          >
+                          <a href={park.website_url} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline">
                             Visit Website
                           </a>
                         </div>
-                      </div>
-                    )}
+                      </div>}
 
-                    {park.phone && (
-                      <div className="flex items-center gap-3">
+                    {park.phone && <div className="flex items-center gap-3">
                         <Phone className="w-4 h-4 text-muted-foreground" />
                         <div>
                           <div className="font-medium">Phone</div>
@@ -416,20 +353,17 @@ export default function ParkDetail() {
                             {park.phone}
                           </div>
                         </div>
-                      </div>
-                    )}
+                      </div>}
 
                     <Separator />
 
                     <div className="space-y-2">
                       <div className="font-medium">Location</div>
-                      {park.location && (
-                        <div className="text-sm text-muted-foreground space-y-1">
+                      {park.location && <div className="text-sm text-muted-foreground space-y-1">
                           {park.location.city && <div>{park.location.city}</div>}
                           {park.location.state_province && <div>{park.location.state_province}</div>}
                           <div>{park.location.country}</div>
-                        </div>
-                      )}
+                        </div>}
                     </div>
                   </CardContent>
                 </Card>
@@ -439,12 +373,7 @@ export default function ParkDetail() {
 
           <TabsContent value="rides" className="mt-6">
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {rides.map((ride) => (
-                <Card 
-                  key={ride.id} 
-                  className="hover:shadow-lg transition-shadow cursor-pointer"
-                  onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}
-                >
+              {rides.map(ride => <Card key={ride.id} className="hover:shadow-lg transition-shadow cursor-pointer" onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}>
                   <CardContent className="p-4">
                     <div className="flex items-start gap-3 mb-3">
                       <div className="flex items-center">{getRideIcon(ride.category)}</div>
@@ -454,51 +383,36 @@ export default function ParkDetail() {
                           {ride.category.replace('_', ' ')}
                         </p>
                       </div>
-                      {ride.average_rating > 0 && (
-                        <div className="flex items-center gap-1">
+                      {ride.average_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">{ride.average_rating.toFixed(1)}</span>
-                        </div>
-                      )}
+                        </div>}
                     </div>
                     
-                    {ride.description && (
-                      <p className="text-sm text-muted-foreground line-clamp-2 mb-3">
+                    {ride.description && <p className="text-sm text-muted-foreground line-clamp-2 mb-3">
                         {ride.description}
-                      </p>
-                    )}
+                      </p>}
 
                     <div className="flex items-center justify-between text-xs">
                       <div className="flex items-center gap-2">
-                        {ride.max_speed_kmh && (
-                          <span className="bg-primary/10 text-primary px-2 py-1 rounded">
+                        {ride.max_speed_kmh && <span className="bg-primary/10 text-primary px-2 py-1 rounded">
                             <MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
-                          </span>
-                        )}
-                        {ride.max_height_meters && (
-                          <span className="bg-accent/10 text-accent px-2 py-1 rounded">
+                          </span>}
+                        {ride.max_height_meters && <span className="bg-accent/10 text-accent px-2 py-1 rounded">
                             <MeasurementDisplay value={ride.max_height_meters} type="distance" />
-                          </span>
-                        )}
+                          </span>}
                       </div>
                       <Badge variant="outline" className="text-xs">
                         {ride.status}
                       </Badge>
                     </div>
                   </CardContent>
-                </Card>
-              ))}
+                </Card>)}
             </div>
           </TabsContent>
 
           <TabsContent value="reviews" className="mt-6">
-            <ReviewsSection
-              entityType="park"
-              entityId={park.id}
-              entityName={park.name}
-              averageRating={park.average_rating}
-              reviewCount={park.review_count}
-            />
+            <ReviewsSection entityType="park" entityId={park.id} entityName={park.name} averageRating={park.average_rating} reviewCount={park.review_count} />
           </TabsContent>
 
           <TabsContent value="photos" className="mt-6">
@@ -512,6 +426,5 @@ export default function ParkDetail() {
           </TabsContent>
         </Tabs>
       </main>
-    </div>
-  );
+    </div>;
 }
\ No newline at end of file