Real Estate Booking App UI Design in Expo

import {
  DMSans_400Regular,
  DMSans_500Medium,
  DMSans_600SemiBold,
  DMSans_700Bold,
} from '@expo-google-fonts/dm-sans';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    DMSans_400Regular,
    DMSans_500Medium,
    DMSans_600SemiBold,
    DMSans_700Bold,
  });

  if (!fontsLoaded) return null;

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

import { Image } from 'expo-image';
import { router } from 'expo-router';
import { Pressable, 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="#EFEDE9" statusBar="dark">
      <View style={{ paddingTop: 24, paddingBottom: 0, paddingHorizontal: 20, flex: 1 }}>
        <View style={{ alignItems: 'center', gap: 10, flexDirection: 'row' }}>
          <Svg
            width="34"
            height="30"
            viewBox="0 0 34 30"
            fill="none"
            stroke="#1E1E1C"
            strokeWidth="2.4"
            strokeLinejoin="round">
            <Path d="M3 14 L17 3 L31 14" />
            <Path d="M7 11 V27 H27 V11" />
            <Path d="M14 27 V18 H20 V27" />
          </Svg>
          <View style={{ gap: 1, flexShrink: 1 }}>
            <Text
              style={{
                fontFamily: 'DMSans_700Bold',
                fontSize: 15,
                color: '#1E1E1C',
                letterSpacing: 2,
              }}>
              NESTORA
            </Text>
            <Text
              style={{
                fontFamily: 'DMSans_500Medium',
                fontSize: 7,
                color: '#5E5D57',
                letterSpacing: 1.6,
              }}>
              REAL ESTATE
            </Text>
          </View>
        </View>
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'space-between',
            marginTop: 18,
            flexDirection: 'row',
          }}>
          <View style={{ gap: 4, flexShrink: 1 }}>
            <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 14, color: '#4A4944' }}>
              Hi, Alex!
            </Text>
            <Text
              style={{
                margin: 0,
                fontFamily: 'DMSans_600SemiBold',
                fontSize: 20,
                color: '#1E1E1C',
                letterSpacing: -0.2,
              }}>
              Find your perfect place
            </Text>
          </View>
          <View style={{ alignItems: 'center', gap: 10, flexShrink: 1, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Notifications"
              style={{
                width: 44,
                height: 44,
                borderRadius: 22,
                borderWidth: 0,
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1E1E1C"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
                <Path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
              </Svg>
              <View
                style={{
                  position: 'absolute',
                  top: 9,
                  right: 10,
                  width: 12,
                  height: 12,
                  borderRadius: 4,
                  backgroundColor: '#2E3320',
                  borderWidth: 2,
                  borderColor: '#FFFFFF',
                }}
              />
            </Pressable>
            <Image
              source={{ uri: asset('2a23d578a0.jpg') }}
              contentFit="cover"
              accessibilityLabel="Alex's profile photo"
              style={{ width: 44, height: 44, borderRadius: 22 }}
            />
          </View>
        </View>
        <View
          style={{
            alignItems: 'center',
            gap: 10,
            marginTop: 18,
            height: 52,
            backgroundColor: '#FFFFFF',
            borderRadius: 26,
            paddingVertical: 0,
            paddingLeft: 18,
            paddingRight: 6,
            flexDirection: 'row',
          }}>
          <Svg
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#1E1E1C"
            strokeWidth="2"
            strokeLinecap="round">
            <Circle cx="11" cy="11" r="7" />
            <Path d="M20 20l-3.5-3.5" />
          </Svg>
          <TextInput
            placeholder="Search location, property or agent"
            placeholderTextColor="#8A8A8A"
            style={{
              flex: 1,
              minWidth: 0,
              borderWidth: 0,
              fontFamily: 'DMSans_400Regular',
              fontSize: 13,
              color: '#1E1E1C',
            }}
          />
          <View style={{ width: 1, height: 24, backgroundColor: '#E2DFD9' }} />
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Filters"
            style={{
              width: 40,
              height: 40,
              borderWidth: 0,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Path d="M4 7h10M18 7h2M4 17h4M12 17h8" />
              <Circle cx="16" cy="7" r="2" />
              <Circle cx="10" cy="17" r="2" />
            </Svg>
          </Pressable>
        </View>
        <View style={{ marginTop: 16, flexDirection: 'row', gap: 10 }}>
          <Pressable
            accessibilityRole="button"
            style={{
              height: 74,
              borderWidth: 0,
              borderRadius: 18,
              backgroundColor: '#2E3320',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 8,
              flex: 1,
            }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#FFFFFF"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Path d="M4 10.5 12 4l8 6.5V20H4z" />
              <Path d="M10 20v-5h4v5" />
            </Svg>
            <Text style={{ fontFamily: 'DMSans_500Medium', fontSize: 12, color: '#FFFFFF' }}>
              Buy
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              height: 74,
              borderWidth: 0,
              borderRadius: 18,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 8,
              flex: 1,
            }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Circle cx="15.5" cy="8.5" r="4.5" />
              <Path d="M12.3 11.7 4 20M7 17l2 2M5.5 18.5l1.5 1.5" />
            </Svg>
            <Text style={{ fontFamily: 'DMSans_500Medium', fontSize: 12, color: '#1E1E1C' }}>
              Rent
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              height: 74,
              borderWidth: 0,
              borderRadius: 18,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 8,
              flex: 1,
            }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Rect x="4" y="5" width="16" height="15" rx="2.5" />
              <Path d="M4 10h16M9 3v4M15 3v4" />
            </Svg>
            <Text style={{ fontFamily: 'DMSans_500Medium', fontSize: 12, color: '#1E1E1C' }}>
              Short Stay
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              height: 74,
              borderWidth: 0,
              borderRadius: 18,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 8,
              flex: 1,
            }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Circle cx="12" cy="8" r="4" />
              <Path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" />
            </Svg>
            <Text style={{ fontFamily: 'DMSans_500Medium', fontSize: 12, color: '#1E1E1C' }}>
              Agents
            </Text>
          </Pressable>
        </View>
        <View
          style={{
            marginTop: 16,
            height: 212,
            borderRadius: 22,
            overflow: 'hidden',
            backgroundColor: '#4B4F43',
          }}>
          <Image
            source={{ uri: asset('d71e442058.jpg') }}
            contentFit="cover"
            accessibilityLabel="Modern villa at dusk"
            style={{
              position: 'absolute',
              top: 0,
              right: 0,
              bottom: 0,
              left: 0,
              width: '100%',
              height: '100%',
            }}
          />
          <Text
            style={{
              position: 'absolute',
              top: 14,
              left: 14,
              backgroundColor: 'rgba(255,255,255,0.9)',
              paddingVertical: 4,
              paddingHorizontal: 9,
              borderRadius: 10,
              fontFamily: 'DMSans_500Medium',
              fontSize: 10,
              color: '#1E1E1C',
            }}>
            Featured
          </Text>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Save to favorites"
            style={{
              position: 'absolute',
              top: 10,
              right: 10,
              width: 36,
              height: 36,
              borderRadius: 18,
              borderWidth: 0,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <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: 0,
              right: 0,
              bottom: 0,
              paddingTop: 12,
              paddingBottom: 10,
              paddingHorizontal: 16,
              backgroundColor: 'rgba(20,22,16,0.55)',
              gap: 8,
            }}>
            <View
              style={{
                alignItems: 'flex-end',
                justifyContent: 'space-between',
                flexDirection: 'row',
              }}>
              <View style={{ gap: 3, flexShrink: 1 }}>
                <Text style={{ fontFamily: 'DMSans_600SemiBold', fontSize: 14, color: '#FFFFFF' }}>
                  Modern Villa in Beverly Hills
                </Text>
                <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 11, color: '#E4E3DD' }}>
                  Beverly Hills, California, USA
                </Text>
              </View>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'DMSans_600SemiBold',
                  fontSize: 16,
                  color: '#FFFFFF',
                }}>
                $2,850,000
              </Text>
            </View>
            <View style={{ height: 1, backgroundColor: 'rgba(255,255,255,0.18)' }} />
            <View style={{ gap: 22, flexDirection: 'row' }}>
              <View style={{ alignItems: 'center', gap: 6, flexShrink: 1, flexDirection: 'row' }}>
                <Svg
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#E4E3DD"
                  strokeWidth="1.8">
                  <Path d="M3 18V8M21 18v-5H3M7 13V10h5v3" />
                </Svg>
                <Text
                  style={{
                    fontFamily: 'DMSans_400Regular',
                    fontSize: 11,
                    color: '#E4E3DD',
                    flexShrink: 1,
                  }}>
                  4 Beds
                </Text>
              </View>
              <View style={{ alignItems: 'center', gap: 6, flexShrink: 1, flexDirection: 'row' }}>
                <Svg
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#E4E3DD"
                  strokeWidth="1.8">
                  <Path d="M4 12h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4zM6 12V6a2 2 0 0 1 4 0" />
                </Svg>
                <Text
                  style={{
                    fontFamily: 'DMSans_400Regular',
                    fontSize: 11,
                    color: '#E4E3DD',
                    flexShrink: 1,
                  }}>
                  5 Baths
                </Text>
              </View>
              <View style={{ alignItems: 'center', gap: 6, flexShrink: 1, flexDirection: 'row' }}>
                <Svg
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#E4E3DD"
                  strokeWidth="1.8">
                  <Rect x="4" y="4" width="16" height="16" rx="1.5" />
                  <Path d="M4 9h5V4" />
                </Svg>
                <Text
                  style={{
                    fontFamily: 'DMSans_400Regular',
                    fontSize: 11,
                    color: '#E4E3DD',
                    flexShrink: 1,
                  }}>
                  3,250 sqft
                </Text>
              </View>
            </View>
            <View style={{ justifyContent: 'center', gap: 5, flexDirection: 'row' }}>
              <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#FFFFFF' }} />
              <View
                style={{
                  width: 6,
                  height: 6,
                  borderRadius: 3,
                  backgroundColor: 'rgba(255,255,255,0.4)',
                }}
              />
              <View
                style={{
                  width: 6,
                  height: 6,
                  borderRadius: 3,
                  backgroundColor: 'rgba(255,255,255,0.4)',
                }}
              />
              <View
                style={{
                  width: 6,
                  height: 6,
                  borderRadius: 3,
                  backgroundColor: 'rgba(255,255,255,0.4)',
                }}
              />
            </View>
          </View>
        </View>
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'space-between',
            marginTop: 20,
            flexDirection: 'row',
          }}>
          <Text
            style={{
              margin: 0,
              flexShrink: 1,
              fontFamily: 'DMSans_600SemiBold',
              fontSize: 15,
              color: '#1E1E1C',
            }}>
            Popular Locations
          </Text>
          <Pressable accessibilityRole="link" style={{ flexShrink: 1 }}>
            <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 12, color: '#4A4944' }}>
              View all
            </Text>
          </Pressable>
        </View>
        <View style={{ gap: 10, marginTop: 12, marginRight: -20, flexDirection: 'row' }}>
          <View
            style={{
              flexGrow: 0,
              flexShrink: 0,
              flexBasis: 98,
              height: 120,
              borderRadius: 16,
              overflow: 'hidden',
              backgroundColor: '#5C6B6E',
            }}>
            <Image
              source={{ uri: asset('33e147f9df.jpg') }}
              contentFit="cover"
              accessibilityLabel="Miami beach at sunset"
              style={{
                position: 'absolute',
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
                width: '100%',
                height: '100%',
              }}
            />
            <View
              style={{
                position: 'absolute',
                left: 0,
                right: 0,
                bottom: 0,
                height: 56,
                backgroundColor: 'rgba(15,15,12,0.45)',
              }}
            />
            <View style={{ position: 'absolute', left: 10, bottom: 10, gap: 1 }}>
              <Text style={{ fontFamily: 'DMSans_600SemiBold', fontSize: 12, color: '#FFFFFF' }}>
                Miami
              </Text>
              <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#E8EBEB' }}>
                Florida
              </Text>
            </View>
          </View>
          <View
            style={{
              flexGrow: 0,
              flexShrink: 0,
              flexBasis: 98,
              height: 120,
              borderRadius: 16,
              overflow: 'hidden',
              backgroundColor: '#56606E',
            }}>
            <Image
              source={{ uri: asset('b1276a3ca6.jpg') }}
              contentFit="cover"
              accessibilityLabel="New York skyline at sunset"
              style={{
                position: 'absolute',
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
                width: '100%',
                height: '100%',
              }}
            />
            <View
              style={{
                position: 'absolute',
                left: 0,
                right: 0,
                bottom: 0,
                height: 56,
                backgroundColor: 'rgba(15,15,12,0.45)',
              }}
            />
            <View style={{ position: 'absolute', left: 10, bottom: 10, gap: 1 }}>
              <Text style={{ fontFamily: 'DMSans_600SemiBold', fontSize: 12, color: '#FFFFFF' }}>
                New York
              </Text>
              <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#E8EAEE' }}>
                New York
              </Text>
            </View>
          </View>
          <View
            style={{
              flexGrow: 0,
              flexShrink: 0,
              flexBasis: 98,
              height: 120,
              borderRadius: 16,
              overflow: 'hidden',
              backgroundColor: '#6E5B52',
            }}>
            <Image
              source={{ uri: asset('6ff08f5b7d.jpg') }}
              contentFit="cover"
              accessibilityLabel="Los Angeles skyline with palm trees"
              style={{
                position: 'absolute',
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
                width: '100%',
                height: '100%',
              }}
            />
            <View
              style={{
                position: 'absolute',
                left: 0,
                right: 0,
                bottom: 0,
                height: 56,
                backgroundColor: 'rgba(15,15,12,0.45)',
              }}
            />
            <View style={{ position: 'absolute', left: 10, bottom: 10, gap: 1 }}>
              <Text style={{ fontFamily: 'DMSans_600SemiBold', fontSize: 12, color: '#FFFFFF' }}>
                Los Angeles
              </Text>
              <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#F0E9E5' }}>
                California
              </Text>
            </View>
          </View>
          <View
            style={{
              flexGrow: 0,
              flexShrink: 0,
              flexBasis: 98,
              height: 120,
              borderRadius: 16,
              overflow: 'hidden',
              backgroundColor: '#5A5E6C',
            }}>
            <Image
              source={{ uri: asset('be769bbfd2.jpg') }}
              contentFit="cover"
              accessibilityLabel="Dubai skyline at blue hour"
              style={{
                position: 'absolute',
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
                width: '100%',
                height: '100%',
              }}
            />
            <View
              style={{
                position: 'absolute',
                left: 0,
                right: 0,
                bottom: 0,
                height: 56,
                backgroundColor: 'rgba(15,15,12,0.45)',
              }}
            />
            <View style={{ position: 'absolute', left: 10, bottom: 10, gap: 1 }}>
              <Text style={{ fontFamily: 'DMSans_600SemiBold', fontSize: 12, color: '#FFFFFF' }}>
                Dubai
              </Text>
              <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#E9EAEE' }}>
                UAE
              </Text>
            </View>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 16,
            right: 16,
            bottom: 18,
            height: 68,
            borderRadius: 34,
            backgroundColor: '#FFFFFF',
            justifyContent: 'space-around',
            alignItems: 'center',
            paddingVertical: 0,
            paddingHorizontal: 8,
            boxShadow: '0 6px 24px rgba(30,30,28,0.08)',
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/')}
            style={{
              width: 70,
              height: 52,
              borderRadius: 26,
              backgroundColor: '#2E3320',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 4,
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#FFFFFF"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Path d="M4 10.5 12 4l8 6.5V20H4z" />
              <Path d="M10 20v-5h4v5" />
            </Svg>
            <Text style={{ fontFamily: 'DMSans_500Medium', fontSize: 10, color: '#FFFFFF' }}>
              Home
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            style={{ alignItems: 'center', gap: 4, padding: 8, flexShrink: 1 }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Circle cx="11" cy="11" r="7" />
              <Path d="M20 20l-3.5-3.5" />
            </Svg>
            <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#1E1E1C' }}>
              Search
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/bookings')}
            style={{ alignItems: 'center', gap: 4, padding: 8, flexShrink: 1 }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Rect x="4" y="5" width="16" height="15" rx="2.5" />
              <Path d="M4 10h16M9 3v4M15 3v4" />
            </Svg>
            <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#1E1E1C' }}>
              Bookings
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            style={{ alignItems: 'center', gap: 4, padding: 8, flexShrink: 1 }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Circle cx="12" cy="8" r="4" />
              <Path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" />
            </Svg>
            <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#1E1E1C' }}>
              Profile
            </Text>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { Image } from 'expo-image';
import { router } from 'expo-router';
import { Pressable, Text, 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 BookingsScreen() {
  return (
    <Screen background="#EFEDE9" statusBar="dark">
      <View style={{ paddingTop: 24, paddingBottom: 0, paddingHorizontal: 20, flex: 1 }}>
        <View
          style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' }}>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Back"
            onPress={() => router.navigate('/')}
            style={{
              width: 44,
              height: 44,
              borderRadius: 22,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M19 12H5M11 6l-6 6 6 6" />
            </Svg>
          </Pressable>
          <View style={{ alignItems: 'center', gap: 10, flexShrink: 1, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="More options"
              style={{
                width: 44,
                height: 44,
                borderRadius: 22,
                borderWidth: 0,
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg width="18" height="18" viewBox="0 0 24 24" fill="#1E1E1C">
                <Circle cx="5" cy="12" r="1.8" />
                <Circle cx="12" cy="12" r="1.8" />
                <Circle cx="19" cy="12" r="1.8" />
              </Svg>
            </Pressable>
            <Image
              source={{ uri: asset('2a23d578a0.jpg') }}
              contentFit="cover"
              accessibilityLabel="Alex's profile photo"
              style={{ width: 44, height: 44, borderRadius: 22 }}
            />
          </View>
        </View>
        <Text
          style={{
            marginTop: 22,
            marginBottom: 0,
            marginHorizontal: 0,
            fontFamily: 'DMSans_600SemiBold',
            fontSize: 20,
            color: '#1E1E1C',
          }}>
          My Bookings
        </Text>
        <Text
          style={{
            marginTop: 16,
            marginBottom: 10,
            marginHorizontal: 0,
            fontFamily: 'DMSans_600SemiBold',
            fontSize: 14,
            color: '#1E1E1C',
          }}>
          Upcoming
        </Text>
        <View
          style={{
            backgroundColor: '#FFFFFF',
            borderRadius: 22,
            padding: 10,
            gap: 14,
            flexDirection: 'row',
          }}>
          <Image
            source={{ uri: asset('d71e442058.jpg') }}
            contentFit="cover"
            accessibilityLabel="Modern villa in Beverly Hills"
            style={{
              flexGrow: 0,
              flexShrink: 0,
              flexBasis: 120,
              width: 120,
              height: 140,
              borderRadius: 16,
            }}
          />
          <View style={{ flex: 1, paddingVertical: 4, paddingLeft: 0, paddingRight: 4 }}>
            <Text
              style={{
                alignSelf: 'flex-end',
                backgroundColor: '#F2EBDD',
                paddingVertical: 4,
                paddingHorizontal: 9,
                borderRadius: 10,
                fontFamily: 'DMSans_500Medium',
                fontSize: 10,
                color: '#6B4E17',
              }}>
              Upcoming
            </Text>
            <Text
              style={{
                marginTop: 6,
                fontFamily: 'DMSans_600SemiBold',
                fontSize: 15,
                color: '#1E1E1C',
                lineHeight: 19.5,
              }}>
              Modern Villa in{'\n'}Beverly Hills
            </Text>
            <View style={{ marginTop: 10, alignItems: 'center', gap: 6, flexDirection: 'row' }}>
              <Svg
                width="13"
                height="13"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#4A4944"
                strokeWidth="1.8">
                <Rect x="4" y="5" width="16" height="15" rx="2.5" />
                <Path d="M4 10h16M9 3v4M15 3v4" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'DMSans_400Regular',
                  fontSize: 11,
                  color: '#4A4944',
                  flexShrink: 1,
                }}>
                21 May 2024, Tue
              </Text>
            </View>
            <View style={{ marginTop: 6, alignItems: 'center', gap: 6, flexDirection: 'row' }}>
              <Svg
                width="13"
                height="13"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#4A4944"
                strokeWidth="1.8"
                strokeLinecap="round">
                <Circle cx="12" cy="12" r="8" />
                <Path d="M12 8v4l3 2" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'DMSans_400Regular',
                  fontSize: 11,
                  color: '#4A4944',
                  flexShrink: 1,
                }}>
                12:00 PM
              </Text>
            </View>
            <Pressable
              accessibilityRole="link"
              onPress={() => router.navigate('/detail')}
              style={{
                marginTop: 'auto',
                alignSelf: 'flex-end',
                alignItems: 'center',
                gap: 6,
                paddingVertical: 6,
                paddingHorizontal: 0,
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  fontFamily: 'DMSans_400Regular',
                  fontSize: 11,
                  color: '#1E1E1C',
                  flexShrink: 1,
                }}>
                View Details
              </Text>
              <Svg
                width="12"
                height="12"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1E1E1C"
                strokeWidth="2"
                strokeLinecap="round">
                <Path d="M9 6l6 6-6 6" />
              </Svg>
            </Pressable>
          </View>
        </View>
        <Text
          style={{
            marginTop: 18,
            marginBottom: 10,
            marginHorizontal: 0,
            fontFamily: 'DMSans_600SemiBold',
            fontSize: 14,
            color: '#1E1E1C',
          }}>
          Past Bookings
        </Text>
        <View style={{ backgroundColor: '#FFFFFF', borderRadius: 22, padding: 10, gap: 10 }}>
          <Pressable
            accessibilityRole="link"
            style={{ alignItems: 'center', gap: 12, flexDirection: 'row' }}>
            <Image
              source={{ uri: asset('5ff587b5b5.jpg') }}
              contentFit="cover"
              accessibilityLabel="Skyline Apartment living room"
              style={{
                flexGrow: 0,
                flexShrink: 0,
                flexBasis: 80,
                width: 80,
                height: 64,
                borderRadius: 12,
              }}
            />
            <View style={{ flex: 1, gap: 4 }}>
              <Text
                style={{
                  fontFamily: 'DMSans_600SemiBold',
                  fontSize: 12,
                  color: '#1E1E1C',
                  lineHeight: 15.6,
                }}>
                Skyline Apartment{'\n'}Downtown
              </Text>
              <View style={{ alignItems: 'center', gap: 6, flexDirection: 'row' }}>
                <Svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#4A4944"
                  strokeWidth="1.8">
                  <Rect x="4" y="5" width="16" height="15" rx="2.5" />
                  <Path d="M4 10h16M9 3v4M15 3v4" />
                </Svg>
                <Text
                  style={{
                    fontFamily: 'DMSans_400Regular',
                    fontSize: 10,
                    color: '#4A4944',
                    flexShrink: 1,
                  }}>
                  10 May 2024
                </Text>
              </View>
              <View style={{ alignItems: 'center', gap: 6, flexDirection: 'row' }}>
                <Svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#4A4944"
                  strokeWidth="1.8"
                  strokeLinecap="round">
                  <Circle cx="12" cy="12" r="8" />
                  <Path d="M12 8v4l3 2" />
                </Svg>
                <Text
                  style={{
                    fontFamily: 'DMSans_400Regular',
                    fontSize: 10,
                    color: '#4A4944',
                    flexShrink: 1,
                  }}>
                  11:00 AM
                </Text>
              </View>
            </View>
            <Svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="2"
              strokeLinecap="round">
              <Path d="M9 6l6 6-6 6" />
            </Svg>
          </Pressable>
          <View style={{ height: 1, backgroundColor: '#EFEDE9' }} />
          <Pressable
            accessibilityRole="link"
            style={{ alignItems: 'center', gap: 12, flexDirection: 'row' }}>
            <Image
              source={{ uri: asset('80d0942b48.jpg') }}
              contentFit="cover"
              accessibilityLabel="Oceanview Condo pool and beach"
              style={{
                flexGrow: 0,
                flexShrink: 0,
                flexBasis: 80,
                width: 80,
                height: 64,
                borderRadius: 12,
              }}
            />
            <View style={{ flex: 1, gap: 4 }}>
              <Text
                style={{
                  fontFamily: 'DMSans_600SemiBold',
                  fontSize: 12,
                  color: '#1E1E1C',
                  lineHeight: 15.6,
                }}>
                Oceanview Condo{'\n'}Miami Beach
              </Text>
              <View style={{ alignItems: 'center', gap: 6, flexDirection: 'row' }}>
                <Svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#4A4944"
                  strokeWidth="1.8">
                  <Rect x="4" y="5" width="16" height="15" rx="2.5" />
                  <Path d="M4 10h16M9 3v4M15 3v4" />
                </Svg>
                <Text
                  style={{
                    fontFamily: 'DMSans_400Regular',
                    fontSize: 10,
                    color: '#4A4944',
                    flexShrink: 1,
                  }}>
                  2 May 2024
                </Text>
              </View>
              <View style={{ alignItems: 'center', gap: 6, flexDirection: 'row' }}>
                <Svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#4A4944"
                  strokeWidth="1.8"
                  strokeLinecap="round">
                  <Circle cx="12" cy="12" r="8" />
                  <Path d="M12 8v4l3 2" />
                </Svg>
                <Text
                  style={{
                    fontFamily: 'DMSans_400Regular',
                    fontSize: 10,
                    color: '#4A4944',
                    flexShrink: 1,
                  }}>
                  03:30 PM
                </Text>
              </View>
            </View>
            <Svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="2"
              strokeLinecap="round">
              <Path d="M9 6l6 6-6 6" />
            </Svg>
          </Pressable>
        </View>
        <View
          style={{
            marginTop: 14,
            backgroundColor: '#E6E3DD',
            borderRadius: 22,
            padding: 16,
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: 12,
            flexDirection: 'row',
          }}>
          <View style={{ gap: 6, flexShrink: 1 }}>
            <Text style={{ fontFamily: 'DMSans_600SemiBold', fontSize: 13, color: '#1E1E1C' }}>
              Need Help?
            </Text>
            <Text
              style={{
                maxWidth: 180,
                fontFamily: 'DMSans_400Regular',
                fontSize: 10,
                color: '#4A4944',
                lineHeight: 14.5,
              }}>
              Our support team is here to assist you with your queries.
            </Text>
            <Pressable
              accessibilityRole="button"
              style={{
                alignSelf: 'flex-start',
                marginTop: 4,
                height: 30,
                paddingVertical: 0,
                paddingHorizontal: 12,
                borderWidth: 1,
                borderColor: '#CFCBC3',
                borderRadius: 15,
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'DMSans_400Regular',
                  fontSize: 10,
                  color: '#1E1E1C',
                  textAlign: 'center',
                }}>
                Contact Support
              </Text>
            </Pressable>
          </View>
          <View
            style={{
              width: 60,
              height: 60,
              borderRadius: 18,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="26"
              height="26"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="1.7"
              strokeLinecap="round">
              <Path d="M4 14v-2a8 8 0 0 1 16 0v2" />
              <Rect x="3" y="13" width="4" height="6" rx="1.5" />
              <Rect x="17" y="13" width="4" height="6" rx="1.5" />
              <Path d="M19 19c0 1.5-2 2.5-5 2.5" />
            </Svg>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 16,
            right: 16,
            bottom: 18,
            height: 68,
            borderRadius: 34,
            backgroundColor: '#FFFFFF',
            justifyContent: 'space-around',
            alignItems: 'center',
            paddingVertical: 0,
            paddingHorizontal: 8,
            boxShadow: '0 6px 24px rgba(30,30,28,0.08)',
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/')}
            style={{ alignItems: 'center', gap: 4, padding: 8, flexShrink: 1 }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Path d="M4 10.5 12 4l8 6.5V20H4z" />
              <Path d="M10 20v-5h4v5" />
            </Svg>
            <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#1E1E1C' }}>
              Home
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            style={{ alignItems: 'center', gap: 4, padding: 8, flexShrink: 1 }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Circle cx="11" cy="11" r="7" />
              <Path d="M20 20l-3.5-3.5" />
            </Svg>
            <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#1E1E1C' }}>
              Search
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/bookings')}
            style={{
              width: 78,
              height: 52,
              borderRadius: 26,
              backgroundColor: '#2E3320',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 4,
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#FFFFFF"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Rect x="4" y="5" width="16" height="15" rx="2.5" />
              <Path d="M4 10h16M9 3v4M15 3v4" />
            </Svg>
            <Text style={{ fontFamily: 'DMSans_500Medium', fontSize: 10, color: '#FFFFFF' }}>
              Bookings
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            style={{ alignItems: 'center', gap: 4, padding: 8, flexShrink: 1 }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Circle cx="12" cy="8" r="4" />
              <Path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" />
            </Svg>
            <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#1E1E1C' }}>
              Profile
            </Text>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { Image } from 'expo-image';
import { router } from 'expo-router';
import { Pressable, Text, 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 DetailScreen() {
  return (
    <Screen background="#F7F6F3" statusBar="dark">
      <View style={{ flex: 1 }}>
        <View style={{ height: 290, backgroundColor: '#8E9488' }}>
          <Image
            source={{ uri: asset('d71e442058.jpg') }}
            contentFit="cover"
            accessibilityLabel="Modern villa in Beverly Hills at dusk"
            style={{
              position: 'absolute',
              top: 0,
              right: 0,
              bottom: 0,
              left: 0,
              width: '100%',
              height: '100%',
            }}
          />
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Back"
            onPress={() => router.navigate('/')}
            style={{
              position: 'absolute',
              top: 20,
              left: 20,
              width: 44,
              height: 44,
              borderRadius: 22,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1E1E1C"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M19 12H5M11 6l-6 6 6 6" />
            </Svg>
          </Pressable>
          <View style={{ position: 'absolute', top: 20, right: 20, gap: 8, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Share"
              style={{
                width: 44,
                height: 44,
                borderRadius: 22,
                borderWidth: 0,
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1E1E1C"
                strokeWidth="1.8">
                <Circle cx="17" cy="5.5" r="2.5" />
                <Circle cx="7" cy="12" r="2.5" />
                <Circle cx="17" cy="18.5" r="2.5" />
                <Path d="M9.2 10.8l5.6-3.9M9.2 13.2l5.6 3.9" />
              </Svg>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Save to favorites"
              style={{
                width: 44,
                height: 44,
                borderRadius: 22,
                borderWidth: 0,
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1E1E1C"
                strokeWidth="1.8"
                strokeLinejoin="round">
                <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>
          <Text
            style={{
              position: 'absolute',
              right: 20,
              bottom: 42,
              backgroundColor: 'rgba(20,22,16,0.6)',
              paddingVertical: 4,
              paddingHorizontal: 10,
              borderRadius: 10,
              fontFamily: 'DMSans_400Regular',
              fontSize: 11,
              color: '#FFFFFF',
            }}>
            1/24
          </Text>
        </View>
        <View
          style={{
            marginTop: -26,
            backgroundColor: '#F7F6F3',
            borderTopLeftRadius: 26,
            borderTopRightRadius: 26,
            borderBottomRightRadius: 0,
            borderBottomLeftRadius: 0,
            paddingTop: 18,
            paddingBottom: 0,
            paddingHorizontal: 20,
            gap: 12,
          }}>
          <View
            style={{
              alignItems: 'flex-start',
              justifyContent: 'space-between',
              gap: 12,
              flexDirection: 'row',
            }}>
            <View style={{ gap: 6, flexShrink: 1 }}>
              <Text
                style={{
                  margin: 0,
                  fontFamily: 'DMSans_600SemiBold',
                  fontSize: 18,
                  color: '#1E1E1C',
                }}>
                Modern Villa in Beverly Hills
              </Text>
              <View style={{ alignItems: 'center', gap: 5, flexDirection: 'row' }}>
                <Svg
                  width="13"
                  height="13"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#55544E"
                  strokeWidth="2">
                  <Path d="M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z" />
                  <Circle cx="12" cy="10" r="2.5" />
                </Svg>
                <Text
                  style={{
                    fontFamily: 'DMSans_400Regular',
                    fontSize: 12,
                    color: '#55544E',
                    flexShrink: 1,
                  }}>
                  Beverly Hills, California, USA
                </Text>
              </View>
            </View>
            <View
              style={{
                backgroundColor: '#FFFFFF',
                borderRadius: 14,
                paddingVertical: 8,
                paddingHorizontal: 12,
                alignItems: 'center',
                gap: 2,
                flexShrink: 1,
              }}>
              <View style={{ alignItems: 'center', gap: 4, flexDirection: 'row' }}>
                <Text
                  style={{
                    fontFamily: 'DMSans_600SemiBold',
                    fontSize: 16,
                    color: '#1E1E1C',
                    flexShrink: 1,
                  }}>
                  4.8
                </Text>
                <Svg width="13" height="13" viewBox="0 0 24 24" fill="#C98A1B">
                  <Path d="M12 3l2.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>
              </View>
              <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 9, color: '#6B6A64' }}>
                (128 reviews)
              </Text>
            </View>
          </View>
          <View
            style={{
              backgroundColor: '#FFFFFF',
              borderRadius: 16,
              paddingVertical: 12,
              paddingHorizontal: 0,
              flexDirection: 'row',
            }}>
            <View style={{ alignItems: 'center', gap: 6, flex: 1 }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1E1E1C"
                strokeWidth="1.7">
                <Path d="M3 18V8M21 18v-5H3M7 13V10h5v3" />
              </Svg>
              <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 11, color: '#3E3D39' }}>
                4 Beds
              </Text>
            </View>
            <View
              style={{
                alignItems: 'center',
                gap: 6,
                borderLeftWidth: 1,
                borderLeftColor: '#ECEAE5',
                flex: 1,
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1E1E1C"
                strokeWidth="1.7">
                <Path d="M4 12h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4zM6 12V6a2 2 0 0 1 4 0" />
              </Svg>
              <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 11, color: '#3E3D39' }}>
                5 Baths
              </Text>
            </View>
            <View
              style={{
                alignItems: 'center',
                gap: 6,
                borderLeftWidth: 1,
                borderLeftColor: '#ECEAE5',
                flex: 1,
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1E1E1C"
                strokeWidth="1.7">
                <Rect x="4" y="4" width="16" height="16" rx="1.5" />
                <Path d="M4 9h5V4" />
              </Svg>
              <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 11, color: '#3E3D39' }}>
                3,250 sqft
              </Text>
            </View>
            <View
              style={{
                alignItems: 'center',
                gap: 6,
                borderLeftWidth: 1,
                borderLeftColor: '#ECEAE5',
                flex: 1,
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1E1E1C"
                strokeWidth="1.7"
                strokeLinejoin="round">
                <Path d="M5 16V11l2-5h10l2 5v5zM3 11h18M7 16v2M17 16v2" />
                <Circle cx="8" cy="13.5" r="0.8" />
                <Circle cx="16" cy="13.5" r="0.8" />
              </Svg>
              <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 11, color: '#3E3D39' }}>
                2 Garage
              </Text>
            </View>
          </View>
          <View
            style={{
              alignItems: 'center',
              justifyContent: 'space-between',
              paddingTop: 2,
              paddingBottom: 10,
              paddingHorizontal: 0,
              borderBottomWidth: 1,
              borderBottomColor: '#E6E4DF',
              flexDirection: 'row',
            }}>
            <View style={{ gap: 2, flexShrink: 1 }}>
              <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 11, color: '#6B6A64' }}>
                Price
              </Text>
              <Text style={{ fontFamily: 'DMSans_600SemiBold', fontSize: 22, color: '#1E1E1C' }}>
                $2,850,000
              </Text>
            </View>
            <Pressable
              accessibilityRole="button"
              style={{
                height: 46,
                paddingVertical: 0,
                paddingHorizontal: 26,
                borderWidth: 0,
                borderRadius: 23,
                backgroundColor: '#2E3320',
                flexShrink: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'DMSans_500Medium',
                  fontSize: 13,
                  color: '#FFFFFF',
                  textAlign: 'center',
                }}>
                Book a Visit
              </Text>
            </Pressable>
          </View>
          <View style={{ gap: 6 }}>
            <Text
              style={{
                margin: 0,
                fontFamily: 'DMSans_600SemiBold',
                fontSize: 14,
                color: '#1E1E1C',
              }}>
              About Property
            </Text>
            <Text
              style={{
                margin: 0,
                fontFamily: 'DMSans_400Regular',
                fontSize: 12,
                color: '#55544E',
                lineHeight: 18,
              }}>
              Stunning modern villa with premium amenities, spacious interiors, infinity pool and
              beautiful city views.
            </Text>
            <Pressable
              accessibilityRole="button"
              style={{
                alignSelf: 'center',
                alignItems: 'center',
                gap: 4,
                borderWidth: 0,
                paddingVertical: 2,
                paddingHorizontal: 8,
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  fontFamily: 'DMSans_400Regular',
                  fontSize: 12,
                  color: '#3E3D39',
                  flexShrink: 1,
                }}>
                Read more
              </Text>
              <Svg
                width="12"
                height="12"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#3E3D39"
                strokeWidth="2"
                strokeLinecap="round">
                <Path d="M6 9l6 6 6-6" />
              </Svg>
            </Pressable>
          </View>
          <View style={{ gap: 10 }}>
            <Text
              style={{
                margin: 0,
                fontFamily: 'DMSans_600SemiBold',
                fontSize: 14,
                color: '#1E1E1C',
              }}>
              Schedule a Visit
            </Text>
            <View style={{ flexDirection: 'row', gap: 8 }}>
              <Pressable
                accessibilityRole="button"
                style={{
                  height: 50,
                  borderWidth: 0,
                  borderRadius: 14,
                  backgroundColor: '#2E3320',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: 2,
                  flex: 1,
                }}>
                <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 11, color: '#FFFFFF' }}>
                  Mon
                </Text>
                <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#FFFFFF' }}>
                  20 May
                </Text>
              </Pressable>
              <Pressable
                accessibilityRole="button"
                style={{
                  height: 50,
                  borderWidth: 0,
                  borderRadius: 14,
                  backgroundColor: '#FFFFFF',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: 2,
                  flex: 1,
                }}>
                <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 11, color: '#1E1E1C' }}>
                  Tue
                </Text>
                <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#55544E' }}>
                  21 May
                </Text>
              </Pressable>
              <Pressable
                accessibilityRole="button"
                style={{
                  height: 50,
                  borderWidth: 0,
                  borderRadius: 14,
                  backgroundColor: '#FFFFFF',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: 2,
                  flex: 1,
                }}>
                <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 11, color: '#1E1E1C' }}>
                  Wed
                </Text>
                <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#55544E' }}>
                  22 May
                </Text>
              </Pressable>
              <Pressable
                accessibilityRole="button"
                style={{
                  height: 50,
                  borderWidth: 0,
                  borderRadius: 14,
                  backgroundColor: '#FFFFFF',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: 2,
                  flex: 1,
                }}>
                <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 11, color: '#1E1E1C' }}>
                  Thu
                </Text>
                <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#55544E' }}>
                  23 May
                </Text>
              </Pressable>
              <Pressable
                accessibilityRole="button"
                style={{
                  height: 50,
                  borderWidth: 0,
                  borderRadius: 14,
                  backgroundColor: '#FFFFFF',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: 2,
                  flex: 1,
                }}>
                <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 11, color: '#1E1E1C' }}>
                  Fri
                </Text>
                <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 10, color: '#55544E' }}>
                  24 May
                </Text>
              </Pressable>
            </View>
            <View style={{ flexDirection: 'row', gap: 8 }}>
              <Pressable
                accessibilityRole="button"
                style={{
                  height: 36,
                  borderWidth: 0,
                  borderRadius: 12,
                  backgroundColor: '#FFFFFF',
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text
                  style={{
                    fontFamily: 'DMSans_400Regular',
                    fontSize: 11,
                    color: '#1E1E1C',
                    textAlign: 'center',
                  }}>
                  10:00 AM
                </Text>
              </Pressable>
              <Pressable
                accessibilityRole="button"
                style={{
                  height: 36,
                  borderWidth: 0,
                  borderRadius: 12,
                  backgroundColor: '#2E3320',
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text
                  style={{
                    fontFamily: 'DMSans_400Regular',
                    fontSize: 11,
                    color: '#FFFFFF',
                    textAlign: 'center',
                  }}>
                  12:00 PM
                </Text>
              </Pressable>
              <Pressable
                accessibilityRole="button"
                style={{
                  height: 36,
                  borderWidth: 0,
                  borderRadius: 12,
                  backgroundColor: '#FFFFFF',
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text
                  style={{
                    fontFamily: 'DMSans_400Regular',
                    fontSize: 11,
                    color: '#1E1E1C',
                    textAlign: 'center',
                  }}>
                  02:00 PM
                </Text>
              </Pressable>
              <Pressable
                accessibilityRole="button"
                style={{
                  height: 36,
                  borderWidth: 0,
                  borderRadius: 12,
                  backgroundColor: '#FFFFFF',
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text
                  style={{
                    fontFamily: 'DMSans_400Regular',
                    fontSize: 11,
                    color: '#1E1E1C',
                    textAlign: 'center',
                  }}>
                  04:00 PM
                </Text>
              </Pressable>
            </View>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            height: 78,
            backgroundColor: '#FFFFFF',
            borderTopLeftRadius: 24,
            borderTopRightRadius: 24,
            borderBottomRightRadius: 0,
            borderBottomLeftRadius: 0,
            boxShadow: '0 -6px 24px rgba(30,30,28,0.06)',
            alignItems: 'center',
            justifyContent: 'space-between',
            paddingVertical: 0,
            paddingHorizontal: 20,
            flexDirection: 'row',
          }}>
          <View style={{ gap: 2, flexShrink: 1 }}>
            <Text style={{ fontFamily: 'DMSans_400Regular', fontSize: 11, color: '#6B6A64' }}>
              Total (Visit)
            </Text>
            <Text style={{ fontFamily: 'DMSans_600SemiBold', fontSize: 18, color: '#1E1E1C' }}>
              $0.00
            </Text>
          </View>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/bookings')}
            style={{
              height: 50,
              width: 210,
              borderRadius: 25,
              backgroundColor: '#2E3320',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 28,
              flexDirection: 'row',
            }}>
            <Text
              style={{
                fontFamily: 'DMSans_500Medium',
                fontSize: 13,
                color: '#FFFFFF',
                flexShrink: 1,
              }}>
              Confirm Booking
            </Text>
            <Svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#FFFFFF"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M5 12h14M13 6l6 6-6 6" />
            </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/real-estate-booking-app-ui-design/assets';

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