Fast Food Ordering App UI Design in Expo

import { Pacifico_400Regular } from '@expo-google-fonts/pacifico';
import {
  PlusJakartaSans_400Regular,
  PlusJakartaSans_500Medium,
  PlusJakartaSans_600SemiBold,
  PlusJakartaSans_700Bold,
  PlusJakartaSans_800ExtraBold,
} from '@expo-google-fonts/plus-jakarta-sans';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    Pacifico_400Regular,
    PlusJakartaSans_400Regular,
    PlusJakartaSans_500Medium,
    PlusJakartaSans_600SemiBold,
    PlusJakartaSans_700Bold,
    PlusJakartaSans_800ExtraBold,
  });

  if (!fontsLoaded) return null;

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

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';

const accent = '#C8102E';
const cats = [
  { name: 'Chicken', img: 'd6c3851965.jpg' },
  { name: 'Sandwiches', img: '3fc3e32c9f.jpg' },
  { name: 'Salads', img: 'f250ab5eaf.jpg' },
  { name: 'Drinks', img: '718d422cc9.jpg' },
  { name: 'Treats', img: 'ee83c21209.jpg' },
];
const picks = [
  {
    tag: 'BESTSELLER',
    tagBg: '#C8102E',
    name: 'Coop Classic Chicken Sandwich',
    desc: 'A boneless breast of chicken seasoned to perfection',
    rating: '4.8 (12.5K+)',
    price: '$6.79',
    img: '3fc3e32c9f.jpg',
  },
  {
    tag: 'POPULAR',
    tagBg: '#B45309',
    name: 'Crispy Nuggets (8 ct)',
    desc: 'Bite-sized perfection with your favorite dipping sauce',
    rating: '4.7 (8.7K+)',
    price: '$5.89',
    img: 'd6c3851965.jpg',
  },
  {
    tag: 'SAVE 15%',
    tagBg: '#C8102E',
    name: 'Waffle Potato Fries',
    desc: 'Crispy on the outside, tender on the inside',
    rating: '4.6 (6.3K+)',
    price: '$2.19',
    img: 'e6a94cba21.jpg',
  },
];

