@xetwa/design-system 1.0.2

package/src/components/Navigation/WorldProgressMap/WorldProgressMap.tsx

@@ -0,0 +1,790 @@
+import { useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, ScrollView, TouchableOpacity, Animated, Easing, Platform } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import Svg, { Circle, Line, Path } from 'react-native-svg';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Flag } from '../../DataDisplay/Flag/Flag';
+import { BackButton } from '../../Buttons/BackButton/BackButton';
+import { JourneyButton } from '../../Buttons/JourneyButton/JourneyButton';
+import { FlightIcon } from '../../Cards/BoardingPassCard/FlightIcon';
+import { Typography } from '../../Typography/Typography';
+
+export interface WorldMapStation {
+  id: number;
+  label: string;
+  levelCode: 'A1' | 'A2' | 'B1' | 'B2' | 'C1';
+  countryCode: string; // E.g., 'FR', 'BE', 'CH', 'CA', 'SN', 'CI', etc.
+  status: 'visited' | 'current' | 'locked';
+  x: number; // 0 to 1200 coordinates
+  y: number; // 0 to 800 coordinates
+}
+
+export interface WorldProgressMapProps {
+  title?: string;
+  subtitle?: string;
+  stations: WorldMapStation[];
+  activeStationId: number;
+  onStationPress?: (station: WorldMapStation) => void;
+  onContinuePress?: (currentStation: WorldMapStation) => void;
+  onBackPress?: () => void;
+  onFlightPress?: () => void;
+  height?: number | string; // Custom height constraint
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const WorldProgressMap = ({
+  title = 'A ROTA DA FRANCOFONIA',
+  subtitle,
+  stations = [],
+  activeStationId,
+  onStationPress,
+  onContinuePress,
+  onBackPress,
+  onFlightPress,
+  height,
+  style,
+}: WorldProgressMapProps) => {
+  const { scale, scaleText, width } = useResponsive();
+  const [scrollReady, setScrollReady] = useState(false);
+  const scrollViewRefH = useRef<ScrollView>(null);
+  const scrollViewRefV = useRef<ScrollView>(null);
+
+  // Responsive configurations
+  // We define a fixed large canvas for the geographical map so it can be scrolled
+  const mapWidth = scale(1200);
+  const mapHeight = scale(800);
+  let nodeSize = 56;
+  let headerTitleSize = 14;
+  let headerSubtitleSize = 20;
+
+  // Animations
+  const pathAnim = useRef(new Animated.Value(0)).current;
+  const pulseAnim = useRef(new Animated.Value(0)).current;
+  const bobAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    // 1. Path drawing animation
+    pathAnim.setValue(0);
+    Animated.timing(pathAnim, {
+      toValue: 1,
+      duration: 1200,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: false,
+    }).start();
+
+    // 2. Pulse looping animation
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnim, {
+          toValue: 1,
+          duration: 1800,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: false,
+        }),
+        Animated.timing(pulseAnim, {
+          toValue: 0,
+          duration: 0,
+          useNativeDriver: false,
+        }),
+      ])
+    ).start();
+
+    // 3. Airplane bobbing animation
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(bobAnim, {
+          toValue: 1,
+          duration: 1200,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(bobAnim, {
+          toValue: 0,
+          duration: 1200,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, [stations, pathAnim, pulseAnim, bobAnim]);
+
+  // Layout positions resolver - scales the 1200x800 coordinate system using useResponsive
+  const points = stations.map((station) => ({
+    ...station,
+    x: scale(station.x),
+    y: scale(station.y),
+  }));
+
+  const activeStation = stations.find((s) => s.id === activeStationId) || stations[0];
+  const activeIndex = points.findIndex((p) => p.id === activeStationId);
+  const activePoint = points[activeIndex] || points[0];
+
+  // Auto-scroll to active station on load
+  useEffect(() => {
+    if (activePoint && scrollViewRefH.current && scrollViewRefV.current && scrollReady) {
+      setTimeout(() => {
+        // Center horizontally
+        scrollViewRefH.current?.scrollTo({
+          x: Math.max(0, activePoint.x - width / 2),
+          animated: true,
+        });
+        // Center vertically (roughly, we assume typical height is ~800, scale 400 is half)
+        scrollViewRefV.current?.scrollTo({
+          y: Math.max(0, activePoint.y - scale(400)),
+          animated: true,
+        });
+      }, 300);
+    }
+  }, [activePoint, scrollReady, width, scale]);
+
+  // Dynamic curve string builder for connections
+  const buildCurveD = () => {
+    if (points.length < 2) return '';
+    let d = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 0; i < points.length - 1; i++) {
+      const p0 = points[i];
+      const p1 = points[i + 1];
+      const cp1x = p0.x + (p1.x - p0.x) * 0.5;
+      const cp1y = p0.y - scale(40); // slight upward curve
+      const cp2x = p0.x + (p1.x - p0.x) * 0.5;
+      const cp2y = p1.y - scale(40);
+      d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p1.x} ${p1.y}`;
+    }
+    return d;
+  };
+
+  const pathD = buildCurveD();
+
+  // Animation values interpolation
+  const pulseScale = pulseAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 1.7],
+  });
+
+  const pulseOpacity = pulseAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.6, 0],
+  });
+
+  const bobTranslateY = bobAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -6],
+  });
+
+  // Calculate plane placement & rotation angle
+  let planeX = mapWidth / 2;
+  let planeY = mapHeight / 2;
+  let planeAngle = -45;
+  let showPlane = false;
+
+  if (activeIndex < points.length - 1 && points[activeIndex + 1]) {
+    const curr = activePoint;
+    const next = points[activeIndex + 1];
+    planeX = (curr.x + next.x) / 2;
+    planeY = (curr.y + next.y) / 2 - scale(30); // account for the curve
+    const dx = next.x - curr.x;
+    const dy = next.y - curr.y;
+    planeAngle = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+    showPlane = true;
+  } else if (activeIndex > 0 && points[activeIndex - 1]) {
+    const prev = points[activeIndex - 1];
+    const curr = activePoint;
+    planeX = (prev.x + curr.x) / 2;
+    planeY = (prev.y + curr.y) / 2 - scale(30);
+    const dx = curr.x - prev.x;
+    const dy = curr.y - prev.y;
+    planeAngle = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+    showPlane = true;
+  }
+
+  // Draw grid lines
+  const renderGrid = () => {
+    const lines = [];
+    const step = scale(48);
+    for (let i = 0; i < mapHeight; i += step) {
+      lines.push(
+        <Line
+          key={`h-grid-${i}`}
+          x1={0}
+          y1={i}
+          x2={mapWidth}
+          y2={i}
+          stroke={theme.colors.brown[100]}
+          strokeWidth={1}
+          strokeDasharray="4, 4"
+          opacity={0.45}
+        />
+      );
+    }
+    for (let i = 0; i < mapWidth; i += step) {
+      lines.push(
+        <Line
+          key={`v-grid-${i}`}
+          x1={i}
+          y1={0}
+          x2={i}
+          y2={mapHeight}
+          stroke={theme.colors.brown[100]}
+          strokeWidth={1}
+          strokeDasharray="4, 4"
+          opacity={0.45}
+        />
+      );
+    }
+    return lines;
+  };
+
+  // Predefined Stylized Continents (Based on a 1200x800 coordinate system)
+  // Scaled with `scale()` via template literals below
+  const s = (val: number) => scale(val);
+
+  return (
+    <View
+      style={[
+        styles.outerContainer,
+        {
+          width: '100%',
+        },
+        height !== undefined ? { height: height as any } : { flex: 1 },
+        style,
+      ]}
+    >
+      {/* Header Container */}
+      <View style={styles.header}>
+        <View style={styles.headerLeft}>
+          <BackButton onPress={onBackPress} variant="default" />
+          <View style={styles.headerText}>
+            <Typography style={[styles.headerTitle, { fontSize: scaleText(headerTitleSize) }]}>
+              {title.toUpperCase()}
+            </Typography>
+            <Typography style={[styles.headerSubtitle, { fontSize: scaleText(headerSubtitleSize) }]}>
+              {subtitle ?? `${stations.length} destinos`}
+            </Typography>
+          </View>
+        </View>
+        <TouchableOpacity
+          activeOpacity={0.85}
+          onPress={onFlightPress}
+          style={[styles.flightBtn, { borderRadius: scale(14), paddingHorizontal: scale(16), height: scale(40) }]}
+        >
+          <FlightIcon color="#ffffff" size={scale(16)} />
+          <Typography style={[styles.flightBtnText, { fontSize: scaleText(12) }]}>VOO</Typography>
+        </TouchableOpacity>
+      </View>
+
+      {/* Main Canvas Scroll Area */}
+      <View style={styles.canvasWrapper}>
+        <ScrollView
+          ref={scrollViewRefV}
+          style={styles.scrollView}
+          showsVerticalScrollIndicator={false}
+          onLayout={() => setScrollReady(true)}
+        >
+          <ScrollView
+            ref={scrollViewRefH}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+          >
+            <View style={{ width: mapWidth, height: mapHeight }}>
+              {/* SVG Map Canvas Layer */}
+              <Svg style={StyleSheet.absoluteFill} width={mapWidth} height={mapHeight}>
+                {/* Grid Overlay */}
+                {renderGrid()}
+
+                {/* --- CONTINENT BACKGROUNDS --- */}
+
+                {/* Americas Shadow */}
+                <Path
+                  d={`M ${s(150)} ${s(100)} 
+                      C ${s(350)} ${s(100)}, ${s(350)} ${s(300)}, ${s(200)} ${s(400)} 
+                      C ${s(280)} ${s(500)}, ${s(350)} ${s(700)}, ${s(150)} ${s(750)} 
+                      C ${s(50)} ${s(700)}, ${s(80)} ${s(500)}, ${s(50)} ${s(400)} 
+                      C ${s(0)} ${s(300)}, ${s(50)} ${s(100)}, ${s(150)} ${s(100)} Z`}
+                  fill="#7ba281" // Darker green for shadow
+                />
+                {/* Americas Surface */}
+                <Path
+                  d={`M ${s(150)} ${s(100)} 
+                      C ${s(350)} ${s(100)}, ${s(350)} ${s(300)}, ${s(200)} ${s(400)} 
+                      C ${s(280)} ${s(500)}, ${s(350)} ${s(700)}, ${s(150)} ${s(750)} 
+                      C ${s(50)} ${s(700)}, ${s(80)} ${s(500)}, ${s(50)} ${s(400)} 
+                      C ${s(0)} ${s(300)}, ${s(50)} ${s(100)}, ${s(150)} ${s(100)} Z`}
+                  fill="#a3c9a6" // Vibrant soft green
+                  scale={0.97}
+                  x={s(6)}
+                  y={s(12)}
+                />
+
+                {/* Europe & Africa Shadow */}
+                <Path
+                  d={`M ${s(550)} ${s(120)} 
+                      C ${s(700)} ${s(100)}, ${s(800)} ${s(300)}, ${s(650)} ${s(400)} 
+                      C ${s(700)} ${s(550)}, ${s(750)} ${s(700)}, ${s(550)} ${s(750)} 
+                      C ${s(450)} ${s(700)}, ${s(500)} ${s(550)}, ${s(480)} ${s(400)} 
+                      C ${s(420)} ${s(300)}, ${s(450)} ${s(150)}, ${s(550)} ${s(120)} Z`}
+                  fill="#7ba281"
+                />
+                {/* Europe & Africa Surface */}
+                <Path
+                  d={`M ${s(550)} ${s(120)} 
+                      C ${s(700)} ${s(100)}, ${s(800)} ${s(300)}, ${s(650)} ${s(400)} 
+                      C ${s(700)} ${s(550)}, ${s(750)} ${s(700)}, ${s(550)} ${s(750)} 
+                      C ${s(450)} ${s(700)}, ${s(500)} ${s(550)}, ${s(480)} ${s(400)} 
+                      C ${s(420)} ${s(300)}, ${s(450)} ${s(150)}, ${s(550)} ${s(120)} Z`}
+                  fill="#a3c9a6"
+                  scale={0.97}
+                  x={s(8)}
+                  y={s(12)}
+                />
+
+                {/* Asia & Oceania Shadow */}
+                <Path
+                  d={`M ${s(950)} ${s(150)} 
+                      C ${s(1150)} ${s(100)}, ${s(1150)} ${s(400)}, ${s(1050)} ${s(500)} 
+                      C ${s(1100)} ${s(600)}, ${s(1150)} ${s(750)}, ${s(950)} ${s(700)} 
+                      C ${s(850)} ${s(600)}, ${s(900)} ${s(500)}, ${s(850)} ${s(400)} 
+                      C ${s(750)} ${s(300)}, ${s(800)} ${s(150)}, ${s(950)} ${s(150)} Z`}
+                  fill="#7ba281"
+                />
+                {/* Asia & Oceania Surface */}
+                <Path
+                  d={`M ${s(950)} ${s(150)} 
+                      C ${s(1150)} ${s(100)}, ${s(1150)} ${s(400)}, ${s(1050)} ${s(500)} 
+                      C ${s(1100)} ${s(600)}, ${s(1150)} ${s(750)}, ${s(950)} ${s(700)} 
+                      C ${s(850)} ${s(600)}, ${s(900)} ${s(500)}, ${s(850)} ${s(400)} 
+                      C ${s(750)} ${s(300)}, ${s(800)} ${s(150)}, ${s(950)} ${s(150)} Z`}
+                  fill="#a3c9a6"
+                  scale={0.97}
+                  x={s(8)}
+                  y={s(12)}
+                />
+                
+                {/* Decorative Islands */}
+                <Circle cx={s(320)} cy={s(650)} r={s(20)} fill="#a3c9a6" stroke="#7ba281" strokeWidth={s(4)} />
+                <Circle cx={s(850)} cy={s(680)} r={s(30)} fill="#a3c9a6" stroke="#7ba281" strokeWidth={s(4)} />
+                <Circle cx={s(400)} cy={s(350)} r={s(15)} fill="#a3c9a6" stroke="#7ba281" strokeWidth={s(3)} />
+                <Circle cx={s(780)} cy={s(200)} r={s(25)} fill="#a3c9a6" stroke="#7ba281" strokeWidth={s(3)} />
+
+                {/* Dotted path connector */}
+                {pathD !== '' && (
+                  <Path
+                    d={pathD}
+                    fill="none"
+                    stroke={theme.colors.primary}
+                    strokeWidth={scale(4)}
+                    strokeDasharray="6, 6"
+                    strokeLinecap="round"
+                  />
+                )}
+              </Svg>
+
+              {/* Canvas Interactive Overlays */}
+              {/* Active Node Pulse Ring */}
+              <Animated.View
+                style={[
+                  styles.pulseRing,
+                  {
+                    left: activePoint.x - scale((nodeSize * 1.4) / 2),
+                    top: activePoint.y - scale((nodeSize * 1.4) / 2),
+                    width: scale(nodeSize * 1.4),
+                    height: scale(nodeSize * 1.4),
+                    borderRadius: scale((nodeSize * 1.4) / 2),
+                    borderColor: theme.colors.primary,
+                    borderWidth: scale(3.5),
+                    transform: [{ scale: pulseScale }],
+                    opacity: pulseOpacity,
+                  },
+                ]}
+              />
+
+              {/* Moving Airplane Bobbing Overlay */}
+              {showPlane && (
+                <Animated.View
+                  style={[
+                    styles.planeWrapper,
+                    {
+                      left: planeX - scale(14),
+                      top: planeY - scale(14),
+                      transform: [{ rotate: `${planeAngle}deg` }, { translateY: bobTranslateY }],
+                    },
+                  ]}
+                >
+                  <FlightIcon color={theme.colors.brown[800]} size={scale(28)} />
+                </Animated.View>
+              )}
+
+              {/* Station Node Anchors */}
+              {points.map((p, idx) => {
+                const isVisited = p.status === 'visited';
+                const isCurrent = p.status === 'current';
+                const isLocked = p.status === 'locked';
+
+                let nodeBorderColor = theme.colors.brown[100];
+                let badgeBgColor = theme.colors.brown[400];
+                let shadowStyle = styles.nodeLockedShadow;
+
+                if (isVisited) {
+                  nodeBorderColor = theme.colors.success;
+                  badgeBgColor = theme.colors.success;
+                  shadowStyle = styles.nodeVisitedShadow;
+                } else if (isCurrent) {
+                  nodeBorderColor = theme.colors.primary;
+                  badgeBgColor = theme.colors.primary;
+                  shadowStyle = styles.nodeCurrentShadow;
+                }
+
+                return (
+                  <View
+                    key={`node-${p.id}`}
+                    style={[
+                      styles.nodeContainer,
+                      {
+                        left: p.x - scale(nodeSize / 2),
+                        top: p.y - scale(nodeSize / 2),
+                        width: scale(nodeSize),
+                        height: scale(nodeSize),
+                      },
+                    ]}
+                  >
+                    <TouchableOpacity
+                      activeOpacity={0.8}
+                      onPress={() => onStationPress?.(p)}
+                      disabled={isLocked}
+                      style={[
+                        styles.nodeCircle,
+                        shadowStyle,
+                        {
+                          width: scale(nodeSize),
+                          height: scale(nodeSize),
+                          borderRadius: scale(nodeSize / 2),
+                          borderWidth: scale(3),
+                          borderColor: nodeBorderColor,
+                          opacity: isLocked ? 0.65 : 1,
+                        },
+                      ]}
+                    >
+                      <Flag countryCode={p.countryCode} size={scale(nodeSize - 6)} />
+                    </TouchableOpacity>
+
+                    {/* Step Index Number Badge */}
+                    <View
+                      style={[
+                        styles.indexBadge,
+                        {
+                          backgroundColor: badgeBgColor,
+                          width: scale(18),
+                          height: scale(18),
+                          borderRadius: scale(9),
+                          top: -scale(3),
+                          right: -scale(3),
+                        },
+                      ]}
+                    >
+                      <Typography style={[styles.indexBadgeText, { fontSize: scaleText(9) }]}>
+                        {idx + 1}
+                      </Typography>
+                    </View>
+
+                    {/* Node Text Label Card */}
+                    <View
+                      style={[
+                        isCurrent ? styles.activeLabelBox : styles.labelBox,
+                        {
+                          top: scale(nodeSize + 4),
+                          borderRadius: scale(10),
+                          paddingHorizontal: scale(10),
+                          paddingVertical: scale(4),
+                        },
+                      ]}
+                    >
+                      <Typography
+                        numberOfLines={1}
+                        style={[
+                          isCurrent ? styles.activeLabelText : styles.labelText,
+                          { fontSize: scaleText(11.5) },
+                        ]}
+                      >
+                        {p.label}{' '}
+                        <Typography style={{ opacity: isCurrent ? 0.9 : 0.6, fontSize: scaleText(10) }}>
+                          {p.levelCode}
+                        </Typography>
+                        {isCurrent && ' · AQUI'}
+                      </Typography>
+                    </View>
+                  </View>
+                );
+              })}
+            </View>
+          </ScrollView>
+        </ScrollView>
+
+        {/* Floating Legend Panel */}
+        <View
+          style={[
+            styles.legendCard,
+            {
+              borderRadius: scale(16),
+              padding: scale(12),
+              bottom: scale(112),
+            },
+          ]}
+        >
+          <View style={styles.legendRow}>
+            <View style={[styles.legendDot, { backgroundColor: theme.colors.success }]} />
+            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>visitado · rever</Typography>
+          </View>
+          <View style={styles.legendRow}>
+            <View style={[styles.legendDot, { backgroundColor: theme.colors.primary }]} />
+            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>estás aqui</Typography>
+          </View>
+          <View style={styles.legendRow}>
+            <View style={[styles.legendDot, { backgroundColor: theme.colors.brown[300] }]} />
+            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>bloqueado</Typography>
+          </View>
+        </View>
+
+        {/* Floating Continue CTA Button */}
+        <View
+          style={[
+            styles.floatingFooter,
+            {
+              left: scale(16),
+              right: scale(16),
+              bottom: scale(16),
+            },
+          ]}
+        >
+          <JourneyButton
+            title="Continuar a viagem"
+            subtitle={`ESTÁS EM ${activeStation.label} · ${activeStation.levelCode}`}
+            iconName="Play"
+            variant="primary"
+            onPress={() => onContinuePress?.(activeStation)}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  outerContainer: {
+    backgroundColor: '#d9ebec', // Soft ocean blue
+    flexDirection: 'column',
+    alignSelf: 'center',
+    overflow: 'hidden',
+  },
+  header: {
+    backgroundColor: '#d9ebec',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 16,
+    borderBottomWidth: 1.5,
+    borderBottomColor: '#b4cfd1',
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  headerText: {
+    justifyContent: 'center',
+  },
+  headerTitle: {
+
+    color: theme.colors.brown[500],
+    letterSpacing: 0.6,
+  },
+  headerSubtitle: {
+
+    color: theme.colors.brown[800],
+  },
+  flightBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    backgroundColor: theme.colors.brown[800],
+    ...Platform.select({
+      web: { boxShadow: `0px 4px 0px ${theme.colors.brown[900]}` },
+      default: {
+        shadowColor: theme.colors.brown[900],
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 3,
+      },
+    }),
+  },
+  flightBtnText: {
+
+    color: '#ffffff',
+    letterSpacing: 0.5,
+  },
+  canvasWrapper: {
+    flex: 1,
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  pulseRing: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  planeWrapper: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+  nodeContainer: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 5,
+  },
+  nodeCircle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#ffffff',
+    ...Platform.select({
+      web: { cursor: 'pointer' },
+    }),
+  },
+  nodeVisitedShadow: {
+    ...Platform.select({
+      web: { boxShadow: `0px 4px 0px ${theme.colors.success}` },
+      default: {
+        shadowColor: theme.colors.success,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 3,
+      },
+    }),
+  },
+  nodeCurrentShadow: {
+    ...Platform.select({
+      web: { boxShadow: `0px 4px 0px ${theme.colors.primary}` },
+      default: {
+        shadowColor: theme.colors.primary,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 4,
+      },
+    }),
+  },
+  nodeLockedShadow: {
+    ...Platform.select({
+      web: { boxShadow: `0px 4px 0px ${theme.colors.brown[100]}` },
+      default: {
+        shadowColor: theme.colors.brown[100],
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 1,
+      },
+    }),
+  },
+  indexBadge: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 8,
+  },
+  indexBadgeText: {
+
+    color: '#ffffff',
+    textAlign: 'center',
+  },
+  labelBox: {
+    position: 'absolute',
+    backgroundColor: '#ffffff',
+    borderWidth: 1.5,
+    borderColor: '#efe2d6',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...Platform.select({
+      web: { boxShadow: '0px 2px 4px rgba(81, 51, 45, 0.06)' },
+      default: {
+        shadowColor: '#51332d',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.06,
+        shadowRadius: 4,
+        elevation: 1,
+      },
+    }),
+  },
+  labelText: {
+
+    color: theme.colors.brown[600],
+    textAlign: 'center',
+  },
+  activeLabelBox: {
+    position: 'absolute',
+    backgroundColor: theme.colors.brown[800],
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  activeLabelText: {
+
+    color: '#ffffff',
+    textAlign: 'center',
+  },
+  legendCard: {
+    position: 'absolute',
+    left: 16,
+    bottom: 16,
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    borderWidth: 1.5,
+    borderColor: '#efe2d6',
+    zIndex: 10,
+    gap: 8,
+    ...Platform.select({
+      web: { boxShadow: '0px 4px 12px rgba(81, 51, 45, 0.08)' },
+      default: {
+        shadowColor: '#51332d',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.08,
+        shadowRadius: 12,
+        elevation: 2,
+      },
+    }),
+  },
+  legendRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  legendDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+  },
+  legendText: {
+
+    color: theme.colors.brown[600],
+  },
+  floatingFooter: {
+    position: 'absolute',
+    zIndex: 20,
+    ...Platform.select({
+      web: { filter: 'drop-shadow(0px 8px 16px rgba(81, 51, 45, 0.12))' },
+      default: {
+        shadowColor: '#51332d',
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.12,
+        shadowRadius: 16,
+        elevation: 6,
+      },
+    }),
+  },
+});