first version of the cruise lovers app, build 1.0.1, ready to be published on the app store

app/(tabs)/contactos/index.tsx

@@ -1,3 +1,5 @@
+import { ContactMapPreview } from '@/assets/components/ContactMapPreview';
+import { LoadingSpinner } from '@/assets/components/LoadingSpinner';
 import { API_ENDPOINTS, buildApiUrl } from '@/assets/config/api';
 import { useAuth } from '@/assets/contexts/useAuth';
 import { cacheContacts, getCachedContacts } from '@/assets/services/offlineStorage';
@@ -7,16 +9,15 @@ import styles from '@/styles/screens/tabs/contactos.styles';
 import { FontAwesome } from '@expo/vector-icons';
 import * as Clipboard from 'expo-clipboard';
 import { useEffect, useState } from 'react';
-import { LoadingSpinner } from '@/assets/components/LoadingSpinner';
 import {
-  Alert,
-  Image,
-  Linking,
-  Pressable,
-  RefreshControl,
-  ScrollView,
-  Text,
-  View,
+    Alert,
+    Image,
+    Linking,
+    Pressable,
+    RefreshControl,
+    ScrollView,
+    Text,
+    View,
 } from 'react-native';
 // ─── helpers ──────────────────────────────────────────────────────────────────
 
@@ -77,7 +78,6 @@ const parseCoords = (raw?: string | null): { lat: number; lng: number } | null =
   return null;
 };
 
-
 const parseHorarios = (raw: string): { dia: string; horas: string }[] => {
   return raw
     .split('\n')
@@ -114,9 +114,6 @@ export default function Contactos() {
   const [isLoading, setIsLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [mapLoading, setMapLoading] = useState(true);
-  const [mapError, setMapError] = useState(false);
-
   const fetchContacts = async () => {
     // 1. Mostrar cache imediatamente enquanto atualiza em fundo
     const cached = await getCachedContacts();
@@ -138,8 +135,6 @@ export default function Contactos() {
 
       const data: ContactResponse = await response.json();
 
-      console.log('data', data);
-
       if (data.status === 200 && data.contact) {
         const validSocials = (data.socials || []).filter((s) => s.value?.trim());
         setContactData(data.contact);
@@ -186,9 +181,6 @@ export default function Contactos() {
 
   const horarios = contactData?.horarios ? parseHorarios(contactData.horarios) : [];
   const coords = parseCoords(contactData?.coordenadas);
-  const mapUrl = coords
-    ? `https://staticmap.openstreetmap.de/staticmap.php?center=${coords.lat},${coords.lng}&zoom=15&size=600x300&markers=${coords.lat},${coords.lng},red-pushpin`
-    : null;
 
   return (
     <View style={styles.container}>
@@ -249,30 +241,13 @@ export default function Contactos() {
           <View style={styles.card}>
             <Text style={styles.cardTitle}>Localização</Text>
 
-            {!!mapUrl && (
-              <Pressable
-                onPress={() => openMaps(contactData.address, coords?.lat, coords?.lng)}
-                style={styles.mapImageWrap}>
-                <Image
-                  source={{ uri: mapUrl }}
-                  style={styles.mapImage}
-                  resizeMode="cover"
-                  onLoadStart={() => { setMapLoading(true); setMapError(false); }}
-                  onLoad={() => setMapLoading(false)}
-                  onError={() => { setMapLoading(false); setMapError(true); }}
-                />
-                {mapLoading && !mapError && (
-                  <View style={styles.mapOverlay}>
-                    <LoadingSpinner size="small" />
-                  </View>
-                )}
-                {mapError && (
-                  <View style={styles.mapOverlay}>
-                    <FontAwesome name="map-marker" size={28} color={colors.vermelho} />
-                    <Text style={styles.mapErrorText}>Mapa indisponível</Text>
-                  </View>
-                )}
-              </Pressable>
+            {coords && (
+              <ContactMapPreview
+                lat={coords.lat}
+                lng={coords.lng}
+                title={contactData.address}
+                onPress={() => openMaps(contactData.address, coords.lat, coords.lng)}
+              />
             )}
 
             <View style={styles.addressRow}>