Reverted to commit 0091584677

src/components/homepage/FeaturedParks.tsx

@@ -1,12 +1,54 @@
+import { useState, useEffect } from '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';
 import { Park } from '@/types/database';
-import { useFeaturedParks } from '@/hooks/homepage/useFeaturedParks';
+import { supabase } from '@/integrations/supabase/client';
+import { getErrorMessage } from '@/lib/errorHandler';
+import { logger } from '@/lib/logger';
 
 export function FeaturedParks() {
-  const { topRated, mostRides } = useFeaturedParks();
+  const [topRatedParks, setTopRatedParks] = useState<Park[]>([]);
+  const [mostRidesParks, setMostRidesParks] = useState<Park[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchFeaturedParks();
+  }, []);
+
+  const fetchFeaturedParks = async () => {
+    try {
+      // Fetch top rated parks
+      const { data: topRated } = await supabase
+        .from('parks')
+        .select(`
+          *,
+          location:locations(*),
+          operator:companies!parks_operator_id_fkey(*)
+        `)
+        .order('average_rating', { ascending: false })
+        .limit(3);
+
+      // Fetch parks with most rides
+      const { data: mostRides } = await supabase
+        .from('parks')
+        .select(`
+          *,
+          location:locations(*),
+          operator:companies!parks_operator_id_fkey(*)
+        `)
+        .order('ride_count', { ascending: false })
+        .limit(3);
+
+      setTopRatedParks(topRated || []);
+      setMostRidesParks(mostRides || []);
+    } catch (error: unknown) {
+      logger.error('Failed to fetch featured parks', { error: getErrorMessage(error) });
+    } finally {
+      setLoading(false);
+    }
+  };
 
   const FeaturedParkCard = ({ park, icon: Icon, label }: { park: Park; icon: any; label: string }) => (
     <Card className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 cursor-pointer hover:scale-[1.02]">
@@ -63,7 +105,7 @@ export function FeaturedParks() {
     </Card>
   );
 
-  if (topRated.isLoading || mostRides.isLoading) {
+  if (loading) {
     return (
       <section className="py-12">
         <div className="container mx-auto px-4">