export default function MainScreen() {
  return (
    <Screen background="#F7F3EE" statusBar="dark" height={1120}>
      <View style={{ flex: 1 }}>
        <View style={{ paddingTop: 20, paddingBottom: 0, paddingHorizontal: 18, gap: 16 }}>
          <View style={{ alignItems: 'center', gap: 12, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Open menu"
              style={{
                width: 48,
                height: 48,
                borderRadius: 16,
                borderWidth: 0,
                backgroundColor: '#FFFFFF',
                boxShadow: '0 4px 14px rgba(60,30,10,0.07)',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1A1A1A"
                strokeWidth="2"
                strokeLinecap="round">
                <Path d="M4 7h16M4 12h16M4 17h16" />
              </Svg>
            </Pressable>
            <View style={{ flex: 1, gap: 0 }}>
              <Text
                style={{ fontFamily: 'PlusJakartaSans_500Medium', fontSize: 12, color: '#4A4A4A' }}>
                Hi, Chicken Lover!
              </Text>
              <Text
                style={{
                  fontFamily: 'Pacifico_400Regular',
                  fontSize: 24,
                  color: accent,
                  lineHeight: 30,
                }}>
                Crispy Coop
              </Text>
              <Text
                style={{ fontFamily: 'PlusJakartaSans_500Medium', fontSize: 11, color: '#4A4A4A' }}>
                Crispy. Every time.
              </Text>
            </View>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Notifications, 3 new"
              style={{
                width: 48,
                height: 48,
                borderRadius: 16,
                borderWidth: 0,
                backgroundColor: '#FFFFFF',
                boxShadow: '0 4px 14px rgba(60,30,10,0.07)',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1A1A1A"
                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: 8,
                  right: 8,
                  minWidth: 16,
                  height: 16,
                  borderRadius: 8,
                  backgroundColor: accent,
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_700Bold',
                    fontSize: 10,
                    color: '#FFFFFF',
                    flexShrink: 1,
                  }}>
                  3
                </Text>
              </View>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Bag, 2 items"
              style={{
                width: 48,
                height: 48,
                borderRadius: 16,
                borderWidth: 0,
                backgroundColor: '#FFFFFF',
                boxShadow: '0 4px 14px rgba(60,30,10,0.07)',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1A1A1A"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M6 7h12l-1 13H7L6 7z" />
                <Path d="M9 7a3 3 0 0 1 6 0" />
              </Svg>
              <View
                style={{
                  position: 'absolute',
                  top: 8,
                  right: 8,
                  minWidth: 16,
                  height: 16,
                  borderRadius: 8,
                  backgroundColor: accent,
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_700Bold',
                    fontSize: 10,
                    color: '#FFFFFF',
                    flexShrink: 1,
                  }}>
                  2
                </Text>
              </View>
            </Pressable>
          </View>
          <View style={{ gap: 12, alignItems: 'center', flexDirection: 'row' }}>
            <View
              style={{
                flex: 1,
                height: 50,
                borderRadius: 16,
                backgroundColor: '#FFFFFF',
                boxShadow: '0 4px 14px rgba(60,30,10,0.06)',
                alignItems: 'center',
                gap: 10,
                paddingVertical: 0,
                paddingHorizontal: 16,
                flexDirection: 'row',
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1A1A1A"
                strokeWidth="2"
                strokeLinecap="round">
                <Circle cx="11" cy="11" r="7" />
                <Path d="M20 20l-3.5-3.5" />
              </Svg>
              <TextInput
                placeholder="Search your favorite meal..."
                placeholderTextColor="#8A8A8A"
                style={{
                  borderWidth: 0,
                  flex: 1,
                  minWidth: 0,
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 14,
                  color: '#1A1A1A',
                }}
              />
            </View>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Filters"
              style={{
                width: 50,
                height: 50,
                borderRadius: 16,
                borderWidth: 0,
                backgroundColor: '#FFFFFF',
                boxShadow: '0 4px 14px rgba(60,30,10,0.06)',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1A1A1A"
                strokeWidth="1.8"
                strokeLinecap="round">
                <Path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0" />
                <Circle cx="16" cy="6" r="2" />
                <Circle cx="10" cy="12" r="2" />
                <Circle cx="18" cy="18" r="2" />
              </Svg>
            </Pressable>
          </View>
          <View
            style={{
              height: 222,
              borderRadius: 24,
              backgroundColor: '#F6E3D2',
              overflow: 'hidden',
            }}>
            <Image
              source={{ uri: asset('f5b6715188.jpg') }}
              contentFit="cover"
              accessibilityLabel="Chicken sandwich meal with waffle fries and a drink"
              style={{
                position: 'absolute',
                right: -36,
                top: 18,
                width: 252,
                height: 190,
                borderTopLeftRadius: 0,
                borderTopRightRadius: 0,
                borderBottomRightRadius: 0,
                borderBottomLeftRadius: 0,
              }}
            />
            <View style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 200 }}>
              <LinearGradient
                colors={['#F6E3D2', 'rgba(246,227,210,0)']}
                locations={[0.7, 1]}
                start={{ x: 0, y: 0.5 }}
                end={{ x: 1, y: 0.5 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <View style={{ position: 'absolute', left: 18, top: 18, width: 184, gap: 8 }}>
              <Text
                style={{
                  alignSelf: 'flex-start',
                  backgroundColor: '#FBD6D0',
                  paddingVertical: 4,
                  paddingHorizontal: 9,
                  borderRadius: 999,
                  fontFamily: 'PlusJakartaSans_700Bold',
                  fontSize: 10,
                  color: '#A30D24',
                  letterSpacing: 0.6,
                }}>
                LIMITED TIME
              </Text>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_800ExtraBold',
                  fontSize: 25,
                  color: '#1A1A1A',
                  lineHeight: 27.5,
                }}>
                Made Fresh.{'\n'}
                <Text style={{ color: accent }}>Made for You.</Text>
              </Text>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 11.5,
                  color: '#3A3A3A',
                  lineHeight: 16.68,
                }}>
                Real chicken, real ingredients, made the Coop way.
              </Text>
              <Pressable
                accessibilityRole="link"
                onPress={() => router.navigate('/product')}
                style={{
                  alignSelf: 'flex-start',
                  marginTop: 2,
                  alignItems: 'center',
                  gap: 10,
                  backgroundColor: accent,
                  height: 40,
                  paddingVertical: 0,
                  paddingLeft: 16,
                  paddingRight: 6,
                  borderRadius: 999,
                  flexDirection: 'row',
                }}>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_600SemiBold',
                    fontSize: 13,
                    color: '#FFFFFF',
                    flexShrink: 1,
                  }}>
                  Order Now
                </Text>
                <View
                  style={{
                    width: 28,
                    height: 28,
                    borderRadius: 14,
                    backgroundColor: '#FFFFFF',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexDirection: 'row',
                  }}>
                  <Svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="#C8102E"
                    strokeWidth="2.6"
                    strokeLinecap="round"
                    strokeLinejoin="round">
                    <Path d="M5 12h14M13 6l6 6-6 6" />
                  </Svg>
                </View>
              </Pressable>
            </View>
          </View>
        </View>
        <View
          style={{
            gap: 12,
            paddingTop: 18,
            paddingBottom: 0,
            paddingHorizontal: 18,
            overflow: 'hidden',
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/menu')}
            style={{ alignItems: 'center', gap: 8, flexGrow: 0, flexShrink: 0 }}>
            <View
              style={{
                width: 64,
                height: 64,
                borderRadius: 32,
                borderWidth: 2,
                borderColor: accent,
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="28"
                height="28"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#C8102E"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Rect x="4" y="4" width="6" height="6" rx="1.5" />
                <Rect x="14" y="4" width="6" height="6" rx="1.5" />
                <Rect x="4" y="14" width="6" height="6" rx="1.5" />
                <Rect x="14" y="14" width="6" height="6" rx="1.5" />
              </Svg>
            </View>
            <Text
              style={{ fontFamily: 'PlusJakartaSans_600SemiBold', fontSize: 12, color: '#C8102E' }}>
              All
            </Text>
          </Pressable>
          {cats.map((c, index) => (
            <Pressable
              key={index}
              accessibilityRole="link"
              onPress={() => router.navigate('/menu')}
              style={{ alignItems: 'center', gap: 8, flexGrow: 0, flexShrink: 0 }}>
              <View
                style={{
                  width: 64,
                  height: 64,
                  borderRadius: 32,
                  backgroundColor: '#FFFFFF',
                  boxShadow: '0 4px 12px rgba(60,30,10,0.06)',
                  overflow: 'hidden',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Image
                  source={{ uri: asset(c.img) }}
                  contentFit="contain"
                  style={{ width: 54, height: 54 }}
                />
              </View>
              <Text
                style={{ fontFamily: 'PlusJakartaSans_500Medium', fontSize: 12, color: '#2A2A2A' }}>
                {c.name}
              </Text>
            </Pressable>
          ))}
        </View>
        <View
          style={{
            paddingTop: 22,
            paddingBottom: 0,
            paddingHorizontal: 18,
            justifyContent: 'space-between',
            alignItems: 'center',
            flexDirection: 'row',
          }}>
          <Text
            style={{
              margin: 0,
              flexShrink: 1,
              fontFamily: 'PlusJakartaSans_700Bold',
              fontSize: 18,
              color: '#1A1A1A',
            }}>
            Popular Picks
          </Text>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/menu')}
            style={{ alignItems: 'center', gap: 6, flexShrink: 1, flexDirection: 'row' }}>
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_600SemiBold',
                fontSize: 13,
                color: '#C8102E',
                flexShrink: 1,
              }}>
              View All
            </Text>
            <Svg
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#C8102E"
              strokeWidth="2.4"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M5 12h14M13 6l6 6-6 6" />
            </Svg>
          </Pressable>
        </View>
        <View
          style={{
            paddingTop: 12,
            paddingBottom: 0,
            paddingHorizontal: 18,
            flexDirection: 'row',
            gap: 10,
            flexWrap: 'wrap',
          }}>
          {picks.map((p, index) => (
            <View
              key={index}
              style={{
                backgroundColor: '#FFFFFF',
                borderRadius: 18,
                boxShadow: '0 6px 18px rgba(60,30,10,0.06)',
                padding: 10,
                gap: 6,
                flexGrow: 1,
                flexBasis: '26%',
              }}>
              <View
                style={{
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  flexDirection: 'row',
                }}>
                <Text
                  style={{
                    backgroundColor: p.tagBg,
                    paddingVertical: 3,
                    paddingHorizontal: 7,
                    borderRadius: 999,
                    flexShrink: 1,
                    fontFamily: 'PlusJakartaSans_700Bold',
                    fontSize: 8.5,
                    color: '#FFFFFF',
                    letterSpacing: 0.34,
                  }}>
                  {p.tag}
                </Text>
                <Pressable
                  accessibilityRole="button"
                  accessibilityLabel="Save to favorites"
                  style={{
                    width: 24,
                    height: 24,
                    borderWidth: 0,
                    padding: 0,
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexDirection: 'row',
                  }}>
                  <Svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="#6B6B6B"
                    strokeWidth="2"
                    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>
              <Image
                source={{ uri: asset(p.img) }}
                contentFit="contain"
                style={{ width: '100%', height: 80 }}
              />
              <Pressable
                accessibilityRole="link"
                onPress={() => router.navigate('/product')}
                style={{ minHeight: 30 }}>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_700Bold',
                    fontSize: 12,
                    color: '#1A1A1A',
                    lineHeight: 15,
                  }}>
                  {p.name}
                </Text>
              </Pressable>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 9.5,
                  color: '#5A5A5A',
                  lineHeight: 12.83,
                }}>
                {p.desc}
              </Text>
              <View style={{ alignItems: 'center', gap: 3, flexDirection: 'row' }}>
                <Svg width="11" height="11" viewBox="0 0 24 24" fill="#F2A21A">
                  <Path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z" />
                </Svg>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_400Regular',
                    fontSize: 10,
                    color: '#4A4A4A',
                    flexShrink: 1,
                  }}>
                  {p.rating}
                </Text>
              </View>
              <View
                style={{
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  marginTop: 2,
                  flexDirection: 'row',
                }}>
                <Text
                  style={{
                    flexShrink: 1,
                    fontFamily: 'PlusJakartaSans_800ExtraBold',
                    fontSize: 15,
                    color: '#1A1A1A',
                  }}>
                  {p.price}
                </Text>
                <Pressable
                  accessibilityRole="button"
                  accessibilityLabel="Add to bag"
                  style={{
                    width: 28,
                    height: 28,
                    borderRadius: 14,
                    borderWidth: 0,
                    backgroundColor: accent,
                    padding: 0,
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexDirection: 'row',
                  }}>
                  <Svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="#FFFFFF"
                    strokeWidth="3"
                    strokeLinecap="round">
                    <Path d="M12 5v14M5 12h14" />
                  </Svg>
                </Pressable>
              </View>
            </View>
          ))}
        </View>
        <View
          style={{
            marginTop: 16,
            marginBottom: 0,
            marginHorizontal: 18,
            height: 128,
            borderRadius: 22,
            backgroundColor: '#F6E3D2',
            overflow: 'hidden',
          }}>
          <Image
            source={{ uri: asset('f5b6715188.jpg') }}
            contentFit="cover"
            accessibilityLabel="Chicken meal combo"
            style={{
              position: 'absolute',
              left: 150,
              top: 6,
              width: 150,
              height: 116,
              borderRadius: 14,
            }}
          />
          <View style={{ position: 'absolute', left: 18, top: 16, gap: 4 }}>
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_700Bold',
                fontSize: 9.5,
                color: '#A30D24',
                letterSpacing: 0.57,
              }}>
              EXCLUSIVE OFFER
            </Text>
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_800ExtraBold',
                fontSize: 19,
                color: '#1A1A1A',
              }}>
              Up to 25% OFF
            </Text>
            <Text
              style={{ fontFamily: 'PlusJakartaSans_400Regular', fontSize: 11, color: '#3A3A3A' }}>
              On select meals
            </Text>
            <Pressable
              accessibilityRole="link"
              onPress={() => router.navigate('/menu')}
              style={{
                marginTop: 4,
                alignSelf: 'flex-start',
                alignItems: 'center',
                gap: 6,
                backgroundColor: accent,
                height: 28,
                paddingVertical: 0,
                paddingLeft: 12,
                paddingRight: 4,
                borderRadius: 999,
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_600SemiBold',
                  fontSize: 11,
                  color: '#FFFFFF',
                  flexShrink: 1,
                }}>
                Order Now
              </Text>
              <View
                style={{
                  width: 20,
                  height: 20,
                  borderRadius: 10,
                  backgroundColor: '#FFFFFF',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="10"
                  height="10"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#C8102E"
                  strokeWidth="3"
                  strokeLinecap="round"
                  strokeLinejoin="round">
                  <Path d="M5 12h14M13 6l6 6-6 6" />
                </Svg>
              </View>
            </Pressable>
          </View>
          <View
            style={{
              position: 'absolute',
              right: 12,
              top: 24,
              width: 72,
              height: 72,
              borderRadius: 36,
              backgroundColor: accent,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_800ExtraBold',
                fontSize: 22,
                color: '#FFFFFF',
                lineHeight: 22,
              }}>
              25%
            </Text>
            <Text
              style={{
                marginTop: 2,
                fontFamily: 'PlusJakartaSans_700Bold',
                fontSize: 12,
                color: '#FFFFFF',
                lineHeight: 12,
              }}>
              OFF
            </Text>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 12,
            right: 12,
            bottom: 14,
            height: 72,
            borderRadius: 26,
            backgroundColor: '#FFFFFF',
            boxShadow: '0 -2px 24px rgba(60,30,10,0.10)',
            paddingBottom: 10,
            flexDirection: 'row',
            alignItems: 'flex-end',
          }}>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/')}
            style={{ alignItems: 'center', gap: 4, flex: 1 }}>
            <Svg width="22" height="22" viewBox="0 0 24 24" fill="#C8102E">
              <Path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" />
            </Svg>
            <Text
              style={{ fontFamily: 'PlusJakartaSans_600SemiBold', fontSize: 11, color: '#C8102E' }}>
              Home
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/menu')}
            style={{ alignItems: 'center', gap: 4, flex: 1 }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#5A5A5A"
              strokeWidth="1.8">
              <Rect x="4" y="4" width="6.5" height="6.5" rx="1.5" />
              <Rect x="13.5" y="4" width="6.5" height="6.5" rx="1.5" />
              <Rect x="4" y="13.5" width="6.5" height="6.5" rx="1.5" />
              <Rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.5" />
            </Svg>
            <Text
              style={{ fontFamily: 'PlusJakartaSans_500Medium', fontSize: 11, color: '#5A5A5A' }}>
              Menu
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/cart')}
            style={{ alignItems: 'center', gap: 4, top: -2, flex: 1 }}>
            <View
              style={{
                width: 64,
                height: 64,
                borderRadius: 32,
                backgroundColor: accent,
                borderWidth: 5,
                borderColor: '#F7F3EE',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 2,
                marginTop: -30,
                boxShadow: '0 8px 18px rgba(200,16,46,0.35)',
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#FFFFFF"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M6 7h12l-1 13H7L6 7z" />
                <Path d="M9 7a3 3 0 0 1 6 0" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_600SemiBold',
                  fontSize: 10,
                  color: '#FFFFFF',
                }}>
                Order
              </Text>
            </View>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/')}
            style={{ alignItems: 'center', gap: 4, flex: 1 }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#5A5A5A"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Rect x="3.5" y="9" width="17" height="11" rx="1.5" />
              <Path d="M3.5 13h17M12 9v11M12 9c-2-4-6-4-6-1.5S10 9 12 9zM12 9c2-4 6-4 6-1.5S14 9 12 9z" />
            </Svg>
            <Text
              style={{ fontFamily: 'PlusJakartaSans_500Medium', fontSize: 11, color: '#5A5A5A' }}>
              Rewards
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/')}
            style={{ alignItems: 'center', gap: 4, flex: 1 }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#5A5A5A"
              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: 'PlusJakartaSans_500Medium', fontSize: 11, color: '#5A5A5A' }}>
              Profile
            </Text>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { Image } from 'expo-image';
import { router } from 'expo-router';
import { useState } from 'react';
import { Pressable, Text, TextInput, View } from 'react-native';
import Svg, { Path } from 'react-native-svg';

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

// Screen state, and the values the layout below reads from it.
function useScreen() {
  const [state, setScreenState] = useState<Record<string, any>>({});
  const setState = (patch: Record<string, any>) =>
    setScreenState((current) => ({ ...current, ...patch }));

  const a = '#C8102E';
  const st = state || {};
  const mode = st.mode || 'Delivery';
  const q = st.q || { s: 1, n: 1, f: 2 };
  const items = [
    {
      k: 's',
      name: 'Coop Classic Sandwich',
      note: 'Extra pickles',
      price: 6.79,
      img: '3fc3e32c9f.jpg',
    },
    {
      k: 'n',
      name: 'Crispy Nuggets (8 ct)',
      note: 'Honey mustard sauce',
      price: 5.89,
      img: 'd6c3851965.jpg',
    },
    { k: 'f', name: 'Waffle Potato Fries', note: 'Medium', price: 2.19, img: 'e6a94cba21.jpg' },
  ];
  let sub = 0;
  const lines = items.map((it) => {
    const n = q[it.k];
    sub += n * it.price;
    return {
      name: it.name,
      note: it.note,
      img: it.img,
      qty: n,
      lineTotal: '$' + (n * it.price).toFixed(2),
      inc: () => {
        const c = Object.assign({}, q);
        c[it.k] = Math.min(n + 1, 20);
        setState({ q: c });
      },
      dec: () => {
        const c = Object.assign({}, q);
        c[it.k] = Math.max(n - 1, 1);
        setState({ q: c });
      },
    };
  });
  const fee = mode === 'Delivery' ? 2.99 : 0;
  const tax = sub * 0.08;
  const modes = ['Delivery', 'Pickup'].map((m) => {
    return {
      name: m,
      bg: m === mode ? a : '#FFFFFF',
      fg: m === mode ? '#FFFFFF' : '#2A2A2A',
      pick: () => {
        setState({ mode: m });
      },
    };
  });
  return {
    accent: a,
    lines: lines,
    modes: modes,
    subtotal: '$' + sub.toFixed(2),
    feeLabel: mode === 'Delivery' ? 'Delivery fee' : 'Pickup',
    fee: fee ? '$' + fee.toFixed(2) : 'Free',
    tax: '$' + tax.toFixed(2),
    total: '$' + (sub + fee + tax).toFixed(2),
  };
}

export default function CartScreen() {
  const { accent, lines, modes, subtotal, feeLabel, fee, tax, total } = useScreen();
  return (
    <Screen background="#F7F3EE" statusBar="dark">
      <View style={{ flex: 1 }}>
        <View
          style={{
            paddingTop: 20,
            paddingBottom: 0,
            paddingHorizontal: 18,
            alignItems: 'center',
            gap: 12,
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Back"
            onPress={() => router.navigate('/product')}
            style={{
              width: 48,
              height: 48,
              borderRadius: 16,
              backgroundColor: '#FFFFFF',
              boxShadow: '0 4px 14px rgba(60,30,10,0.07)',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="2.2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M15 5l-7 7 7 7" />
            </Svg>
          </Pressable>
          <Text
            style={{
              flex: 1,
              margin: 0,
              fontFamily: 'PlusJakartaSans_800ExtraBold',
              fontSize: 20,
              color: '#1A1A1A',
              textAlign: 'center',
              flexShrink: 1,
            }}>
            My Bag
          </Text>
          <View style={{ width: 48 }} />
        </View>
        <View
          style={{
            marginTop: 18,
            marginBottom: 0,
            marginHorizontal: 18,
            backgroundColor: '#FFFFFF',
            borderRadius: 16,
            padding: 4,
            boxShadow: '0 4px 14px rgba(60,30,10,0.05)',
            flexDirection: 'row',
            flexWrap: 'wrap',
          }}>
          {modes.map((m, index) => (
            <Pressable
              key={index}
              accessibilityRole="button"
              onPress={m.pick}
              style={{
                height: 40,
                borderWidth: 0,
                borderRadius: 12,
                backgroundColor: m.bg,
                flexGrow: 1,
                flexBasis: '34%',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_600SemiBold',
                  fontSize: 13,
                  color: m.fg,
                  textAlign: 'center',
                }}>
                {m.name}
              </Text>
            </Pressable>
          ))}
        </View>
        <View style={{ gap: 10, paddingTop: 14, paddingBottom: 0, paddingHorizontal: 18 }}>
          {lines.map((l, index) => (
            <View
              key={index}
              style={{
                gap: 12,
                alignItems: 'center',
                backgroundColor: '#FFFFFF',
                borderRadius: 18,
                padding: 10,
                boxShadow: '0 6px 18px rgba(60,30,10,0.05)',
                flexDirection: 'row',
              }}>
              <View
                style={{
                  width: 64,
                  height: 64,
                  borderRadius: 14,
                  backgroundColor: '#F6E3D2',
                  flexGrow: 0,
                  flexShrink: 0,
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Image
                  source={{ uri: asset(l.img) }}
                  contentFit="contain"
                  style={{ width: 56, height: 56, mixBlendMode: 'multiply' }}
                />
              </View>
              <View style={{ flex: 1, minWidth: 0, gap: 3 }}>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_700Bold',
                    fontSize: 13.5,
                    color: '#1A1A1A',
                  }}>
                  {l.name}
                </Text>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_400Regular',
                    fontSize: 11,
                    color: '#5A5A5A',
                  }}>
                  {l.note}
                </Text>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_800ExtraBold',
                    fontSize: 14,
                    color: '#1A1A1A',
                  }}>
                  {l.lineTotal}
                </Text>
              </View>
              <View
                style={{
                  alignItems: 'center',
                  gap: 2,
                  backgroundColor: '#F7F3EE',
                  borderRadius: 999,
                  padding: 3,
                  flexShrink: 1,
                  flexDirection: 'row',
                }}>
                <Pressable
                  accessibilityRole="button"
                  accessibilityLabel="Remove one"
                  onPress={l.dec}
                  style={{
                    width: 30,
                    height: 30,
                    borderRadius: 15,
                    borderWidth: 0,
                    backgroundColor: '#FFFFFF',
                    padding: 0,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'PlusJakartaSans_700Bold',
                      fontSize: 16,
                      color: '#1A1A1A',
                      textAlign: 'center',
                    }}>
                    −
                  </Text>
                </Pressable>
                <Text
                  style={{
                    minWidth: 20,
                    flexShrink: 1,
                    fontFamily: 'PlusJakartaSans_700Bold',
                    fontSize: 13,
                    color: '#1A1A1A',
                    textAlign: 'center',
                  }}>
                  {l.qty}
                </Text>
                <Pressable
                  accessibilityRole="button"
                  accessibilityLabel="Add one"
                  onPress={l.inc}
                  style={{
                    width: 30,
                    height: 30,
                    borderRadius: 15,
                    borderWidth: 0,
                    backgroundColor: accent,
                    padding: 0,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'PlusJakartaSans_700Bold',
                      fontSize: 16,
                      color: '#FFFFFF',
                      textAlign: 'center',
                    }}>
                    +
                  </Text>
                </Pressable>
              </View>
            </View>
          ))}
        </View>
        <View
          style={{
            marginTop: 14,
            marginBottom: 0,
            marginHorizontal: 18,
            height: 50,
            borderRadius: 16,
            backgroundColor: '#FFFFFF',
            borderWidth: 1.5,
            borderColor: '#E2C9B4',
            borderStyle: 'dashed',
            alignItems: 'center',
            gap: 10,
            paddingVertical: 0,
            paddingLeft: 14,
            paddingRight: 6,
            flexDirection: 'row',
          }}>
          <Svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#C8102E"
            strokeWidth="1.8"
            strokeLinecap="round"
            strokeLinejoin="round">
            <Path d="M3 9V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v3a3 3 0 0 0 0 6v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3a3 3 0 0 0 0-6z" />
            <Path d="M10 9l4 6" />
          </Svg>
          <TextInput
            placeholder="Add promo code"
            placeholderTextColor="#8A8A8A"
            style={{
              flex: 1,
              minWidth: 0,
              borderWidth: 0,
              fontFamily: 'PlusJakartaSans_400Regular',
              fontSize: 13,
              color: '#1A1A1A',
            }}
          />
          <Pressable
            accessibilityRole="button"
            style={{
              height: 38,
              paddingVertical: 0,
              paddingHorizontal: 14,
              borderRadius: 12,
              borderWidth: 0,
              backgroundColor: '#FBD6D0',
              flexShrink: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_700Bold',
                fontSize: 12.5,
                color: '#A30D24',
                textAlign: 'center',
              }}>
              Apply
            </Text>
          </Pressable>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            paddingTop: 18,
            paddingBottom: 22,
            paddingHorizontal: 18,
            backgroundColor: '#FFFFFF',
            borderTopLeftRadius: 28,
            borderTopRightRadius: 28,
            borderBottomRightRadius: 0,
            borderBottomLeftRadius: 0,
            boxShadow: '0 -6px 24px rgba(60,30,10,0.08)',
            gap: 9,
          }}>
          <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_400Regular',
                fontSize: 13,
                color: '#4A4A4A',
              }}>
              Subtotal
            </Text>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_400Regular',
                fontSize: 13,
                color: '#4A4A4A',
              }}>
              {subtotal}
            </Text>
          </View>
          <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_400Regular',
                fontSize: 13,
                color: '#4A4A4A',
              }}>
              {feeLabel}
            </Text>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_400Regular',
                fontSize: 13,
                color: '#4A4A4A',
              }}>
              {fee}
            </Text>
          </View>
          <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_400Regular',
                fontSize: 13,
                color: '#4A4A4A',
              }}>
              Tax (est.)
            </Text>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_400Regular',
                fontSize: 13,
                color: '#4A4A4A',
              }}>
              {tax}
            </Text>
          </View>
          <View
            style={{
              height: 1,
              backgroundColor: '#EFE6DC',
              marginVertical: 2,
              marginHorizontal: 0,
            }}
          />
          <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_800ExtraBold',
                fontSize: 17,
                color: '#1A1A1A',
              }}>
              Total
            </Text>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_800ExtraBold',
                fontSize: 17,
                color: '#1A1A1A',
              }}>
              {total}
            </Text>
          </View>
          <Pressable
            accessibilityRole="button"
            style={{
              marginTop: 6,
              height: 54,
              borderRadius: 999,
              borderWidth: 0,
              backgroundColor: accent,
              alignItems: 'center',
              justifyContent: 'center',
              gap: 10,
              flexDirection: 'row',
            }}>
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_700Bold',
                fontSize: 15,
                color: '#FFFFFF',
                flexShrink: 1,
              }}>
              {'Checkout · '}
              {total}
            </Text>
            <Svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#FFFFFF"
              strokeWidth="2.6"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M5 12h14M13 6l6 6-6 6" />
            </Svg>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { Image } from 'expo-image';
