feat: Implement dynamic OG images

src/pages/ParkDetail.tsx

@@ -30,6 +30,7 @@ import { VersionIndicator } from '@/components/versioning/VersionIndicator';
 import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 export default function ParkDetail() {
   const {
@@ -52,6 +53,16 @@ export default function ParkDetail() {
   // Update document title when park changes
   useDocumentTitle(park?.name || 'Park Details');
   
+  // Update Open Graph meta tags
+  useOpenGraph({
+    title: park?.name || '',
+    description: park?.description || (park ? `${park.name} - A theme park${park.location ? ` in ${park.location.city}, ${park.location.country}` : ''}` : ''),
+    imageUrl: park?.banner_image_url,
+    imageId: park?.banner_image_id,
+    type: 'website',
+    enabled: !!park
+  });
+  
   const fetchPhotoCount = useCallback(async (parkId: string) => {
     try {
       const { count, error } = await supabase