@xetwa/design-system 1.0.2

package/src/components/Navigation/ProgressMap/ProgressMap.tsx

@@ -0,0 +1,827 @@
+import React, { 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 MapStation {
+  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; // Optional custom coordinates (percentage, 0-100)
+  y?: number; // Optional custom coordinate (pixels)
+}
+
+export interface ProgressMapProps {
+  title?: string;
+  subtitle?: string;
+  stations: MapStation[];
+  activeStationId: number;
+  onStationPress?: (station: MapStation) => void;
+  onContinuePress?: (currentStation: MapStation) => void;
+  onBackPress?: () => void;
+  onFlightPress?: () => void;
+  size?: 'sm' | 'md' | 'lg';
+  height?: number | string; // Custom height constraint
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const ProgressMap = ({
+  title = 'A ROTA DA FRANCOFONIA',
+  subtitle,
+  stations = [],
+  activeStationId,
+  onStationPress,
+  onContinuePress,
+  onBackPress,
+  onFlightPress,
+  size = 'md',
+  height,
+  style,
+}: ProgressMapProps) => {
+  const { scale, scaleText, width, height: windowHeight } = useResponsive();
+  const [containerWidth, setContainerWidth] = useState(Platform.OS === 'web' ? 390 : width);
+  const [scrollReady, setScrollReady] = useState(false);
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  // Responsive configurations
+  const canvasWidth = containerWidth;
+  let nodeSize = 56;
+  let autoSpacing = 160;
+  let headerTitleSize = 14;
+  let headerSubtitleSize = 20;
+
+  if (size === 'sm') {
+    nodeSize = 46;
+    autoSpacing = 130;
+    headerTitleSize = 12;
+    headerSubtitleSize = 16;
+  } else if (size === 'lg') {
+    nodeSize = 66;
+    autoSpacing = 200;
+    headerTitleSize = 16;
+    headerSubtitleSize = 24;
+  }
+
+  // Adjust spacing dynamically if screen height is very short
+  if (windowHeight < 680) {
+    autoSpacing = Math.round(autoSpacing * 0.85);
+  }
+
+  const paddingVal = scale(60);
+  // Add scale(100) extra padding at the bottom so the last items are not hidden behind the floating footer CTA button
+  const totalHeight = stations.length * scale(autoSpacing) + paddingVal * 2 + scale(100);
+
+  // 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, // SVG dash offset cannot use native driver easily
+    }).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
+  const resolveCoordinates = () => {
+    return stations.map((station, index) => {
+      // Automatic snake zig-zag layout
+      let x = canvasWidth / 2;
+      let y = paddingVal + index * scale(autoSpacing);
+
+      // Alternate horizontal position for snake trail
+      if (station.x !== undefined) {
+        x = (station.x / 100) * canvasWidth;
+      } else {
+        const offset = canvasWidth * 0.22;
+        if (index % 4 === 1) {
+          x = canvasWidth / 2 + offset;
+        } else if (index % 4 === 3) {
+          x = canvasWidth / 2 - offset;
+        }
+      }
+
+      if (station.y !== undefined) {
+        y = station.y;
+      }
+
+      return {
+        ...station,
+        x,
+        y,
+      };
+    });
+  };
+
+  const points = resolveCoordinates();
+  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 && scrollViewRef.current && scrollReady) {
+      setTimeout(() => {
+        scrollViewRef.current?.scrollTo({
+          y: Math.max(0, activePoint.y - scale(250)),
+          animated: true,
+        });
+      }, 300);
+    }
+  }, [activePoint, scrollReady]);
+
+  // Dynamic curve string builder
+  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;
+      const cp1y = (p0.y + p1.y) / 2;
+      const cp2x = p1.x;
+      const cp2y = (p0.y + p1.y) / 2;
+      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 = canvasWidth / 2;
+  let planeY = totalHeight / 2;
+  let planeAngle = -45;
+  let showPlane = false;
+
+  if (activeIndex < points.length - 1 && points[activeIndex + 1]) {
+    const curr = activePoint;
+    const next = points[activeIndex + 1];
+    // Position halfway along the straight projection between nodes
+    planeX = (curr.x + next.x) / 2;
+    planeY = (curr.y + next.y) / 2;
+    // Calculate rotation angle (facing next country)
+    const dx = next.x - curr.x;
+    const dy = next.y - curr.y;
+    planeAngle = Math.atan2(dy, dx) * (180 / Math.PI) + 90; // Align forward
+    showPlane = true;
+  } else if (activeIndex > 0 && points[activeIndex - 1]) {
+    // Fallback if we are already at the final station (no next station)
+    const prev = points[activeIndex - 1];
+    const curr = activePoint;
+    planeX = (prev.x + curr.x) / 2;
+    planeY = (prev.y + curr.y) / 2;
+    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 < totalHeight; i += step) {
+      lines.push(
+        <Line
+          key={`h-grid-${i}`}
+          x1={0}
+          y1={i}
+          x2={canvasWidth}
+          y2={i}
+          stroke={theme.colors.brown[100]}
+          strokeWidth={1}
+          strokeDasharray="4, 4"
+          opacity={0.45}
+        />
+      );
+    }
+    for (let i = 0; i < canvasWidth; i += step) {
+      lines.push(
+        <Line
+          key={`v-grid-${i}`}
+          x1={i}
+          y1={0}
+          x2={i}
+          y2={totalHeight}
+          stroke={theme.colors.brown[100]}
+          strokeWidth={1}
+          strokeDasharray="4, 4"
+          opacity={0.45}
+        />
+      );
+    }
+    return lines;
+  };
+
+  return (
+    <View
+      onLayout={(e) => {
+        const w = e.nativeEvent.layout.width;
+        if (w > 0) setContainerWidth(w);
+      }}
+      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} paragens · A1 → C1`}
+            </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={scrollViewRef}
+          style={styles.scrollView}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={[styles.scrollContent, { height: totalHeight }]}
+          onLayout={() => setScrollReady(true)}
+        >
+          {/* SVG Map Canvas Layer */}
+          <Svg style={StyleSheet.absoluteFill} width={canvasWidth} height={totalHeight}>
+            {/* Grid Overlay */}
+            {renderGrid()}
+
+            {/* Continent Shadows/Outlines (Beige Outlines) */}
+            {points.map((p, idx) => (
+              <React.Fragment key={`land-sh-${idx}`}>
+                <Circle cx={p.x} cy={p.y} r={scale(nodeSize * 1.25)} fill={theme.colors.brown[100]} />
+                {idx < points.length - 1 && (
+                  <Line
+                    x1={p.x}
+                    y1={p.y}
+                    x2={points[idx + 1].x}
+                    y2={points[idx + 1].y}
+                    stroke={theme.colors.brown[100]}
+                    strokeWidth={scale(nodeSize * 1.5)}
+                    strokeLinecap="round"
+                  />
+                )}
+              </React.Fragment>
+            ))}
+
+            {/* Continent Surface Fills (Inner Warm Cream) */}
+            {points.map((p, idx) => (
+              <React.Fragment key={`land-surf-${idx}`}>
+                <Circle
+                  cx={p.x}
+                  cy={p.y}
+                  r={scale(nodeSize * 1.25) - 3}
+                  fill={theme.colors.brown[50]}
+                />
+                {idx < points.length - 1 && (
+                  <Line
+                    x1={p.x}
+                    y1={p.y}
+                    x2={points[idx + 1].x}
+                    y2={points[idx + 1].y}
+                    stroke={theme.colors.brown[50]}
+                    strokeWidth={scale(nodeSize * 1.5) - 6}
+                    strokeLinecap="round"
+                  />
+                )}
+              </React.Fragment>
+            ))}
+
+            {/* Small archipelago decor islands */}
+            {points.map((p, idx) => {
+              if (idx % 2 === 0) {
+                return (
+                  <React.Fragment key={`decor-${idx}`}>
+                    <Circle
+                      cx={p.x + scale(nodeSize * 1.5)}
+                      cy={p.y - scale(nodeSize * 0.4)}
+                      r={scale(10)}
+                      fill={theme.colors.brown[50]}
+                      stroke={theme.colors.brown[100]}
+                      strokeWidth={2}
+                    />
+                    <Circle
+                      cx={p.x - scale(nodeSize * 1.4)}
+                      cy={p.y + scale(nodeSize * 0.8)}
+                      r={scale(6)}
+                      fill={theme.colors.brown[50]}
+                      stroke={theme.colors.brown[100]}
+                      strokeWidth={1.5}
+                    />
+                  </React.Fragment>
+                );
+              }
+              return null;
+            })}
+
+            {/* 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>
+            );
+          })}
+        </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: '#fbf6f0', // Soft cream background
+    // ✅ FIX: removed height: '100%' — flex: 1 is applied inline and
+    //    height: '100%' was conflicting with it, causing the component
+    //    to overflow past the parent container (e.g. tab navigation).
+    flexDirection: 'column',
+    alignSelf: 'center',
+    overflow: 'hidden',
+  },
+  header: {
+    backgroundColor: '#fbf6f0',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 16,
+    borderBottomWidth: 1.5,
+    borderBottomColor: '#efe2d6',
+  },
+  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',
+  },
+  scrollContent: {
+    position: 'relative',
+    width: '100%',
+  },
+  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: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  legendText: {
+
+    color: theme.colors.brown[600],
+  },
+  footer: {
+    backgroundColor: '#fbf6f0',
+    borderTopWidth: 1.5,
+    borderTopColor: '#efe2d6',
+    padding: 16,
+    zIndex: 12,
+  },
+  scrollView: {
+    flex: 1,
+    width: '100%',
+  },
+  floatingFooter: {
+    position: 'absolute',
+    backgroundColor: 'transparent',
+    zIndex: 12,
+  },
+});