import { router } from 'expo-router';
import { useState } from 'react';
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';

// Screen state, and the values the layout below reads from it.
function useScreen() {
  const [state, setScreenState] = useState<Record<string, any>>({});
  const setState = (patch: Record<string, any>) =>
    setScreenState((current) => ({ ...current, ...patch }));

  const a = '#C8102E';
  const active = (state && state.tab) || 'All';
  const S = '3fc3e32c9f.jpg',
    N = 'd6c3851965.jpg',
    F = 'e6a94cba21.jpg',
    D = '718d422cc9.jpg',
    L = 'f250ab5eaf.jpg',
    C = 'ee83c21209.jpg';
  const all = [
    {
      cat: 'Sandwiches',
      name: 'Coop Classic Sandwich',
      desc: 'Pressure-fried chicken breast, pickles, toasted brioche',
      rating: '4.8',
      cal: '440 cal',
      price: '$6.79',
      img: S,
    },
    {
      cat: 'Chicken',
      name: 'Crispy Nuggets (8 ct)',
      desc: 'Bite-sized, hand-breaded, with a dipping sauce',
      rating: '4.7',
      cal: '250 cal',
      price: '$5.89',
      img: N,
    },
    {
      cat: 'Salads',
      name: 'Southwest Chicken Salad',
      desc: 'Grilled chicken, corn, tomato, cheese, tortilla strips',
      rating: '4.6',
      cal: '450 cal',
      price: '$9.49',
      img: L,
    },
    {
      cat: 'Chicken',
      name: 'Waffle Potato Fries',
      desc: 'Crispy outside, tender inside, sea salt',
      rating: '4.6',
      cal: '420 cal',
      price: '$2.19',
      img: F,
    },
    {
      cat: 'Drinks',
      name: 'Fresh Lemonade',
      desc: 'Squeezed daily, lightly sweet',
      rating: '4.7',
      cal: '220 cal',
      price: '$2.49',
      img: D,
    },
    {
      cat: 'Treats',
      name: 'Vanilla Soft-Serve Cone',
      desc: 'Creamy swirl in a crunchy wafer cone',
      rating: '4.8',
      cal: '170 cal',
      price: '$1.89',
      img: C,
    },
  ];
  const items =
    active === 'All'
      ? all.slice(0, 4)
      : all.filter((x) => {
          return x.cat === active;
        });
  const tabs = ['All', 'Chicken', 'Sandwiches', 'Salads', 'Drinks', 'Treats'].map((n) => {
    return {
      name: n,
      bg: n === active ? a : '#FFFFFF',
      fg: n === active ? '#FFFFFF' : '#2A2A2A',
      pick: () => {
        setState({ tab: n });
      },
    };
  });
  return {
    accent: a,
    tabs: tabs,
    items: items,
    active: active === 'All' ? 'All items' : active,
    count: active === 'All' ? all.length : items.length,
  };
}

