Trip Planner App UI Design in Expo

import {
  InstrumentSerif_400Regular,
  InstrumentSerif_400Regular_Italic,
} from '@expo-google-fonts/instrument-serif';
import { Inter_400Regular, Inter_500Medium, Inter_600SemiBold } from '@expo-google-fonts/inter';
import { JetBrainsMono_400Regular } from '@expo-google-fonts/jetbrains-mono';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    InstrumentSerif_400Regular,
    InstrumentSerif_400Regular_Italic,
    Inter_400Regular,
    Inter_500Medium,
    Inter_600SemiBold,
    JetBrainsMono_400Regular,
  });

  if (!fontsLoaded) return null;

  return <Stack screenOptions={{ headerShown: false }} />;
}

import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { router } from 'expo-router';
import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
import Svg, { Circle, Path, Rect } from 'react-native-svg';

import { Screen } from '@/components/screen';
import { asset } from '@/lib/assets';

export default function MainScreen() {
  return (
    <Screen background="#06070A" statusBar="light">
      <View style={{ paddingTop: 58, paddingBottom: 0, paddingHorizontal: 0, flex: 1 }}>
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'space-between',
            paddingVertical: 0,
            paddingHorizontal: 22,
            flexDirection: 'row',
          }}>
          <View style={{ alignItems: 'center', gap: 12, flexShrink: 1, flexDirection: 'row' }}>
            <Image
              source={{ uri: asset('f3e802a37f.jpg') }}
              contentFit="cover"
              accessibilityLabel="Profile photo"
              style={{
                width: 46,
                height: 46,
                borderRadius: '50%',
                boxShadow: '0 0 0 2px #3D6BFF, 0 0 0 4px #06070A',
              }}
            />
            <View style={{ gap: 3, flexShrink: 1 }}>
              <View style={{ alignItems: 'center', gap: 4, flexDirection: 'row' }}>
                <Text
                  style={{
                    fontFamily: 'Inter_400Regular',
                    fontSize: 12,
                    color: '#9AA0AB',
                    flexShrink: 1,
                  }}>
                  My Location
                </Text>
                <Svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#9AA0AB"
                  strokeWidth="2">
                  <Path d="m6 9 6 6 6-6" />
                </Svg>
              </View>
              <View style={{ alignItems: 'center', gap: 6, flexDirection: 'row' }}>
                <Svg width="14" height="14" viewBox="0 0 24 24" fill="#F3F4F6">
                  <Path d="M3 11 21 3l-8 18-2-8z" />
                </Svg>
                <Text
                  style={{
                    fontFamily: 'Inter_600SemiBold',
                    fontSize: 15,
                    color: '#F3F4F6',
                    flexShrink: 1,
                  }}>
                  Munnar, Idukki
                </Text>
              </View>
            </View>
          </View>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Notifications"
            style={{
              backgroundColor: 'rgba(255,255,255,.07)',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,.12)',
              width: 46,
              height: 46,
              borderRadius: '50%',
              alignItems: 'center',
              justifyContent: 'center',
              padding: 0,
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#F3F4F6"
              strokeWidth="1.8">
              <Path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
              <Path d="M10.3 21a1.9 1.9 0 0 0 3.4 0" />
            </Svg>
            <View
              style={{
                position: 'absolute',
                top: 11,
                right: 12,
                width: 7,
                height: 7,
                borderRadius: '50%',
                backgroundColor: '#3D6BFF',
              }}
            />
          </Pressable>
        </View>
        <View style={{ paddingTop: 26, paddingBottom: 0, paddingHorizontal: 22 }}>
          <View style={{ alignItems: 'center', gap: 8, flexDirection: 'row' }}>
            <View style={{ width: 18, height: 1, backgroundColor: '#8A909B' }} />
            <Text
              style={{
                fontFamily: 'JetBrainsMono_400Regular',
                fontSize: 10,
                color: '#8A909B',
                letterSpacing: 1.4,
                flexShrink: 1,
              }}>
              WELCOME BACK
            </Text>
          </View>
          <Text
            style={{
              marginTop: 8,
              marginBottom: 0,
              marginHorizontal: 0,
              fontFamily: 'InstrumentSerif_400Regular',
              fontSize: 36,
              color: '#F3F4F6',
              letterSpacing: -0.36,
              lineHeight: 38.88,
            }}>
            {'Where shall we '}
            <Text style={{ fontFamily: 'InstrumentSerif_400Regular_Italic', color: '#6F95FF' }}>
              wander,
            </Text>
            {'\n'}Aarav?
          </Text>
        </View>
        <View style={{ paddingTop: 22, paddingBottom: 0, paddingHorizontal: 22 }}>
          <View
            style={{
              backgroundColor: 'rgba(255,255,255,.07)',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,.12)',
              height: 54,
              borderRadius: 27,
              alignItems: 'center',
              gap: 10,
              paddingVertical: 0,
              paddingLeft: 18,
              paddingRight: 6,
              flexDirection: 'row',
            }}>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#9AA0AB"
              strokeWidth="2">
              <Circle cx="11" cy="11" r="7" />
              <Path d="m20 20-3.5-3.5" />
            </Svg>
            <TextInput
              placeholder="Search destinations, cities…"
              placeholderTextColor="#8A8A8A"
              accessibilityLabel="Search destinations"
              style={{
                flex: 1,
                minWidth: 0,
                borderWidth: 0,
                fontFamily: 'Inter_400Regular',
                fontSize: 14,
                color: '#F3F4F6',
              }}
            />
            <Pressable
              accessibilityRole="button"
              style={{
                height: 42,
                paddingVertical: 0,
                paddingHorizontal: 14,
                borderRadius: 21,
                backgroundColor: 'rgba(61,107,255,.14)',
                borderWidth: 1,
                borderColor: 'rgba(111,149,255,.55)',
                alignItems: 'center',
                gap: 6,
                flexShrink: 1,
                flexDirection: 'row',
              }}>
              <Svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#F3F4F6"
                strokeWidth="1.8">
                <Path d="m4 20 10-10M15 4v3M13.5 5.5h3M19 9v2M18 10h2M9 3v2M8 4h2" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'Inter_500Medium',
                  fontSize: 13,
                  color: '#F3F4F6',
                  flexShrink: 1,
                }}>
                AI Mode
              </Text>
            </Pressable>
          </View>
        </View>
        <View
          style={{
            gap: 8,
            paddingTop: 18,
            paddingBottom: 0,
            paddingHorizontal: 22,
            overflow: 'hidden',
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="button"
            style={{
              height: 38,
              paddingVertical: 0,
              paddingHorizontal: 20,
              borderRadius: 19,
              borderWidth: 1,
              borderColor: 'rgba(160,190,255,.45)',
              boxShadow:
                'inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(10,25,90,.35), 0 6px 18px rgba(61,107,255,.45)',
              flexShrink: 0,
              overflow: 'hidden',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <LinearGradient
              colors={['#6E97FF', '#3D6BFF', '#2449D4']}
              locations={[0, 0.5, 1]}
              start={{ x: 0.5, y: 0 }}
              end={{ x: 0.5, y: 1 }}
              style={StyleSheet.absoluteFill}
            />
            <Text
              style={{
                fontFamily: 'Inter_600SemiBold',
                fontSize: 14,
                color: '#F3F4F6',
                textAlign: 'center',
              }}>
              All
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              backgroundColor: 'rgba(255,255,255,.07)',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,.12)',
              height: 38,
              paddingVertical: 0,
              paddingHorizontal: 16,
              borderRadius: 19,
              flexShrink: 0,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_400Regular',
                fontSize: 14,
                color: '#D5D8DE',
                textAlign: 'center',
              }}>
              Mountains
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              backgroundColor: 'rgba(255,255,255,.07)',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,.12)',
              height: 38,
              paddingVertical: 0,
              paddingHorizontal: 16,
              borderRadius: 19,
              flexShrink: 0,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_400Regular',
                fontSize: 14,
                color: '#D5D8DE',
                textAlign: 'center',
              }}>
              Coastal
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              backgroundColor: 'rgba(255,255,255,.07)',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,.12)',
              height: 38,
              paddingVertical: 0,
              paddingHorizontal: 16,
              borderRadius: 19,
              flexShrink: 0,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_400Regular',
                fontSize: 14,
                color: '#D5D8DE',
                textAlign: 'center',
              }}>
              Heritage
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              backgroundColor: 'rgba(255,255,255,.07)',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,.12)',
              height: 38,
              paddingVertical: 0,
              paddingHorizontal: 16,
              borderRadius: 19,
              flexShrink: 0,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_400Regular',
                fontSize: 14,
                color: '#D5D8DE',
                textAlign: 'center',
              }}>
              Forest
            </Text>
          </Pressable>
        </View>
        <View
          style={{
            gap: 10,
            paddingTop: 20,
            paddingBottom: 0,
            paddingHorizontal: 0,
            marginLeft: -6,
            flexDirection: 'row',
          }}>
          <Image
            source={{ uri: asset('a340ebf012.jpg') }}
            contentFit="cover"
            contentPosition="right"
            style={{
              width: 22,
              height: 278,
              borderTopLeftRadius: 0,
              borderTopRightRadius: 22,
              borderBottomRightRadius: 22,
              borderBottomLeftRadius: 0,
              flexShrink: 0,
            }}
          />
          <View
            style={{
              width: 336,
              height: 280,
              borderRadius: 26,
              overflow: 'hidden',
              flexShrink: 0,
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,.08)',
            }}>
            <Image
              source={{ uri: asset('410a453287.jpg') }}
              contentFit="cover"
              contentPosition={{ left: 'center', top: '70%' }}
              accessibilityLabel="Three friends laughing on a Faroe Islands clifftop"
              style={{
                position: 'absolute',
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
                width: '100%',
                height: '100%',
              }}
            />
            <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
              <LinearGradient
                colors={['rgba(6,7,10,0)', 'rgba(6,7,10,.85)']}
                locations={[0.45, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <Text
              style={{
                backgroundColor: 'rgba(20,22,28,.55)',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.12)',
                position: 'absolute',
                top: 14,
                left: 14,
                paddingVertical: 7,
                paddingHorizontal: 10,
                borderRadius: 9,
                fontFamily: 'JetBrainsMono_400Regular',
                fontSize: 10,
                color: '#F3F4F6',
                letterSpacing: 1,
              }}>
              {"EDITOR'S PACK"}
            </Text>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Save"
              style={{
                backgroundColor: 'rgba(20,22,28,.55)',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.12)',
                position: 'absolute',
                top: 12,
                right: 12,
                width: 36,
                height: 36,
                borderRadius: 11,
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="15"
                height="15"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#F3F4F6"
                strokeWidth="2">
                <Path d="M6 3h12v18l-6-4-6 4z" />
              </Svg>
            </Pressable>
            <View style={{ position: 'absolute', left: 16, right: 16, bottom: 16 }}>
              <Text
                style={{
                  fontFamily: 'JetBrainsMono_400Regular',
                  fontSize: 10,
                  color: '#C9CDD4',
                  letterSpacing: 1.2,
                }}>
                FAROE ISLANDS — ATLANTIC
              </Text>
              <Text
                style={{
                  marginTop: 4,
                  fontFamily: 'InstrumentSerif_400Regular_Italic',
                  fontSize: 34,
                  color: '#F3F4F6',
                  lineHeight: 37.4,
                }}>
                Saksun Village
              </Text>
              <View style={{ gap: 6, marginTop: 10, flexDirection: 'row' }}>
                <View
                  style={{
                    backgroundColor: 'rgba(20,22,28,.6)',
                    borderWidth: 1,
                    borderColor: 'rgba(255,255,255,.12)',
                    paddingVertical: 6,
                    paddingHorizontal: 10,
                    borderRadius: 10,
                    alignItems: 'center',
                    gap: 5,
                    flexShrink: 1,
                    flexDirection: 'row',
                  }}>
                  <Svg width="12" height="12" viewBox="0 0 24 24" fill="#F3F4F6">
                    <Path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z" />
                  </Svg>
                  <Text
                    style={{
                      fontFamily: 'Inter_400Regular',
                      fontSize: 12,
                      color: '#F3F4F6',
                      flexShrink: 1,
                    }}>
                    49.21k
                  </Text>
                </View>
                <View
                  style={{
                    backgroundColor: 'rgba(20,22,28,.6)',
                    borderWidth: 1,
                    borderColor: 'rgba(255,255,255,.12)',
                    paddingVertical: 6,
                    paddingHorizontal: 10,
                    borderRadius: 10,
                    alignItems: 'center',
                    gap: 5,
                    flexShrink: 1,
                    flexDirection: 'row',
                  }}>
                  <Svg
                    width="12"
                    height="12"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="#F3F4F6"
                    strokeWidth="2">
                    <Circle cx="12" cy="12" r="9" />
                    <Path d="M12 7v5l3 2" />
                  </Svg>
                  <Text
                    style={{
                      fontFamily: 'Inter_400Regular',
                      fontSize: 12,
                      color: '#F3F4F6',
                      flexShrink: 1,
                    }}>
                    3 days
                  </Text>
                </View>
                <View
                  style={{
                    backgroundColor: 'rgba(20,22,28,.6)',
                    borderWidth: 1,
                    borderColor: 'rgba(255,255,255,.12)',
                    paddingVertical: 6,
                    paddingHorizontal: 10,
                    borderRadius: 10,
                    alignItems: 'center',
                    gap: 5,
                    flexShrink: 1,
                    flexDirection: 'row',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Inter_400Regular',
                      fontSize: 12,
                      color: '#F3F4F6',
                      flexShrink: 1,
                    }}>
                    $ From 1,240
                  </Text>
                </View>
              </View>
            </View>
          </View>
          <Image
            source={{ uri: asset('cfc112b1d2.jpg') }}
            contentFit="cover"
            contentPosition="left"
            style={{
              width: 40,
              height: 278,
              borderTopLeftRadius: 22,
              borderTopRightRadius: 0,
              borderBottomRightRadius: 0,
              borderBottomLeftRadius: 22,
              flexShrink: 0,
            }}
          />
        </View>
        <View
          style={{
            alignItems: 'baseline',
            justifyContent: 'space-between',
            paddingTop: 26,
            paddingBottom: 0,
            paddingHorizontal: 22,
            flexDirection: 'row',
          }}>
          <Text
            style={{
              margin: 0,
              flexShrink: 1,
              fontFamily: 'InstrumentSerif_400Regular',
              fontSize: 26,
              color: '#F3F4F6',
            }}>
            {'Trending '}
            <Text style={{ fontFamily: 'InstrumentSerif_400Regular_Italic', color: '#6F95FF' }}>
              now
            </Text>
          </Text>
          <Pressable accessibilityRole="link" style={{ flexShrink: 1 }}>
            <Text
              style={{
                fontFamily: 'JetBrainsMono_400Regular',
                fontSize: 11,
                color: '#C9CDD4',
                letterSpacing: 1.1,
              }}>
              VIEW ALL →
            </Text>
          </Pressable>
        </View>
        <View
          style={{
            gap: 10,
            paddingTop: 14,
            paddingBottom: 0,
            paddingHorizontal: 22,
            flexDirection: 'row',
          }}>
          <View
            style={{
              width: 150,
              height: 190,
              borderRadius: 20,
              overflow: 'hidden',
              flexShrink: 0,
            }}>
            <Image
              source={{ uri: asset('de71224bfc.jpg') }}
              contentFit="cover"
              accessibilityLabel="Neon-lit Tokyo alley at night"
              style={{
                position: 'absolute',
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
                width: '100%',
                height: '100%',
              }}
            />
            <Text
              style={{
                backgroundColor: 'rgba(20,22,28,.6)',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.12)',
                position: 'absolute',
                top: 10,
                left: 10,
                paddingVertical: 6,
                paddingHorizontal: 8,
                borderRadius: 8,
                fontFamily: 'JetBrainsMono_400Regular',
                fontSize: 9,
                color: '#F3F4F6',
                letterSpacing: 0.9,
              }}>
              HERITAGE
            </Text>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Like"
              style={{
                backgroundColor: 'rgba(20,22,28,.6)',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.12)',
                position: 'absolute',
                top: 8,
                right: 8,
                width: 30,
                height: 30,
                borderRadius: 9,
                padding: 0,
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="13"
                height="13"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#F3F4F6"
                strokeWidth="2">
                <Path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" />
              </Svg>
            </Pressable>
          </View>
          <View
            style={{
              width: 150,
              height: 190,
              borderRadius: 20,
              overflow: 'hidden',
              flexShrink: 0,
            }}>
            <Image
              source={{ uri: asset('fe81a6571b.jpg') }}
              contentFit="cover"
              accessibilityLabel="Turquoise bay framed by palm leaves"
              style={{
                position: 'absolute',
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
                width: '100%',
                height: '100%',
              }}
            />
            <Text
              style={{
                backgroundColor: 'rgba(20,22,28,.6)',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.12)',
                position: 'absolute',
                top: 10,
                left: 10,
                paddingVertical: 6,
                paddingHorizontal: 8,
                borderRadius: 8,
                fontFamily: 'JetBrainsMono_400Regular',
                fontSize: 9,
                color: '#F3F4F6',
                letterSpacing: 0.9,
              }}>
              COASTAL
            </Text>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Like"
              style={{
                backgroundColor: 'rgba(20,22,28,.6)',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.12)',
                position: 'absolute',
                top: 8,
                right: 8,
                width: 30,
                height: 30,
                borderRadius: 9,
                padding: 0,
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="13"
                height="13"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#F3F4F6"
                strokeWidth="2">
                <Path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" />
              </Svg>
            </Pressable>
          </View>
          <Image
            source={{ uri: asset('9d87548880.jpg') }}
            contentFit="cover"
            style={{ width: 60, height: 190, borderRadius: 20, flexShrink: 0 }}
          />
        </View>
        <View
          style={{
            backgroundColor: 'rgba(28,30,38,.82)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.12)',
            position: 'absolute',
            left: '50%',
            bottom: 30,
            transform: [{ translateX: '-50%' }],
            alignItems: 'center',
            gap: 4,
            padding: 6,
            borderRadius: 30,
            overflow: 'hidden',
            flexDirection: 'row',
          }}>
          <BlurView intensity={32} tint="dark" style={StyleSheet.absoluteFill} />
          <Pressable
            accessibilityRole="link"
            style={{
              height: 46,
              paddingVertical: 0,
              paddingLeft: 8,
              paddingRight: 18,
              borderRadius: 23,
              borderWidth: 1,
              borderColor: 'rgba(160,190,255,.45)',
              boxShadow:
                'inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(10,25,90,.35), 0 6px 18px rgba(61,107,255,.45)',
              alignItems: 'center',
              gap: 8,
              flexShrink: 1,
              overflow: 'hidden',
              flexDirection: 'row',
            }}>
            <LinearGradient
              colors={['#6E97FF', '#3D6BFF', '#2449D4']}
              locations={[0, 0.5, 1]}
              start={{ x: 0.5, y: 0 }}
              end={{ x: 0.5, y: 1 }}
              style={StyleSheet.absoluteFill}
            />
            <View
              style={{
                width: 30,
                height: 30,
                borderRadius: '50%',
                backgroundColor: '#fff',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg width="16" height="16" viewBox="0 0 24 24" fill="#3D6BFF">
                <Path d="M5 18V9a7 7 0 0 1 14 0v9l-2.3-1.6L14.4 18 12 16.4 9.6 18l-2.3-1.6z" />
              </Svg>
            </View>
            <Text
              style={{
                fontFamily: 'Inter_600SemiBold',
                fontSize: 14,
                color: '#fff',
                flexShrink: 1,
              }}>
              Discover
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Map"
            onPress={() => router.navigate('/map')}
            style={{
              width: 46,
              height: 46,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#B7BCC6"
              strokeWidth="1.8">
              <Path d="M3 11 21 3l-8 18-2-8z" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Trips"
            onPress={() => router.navigate('/trip')}
            style={{
              width: 46,
              height: 46,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#B7BCC6"
              strokeWidth="1.8">
              <Rect x="3" y="5" width="18" height="16" rx="3" />
              <Path d="M3 10h18M8 3v4M16 3v4" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Profile"
            style={{
              width: 46,
              height: 46,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#B7BCC6"
              strokeWidth="1.8">
              <Circle cx="12" cy="8" r="4" />
              <Path d="M4 21a8 8 0 0 1 16 0" />
            </Svg>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { router } from 'expo-router';
import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
import Svg, { Circle, Defs, Path, RadialGradient, Rect, Stop } from 'react-native-svg';

import { Screen } from '@/components/screen';
import { asset } from '@/lib/assets';

export default function MapScreen() {
  return (
    <Screen background="#0B0C10" statusBar="light">
      <View style={{ flex: 1 }}>
        <Svg
          width="390"
          height="844"
          viewBox="0 0 390 844"
          fill="none"
          stroke="#1E212A"
          style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
          <Path d="M-10 230 C80 260 140 210 230 250 S360 300 400 280" strokeWidth="10" />
          <Path d="M60 -10 C70 120 40 260 90 420 S120 640 80 860" strokeWidth="7" />
          <Path d="M240 140 C230 300 300 420 260 560 S300 760 320 860" strokeWidth="6" />
          <Path d="M-10 520 C100 500 200 560 400 500" strokeWidth="5" />
          <Path
            d="M140 180 L180 860 M0 380 L390 420 M330 160 L360 860 M0 640 L390 600"
            strokeWidth="2"
            stroke="#171920"
          />
          <Path
            d="M20 300 L120 330 L150 300 M200 460 L330 480 M100 560 L220 620 M260 330 L380 300"
            strokeWidth="2"
            stroke="#171920"
          />
        </Svg>
        <Text
          style={{
            position: 'absolute',
            left: 28,
            top: 470,
            transform: [{ rotate: '-80deg' }],
            fontFamily: 'JetBrainsMono_400Regular',
            fontSize: 9,
            color: '#3A3F4B',
            letterSpacing: 0.9,
          }}>
          KYLES ROAD
        </Text>
        <Text
          numberOfLines={1}
          style={{
            position: 'absolute',
            backgroundColor: 'rgba(22,24,31,.86)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.1)',
            paddingVertical: 5,
            paddingHorizontal: 9,
            borderRadius: 9,
            left: 100,
            top: 304,
            fontFamily: 'JetBrainsMono_400Regular',
            fontSize: 12,
            color: '#E6E8EC',
          }}>
          Samos
        </Text>
        <Text
          numberOfLines={1}
          style={{
            position: 'absolute',
            backgroundColor: 'rgba(22,24,31,.86)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.1)',
            paddingVertical: 5,
            paddingHorizontal: 9,
            borderRadius: 9,
            left: 178,
            top: 304,
            fontFamily: 'JetBrainsMono_400Regular',
            fontSize: 12,
            color: '#E6E8EC',
          }}>
          Naxos
        </Text>
        <Text
          numberOfLines={1}
          style={{
            position: 'absolute',
            backgroundColor: 'rgba(22,24,31,.86)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.1)',
            paddingVertical: 5,
            paddingHorizontal: 9,
            borderRadius: 9,
            left: 262,
            top: 286,
            fontFamily: 'JetBrainsMono_400Regular',
            fontSize: 12,
            color: '#E6E8EC',
          }}>
          Paros
        </Text>
        <Text
          numberOfLines={1}
          style={{
            position: 'absolute',
            backgroundColor: 'rgba(22,24,31,.86)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.1)',
            paddingVertical: 5,
            paddingHorizontal: 9,
            borderRadius: 9,
            left: 300,
            top: 338,
            fontFamily: 'JetBrainsMono_400Regular',
            fontSize: 12,
            color: '#E6E8EC',
          }}>
          Mykonos
        </Text>
        <Text
          numberOfLines={1}
          style={{
            position: 'absolute',
            backgroundColor: 'rgba(22,24,31,.86)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.1)',
            paddingVertical: 5,
            paddingHorizontal: 9,
            borderRadius: 9,
            left: 190,
            top: 380,
            fontFamily: 'JetBrainsMono_400Regular',
            fontSize: 12,
            color: '#E6E8EC',
          }}>
          Rhodes
        </Text>
        <Text
          numberOfLines={1}
          style={{
            position: 'absolute',
            backgroundColor: 'rgba(22,24,31,.86)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.1)',
            paddingVertical: 5,
            paddingHorizontal: 9,
            borderRadius: 9,
            left: 86,
            top: 414,
            fontFamily: 'JetBrainsMono_400Regular',
            fontSize: 12,
            color: '#E6E8EC',
          }}>
          Santorini
        </Text>
        <Text
          numberOfLines={1}
          style={{
            position: 'absolute',
            backgroundColor: 'rgba(22,24,31,.86)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.1)',
            paddingVertical: 5,
            paddingHorizontal: 9,
            borderRadius: 9,
            left: 268,
            top: 414,
            fontFamily: 'JetBrainsMono_400Regular',
            fontSize: 12,
            color: '#E6E8EC',
          }}>
          Izmir
        </Text>
        <Text
          numberOfLines={1}
          style={{
            position: 'absolute',
            backgroundColor: 'rgba(22,24,31,.86)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.1)',
            paddingVertical: 5,
            paddingHorizontal: 9,
            borderRadius: 9,
            left: 44,
            top: 488,
            fontFamily: 'JetBrainsMono_400Regular',
            fontSize: 12,
            color: '#E6E8EC',
          }}>
          Bodrum castle
        </Text>
        <Text
          numberOfLines={1}
          style={{
            position: 'absolute',
            backgroundColor: 'rgba(22,24,31,.86)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.1)',
            paddingVertical: 5,
            paddingHorizontal: 9,
            borderRadius: 9,
            left: 150,
            top: 464,
            fontFamily: 'JetBrainsMono_400Regular',
            fontSize: 12,
            color: '#E6E8EC',
          }}>
          Alaçatı Bays
        </Text>
        <Text
          numberOfLines={1}
          style={{
            position: 'absolute',
            backgroundColor: 'rgba(22,24,31,.86)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.1)',
            paddingVertical: 5,
            paddingHorizontal: 9,
            borderRadius: 9,
            left: 268,
            top: 506,
            fontFamily: 'JetBrainsMono_400Regular',
            fontSize: 12,
            color: '#E6E8EC',
          }}>
          Çeşme
        </Text>
        <Image
          source={{ uri: asset('318b072146.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            width: 46,
            height: 46,
            borderRadius: '50%',
            borderWidth: 2,
            borderColor: 'rgba(255,255,255,.9)',
            boxShadow: '0 6px 16px rgba(0,0,0,.6)',
            left: 196,
            top: 236,
          }}
        />
        <Image
          source={{ uri: asset('cfc112b1d2.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            width: 46,
            height: 46,
            borderRadius: '50%',
            borderWidth: 2,
            borderColor: 'rgba(255,255,255,.9)',
            boxShadow: '0 6px 16px rgba(0,0,0,.6)',
            left: 276,
            top: 226,
          }}
        />
        <Image
          source={{ uri: asset('fe81a6571b.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            width: 46,
            height: 46,
            borderRadius: '50%',
            borderWidth: 2,
            borderColor: 'rgba(255,255,255,.9)',
            boxShadow: '0 6px 16px rgba(0,0,0,.6)',
            left: 334,
            top: 262,
          }}
        />
        <Image
          source={{ uri: asset('26ea7b4816.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            width: 46,
            height: 46,
            borderRadius: '50%',
            borderWidth: 2,
            borderColor: 'rgba(255,255,255,.9)',
            boxShadow: '0 6px 16px rgba(0,0,0,.6)',
            left: 130,
            top: 344,
          }}
        />
        <Image
          source={{ uri: asset('94319b63ac.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            width: 46,
            height: 46,
            borderRadius: '50%',
            borderWidth: 2,
            borderColor: 'rgba(255,255,255,.9)',
            boxShadow: '0 6px 16px rgba(0,0,0,.6)',
            left: 206,
            top: 334,
          }}
        />
        <Image
          source={{ uri: asset('9d87548880.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            width: 46,
            height: 46,
            borderRadius: '50%',
            borderWidth: 2,
            borderColor: 'rgba(255,255,255,.9)',
            boxShadow: '0 6px 16px rgba(0,0,0,.6)',
            left: 334,
            top: 376,
          }}
        />
        <Image
          source={{ uri: asset('3910a9306f.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            width: 46,
            height: 46,
            borderRadius: '50%',
            borderWidth: 2,
            borderColor: 'rgba(255,255,255,.9)',
            boxShadow: '0 6px 16px rgba(0,0,0,.6)',
            left: 168,
            top: 418,
          }}
        />
        <Image
          source={{ uri: asset('80d43b8e3e.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            width: 46,
            height: 46,
            borderRadius: '50%',
            borderWidth: 2,
            borderColor: 'rgba(255,255,255,.9)',
            boxShadow: '0 6px 16px rgba(0,0,0,.6)',
            left: 222,
            top: 412,
          }}
        />
        <Image
          source={{ uri: asset('de71224bfc.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            width: 46,
            height: 46,
            borderRadius: '50%',
            borderWidth: 2,
            borderColor: 'rgba(255,255,255,.9)',
            boxShadow: '0 6px 16px rgba(0,0,0,.6)',
            left: 300,
            top: 450,
          }}
        />
        <Image
          source={{ uri: asset('a340ebf012.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            width: 46,
            height: 46,
            borderRadius: '50%',
            borderWidth: 2,
            borderColor: 'rgba(255,255,255,.9)',
            boxShadow: '0 6px 16px rgba(0,0,0,.6)',
            left: 82,
            top: 520,
          }}
        />
        <Image
          source={{ uri: asset('318b072146.jpg') }}
          contentFit="cover"
          contentPosition="right"
          style={{
            position: 'absolute',
            width: 46,
            height: 46,
            borderRadius: '50%',
            borderWidth: 2,
            borderColor: 'rgba(255,255,255,.9)',
            boxShadow: '0 6px 16px rgba(0,0,0,.6)',
            left: 208,
            top: 494,
          }}
        />
        <Image
          source={{ uri: asset('80d43b8e3e.jpg') }}
          contentFit="cover"
          contentPosition="right"
          style={{
            position: 'absolute',
            width: 46,
            height: 46,
            borderRadius: '50%',
            borderWidth: 2,
            borderColor: 'rgba(255,255,255,.9)',
            boxShadow: '0 6px 16px rgba(0,0,0,.6)',
            left: 260,
            top: 536,
          }}
        />
        <Pressable
          accessibilityRole="button"
          accessibilityLabel="Map layers"
          style={{
            backgroundColor: 'rgba(28,30,38,.9)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.12)',
            position: 'absolute',
            right: 18,
            top: 516,
            width: 46,
            height: 46,
            borderRadius: '50%',
            padding: 0,
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'row',
          }}>
          <Svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#F3F4F6"
            strokeWidth="1.8">
            <Path d="m12 3 9 5-9 5-9-5z" />
            <Path d="m3 13 9 5 9-5" />
          </Svg>
        </Pressable>
        <View
          style={{
            backgroundColor: 'rgba(20,22,28,.88)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.12)',
            position: 'absolute',
            left: 10,
            right: 10,
            top: 50,
            borderRadius: 30,
            paddingTop: 12,
            paddingBottom: 14,
            paddingHorizontal: 12,
            overflow: 'hidden',
          }}>
          <BlurView intensity={36} tint="dark" style={StyleSheet.absoluteFill} />
          <View style={{ gap: 8, alignItems: 'center', flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="link"
              accessibilityLabel="Back"
              onPress={() => router.navigate('/')}
              style={{
                width: 52,
                height: 52,
                borderRadius: '50%',
                flexShrink: 0,
                borderWidth: 1,
                borderColor: 'rgba(111,149,255,.4)',
                alignItems: 'center',
                justifyContent: 'center',
                overflow: 'hidden',
                flexDirection: 'row',
              }}>
              <Svg style={StyleSheet.absoluteFill} width="100%" height="100%">
                <Defs>
                  <RadialGradient id="glow2" cx="35%" cy="30%" rx="70%" ry="70%" fx="35%" fy="30%">
                    <Stop offset="0%" stopColor="#3E66E8" />
                    <Stop offset="100%" stopColor="#13204F" />
                  </RadialGradient>
                </Defs>
                <Rect width="100%" height="100%" fill="url(#glow2)" />
              </Svg>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="#fff"
                style={{ position: 'relative' }}>
                <Path d="M15 4 7 12l8 8-2-8z" />
              </Svg>
            </Pressable>
            <View
              style={{
                backgroundColor: 'rgba(255,255,255,.07)',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.12)',
                flex: 1,
                minWidth: 0,
                height: 50,
                borderRadius: 25,
                alignItems: 'center',
                gap: 8,
                paddingVertical: 0,
                paddingLeft: 14,
                paddingRight: 5,
                flexDirection: 'row',
              }}>
              <Svg
                width="17"
                height="17"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#9AA0AB"
                strokeWidth="2">
                <Circle cx="11" cy="11" r="7" />
                <Path d="m20 20-3.5-3.5" />
              </Svg>
              <TextInput
                defaultValue="Aegean coast"
                accessibilityLabel="Search"
                style={{
                  flex: 1,
                  minWidth: 0,
                  borderWidth: 0,
                  fontFamily: 'Inter_400Regular',
                  fontSize: 15,
                  color: '#F3F4F6',
                }}
              />
              <Pressable
                accessibilityRole="button"
                style={{
                  height: 38,
                  paddingVertical: 0,
                  paddingHorizontal: 12,
                  borderRadius: 19,
                  backgroundColor: 'rgba(61,107,255,.14)',
                  borderWidth: 1,
                  borderColor: 'rgba(111,149,255,.55)',
                  alignItems: 'center',
                  gap: 6,
                  flexShrink: 0,
                  flexDirection: 'row',
                }}>
                <Svg
                  width="13"
                  height="13"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#F3F4F6"
                  strokeWidth="1.8">
                  <Path d="m4 20 10-10M15 4v3M13.5 5.5h3M19 9v2M18 10h2M9 3v2M8 4h2" />
                </Svg>
                <Text
                  style={{
                    fontFamily: 'Inter_500Medium',
                    fontSize: 13,
                    color: '#F3F4F6',
                    flexShrink: 1,
                  }}>
                  AI Mode
                </Text>
              </Pressable>
            </View>
          </View>
          <View style={{ gap: 8, marginTop: 12, overflow: 'hidden', flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              style={{
                height: 38,
                paddingVertical: 0,
                paddingHorizontal: 14,
                borderRadius: 19,
                borderWidth: 1,
                borderColor: 'rgba(160,190,255,.45)',
                boxShadow:
                  'inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(10,25,90,.35), 0 6px 18px rgba(61,107,255,.45)',
                alignItems: 'center',
                gap: 6,
                flexShrink: 0,
                overflow: 'hidden',
                flexDirection: 'row',
              }}>
              <LinearGradient
                colors={['#6E97FF', '#3D6BFF', '#2449D4']}
                locations={[0, 0.5, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
              <Svg
                width="13"
                height="13"
                viewBox="0 0 24 24"
                fill="#fff"
                style={{ position: 'relative' }}>
                <Path d="M3 11 21 3l-8 18-2-8z" />
              </Svg>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Inter_600SemiBold',
                  fontSize: 13,
                  color: '#F3F4F6',
                }}>
                All Places
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                backgroundColor: 'rgba(255,255,255,.07)',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.12)',
                height: 38,
                paddingVertical: 0,
                paddingHorizontal: 12,
                borderRadius: 19,
                alignItems: 'center',
                gap: 6,
                flexShrink: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="15"
                height="15"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#D5D8DE"
                strokeWidth="1.8">
                <Path d="m2 19 7-11 5 7 3-4 5 8z" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'Inter_400Regular',
                  fontSize: 13,
                  color: '#D5D8DE',
                  flexShrink: 1,
                }}>
                Scenic
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                backgroundColor: 'rgba(255,255,255,.07)',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.12)',
                height: 38,
                paddingVertical: 0,
                paddingHorizontal: 12,
                borderRadius: 19,
                alignItems: 'center',
                gap: 6,
                flexShrink: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#D5D8DE"
                strokeWidth="1.8">
                <Rect x="5" y="3" width="14" height="18" rx="2" />
                <Path d="M9 7h2M13 7h2M9 11h2M13 11h2M10 21v-4h4v4" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'Inter_400Regular',
                  fontSize: 13,
                  color: '#D5D8DE',
                  flexShrink: 1,
                }}>
                Hotels
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                backgroundColor: 'rgba(255,255,255,.07)',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.12)',
                height: 38,
                paddingVertical: 0,
                paddingHorizontal: 12,
                borderRadius: 19,
                alignItems: 'center',
                gap: 6,
                flexShrink: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#D5D8DE"
                strokeWidth="1.8">
                <Path d="M3 11 12 4l9 7v9H3z" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'Inter_400Regular',
                  fontSize: 13,
                  color: '#D5D8DE',
                  flexShrink: 1,
                }}>
                Stays
              </Text>
            </Pressable>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            height: 271,
            borderTopLeftRadius: 30,
            borderTopRightRadius: 30,
            borderBottomRightRadius: 0,
            borderBottomLeftRadius: 0,
            backgroundColor: '#101218',
            borderTopWidth: 1,
            borderTopColor: 'rgba(255,255,255,.1)',
          }}>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Expand list"
            style={{
              position: 'absolute',
              left: '50%',
              top: -22,
              transform: [{ translateX: '-50%' }],
              width: 44,
              height: 44,
              borderWidth: 0,
              padding: 0,
              alignItems: 'center',
              justifyContent: 'center',
              zIndex: 1,
              flexDirection: 'row',
            }}>
            <Svg width="34" height="22" viewBox="0 0 34 22" fill="#3D6BFF">
              <Path d="M17 2 32 20c-5-4-10-6-15-6S7 16 2 20z" />
            </Svg>
          </Pressable>
          <View
            style={{
              alignItems: 'baseline',
              justifyContent: 'space-between',
              paddingTop: 24,
              paddingBottom: 0,
              paddingHorizontal: 22,
              flexDirection: 'row',
            }}>
            <Text
              style={{
                margin: 0,
                flexShrink: 1,
                fontFamily: 'InstrumentSerif_400Regular',
                fontSize: 24,
                color: '#F3F4F6',
              }}>
              {'Nearby '}
              <Text style={{ fontFamily: 'InstrumentSerif_400Regular_Italic', color: '#6F95FF' }}>
                finds
              </Text>
            </Text>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'JetBrainsMono_400Regular',
                fontSize: 11,
                color: '#9AA0AB',
                letterSpacing: 1.1,
              }}>
              12 PLACES
            </Text>
          </View>
          <View
            style={{
              gap: 10,
              paddingTop: 14,
              paddingBottom: 0,
              paddingLeft: 16,
              paddingRight: 0,
              flexDirection: 'row',
            }}>
            <View
              style={{
                width: 160,
                height: 172,
                borderRadius: 20,
                overflow: 'hidden',
                flexShrink: 0,
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.08)',
              }}>
              <Image
                source={{ uri: asset('cfc112b1d2.jpg') }}
                contentFit="cover"
                accessibilityLabel="Oia village at sunset"
                style={{
                  position: 'absolute',
                  top: 0,
                  right: 0,
                  bottom: 0,
                  left: 0,
                  width: '100%',
                  height: '100%',
                }}
              />
              <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
                <LinearGradient
                  colors={['rgba(6,7,10,0)', 'rgba(6,7,10,.85)']}
                  locations={[0.45, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <Text
                style={{
                  position: 'absolute',
                  top: 10,
                  left: 10,
                  paddingVertical: 6,
                  paddingHorizontal: 8,
                  borderRadius: 8,
                  backgroundColor: 'rgba(20,22,28,.65)',
                  borderWidth: 1,
                  borderColor: 'rgba(255,255,255,.12)',
                  fontFamily: 'JetBrainsMono_400Regular',
                  fontSize: 9,
                  color: '#F3F4F6',
                  letterSpacing: 0.9,
                }}>
                CLIFFSIDE
              </Text>
              <Pressable
                accessibilityRole="button"
                accessibilityLabel="Like"
                style={{
                  position: 'absolute',
                  top: 8,
                  right: 8,
                  width: 30,
                  height: 30,
                  borderRadius: 9,
                  padding: 0,
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: 'rgba(20,22,28,.65)',
                  borderWidth: 1,
                  borderColor: 'rgba(255,255,255,.12)',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="13"
                  height="13"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#F3F4F6"
                  strokeWidth="2">
                  <Path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" />
                </Svg>
              </Pressable>
              <View style={{ position: 'absolute', left: 12, bottom: 12 }}>
                <View style={{ gap: 10, flexDirection: 'row' }}>
                  <Text
                    style={{
                      flexShrink: 1,
                      fontFamily: 'Inter_400Regular',
                      fontSize: 11,
                      color: '#E6E8EC',
                    }}>
                    ★ 4.9
                  </Text>
                  <Text
                    style={{
                      flexShrink: 1,
                      fontFamily: 'Inter_400Regular',
                      fontSize: 11,
                      color: '#E6E8EC',
                    }}>
                    ◷ 2.4km
                  </Text>
                </View>
                <Text
                  style={{
                    marginTop: 2,
                    fontFamily: 'InstrumentSerif_400Regular_Italic',
                    fontSize: 22,
                    color: '#F3F4F6',
                  }}>
                  Oia Village
                </Text>
              </View>
            </View>
            <View
              style={{
                width: 160,
                height: 172,
                borderRadius: 20,
                overflow: 'hidden',
                flexShrink: 0,
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.08)',
              }}>
              <Image
                source={{ uri: asset('a340ebf012.jpg') }}
                contentFit="cover"
                accessibilityLabel="Sunset over Mykonos harbour"
                style={{
                  position: 'absolute',
                  top: 0,
                  right: 0,
                  bottom: 0,
                  left: 0,
                  width: '100%',
                  height: '100%',
                }}
              />
              <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
                <LinearGradient
                  colors={['rgba(6,7,10,0)', 'rgba(6,7,10,.85)']}
                  locations={[0.45, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <Text
                style={{
                  position: 'absolute',
                  top: 10,
                  left: 10,
                  paddingVertical: 6,
                  paddingHorizontal: 8,
                  borderRadius: 8,
                  backgroundColor: 'rgba(20,22,28,.65)',
                  borderWidth: 1,
                  borderColor: 'rgba(255,255,255,.12)',
                  fontFamily: 'JetBrainsMono_400Regular',
                  fontSize: 9,
                  color: '#F3F4F6',
                  letterSpacing: 0.9,
                }}>
                SUNSET SPOT
              </Text>
              <Pressable
                accessibilityRole="button"
                accessibilityLabel="Like"
                style={{
                  position: 'absolute',
                  top: 8,
                  right: 8,
                  width: 30,
                  height: 30,
                  borderRadius: 9,
                  padding: 0,
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: 'rgba(20,22,28,.65)',
                  borderWidth: 1,
                  borderColor: 'rgba(255,255,255,.12)',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="13"
                  height="13"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#F3F4F6"
                  strokeWidth="2">
                  <Path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" />
                </Svg>
              </Pressable>
              <View style={{ position: 'absolute', left: 12, bottom: 12 }}>
                <View style={{ gap: 10, flexDirection: 'row' }}>
                  <Text
                    style={{
                      flexShrink: 1,
                      fontFamily: 'Inter_400Regular',
                      fontSize: 11,
                      color: '#E6E8EC',
                    }}>
                    ★ 4.7
                  </Text>
                  <Text
                    style={{
                      flexShrink: 1,
                      fontFamily: 'Inter_400Regular',
                      fontSize: 11,
                      color: '#E6E8EC',
                    }}>
                    ◷ 6.1km
                  </Text>
                </View>
                <Text
                  style={{
                    marginTop: 2,
                    fontFamily: 'InstrumentSerif_400Regular_Italic',
                    fontSize: 22,
                    color: '#F3F4F6',
                  }}>
                  Mykonos Town
                </Text>
              </View>
            </View>
            <Image
              source={{ uri: asset('80d43b8e3e.jpg') }}
              contentFit="cover"
              style={{
                width: 60,
                height: 170,
                borderTopLeftRadius: 20,
                borderTopRightRadius: 0,
                borderBottomRightRadius: 0,
                borderBottomLeftRadius: 20,
                flexShrink: 0,
              }}
            />
          </View>
        </View>
      </View>
    </Screen>
  );
}

import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { router } from 'expo-router';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Svg, { Circle, Defs, Path, RadialGradient, Rect, Stop } from 'react-native-svg';

import { Screen } from '@/components/screen';
import { asset } from '@/lib/assets';

export default function TripScreen() {
  return (
    <Screen background="#06070A" statusBar="light">
      <View style={{ paddingTop: 56, paddingBottom: 0, paddingHorizontal: 0, flex: 1 }}>
        <View
          style={{
            alignItems: 'center',
            gap: 12,
            paddingVertical: 0,
            paddingHorizontal: 20,
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Back"
            onPress={() => router.navigate('/map')}
            style={{
              width: 48,
              height: 48,
              borderRadius: '50%',
              flexShrink: 0,
              borderWidth: 1,
              borderColor: 'rgba(111,149,255,.4)',
              alignItems: 'center',
              justifyContent: 'center',
              overflow: 'hidden',
              flexDirection: 'row',
            }}>
            <Svg style={StyleSheet.absoluteFill} width="100%" height="100%">
              <Defs>
                <RadialGradient id="glow3" cx="35%" cy="30%" rx="70%" ry="70%" fx="35%" fy="30%">
                  <Stop offset="0%" stopColor="#3E66E8" />
                  <Stop offset="100%" stopColor="#13204F" />
                </RadialGradient>
              </Defs>
              <Rect width="100%" height="100%" fill="url(#glow3)" />
            </Svg>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="#fff"
              style={{ position: 'relative' }}>
              <Path d="M15 4 7 12l8 8-2-8z" />
            </Svg>
          </Pressable>
          <View style={{ flex: 1 }}>
            <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 19, color: '#F3F4F6' }}>
              Greece
            </Text>
            <Text
              style={{
                marginTop: 2,
                fontFamily: 'JetBrainsMono_400Regular',
                fontSize: 10,
                color: '#9AA0AB',
                letterSpacing: 1,
              }}>
              TRIP / AEGEAN COAST
            </Text>
          </View>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/map')}
            style={{
              backgroundColor: 'rgba(255,255,255,.07)',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,.12)',
              height: 38,
              paddingVertical: 0,
              paddingHorizontal: 14,
              borderRadius: 18,
              alignItems: 'center',
              gap: 6,
              flexShrink: 1,
              flexDirection: 'row',
            }}>
            <Svg width="14" height="14" viewBox="0 0 24 24" fill="#F3F4F6">
              <Path d="M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z" />
            </Svg>
            <Text
              style={{
                fontFamily: 'Inter_500Medium',
                fontSize: 13,
                color: '#F3F4F6',
                flexShrink: 1,
              }}>
              Map
            </Text>
          </Pressable>
        </View>
        <View
          style={{
            alignItems: 'center',
            gap: 8,
            paddingTop: 22,
            paddingBottom: 0,
            paddingLeft: 20,
            paddingRight: 0,
            flexDirection: 'row',
          }}>
          <Image
            source={{ uri: asset('94319b63ac.jpg') }}
            contentFit="cover"
            accessibilityLabel="Island gift shop"
            style={{ width: 62, height: 72, borderRadius: 14, flexShrink: 0 }}
          />
          <Image
            source={{ uri: asset('3910a9306f.jpg') }}
            contentFit="cover"
            accessibilityLabel="Whitewashed alley"
            style={{ width: 62, height: 72, borderRadius: 14, flexShrink: 0 }}
          />
          <Image
            source={{ uri: asset('80d43b8e3e.jpg') }}
            contentFit="cover"
            accessibilityLabel="Oia with bougainvillea"
            style={{
              width: 80,
              height: 92,
              borderRadius: 18,
              flexShrink: 0,
              boxShadow: '0 0 0 2px #F3F4F6',
            }}
          />
          <Image
            source={{ uri: asset('318b072146.jpg') }}
            contentFit="cover"
            accessibilityLabel="Taverna terrace at night"
            style={{ width: 62, height: 72, borderRadius: 14, flexShrink: 0 }}
          />
          <Image
            source={{ uri: asset('26ea7b4816.jpg') }}
            contentFit="cover"
            accessibilityLabel="Greek dinner table"
            style={{ width: 62, height: 72, borderRadius: 14, flexShrink: 0 }}
          />
        </View>
        <View style={{ paddingTop: 18, paddingBottom: 0, paddingHorizontal: 20 }}>
          <View
            style={{
              backgroundColor: 'rgba(255,255,255,.05)',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,.12)',
              borderRadius: 22,
              padding: 10,
              gap: 14,
              flexDirection: 'row',
            }}>
            <View
              style={{
                width: 116,
                height: 116,
                borderRadius: 16,
                flexShrink: 0,
                overflow: 'hidden',
              }}>
              <Image
                source={{ uri: asset('80d43b8e3e.jpg') }}
                contentFit="cover"
                accessibilityLabel="Oia village with pink bougainvillea"
                style={{
                  position: 'absolute',
                  top: 0,
                  right: 0,
                  bottom: 0,
                  left: 0,
                  width: '100%',
                  height: '100%',
                }}
              />
              <Text
                style={{
                  position: 'absolute',
                  left: 8,
                  bottom: 8,
                  paddingVertical: 4,
                  paddingHorizontal: 7,
                  borderRadius: 7,
                  backgroundColor: 'rgba(20,22,28,.75)',
                  fontFamily: 'JetBrainsMono_400Regular',
                  fontSize: 10,
                  color: '#F3F4F6',
                }}>
                24°C
              </Text>
            </View>
            <View style={{ flex: 1, paddingTop: 4 }}>
              <View
                style={{
                  justifyContent: 'space-between',
                  alignItems: 'flex-start',
                  flexDirection: 'row',
                }}>
                <Text
                  style={{
                    flexShrink: 1,
                    fontFamily: 'InstrumentSerif_400Regular_Italic',
                    fontSize: 26,
                    color: '#F3F4F6',
                    lineHeight: 26,
                  }}>
                  Oia Village
                </Text>
                <View style={{ marginTop: 2, flexShrink: 1, flexDirection: 'row' }}>
                  <Image
                    source={{ uri: asset('f3e802a37f.jpg') }}
                    contentFit="cover"
                    style={{
                      width: 23,
                      height: 23,
                      borderRadius: '50%',
                      borderWidth: 1.5,
                      borderColor: '#101218',
                    }}
                  />
                  <Image
                    source={{ uri: asset('410a453287.jpg') }}
                    contentFit="cover"
                    contentPosition={{ left: '30%', top: '42%' }}
                    style={{
                      width: 23,
                      height: 23,
                      borderRadius: '50%',
                      borderWidth: 1.5,
                      borderColor: '#101218',
                      marginLeft: -7,
                    }}
                  />
                  <Image
                    source={{ uri: asset('410a453287.jpg') }}
                    contentFit="cover"
                    contentPosition={{ left: '45%', top: '66%' }}
                    style={{
                      width: 23,
                      height: 23,
                      borderRadius: '50%',
                      borderWidth: 1.5,
                      borderColor: '#101218',
                      marginLeft: -7,
                    }}
                  />
                  <Image
                    source={{ uri: asset('410a453287.jpg') }}
                    contentFit="cover"
                    contentPosition={{ left: '65%', top: '56%' }}
                    style={{
                      width: 23,
                      height: 23,
                      borderRadius: '50%',
                      borderWidth: 1.5,
                      borderColor: '#101218',
                      marginLeft: -7,
                    }}
                  />
                </View>
              </View>
              <Text
                style={{
                  marginTop: 6,
                  fontFamily: 'Inter_400Regular',
                  fontSize: 13,
                  color: '#9AA0AB',
                }}>
                Greece, Santorini
              </Text>
              <View style={{ alignItems: 'flex-start', gap: 6, marginTop: 12 }}>
                <View
                  style={{
                    backgroundColor: 'rgba(255,255,255,.07)',
                    borderWidth: 1,
                    borderColor: 'rgba(255,255,255,.12)',
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    borderRadius: 9,
                    alignItems: 'center',
                    gap: 6,
                    flexDirection: 'row',
                  }}>
                  <Svg width="12" height="12" viewBox="0 0 24 24" fill="#F3F4F6">
                    <Path d="M3 11 21 3l-8 18-2-8z" />
                  </Svg>
                  <Text
                    style={{
                      fontFamily: 'Inter_400Regular',
                      fontSize: 12,
                      color: '#F3F4F6',
                      flexShrink: 1,
                    }}>
                    26 spots
                  </Text>
                </View>
                <View
                  style={{
                    backgroundColor: 'rgba(255,255,255,.07)',
                    borderWidth: 1,
                    borderColor: 'rgba(255,255,255,.12)',
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    borderRadius: 9,
                    alignItems: 'center',
                    gap: 6,
                    flexDirection: 'row',
                  }}>
                  <Svg width="12" height="12" viewBox="0 0 24 24" fill="#F3F4F6">
                    <Path d="M3 6h7l2 2h9v12H3z" />
                  </Svg>
                  <Text
                    style={{
                      fontFamily: 'Inter_400Regular',
                      fontSize: 12,
                      color: '#F3F4F6',
                      flexShrink: 1,
                    }}>
                    8 types
                  </Text>
                </View>
              </View>
            </View>
          </View>
        </View>
        <View style={{ marginTop: 18, marginBottom: 0, marginHorizontal: 20 }}>
          <View
            style={{
              justifyContent: 'space-between',
              paddingVertical: 11,
              paddingHorizontal: 0,
              borderBottomWidth: 1,
              borderBottomColor: 'rgba(255,255,255,.08)',
              flexDirection: 'row',
            }}>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Inter_400Regular',
                fontSize: 14,
                color: '#9AA0AB',
              }}>
              Trip Status
            </Text>
            <View
              style={{
                margin: 0,
                alignItems: 'center',
                gap: 7,
                flexShrink: 1,
                flexDirection: 'row',
              }}>
              <View
                style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: '#34D17A' }}
              />
              <Text
                style={{
                  fontFamily: 'Inter_500Medium',
                  fontSize: 14,
                  color: '#F3F4F6',
                  flexShrink: 1,
                }}>
                Active
              </Text>
            </View>
          </View>
          <View
            style={{
              justifyContent: 'space-between',
              paddingVertical: 11,
              paddingHorizontal: 0,
              borderBottomWidth: 1,
              borderBottomColor: 'rgba(255,255,255,.08)',
              flexDirection: 'row',
            }}>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Inter_400Regular',
                fontSize: 14,
                color: '#9AA0AB',
              }}>
              Duration
            </Text>
            <Text
              style={{
                margin: 0,
                flexShrink: 1,
                fontFamily: 'Inter_500Medium',
                fontSize: 14,
                color: '#F3F4F6',
              }}>
              4 days left
            </Text>
          </View>
          <View
            style={{
              justifyContent: 'space-between',
              paddingVertical: 11,
              paddingHorizontal: 0,
              flexDirection: 'row',
            }}>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Inter_400Regular',
                fontSize: 14,
                color: '#9AA0AB',
              }}>
              Accommodation
            </Text>
            <Text
              style={{
                margin: 0,
                flexShrink: 1,
                fontFamily: 'Inter_500Medium',
                fontSize: 14,
                color: '#F3F4F6',
              }}>
              [Hotel name]
            </Text>
          </View>
        </View>
        <Pressable
          accessibilityRole="button"
          style={{
            alignItems: 'center',
            gap: 4,
            marginTop: 2,
            marginBottom: 0,
            marginHorizontal: 'auto',
            borderWidth: 0,
            paddingVertical: 6,
            paddingHorizontal: 10,
            flexDirection: 'row',
          }}>
          <Text
            style={{
              fontFamily: 'Inter_400Regular',
              fontSize: 13,
              color: '#B7BCC6',
              flexShrink: 1,
            }}>
            More info
          </Text>
          <Svg
            width="13"
            height="13"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#B7BCC6"
            strokeWidth="2">
            <Path d="m6 9 6 6 6-6" />
          </Svg>
        </Pressable>
        <View style={{ paddingTop: 10, paddingBottom: 0, paddingHorizontal: 20 }}>
          <View
            style={{
              backgroundColor: 'rgba(255,255,255,.045)',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,.12)',
              borderRadius: 16,
              paddingVertical: 12,
              paddingHorizontal: 14,
              gap: 12,
              flexDirection: 'row',
            }}>
            <View
              style={{ width: 3, borderRadius: 2, backgroundColor: '#3D6BFF', flexShrink: 0 }}
            />
            <Text
              style={{
                margin: 0,
                flexShrink: 1,
                fontFamily: 'JetBrainsMono_400Regular',
                fontSize: 11.5,
                color: '#D5D8DE',
                lineHeight: 18.4,
              }}>
              {'Visit '}
              <Text style={{ color: '#7FA2FF' }}>Akrotiri</Text>
              {' before 10 AM for a peaceful atmosphere and golden, crowd-free light.'}
            </Text>
          </View>
        </View>
        <View
          style={{
            alignItems: 'baseline',
            justifyContent: 'space-between',
            paddingTop: 22,
            paddingBottom: 0,
            paddingHorizontal: 20,
            flexDirection: 'row',
          }}>
          <Text
            style={{
              margin: 0,
              flexShrink: 1,
              fontFamily: 'InstrumentSerif_400Regular',
              fontSize: 26,
              color: '#F3F4F6',
            }}>
            {'Trip '}
            <Text style={{ fontFamily: 'InstrumentSerif_400Regular_Italic', color: '#6F95FF' }}>
              log
            </Text>
          </Text>
          <Text
            style={{
              flexShrink: 1,
              fontFamily: 'JetBrainsMono_400Regular',
              fontSize: 11,
              color: '#9AA0AB',
              letterSpacing: 1.1,
            }}>
            5 PLACES
          </Text>
        </View>
        <View
          style={{
            gap: 12,
            paddingTop: 14,
            paddingBottom: 0,
            paddingHorizontal: 20,
            flexDirection: 'row',
          }}>
          <View style={{ alignItems: 'center', gap: 6, flexShrink: 1 }}>
            <View
              style={{
                backgroundColor: 'rgba(255,255,255,.07)',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,.12)',
                width: 36,
                height: 36,
                borderRadius: 10,
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  fontFamily: 'JetBrainsMono_400Regular',
                  fontSize: 13,
                  color: '#F3F4F6',
                  flexShrink: 1,
                }}>
                1
              </Text>
            </View>
            <View style={{ width: 1, flex: 1, backgroundColor: 'rgba(255,255,255,.12)' }} />
          </View>
          <View
            style={{
              backgroundColor: 'rgba(255,255,255,.045)',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,.12)',
              flex: 1,
              borderRadius: 18,
              padding: 10,
              gap: 12,
              flexDirection: 'row',
            }}>
            <Image
              source={{ uri: asset('9d87548880.jpg') }}
              contentFit="cover"
              accessibilityLabel="Blue Dome Church"
              style={{ width: 72, height: 72, borderRadius: 12, flexShrink: 0 }}
            />
            <View style={{ flex: 1 }}>
              <Text
                style={{
                  fontFamily: 'InstrumentSerif_400Regular_Italic',
                  fontSize: 20,
                  color: '#F3F4F6',
                }}>
                Blue Dome Church
              </Text>
              <Text
                style={{
                  marginTop: 2,
                  fontFamily: 'Inter_400Regular',
                  fontSize: 12,
                  color: '#9AA0AB',
                }}>
                Greece, Santorini
              </Text>
            </View>
            <Text
              style={{
                alignSelf: 'flex-end',
                flexShrink: 1,
                fontFamily: 'JetBrainsMono_400Regular',
                fontSize: 10,
                color: '#B7BCC6',
                textAlign: 'right',
              }}>
              10:30 AM{'\n'}
              <Text style={{ color: '#7B818D' }}>DAY 02</Text>
            </Text>
          </View>
        </View>
        <Pressable
          accessibilityRole="link"
          style={{
            position: 'absolute',
            left: 112,
            bottom: 98,
            height: 36,
            paddingVertical: 0,
            paddingHorizontal: 14,
            borderRadius: 17,
            backgroundColor: 'rgba(28,30,38,.95)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.14)',
            alignItems: 'center',
            gap: 8,
            boxShadow: '0 8px 20px rgba(0,0,0,.5)',
            flexDirection: 'row',
          }}>
          <View style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: '#34D17A' }} />
          <Text
            style={{
              fontFamily: 'Inter_500Medium',
              fontSize: 13,
              color: '#F3F4F6',
              flexShrink: 1,
            }}>
            Open Itinerary
          </Text>
        </Pressable>
        <View
          style={{
            backgroundColor: 'rgba(28,30,38,.85)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,.12)',
            position: 'absolute',
            left: '50%',
            bottom: 30,
            transform: [{ translateX: '-50%' }],
            alignItems: 'center',
            gap: 4,
            padding: 6,
            borderRadius: 30,
            overflow: 'hidden',
            flexDirection: 'row',
          }}>
          <BlurView intensity={32} tint="dark" style={StyleSheet.absoluteFill} />
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Discover"
            onPress={() => router.navigate('/')}
            style={{
              width: 46,
              height: 46,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#B7BCC6"
              strokeWidth="1.8">
              <Path d="M5 18V9a7 7 0 0 1 14 0v9l-2.3-1.6L14.4 18 12 16.4 9.6 18l-2.3-1.6z" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Map"
            onPress={() => router.navigate('/map')}
            style={{
              width: 46,
              height: 46,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#B7BCC6"
              strokeWidth="1.8">
              <Path d="M3 11 21 3l-8 18-2-8z" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            style={{
              height: 46,
              paddingVertical: 0,
              paddingLeft: 8,
              paddingRight: 18,
              borderRadius: 23,
              borderWidth: 1,
              borderColor: 'rgba(160,190,255,.45)',
              boxShadow:
                'inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(10,25,90,.35), 0 6px 18px rgba(61,107,255,.45)',
              alignItems: 'center',
              gap: 8,
              flexShrink: 1,
              overflow: 'hidden',
              flexDirection: 'row',
            }}>
            <LinearGradient
              colors={['#6E97FF', '#3D6BFF', '#2449D4']}
              locations={[0, 0.5, 1]}
              start={{ x: 0.5, y: 0 }}
              end={{ x: 0.5, y: 1 }}
              style={StyleSheet.absoluteFill}
            />
            <View
              style={{
                width: 30,
                height: 30,
                borderRadius: '50%',
                backgroundColor: '#fff',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="15"
                height="15"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#3D6BFF"
                strokeWidth="2.2">
                <Rect x="3" y="5" width="18" height="16" rx="3" />
                <Path d="M3 10h18M8 3v4M16 3v4" />
              </Svg>
            </View>
            <Text
              style={{
                fontFamily: 'Inter_600SemiBold',
                fontSize: 14,
                color: '#fff',
                flexShrink: 1,
              }}>
              Trip Plan
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Profile"
            style={{
              width: 46,
              height: 46,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#B7BCC6"
              strokeWidth="1.8">
              <Circle cx="12" cy="8" r="4" />
              <Path d="M4 21a8 8 0 0 1 16 0" />
            </Svg>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { StatusBar } from 'expo-status-bar';
import type { ReactNode } from 'react';
import { ScrollView, useWindowDimensions, View } from 'react-native';

// Every screen is drawn on a 390 wide artboard, then scaled to the device width.
const ARTBOARD_WIDTH = 390;

type Props = {
  background: string;
  statusBar: 'light' | 'dark';
  height?: number;
  children: ReactNode;
};

export function Screen({ background, statusBar, height: artboardHeight = 844, children }: Props) {
  const { width, height } = useWindowDimensions();
  const scale = width / ARTBOARD_WIDTH;

  return (
    <ScrollView
      bounces={false}
      showsVerticalScrollIndicator={false}
      style={{ flex: 1, backgroundColor: background }}
      contentContainerStyle={{ height: Math.max(artboardHeight * scale, height) }}>
      <StatusBar style={statusBar} />
      <View
        style={{
          width: ARTBOARD_WIDTH,
          height: artboardHeight,
          overflow: 'hidden',
          transformOrigin: 'left top',
          transform: [{ scale }],
        }}>
        {children}
      </View>
    </ScrollView>
  );
}

// Demo images are hosted by DeveloperMill. Point this at your own CDN, or swap to require().
const ASSET_BASE = 'https://developermill.com/app-designs/trip-planner-app-ui-design/assets';

export const asset = (name: string) => `${ASSET_BASE}/${name}`;