export default function MenuScreen() {
  const { accent, tabs, items, active, count } = useScreen();
  return (
    <Screen background="#F7F3EE" statusBar="dark">
      <View style={{ flex: 1 }}>
        <View
          style={{
            paddingTop: 20,
            paddingBottom: 0,
            paddingHorizontal: 18,
            alignItems: 'center',
            gap: 12,
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Back to home"
            onPress={() => router.navigate('/')}
            style={{
              width: 48,
              height: 48,
              borderRadius: 16,
              backgroundColor: '#FFFFFF',
              boxShadow: '0 4px 14px rgba(60,30,10,0.07)',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="2.2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M15 5l-7 7 7 7" />
            </Svg>
          </Pressable>
          <Text
            style={{
              flex: 1,
              margin: 0,
              fontFamily: 'PlusJakartaSans_800ExtraBold',
              fontSize: 20,
              color: '#1A1A1A',
              textAlign: 'center',
              flexShrink: 1,
            }}>
            Our Menu
          </Text>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Bag, 2 items"
            onPress={() => router.navigate('/cart')}
            style={{
              width: 48,
              height: 48,
              borderRadius: 16,
              backgroundColor: '#FFFFFF',
              boxShadow: '0 4px 14px rgba(60,30,10,0.07)',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M6 7h12l-1 13H7L6 7z" />
              <Path d="M9 7a3 3 0 0 1 6 0" />
            </Svg>
            <View
              style={{
                position: 'absolute',
                top: 8,
                right: 8,
                minWidth: 16,
                height: 16,
                borderRadius: 8,
                backgroundColor: accent,
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_700Bold',
                  fontSize: 10,
                  color: '#FFFFFF',
                  flexShrink: 1,
                }}>
                2
              </Text>
            </View>
          </Pressable>
        </View>
        <View
          style={{
            gap: 8,
            paddingTop: 18,
            paddingBottom: 0,
            paddingHorizontal: 18,
            overflow: 'hidden',
            flexDirection: 'row',
          }}>
          {tabs.map((t, index) => (
            <Pressable
              key={index}
              accessibilityRole="button"
              onPress={t.pick}
              style={{
                flexGrow: 0,
                flexShrink: 0,
                height: 40,
                paddingVertical: 0,
                paddingHorizontal: 16,
                borderRadius: 999,
                borderWidth: 0,
                backgroundColor: t.bg,
                boxShadow: '0 3px 10px rgba(60,30,10,0.06)',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_600SemiBold',
                  fontSize: 13,
                  color: t.fg,
                  textAlign: 'center',
                }}>
                {t.name}
              </Text>
            </Pressable>
          ))}
        </View>
        <View
          style={{
            paddingTop: 18,
            paddingBottom: 0,
            paddingHorizontal: 18,
            justifyContent: 'space-between',
            alignItems: 'baseline',
            flexDirection: 'row',
          }}>
          <Text
            style={{
              margin: 0,
              flexShrink: 1,
              fontFamily: 'PlusJakartaSans_700Bold',
              fontSize: 17,
              color: '#1A1A1A',
            }}>
            {active}
          </Text>
          <Text
            style={{
              flexShrink: 1,
              fontFamily: 'PlusJakartaSans_400Regular',
              fontSize: 12,
              color: '#5A5A5A',
            }}>
            {count}
            {' items'}
          </Text>
        </View>
        <View style={{ gap: 12, paddingTop: 12, paddingBottom: 0, paddingHorizontal: 18 }}>
          {items.map((it, index) => (
            <Pressable
              key={index}
              accessibilityRole="link"
              onPress={() => router.navigate('/product')}
              style={{
                gap: 14,
                alignItems: 'center',
                backgroundColor: '#FFFFFF',
                borderRadius: 20,
                padding: 12,
                boxShadow: '0 6px 18px rgba(60,30,10,0.06)',
                flexDirection: 'row',
              }}>
              <View
                style={{
                  width: 88,
                  height: 88,
                  borderRadius: 16,
                  backgroundColor: '#F6E3D2',
                  flexGrow: 0,
                  flexShrink: 0,
                  alignItems: 'center',
                  justifyContent: 'center',
                  overflow: 'hidden',
                  flexDirection: 'row',
                }}>
                <Image
                  source={{ uri: asset(it.img) }}
                  contentFit="contain"
                  style={{ width: 80, height: 80, mixBlendMode: 'multiply' }}
                />
              </View>
              <View style={{ flex: 1, minWidth: 0, gap: 4 }}>
                <Text
                  style={{ fontFamily: 'PlusJakartaSans_700Bold', fontSize: 14, color: '#1A1A1A' }}>
                  {it.name}
                </Text>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_400Regular',
                    fontSize: 11.5,
                    color: '#5A5A5A',
                    lineHeight: 16.1,
                  }}>
                  {it.desc}
                </Text>
                <View style={{ alignItems: 'center', gap: 10, flexDirection: 'row' }}>
                  <View
                    style={{ alignItems: 'center', gap: 3, flexShrink: 1, flexDirection: 'row' }}>
                    <Svg width="11" height="11" viewBox="0 0 24 24" fill="#F2A21A">
                      <Path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z" />
                    </Svg>
                    <Text
                      style={{
                        fontFamily: 'PlusJakartaSans_400Regular',
                        fontSize: 11,
                        color: '#4A4A4A',
                        flexShrink: 1,
                      }}>
                      {it.rating}
                    </Text>
                  </View>
                  <Text
                    style={{
                      flexShrink: 1,
                      fontFamily: 'PlusJakartaSans_400Regular',
                      fontSize: 11,
                      color: '#4A4A4A',
                    }}>
                    {it.cal}
                  </Text>
                </View>
                <View
                  style={{
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    marginTop: 2,
                    flexDirection: 'row',
                  }}>
                  <Text
                    style={{
                      flexShrink: 1,
                      fontFamily: 'PlusJakartaSans_800ExtraBold',
                      fontSize: 16,
                      color: '#1A1A1A',
                    }}>
                    {it.price}
                  </Text>
                  <View
                    style={{
                      width: 32,
                      height: 32,
                      borderRadius: 16,
                      backgroundColor: accent,
                      alignItems: 'center',
                      justifyContent: 'center',
                      flexDirection: 'row',
                    }}>
                    <Svg
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="#FFFFFF"
                      strokeWidth="3"
                      strokeLinecap="round">
                      <Path d="M12 5v14M5 12h14" />
                    </Svg>
                  </View>
                </View>
              </View>
            </Pressable>
          ))}
        </View>
        <View
          style={{
            position: 'absolute',
            left: 12,
            right: 12,
            bottom: 14,
            height: 72,
            borderRadius: 26,
            backgroundColor: '#FFFFFF',
            boxShadow: '0 -2px 24px rgba(60,30,10,0.10)',
            paddingBottom: 10,
            flexDirection: 'row',
            alignItems: 'flex-end',
          }}>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/')}
            style={{ alignItems: 'center', gap: 4, flex: 1 }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#5A5A5A"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" />
            </Svg>
            <Text
              style={{ fontFamily: 'PlusJakartaSans_500Medium', fontSize: 11, color: '#5A5A5A' }}>
              Home
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/menu')}
            style={{ alignItems: 'center', gap: 4, flex: 1 }}>
            <Svg width="22" height="22" viewBox="0 0 24 24" fill="#C8102E">
              <Rect x="4" y="4" width="6.5" height="6.5" rx="1.5" />
              <Rect x="13.5" y="4" width="6.5" height="6.5" rx="1.5" />
              <Rect x="4" y="13.5" width="6.5" height="6.5" rx="1.5" />
              <Rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.5" />
            </Svg>
            <Text
              style={{ fontFamily: 'PlusJakartaSans_600SemiBold', fontSize: 11, color: '#C8102E' }}>
              Menu
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/cart')}
            style={{ alignItems: 'center', top: -2, flex: 1 }}>
            <View
              style={{
                width: 64,
                height: 64,
                borderRadius: 32,
                backgroundColor: accent,
                borderWidth: 5,
                borderColor: '#F7F3EE',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 2,
                marginTop: -30,
                boxShadow: '0 8px 18px rgba(200,16,46,0.35)',
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#FFFFFF"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M6 7h12l-1 13H7L6 7z" />
                <Path d="M9 7a3 3 0 0 1 6 0" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_600SemiBold',
                  fontSize: 10,
                  color: '#FFFFFF',
                }}>
                Order
              </Text>
            </View>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/')}
            style={{ alignItems: 'center', gap: 4, flex: 1 }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#5A5A5A"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Rect x="3.5" y="9" width="17" height="11" rx="1.5" />
              <Path d="M3.5 13h17M12 9v11M12 9c-2-4-6-4-6-1.5S10 9 12 9zM12 9c2-4 6-4 6-1.5S14 9 12 9z" />
            </Svg>
            <Text
              style={{ fontFamily: 'PlusJakartaSans_500Medium', fontSize: 11, color: '#5A5A5A' }}>
              Rewards
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/')}
            style={{ alignItems: 'center', gap: 4, flex: 1 }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#5A5A5A"
              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: 'PlusJakartaSans_500Medium', fontSize: 11, color: '#5A5A5A' }}>
              Profile
            </Text>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { Image } from 'expo-image';
import { router } from 'expo-router';
import { useState } from 'react';
import { Pressable, Text, View } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';

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

// Screen state, and the values the layout below reads from it.
function useScreen() {
  const [state, setScreenState] = useState<Record<string, any>>({});
  const setState = (patch: Record<string, any>) =>
    setScreenState((current) => ({ ...current, ...patch }));

  const a = '#C8102E';
  const st = state || {};
  const qty = st.qty || 1;
  const side = st.side || 'Fries';
  const fav = !!st.fav;
  const base = 6.79;
  const opts = [
    { name: 'Fries', price: 2.19, img: 'e6a94cba21.jpg' },
    { name: 'Drink', price: 2.49, img: '718d422cc9.jpg' },
    { name: 'Nuggets', price: 3.29, img: 'd6c3851965.jpg' },
  ];
  let extra = 0;
  const sides = opts.map((o) => {
    if (o.name === side) extra = o.price;
    return {
      name: o.name,
      img: o.img,
      price: '+$' + o.price.toFixed(2),
      border: o.name === side ? a : '#EFE6DC',
      pick: () => {
        setState({ side: side === o.name ? 'none' : o.name });
      },
    };
  });
  return {
    accent: a,
    qty: qty,
    unit: '$' + base.toFixed(2),
    total: '$' + ((base + extra) * qty).toFixed(2),
    sides: sides,
    favFill: fav ? a : 'none',
    favStroke: fav ? a : '#1A1A1A',
    toggleFav: () => {
      setState({ fav: !fav });
    },
    inc: () => {
      setState({ qty: Math.min(qty + 1, 20) });
    },
    dec: () => {
      setState({ qty: Math.max(qty - 1, 1) });
    },
  };
}

export default function ProductScreen() {
  const { accent, qty, unit, total, sides, favFill, favStroke, toggleFav, inc, dec } = useScreen();
  return (
    <Screen background="#F7F3EE" statusBar="dark">
      <View style={{ flex: 1 }}>
        <View
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            height: 360,
            backgroundColor: '#F6E3D2',
            borderTopLeftRadius: 0,
            borderTopRightRadius: 0,
            borderBottomRightRadius: 36,
            borderBottomLeftRadius: 36,
          }}
        />
        <View
          style={{
            paddingTop: 20,
            paddingBottom: 0,
            paddingHorizontal: 18,
            justifyContent: 'space-between',
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Back to menu"
            onPress={() => router.navigate('/menu')}
            style={{
              width: 48,
              height: 48,
              borderRadius: 16,
              backgroundColor: '#FFFFFF',
              boxShadow: '0 4px 14px rgba(60,30,10,0.07)',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="2.2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M15 5l-7 7 7 7" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Save to favorites"
            onPress={toggleFav}
            style={{
              width: 48,
              height: 48,
              borderRadius: 16,
              borderWidth: 0,
              backgroundColor: '#FFFFFF',
              boxShadow: '0 4px 14px rgba(60,30,10,0.07)',
              alignItems: 'center',
              justifyContent: 'center',
              padding: 0,
              flexDirection: 'row',
            }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill={favFill}
              stroke={favStroke}
              strokeWidth="2"
              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>
        <Image
          source={{ uri: asset('3fc3e32c9f.jpg') }}
          contentFit="contain"
          accessibilityLabel="Coop Classic Chicken Sandwich"
          style={{
            marginVertical: 0,
            marginHorizontal: 'auto',
            width: 270,
            height: 250,
            mixBlendMode: 'multiply',
          }}
        />
        <View style={{ paddingTop: 22, paddingBottom: 0, paddingHorizontal: 18, gap: 10 }}>
          <View
            style={{
              justifyContent: 'space-between',
              alignItems: 'flex-start',
              gap: 12,
              flexDirection: 'row',
            }}>
            <View style={{ gap: 6, flexShrink: 1 }}>
              <Text
                style={{
                  alignSelf: 'flex-start',
                  backgroundColor: accent,
                  paddingVertical: 4,
                  paddingHorizontal: 9,
                  borderRadius: 999,
                  fontFamily: 'PlusJakartaSans_700Bold',
                  fontSize: 10,
                  color: '#FFFFFF',
                  letterSpacing: 0.5,
                }}>
                BESTSELLER
              </Text>
              <Text
                style={{
                  margin: 0,
                  fontFamily: 'PlusJakartaSans_800ExtraBold',
                  fontSize: 22,
                  color: '#1A1A1A',
                  lineHeight: 26.4,
                }}>
                Coop Classic Chicken Sandwich
              </Text>
            </View>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_800ExtraBold',
                fontSize: 22,
                color: accent,
              }}>
              {unit}
            </Text>
          </View>
          <View style={{ gap: 14, flexDirection: 'row' }}>
            <View style={{ alignItems: 'center', gap: 4, flexShrink: 1, flexDirection: 'row' }}>
              <Svg width="13" height="13" viewBox="0 0 24 24" fill="#F2A21A">
                <Path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 12,
                  color: '#4A4A4A',
                  flexShrink: 1,
                }}>
                4.8 (12.5K+)
              </Text>
            </View>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_400Regular',
                fontSize: 12,
                color: '#4A4A4A',
              }}>
              440 cal
            </Text>
            <View style={{ alignItems: 'center', gap: 4, flexShrink: 1, flexDirection: 'row' }}>
              <Svg
                width="13"
                height="13"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#4A4A4A"
                strokeWidth="2"
                strokeLinecap="round">
                <Circle cx="12" cy="12" r="9" />
                <Path d="M12 7v5l3 2" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 12,
                  color: '#4A4A4A',
                  flexShrink: 1,
                }}>
                8–10 min
              </Text>
            </View>
          </View>
          <Text
            style={{
              margin: 0,
              fontFamily: 'PlusJakartaSans_400Regular',
              fontSize: 13,
              color: '#3A3A3A',
              lineHeight: 20.15,
            }}>
            A boneless breast of chicken, seasoned to perfection, hand-breaded and pressure-fried,
            served on a toasted buttered brioche bun with dill pickle chips.
          </Text>
          <Text
            style={{
              marginTop: 6,
              marginBottom: 0,
              marginHorizontal: 0,
              fontFamily: 'PlusJakartaSans_700Bold',
              fontSize: 15,
              color: '#1A1A1A',
            }}>
            Make it a meal
          </Text>
          <View style={{ flexDirection: 'row', gap: 10, flexWrap: 'wrap' }}>
            {sides.map((s, index) => (
              <Pressable
                key={index}
                accessibilityRole="button"
                onPress={s.pick}
                style={{
                  borderWidth: 2,
                  borderColor: s.border,
                  backgroundColor: '#FFFFFF',
                  borderRadius: 16,
                  paddingVertical: 8,
                  paddingHorizontal: 6,
                  alignItems: 'center',
                  gap: 4,
                  flexGrow: 1,
                  flexBasis: '26%',
                }}>
                <Image
                  source={{ uri: asset(s.img) }}
                  contentFit="contain"
                  style={{ width: 52, height: 52 }}
                />
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_600SemiBold',
                    fontSize: 11.5,
                    color: '#1A1A1A',
                  }}>
                  {s.name}
                </Text>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_400Regular',
                    fontSize: 11,
                    color: '#5A5A5A',
                  }}>
                  {s.price}
                </Text>
              </Pressable>
            ))}
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            paddingTop: 14,
            paddingBottom: 22,
            paddingHorizontal: 18,
            backgroundColor: '#FFFFFF',
            borderTopLeftRadius: 28,
            borderTopRightRadius: 28,
            borderBottomRightRadius: 0,
            borderBottomLeftRadius: 0,
            boxShadow: '0 -6px 24px rgba(60,30,10,0.08)',
            alignItems: 'center',
            gap: 14,
            flexDirection: 'row',
          }}>
          <View
            style={{
              alignItems: 'center',
              gap: 4,
              backgroundColor: '#F7F3EE',
              borderRadius: 999,
              padding: 4,
              flexShrink: 1,
              flexDirection: 'row',
            }}>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Decrease quantity"
              onPress={dec}
              style={{
                width: 40,
                height: 40,
                borderRadius: 20,
                borderWidth: 0,
                backgroundColor: '#FFFFFF',
                padding: 0,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_700Bold',
                  fontSize: 20,
                  color: '#1A1A1A',
                  textAlign: 'center',
                }}>
                −
              </Text>
            </Pressable>
            <Text
              style={{
                minWidth: 24,
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_700Bold',
                fontSize: 16,
                color: '#1A1A1A',
                textAlign: 'center',
              }}>
              {qty}
            </Text>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Increase quantity"
              onPress={inc}
              style={{
                width: 40,
                height: 40,
                borderRadius: 20,
                borderWidth: 0,
                backgroundColor: accent,
                padding: 0,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_700Bold',
                  fontSize: 20,
                  color: '#FFFFFF',
                  textAlign: 'center',
                }}>
                +
              </Text>
            </Pressable>
          </View>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/cart')}
            style={{
              flex: 1,
              height: 52,
              borderRadius: 999,
              backgroundColor: accent,
              alignItems: 'center',
              justifyContent: 'center',
              gap: 8,
              flexDirection: 'row',
            }}>
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_700Bold',
                fontSize: 15,
                color: '#FFFFFF',
                flexShrink: 1,
              }}>
              {'Add to Bag · '}
              {total}
            </Text>
          </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/crispy-chicken-food-app-ui-design/assets';

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