Movie Ticket Booking App UI Design in Expo

import { BebasNeue_400Regular } from '@expo-google-fonts/bebas-neue';
import {
  Inter_400Regular,
  Inter_600SemiBold,
  Inter_700Bold,
  Inter_800ExtraBold,
} from '@expo-google-fonts/inter';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    BebasNeue_400Regular,
    Inter_400Regular,
    Inter_600SemiBold,
    Inter_700Bold,
    Inter_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, View } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';

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

const accent = '#CC3A0E';

export default function DetailScreen() {
  return (
    <Screen background="#000000" statusBar="light">
      <View style={{ flex: 1 }}>
        <View
          style={{
            position: 'absolute',
            left: 0,
            top: 0,
            width: 390,
            height: 590,
            backgroundColor: '#2a0105',
          }}>
          <Image
            source={{ uri: asset('18e23cdfc9.svg') }}
            contentFit="cover"
            contentPosition="top center"
            style={{ position: 'absolute', left: 0, top: 0, width: 390, height: 590 }}
          />
          <View style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 300 }}>
            <LinearGradient
              colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.6)', '#000000']}
              locations={[0, 0.45, 1]}
              start={{ x: 0.5, y: 0 }}
              end={{ x: 0.5, y: 1 }}
              style={StyleSheet.absoluteFill}
            />
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 16,
            right: 16,
            top: 56,
            height: 44,
            borderRadius: 999,
            backgroundColor: 'rgba(40,0,4,0.55)',
            alignItems: 'center',
            justifyContent: 'space-between',
            paddingVertical: 0,
            paddingHorizontal: 6,
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Back"
            onPress={() => router.navigate('/')}
            style={{
              width: 36,
              height: 36,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#ffffff"
              strokeWidth="2.2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M15 5l-7 7 7 7" />
            </Svg>
          </Pressable>
          <Text
            style={{
              flexShrink: 1,
              fontFamily: 'Inter_600SemiBold',
              fontSize: 13,
              color: '#ffffff',
            }}>
            Iron Petal – The Movie: Akane Arc
          </Text>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Share"
            style={{
              width: 36,
              height: 36,
              borderWidth: 0,
              padding: 0,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="19"
              height="19"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#ffffff"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M14 4h6v6M20 4l-9 9" />
              <Path d="M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" />
            </Svg>
          </Pressable>
        </View>
        <Pressable
          accessibilityRole="button"
          style={{
            position: 'absolute',
            left: '50%',
            top: 300,
            transform: [{ translateX: '-50%' }],
            alignItems: 'center',
            gap: 7,
            borderWidth: 0,
            borderRadius: 999,
            backgroundColor: 'rgba(30,30,30,0.6)',
            paddingVertical: 8,
            paddingLeft: 8,
            paddingRight: 14,
            flexDirection: 'row',
          }}>
          <Svg
            width="22"
            height="22"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#ffffff"
            strokeWidth="1.6">
            <Circle cx="12" cy="12" r="10" />
            <Path d="M10 8.5l5 3.5-5 3.5z" fill="#ffffff" />
          </Svg>
          <Text
            style={{
              fontFamily: 'Inter_400Regular',
              fontSize: 13,
              color: '#ffffff',
              flexShrink: 1,
            }}>
            Trailer (2)
          </Text>
        </Pressable>
        <View style={{ position: 'absolute', left: 0, right: 0, top: 448, alignItems: 'center' }}>
          <Text
            style={{
              margin: 0,
              fontFamily: 'BebasNeue_400Regular',
              fontSize: 64,
              color: '#ffffff',
              letterSpacing: 2,
              lineHeight: 57.6,
            }}>
            IRON PETAL
          </Text>
          <Text
            style={{
              marginTop: 6,
              fontFamily: 'Inter_400Regular',
              fontSize: 11,
              color: '#ffc9c9',
              letterSpacing: 3.5,
            }}>
            THE MOVIE · AKANE ARC
          </Text>
          <Text
            style={{
              marginTop: 10,
              fontFamily: 'Inter_600SemiBold',
              fontSize: 14,
              color: '#ffffff',
            }}>
            Japanese, Hindi
          </Text>
        </View>
        <View style={{ position: 'absolute', left: 20, right: 20, top: 612 }}>
          <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 13, color: '#e6e6e6' }}>
            Streaming Now
          </Text>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/showtimes')}
            style={{
              marginTop: 14,
              height: 48,
              borderRadius: 999,
              backgroundColor: accent,
              alignItems: 'center',
              justifyContent: 'center',
              boxShadow: '0 10px 24px rgba(204,58,14,0.35)',
              flexDirection: 'row',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_600SemiBold',
                fontSize: 15,
                color: '#ffffff',
                flexShrink: 1,
              }}>
              Book Now
            </Text>
          </Pressable>
          <Text
            style={{
              marginTop: 16,
              marginBottom: 0,
              marginHorizontal: 0,
              fontFamily: 'Inter_400Regular',
              fontSize: 12,
              color: '#e6e6e6',
            }}>
            1h 42m • Action, Adventure, Anime, Fantasy • A • 13 Nov, 2026
          </Text>
          <Text
            style={{
              marginTop: 6,
              marginBottom: 0,
              marginHorizontal: 0,
              fontFamily: 'Inter_400Regular',
              fontSize: 12,
              color: '#9a9a9a',
            }}>
            {'Japanese • Languages: '}
            <Text style={{ color: '#ff8a65' }}>Audio(2)</Text>
            {', '}
            <Text style={{ color: '#ff8a65' }}>Subtitles(1)</Text>
          </Text>
          <Text
            style={{
              marginTop: 10,
              marginBottom: 0,
              marginHorizontal: 0,
              fontFamily: 'Inter_400Regular',
              fontSize: 12,
              color: '#d9d9d9',
              lineHeight: 18,
            }}>
            {
              'Akane, a sword-for-hire with a blade that blooms, is drawn into a turf war when an old ally resurfaces with a debt she can’t … '
            }
            Read more…
          </Text>
        </View>
        <View
          style={{
            position: 'absolute',
            bottom: 8,
            left: '50%',
            transform: [{ translateX: '-50%' }],
            width: 134,
            height: 5,
            borderRadius: 3,
            backgroundColor: '#ffffff',
          }}
        />
      </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';

const accent = '#CC3A0E';

export default function MainScreen() {
  return (
    <Screen background="#ffffff" statusBar="dark">
      <View style={{ flex: 1 }}>
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'space-between',
            paddingTop: 58,
            paddingBottom: 14,
            paddingHorizontal: 20,
            flexDirection: 'row',
          }}>
          <Svg
            width="36"
            height="32"
            viewBox="0 0 36 32"
            accessibilityRole="image"
            accessibilityLabel="Reelo logo">
            <Path d="M18 2 L34 28 Q35 30 33 30 L3 30 Q1 30 2 28 Z" fill={accent} />
            <Path d="M18 13 L25 25 L11 25 Z" fill="#ffffff" />
          </Svg>
          <View style={{ gap: 18, alignItems: 'center', flexShrink: 1, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="My tickets"
              style={{
                borderWidth: 0,
                padding: 0,
                width: 28,
                height: 28,
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#141414"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M4 6h16v4a2 2 0 0 0 0 4v4H4v-4a2 2 0 0 0 0-4z" />
                <Path d="M12 6v12" strokeDasharray="2 2" />
              </Svg>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Notifications"
              style={{
                borderWidth: 0,
                padding: 0,
                width: 28,
                height: 28,
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#141414"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z" />
                <Path d="M10 20a2 2 0 0 0 4 0" />
              </Svg>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Search"
              style={{
                borderWidth: 0,
                padding: 0,
                width: 28,
                height: 28,
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#141414"
                strokeWidth="1.8"
                strokeLinecap="round">
                <Circle cx="11" cy="11" r="7" />
                <Path d="M16.5 16.5L21 21" />
              </Svg>
            </Pressable>
          </View>
        </View>
        <View
          style={{
            alignItems: 'center',
            gap: 22,
            paddingVertical: 0,
            paddingHorizontal: 20,
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="button"
            style={{
              alignItems: 'center',
              gap: 7,
              backgroundColor: '#141414',
              borderWidth: 0,
              borderRadius: 999,
              paddingVertical: 9,
              paddingHorizontal: 16,
              flexShrink: 1,
              flexDirection: 'row',
            }}>
            <Svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#ffffff"
              strokeWidth="2"
              strokeLinejoin="round">
              <Rect x="3" y="5" width="18" height="15" rx="2" />
              <Path d="M3 10h18M8 5l2 5M14 5l2 5" />
            </Svg>
            <Text
              style={{
                fontFamily: 'Inter_600SemiBold',
                fontSize: 15,
                color: '#ffffff',
                flexShrink: 1,
              }}>
              Movies
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              borderWidth: 0,
              padding: 0,
              flexShrink: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_400Regular',
                fontSize: 14,
                color: '#5c5c5c',
                textAlign: 'center',
              }}>
              Events / Benefits
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              borderWidth: 0,
              padding: 0,
              flexShrink: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_400Regular',
                fontSize: 14,
                color: '#5c5c5c',
                textAlign: 'center',
              }}>
              Activities
            </Text>
          </Pressable>
        </View>
        <View
          style={{
            alignItems: 'center',
            gap: 18,
            paddingTop: 18,
            paddingBottom: 0,
            paddingHorizontal: 20,
            flexDirection: 'row',
          }}>
          <Text
            style={{
              paddingBottom: 6,
              borderBottomWidth: 2,
              borderBottomColor: '#141414',
              flexShrink: 1,
              fontFamily: 'Inter_600SemiBold',
              fontSize: 13,
              color: '#141414',
            }}>
            Movie Chart
          </Text>
          <Text
            style={{
              paddingBottom: 8,
              flexShrink: 1,
              fontFamily: 'Inter_400Regular',
              fontSize: 13,
              color: '#6b6b6b',
            }}>
            Now Showing
          </Text>
          <Text
            style={{
              paddingBottom: 8,
              flexShrink: 1,
              fontFamily: 'Inter_400Regular',
              fontSize: 13,
              color: '#6b6b6b',
            }}>
            Coming Soon
          </Text>
          <View
            style={{
              paddingBottom: 8,
              alignItems: 'center',
              gap: 2,
              flexShrink: 1,
              flexDirection: 'row',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_400Regular',
                fontSize: 13,
                color: '#6b6b6b',
                flexShrink: 1,
              }}>
              See all
            </Text>
            <Svg
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#6b6b6b"
              strokeWidth="2.4"
              strokeLinecap="round">
              <Path d="M9 6l6 6-6 6" />
            </Svg>
          </View>
        </View>
        <View style={{ height: 330, marginTop: 22 }}>
          <View
            style={{
              position: 'absolute',
              left: -200,
              top: 26,
              width: 228,
              height: 278,
              borderRadius: 26,
              overflow: 'hidden',
            }}>
            <Image
              source={{ uri: asset('c27d246b2a.svg') }}
              contentFit="cover"
              style={{ width: '100%', height: '100%' }}
            />
          </View>
          <View
            style={{
              position: 'absolute',
              right: -200,
              top: 26,
              width: 228,
              height: 278,
              borderRadius: 26,
              overflow: 'hidden',
            }}>
            <Image
              source={{ uri: asset('c84f4e1efb.svg') }}
              contentFit="cover"
              style={{ width: '100%', height: '100%' }}
            />
            <Text
              style={{
                position: 'absolute',
                left: 14,
                top: 10,
                fontFamily: 'BebasNeue_400Regular',
                fontSize: 34,
                color: '#ffffff',
              }}>
              2
            </Text>
          </View>
          <View
            style={{
              position: 'absolute',
              left: '50%',
              top: 0,
              transform: [{ translateX: '-50%' }],
              width: 252,
              height: 330,
              borderRadius: 30,
              overflow: 'hidden',
              boxShadow: '0 18px 36px rgba(196, 30, 30, 0.28)',
              backgroundColor: '#6e0610',
            }}>
            <Image
              source={{ uri: asset('18e23cdfc9.svg') }}
              contentFit="cover"
              accessibilityLabel="Iron Petal – The Movie: Akane Arc poster"
              style={{
                position: 'absolute',
                bottom: 0,
                right: 0,
                left: 0,
                top: 0,
                width: '100%',
                height: '100%',
              }}
            />
            <Text
              style={{
                position: 'absolute',
                left: 18,
                top: 10,
                fontFamily: 'BebasNeue_400Regular',
                fontSize: 44,
                color: '#ffffff',
                fontStyle: 'italic',
              }}>
              1
            </Text>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Add to favourites"
              style={{
                position: 'absolute',
                right: 14,
                top: 14,
                width: 36,
                height: 36,
                borderWidth: 0,
                padding: 0,
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg width="26" height="26" viewBox="0 0 24 24" fill="#ffffff">
                <Path d="M12 21s-7.5-4.6-9.5-9.2C1 8.2 3.3 4.5 7 4.5c2.1 0 3.7 1.1 5 2.9 1.3-1.8 2.9-2.9 5-2.9 3.7 0 6 3.7 4.5 7.3C19.5 16.4 12 21 12 21z" />
              </Svg>
            </Pressable>
          </View>
        </View>
        <View
          style={{ alignItems: 'center', paddingTop: 22, paddingBottom: 0, paddingHorizontal: 20 }}>
          <View style={{ alignItems: 'center', gap: 8, flexDirection: 'row' }}>
            <Text
              style={{
                margin: 0,
                flexShrink: 1,
                fontFamily: 'Inter_700Bold',
                fontSize: 16,
                color: '#141414',
              }}>
              Iron Petal – The Movie: Akane Arc
            </Text>
            <Text
              style={{
                backgroundColor: '#f0a52b',
                borderRadius: 5,
                paddingVertical: 3,
                paddingHorizontal: 5,
                flexShrink: 1,
                fontFamily: 'Inter_800ExtraBold',
                fontSize: 11,
                color: '#141414',
              }}>
              16+
            </Text>
          </View>
          <View style={{ alignItems: 'center', gap: 6, marginTop: 12, flexDirection: 'row' }}>
            <Svg width="13" height="13" viewBox="0 0 24 24" fill={accent}>
              <Path d="M12 2c1 4 6 6 6 12a6 6 0 0 1-12 0c0-3 2-5 3-6 0 2 1 3 2 3 0-3 1-6 1-9z" />
            </Svg>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Inter_400Regular',
                fontSize: 12,
                color: '#3d3d3d',
              }}>
              Booking Rate: 28.4% • Cumulative: 1.4 million •
            </Text>
            <Svg width="12" height="12" viewBox="0 0 24 24" fill="#c0392b">
              <Path d="M12 21s-7.5-4.6-9.5-9.2C1 8.2 3.3 4.5 7 4.5c2.1 0 3.7 1.1 5 2.9 1.3-1.8 2.9-2.9 5-2.9 3.7 0 6 3.7 4.5 7.3C19.5 16.4 12 21 12 21z" />
            </Svg>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Inter_400Regular',
                fontSize: 12,
                color: '#3d3d3d',
              }}>
              8,123
            </Text>
          </View>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/detail')}
            style={{
              marginTop: 22,
              backgroundColor: '#141414',
              borderRadius: 999,
              paddingVertical: 13,
              paddingHorizontal: 34,
            }}>
            <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 15, color: '#ffffff' }}>
              Book Now
            </Text>
          </Pressable>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            height: 92,
            backgroundColor: '#ffffff',
            boxShadow: '0 -4px 18px rgba(0,0,0,0.06)',
            alignItems: 'flex-start',
            justifyContent: 'space-around',
            paddingTop: 12,
            paddingBottom: 0,
            paddingHorizontal: 8,
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/')}
            style={{ alignItems: 'center', gap: 5, width: 56 }}>
            <Svg width="22" height="22" viewBox="0 0 24 24" fill="#141414">
              <Path d="M3 10.5L12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z" />
            </Svg>
            <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 11, color: '#141414' }}>
              Home
            </Text>
          </Pressable>
          <Pressable accessibilityRole="link" style={{ alignItems: 'center', gap: 5, width: 56 }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#141414"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Path d="M4 5h16v11H9l-5 4z" />
              <Path
                d="M8 10.5h.01M12 10.5h.01M16 10.5h.01"
                strokeWidth="2.6"
                strokeLinecap="round"
              />
            </Svg>
            <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 11, color: '#141414' }}>
              Cine Talk
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Book tickets"
            onPress={() => router.navigate('/showtimes')}
            style={{
              marginTop: -32,
              width: 68,
              height: 78,
              borderRadius: 24,
              backgroundColor: accent,
              boxShadow: '0 10px 22px rgba(204,58,14,0.4)',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 4,
            }}>
            <Svg
              width="26"
              height="26"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#ffffff"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Path d="M4 6h16v4a2 2 0 0 0 0 4v4H4v-4a2 2 0 0 0 0-4z" />
              <Path d="M9 10h6M9 14h6" />
            </Svg>
            <Text style={{ fontFamily: 'Inter_700Bold', fontSize: 12, color: '#ffffff' }}>
              BOOK
            </Text>
          </Pressable>
          <Pressable accessibilityRole="link" style={{ alignItems: 'center', gap: 5, width: 56 }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#141414"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Path d="M6 10h12l-1.5 11h-9z" />
              <Path d="M7 10a3 3 0 0 1 3-4 3 3 0 0 1 4 0 3 3 0 0 1 3 4" />
            </Svg>
            <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 11, color: '#141414' }}>
              Store
            </Text>
          </Pressable>
          <Pressable accessibilityRole="link" style={{ alignItems: 'center', gap: 5, width: 56 }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#141414"
              strokeWidth="1.8">
              <Circle cx="7.5" cy="7.5" r="3.5" />
              <Circle cx="16.5" cy="7.5" r="3.5" />
              <Circle cx="7.5" cy="16.5" r="3.5" />
              <Circle cx="16.5" cy="16.5" r="3.5" />
            </Svg>
            <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 11, color: '#141414' }}>
              More
            </Text>
          </Pressable>
        </View>
        <View
          style={{
            position: 'absolute',
            bottom: 8,
            left: '50%',
            transform: [{ translateX: '-50%' }],
            width: 134,
            height: 5,
            borderRadius: 3,
            backgroundColor: '#141414',
          }}
        />
      </View>
    </Screen>
  );
}

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

import { Screen } from '@/components/screen';

const accent = '#CC3A0E';
const TAKEN = [
  'A3',
  'A4',
  'B6',
  'B7',
  'B8',
  'C1',
  'D5',
  'D6',
  'E9',
  'E10',
  'F4',
  'G1',
  'G2',
  'H7',
  'H8',
  'H9',
  'C11',
  'F12',
];
const CLASSIC_PRICE = 250;
const PREMIUM_PRICE = 420;
const isPremium = (id: string) => id[0] === 'G' || id[0] === 'H';

export default function SeatsScreen() {
  const [picked, setPicked] = useState(['F6', 'F7']);
  const [held, setHeld] = useState(false);

  const toggle = (id: string) => {
    setHeld(false);
    setPicked((seats) =>
      seats.includes(id)
        ? seats.filter((seat) => seat !== id)
        : seats.length < 10
          ? [...seats, id]
          : seats,
    );
  };

  const seat = (id: string, premium: boolean) => {
    const isTaken = TAKEN.includes(id);
    const isPicked = picked.includes(id);
    return {
      isSeat: true,
      aria: `Seat ${id}, ${premium ? 'premium' : 'classic'}${isTaken ? ', taken' : ''}`,
      taken: isTaken,
      pick: () => toggle(id),
      style: {
        flex: 1,
        height: 19,
        borderTopLeftRadius: 6,
        borderTopRightRadius: 6,
        borderBottomLeftRadius: 4,
        borderBottomRightRadius: 4,
        ...(isTaken
          ? { backgroundColor: '#dcdcdc' }
          : isPicked
            ? { backgroundColor: accent, borderWidth: 1.5, borderColor: accent }
            : {
                backgroundColor: '#ffffff',
                borderWidth: 1.5,
                borderColor: premium ? '#d08c14' : '#9e9e9e',
              }),
      },
    };
  };

  const buildRow = (row: string, premium: boolean) => {
    const cells: {
      isLabel?: boolean;
      isAisle?: boolean;
      isSeat?: boolean;
      text?: string;
      aria?: string;
      taken?: boolean;
      pick?: () => void;
      style?: object;
    }[] = [{ isLabel: true, text: row }];
    for (let n = 1; n <= 12; n++) {
      cells.push(seat(`${row}${n}`, premium));
      if (n === 2 || n === 10) cells.push({ isAisle: true });
    }
    cells.push({ isLabel: true, text: row });
    return { name: row, cells };
  };

  const classicRows = ['A', 'B', 'C', 'D', 'E', 'F'].map((row) => buildRow(row, false));
  const premiumRows = ['G', 'H'].map((row) => buildRow(row, true));

  const sorted = [...picked].sort(
    (a, b) =>
      a.localeCompare(b[0] === a[0] ? a : b) || parseInt(a.slice(1), 10) - parseInt(b.slice(1), 10),
  );
  const total = picked.reduce(
    (sum, id) => sum + (isPremium(id) ? PREMIUM_PRICE : CLASSIC_PRICE),
    0,
  );
  const none = picked.length === 0;
  const totalText = `₹${total.toLocaleString('en-IN')}`;
  const seatsText = none ? 'None yet' : sorted.join(', ');
  const countLabel = `${picked.length} ${picked.length === 1 ? 'Ticket' : 'Tickets'}`;
  const noneSelected = none;
  const holdLabel = none ? 'Select seats' : `Hold seats · ${totalText}`;
  const holdStyle = {
    marginTop: 14,
    width: '100%' as const,
    height: 50,
    borderRadius: 999,
    backgroundColor: none ? '#4a4a4a' : accent,
  };
  const hold = () => setHeld(true);
  const clear = () => {
    setPicked([]);
    setHeld(false);
  };
  return (
    <Screen background="#ffffff" statusBar="dark">
      <View style={{ flex: 1 }}>
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'space-between',
            paddingTop: 56,
            paddingBottom: 0,
            paddingHorizontal: 16,
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Back to showtimes"
            onPress={() => router.navigate('/showtimes')}
            style={{
              width: 40,
              height: 40,
              borderRadius: '50%',
              backgroundColor: '#f3f3f3',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#141414"
              strokeWidth="2.2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M15 5l-7 7 7 7" />
            </Svg>
          </Pressable>
          <View style={{ alignItems: 'center', flexShrink: 1 }}>
            <Text
              style={{ margin: 0, fontFamily: 'Inter_700Bold', fontSize: 15, color: '#141414' }}>
              Iron Petal – The Movie
            </Text>
            <Text
              style={{
                marginTop: 2,
                fontFamily: 'Inter_400Regular',
                fontSize: 11,
                color: '#5c5c5c',
              }}>
              Cineverse, Skyline Mall, Borivali
            </Text>
          </View>
          <View
            style={{
              minWidth: 40,
              height: 26,
              borderRadius: 999,
              backgroundColor: '#fff3d6',
              alignItems: 'center',
              justifyContent: 'center',
              paddingVertical: 0,
              paddingHorizontal: 8,
              flexShrink: 1,
              flexDirection: 'row',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_700Bold',
                fontSize: 11,
                color: '#8a5a00',
                flexShrink: 1,
              }}>
              {countLabel}
            </Text>
          </View>
        </View>
        <View style={{ paddingTop: 18, paddingBottom: 0, paddingHorizontal: 16 }}>
          <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 12, color: '#3d3d3d' }}>
            Mon, 16 Nov · 1h 42m · Japanese
          </Text>
          <View style={{ gap: 8, marginTop: 10, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              style={{
                height: 32,
                paddingVertical: 0,
                paddingHorizontal: 11,
                borderRadius: 9,
                borderWidth: 1,
                borderColor: '#e0e0e0',
                backgroundColor: '#ffffff',
                flexShrink: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'Inter_600SemiBold',
                  fontSize: 12,
                  color: '#141414',
                  textAlign: 'center',
                }}>
                4:25 PM
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                height: 32,
                paddingVertical: 0,
                paddingHorizontal: 11,
                borderRadius: 9,
                borderWidth: 1,
                borderColor: '#e0e0e0',
                backgroundColor: '#ffffff',
                flexShrink: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'Inter_600SemiBold',
                  fontSize: 12,
                  color: '#141414',
                  textAlign: 'center',
                }}>
                4:45 PM
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                height: 32,
                paddingVertical: 0,
                paddingHorizontal: 11,
                borderRadius: 9,
                borderWidth: 0,
                backgroundColor: '#141414',
                flexShrink: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'Inter_600SemiBold',
                  fontSize: 12,
                  color: '#ffffff',
                  textAlign: 'center',
                }}>
                {'7:35 PM '}
                <Text style={{ fontSize: 10, color: '#f0a52b' }}>LUX</Text>
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                height: 32,
                paddingVertical: 0,
                paddingHorizontal: 11,
                borderRadius: 9,
                borderWidth: 1,
                borderColor: '#e0e0e0',
                backgroundColor: '#ffffff',
                flexShrink: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'Inter_600SemiBold',
                  fontSize: 12,
                  color: '#141414',
                  textAlign: 'center',
                }}>
                7:45 PM
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                height: 32,
                paddingVertical: 0,
                paddingHorizontal: 11,
                borderRadius: 9,
                borderWidth: 1,
                borderColor: '#e0e0e0',
                backgroundColor: '#ffffff',
                flexShrink: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'Inter_600SemiBold',
                  fontSize: 12,
                  color: '#141414',
                  textAlign: 'center',
                }}>
                10:50 PM
              </Text>
            </Pressable>
          </View>
        </View>
        <View style={{ marginTop: 20, marginBottom: 0, marginHorizontal: 28, height: 40 }}>
          <Svg width="334" height="26" viewBox="0 0 334 26">
            <Path
              d="M4 22 Q167 -8 330 22"
              fill="none"
              stroke={accent}
              strokeWidth="4"
              strokeLinecap="round"
            />
            <Path
              d="M4 24 Q167 -2 330 24"
              fill="none"
              stroke={accent}
              strokeOpacity="0.15"
              strokeWidth="10"
              strokeLinecap="round"
            />
          </Svg>
          <Text
            style={{
              marginTop: 2,
              fontFamily: 'Inter_400Regular',
              fontSize: 11,
              color: '#6b6b6b',
              textAlign: 'center',
            }}>
            Screen this way
          </Text>
        </View>
        <View style={{ paddingTop: 8, paddingBottom: 0, paddingHorizontal: 20, gap: 6 }}>
          <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Inter_700Bold',
                fontSize: 10,
                color: '#6b6b6b',
                letterSpacing: 1,
              }}>
              CLASSIC
            </Text>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Inter_700Bold',
                fontSize: 10,
                color: '#6b6b6b',
                letterSpacing: 1,
              }}>
              ₹250
            </Text>
          </View>
          {classicRows.map((row, index) => (
            <View key={index} style={{ gap: 4, alignItems: 'center', flexDirection: 'row' }}>
              {row.cells.map((cell, index) => (
                <Fragment key={index}>
                  {cell.isLabel && (
                    <Text
                      style={{
                        width: 16,
                        fontFamily: 'Inter_600SemiBold',
                        fontSize: 10,
                        color: '#6b6b6b',
                        textAlign: 'center',
                        flexShrink: 1,
                      }}>
                      {cell.text}
                    </Text>
                  )}
                  {cell.isAisle && <View style={{ width: 10 }} />}
                  {cell.isSeat && (
                    <Pressable
                      accessibilityRole="button"
                      accessibilityLabel={cell.aria}
                      onPress={cell.pick}
                      disabled={cell.taken}
                      style={{
                        ...cell.style,
                        flexShrink: 1,
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}
                    />
                  )}
                </Fragment>
              ))}
            </View>
          ))}
          <View style={{ justifyContent: 'space-between', marginTop: 8, flexDirection: 'row' }}>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Inter_700Bold',
                fontSize: 10,
                color: '#8a5a00',
                letterSpacing: 1,
              }}>
              PREMIUM RECLINER
            </Text>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Inter_700Bold',
                fontSize: 10,
                color: '#8a5a00',
                letterSpacing: 1,
              }}>
              ₹420
            </Text>
          </View>
          {premiumRows.map((row, index) => (
            <View key={index} style={{ gap: 4, alignItems: 'center', flexDirection: 'row' }}>
              {row.cells.map((cell, index) => (
                <Fragment key={index}>
                  {cell.isLabel && (
                    <Text
                      style={{
                        width: 16,
                        fontFamily: 'Inter_600SemiBold',
                        fontSize: 10,
                        color: '#6b6b6b',
                        textAlign: 'center',
                        flexShrink: 1,
                      }}>
                      {cell.text}
                    </Text>
                  )}
                  {cell.isAisle && <View style={{ width: 10 }} />}
                  {cell.isSeat && (
                    <Pressable
                      accessibilityRole="button"
                      accessibilityLabel={cell.aria}
                      onPress={cell.pick}
                      disabled={cell.taken}
                      style={{
                        ...cell.style,
                        flexShrink: 1,
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}
                    />
                  )}
                </Fragment>
              ))}
            </View>
          ))}
        </View>
        <View
          style={{
            gap: 14,
            justifyContent: 'center',
            paddingTop: 16,
            paddingBottom: 0,
            paddingHorizontal: 16,
            flexDirection: 'row',
          }}>
          <View style={{ alignItems: 'center', gap: 5, flexShrink: 1, flexDirection: 'row' }}>
            <View
              style={{
                width: 14,
                height: 12,
                borderTopLeftRadius: 4,
                borderTopRightRadius: 4,
                borderBottomRightRadius: 3,
                borderBottomLeftRadius: 3,
                borderWidth: 1.5,
                borderColor: '#9e9e9e',
              }}
            />
            <Text
              style={{
                fontFamily: 'Inter_400Regular',
                fontSize: 11,
                color: '#4d4d4d',
                flexShrink: 1,
              }}>
              Classic
            </Text>
          </View>
          <View style={{ alignItems: 'center', gap: 5, flexShrink: 1, flexDirection: 'row' }}>
            <View
              style={{
                width: 14,
                height: 12,
                borderTopLeftRadius: 4,
                borderTopRightRadius: 4,
                borderBottomRightRadius: 3,
                borderBottomLeftRadius: 3,
                borderWidth: 1.5,
                borderColor: '#d08c14',
              }}
            />
            <Text
              style={{
                fontFamily: 'Inter_400Regular',
                fontSize: 11,
                color: '#4d4d4d',
                flexShrink: 1,
              }}>
              Premium
            </Text>
          </View>
          <View style={{ alignItems: 'center', gap: 5, flexShrink: 1, flexDirection: 'row' }}>
            <View
              style={{
                width: 14,
                height: 12,
                borderTopLeftRadius: 4,
                borderTopRightRadius: 4,
                borderBottomRightRadius: 3,
                borderBottomLeftRadius: 3,
                backgroundColor: '#dcdcdc',
              }}
            />
            <Text
              style={{
                fontFamily: 'Inter_400Regular',
                fontSize: 11,
                color: '#4d4d4d',
                flexShrink: 1,
              }}>
              Taken
            </Text>
          </View>
          <View style={{ alignItems: 'center', gap: 5, flexShrink: 1, flexDirection: 'row' }}>
            <View
              style={{
                width: 14,
                height: 12,
                borderTopLeftRadius: 4,
                borderTopRightRadius: 4,
                borderBottomRightRadius: 3,
                borderBottomLeftRadius: 3,
                backgroundColor: accent,
              }}
            />
            <Text
              style={{
                fontFamily: 'Inter_400Regular',
                fontSize: 11,
                color: '#4d4d4d',
                flexShrink: 1,
              }}>
              Your pick
            </Text>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: '#141414',
            borderTopLeftRadius: 28,
            borderTopRightRadius: 28,
            borderBottomRightRadius: 0,
            borderBottomLeftRadius: 0,
            paddingTop: 18,
            paddingBottom: 30,
            paddingHorizontal: 16,
          }}>
          <View
            style={{
              borderWidth: 1,
              borderColor: '#4a4a4a',
              borderStyle: 'dashed',
              borderRadius: 16,
              flexDirection: 'row',
            }}>
            <View
              style={{
                flex: 1,
                margin: 0,
                paddingVertical: 12,
                paddingHorizontal: 14,
                flexDirection: 'row',
                gap: 8,
              }}>
              <View style={{ flex: 1 }}>
                <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 10, color: '#a6a6a6' }}>
                  Seats
                </Text>
                <Text
                  style={{
                    marginTop: 2,
                    marginBottom: 0,
                    marginHorizontal: 0,
                    fontFamily: 'Inter_600SemiBold',
                    fontSize: 13,
                    color: '#ffffff',
                  }}>
                  {seatsText}
                </Text>
              </View>
              <View style={{ flex: 1 }}>
                <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 10, color: '#a6a6a6' }}>
                  Show
                </Text>
                <Text
                  style={{
                    marginTop: 2,
                    marginBottom: 0,
                    marginHorizontal: 0,
                    fontFamily: 'Inter_600SemiBold',
                    fontSize: 13,
                    color: '#ffffff',
                  }}>
                  Mon · 7:35 PM
                </Text>
              </View>
            </View>
            <View
              style={{
                borderLeftWidth: 1,
                borderLeftColor: '#4a4a4a',
                borderStyle: 'dashed',
                paddingVertical: 12,
                paddingHorizontal: 14,
                justifyContent: 'center',
                alignItems: 'flex-end',
                flexShrink: 1,
              }}>
              <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 10, color: '#a6a6a6' }}>
                Total
              </Text>
              <Text style={{ fontFamily: 'Inter_700Bold', fontSize: 17, color: '#ffffff' }}>
                {totalText}
              </Text>
            </View>
          </View>
          {held && (
            <Text
              style={{
                marginTop: 10,
                marginBottom: 0,
                marginHorizontal: 0,
                fontFamily: 'Inter_400Regular',
                fontSize: 12,
                color: '#ffd9c7',
              }}>
              Seats held for 10 minutes. Complete payment to confirm your tickets.
            </Text>
          )}
          <Pressable
            accessibilityRole="button"
            onPress={hold}
            disabled={noneSelected}
            style={{
              ...holdStyle,
              alignSelf: 'flex-start',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_700Bold',
                fontSize: 15,
                color: '#ffffff',
                textAlign: 'center',
              }}>
              {holdLabel}
            </Text>
          </Pressable>
          <View style={{ justifyContent: 'center', marginTop: 8, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              onPress={clear}
              style={{
                borderWidth: 0,
                padding: 6,
                flexShrink: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'Inter_400Regular',
                  fontSize: 12,
                  color: '#bdbdbd',
                  textAlign: 'center',
                  textDecorationLine: 'underline',
                }}>
                Clear selection
              </Text>
            </Pressable>
          </View>
        </View>
      </View>
    </Screen>
  );
}

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

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

const accent = '#CC3A0E';

export default function ShowtimesScreen() {
  return (
    <Screen background="#000000" statusBar="light">
      <View style={{ flex: 1 }}>
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'space-between',
            paddingTop: 58,
            paddingBottom: 0,
            paddingHorizontal: 20,
            flexDirection: 'row',
          }}>
          <Text
            style={{
              flexShrink: 1,
              fontFamily: 'Inter_400Regular',
              fontSize: 13,
              color: '#ffffff',
            }}>
            {'Movies Showing '}
            <Text style={{ color: '#8a8a8a' }}>|</Text>{' '}
            <Text style={{ color: '#a6a6a6' }}>Booking by Theatre</Text>
          </Text>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Close"
            onPress={() => router.navigate('/detail')}
            style={{
              width: 28,
              height: 28,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#ffffff"
              strokeWidth="1.6"
              strokeLinecap="round">
              <Circle cx="12" cy="12" r="10" />
              <Path d="M9 9l6 6M15 9l-6 6" />
            </Svg>
          </Pressable>
        </View>
        <View
          style={{
            gap: 8,
            paddingTop: 18,
            paddingBottom: 0,
            paddingHorizontal: 20,
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="button"
            style={{
              borderWidth: 0,
              borderRadius: 999,
              backgroundColor: '#ffffff',
              paddingVertical: 7,
              paddingHorizontal: 14,
              flexShrink: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_600SemiBold',
                fontSize: 13,
                color: '#000000',
                textAlign: 'center',
              }}>
              All
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              borderWidth: 1,
              borderColor: '#4a4a4a',
              borderRadius: 999,
              paddingVertical: 7,
              paddingHorizontal: 12,
              flexShrink: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_600SemiBold',
                fontSize: 12,
                color: '#e0e0e0',
                textAlign: 'center',
              }}>
              SCREENX
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              borderWidth: 1,
              borderColor: '#4a4a4a',
              borderRadius: 999,
              paddingVertical: 7,
              paddingHorizontal: 12,
              flexShrink: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_600SemiBold',
                fontSize: 12,
                color: '#e0e0e0',
                textAlign: 'center',
              }}>
              4DX
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              borderWidth: 1,
              borderColor: '#4a4a4a',
              borderRadius: 999,
              paddingVertical: 7,
              paddingHorizontal: 12,
              flexShrink: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_600SemiBold',
                fontSize: 12,
                color: '#e0e0e0',
                textAlign: 'center',
              }}>
              IMAX
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              borderWidth: 1,
              borderColor: '#4a4a4a',
              borderRadius: 999,
              paddingVertical: 7,
              paddingHorizontal: 12,
              flexShrink: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Inter_600SemiBold',
                fontSize: 12,
                color: '#e0e0e0',
                textAlign: 'center',
              }}>
              DOLBY
            </Text>
          </Pressable>
        </View>
        <View style={{ height: 170, marginTop: 22 }}>
          <View
            style={{
              position: 'absolute',
              left: -2,
              top: 12,
              width: 84,
              height: 146,
              borderRadius: 16,
              overflow: 'hidden',
            }}>
            <Image
              source={{ uri: asset('c27d246b2a.svg') }}
              contentFit="cover"
              style={{ width: '100%', height: '100%' }}
            />
          </View>
          <View
            style={{
              position: 'absolute',
              left: '50%',
              top: 0,
              transform: [{ translateX: '-50%' }],
              width: 120,
              height: 170,
              borderRadius: 18,
              overflow: 'hidden',
              backgroundColor: '#6d0610',
            }}>
            <Image
              source={{ uri: asset('18e23cdfc9.svg') }}
              contentFit="cover"
              accessibilityLabel="Iron Petal poster"
              style={{ width: '100%', height: '100%' }}
            />
            <Text
              style={{
                position: 'absolute',
                left: 10,
                top: 4,
                fontFamily: 'BebasNeue_400Regular',
                fontSize: 30,
                color: '#ffffff',
                fontStyle: 'italic',
              }}>
              1
            </Text>
          </View>
          <View
            style={{
              position: 'absolute',
              right: -2,
              top: 12,
              width: 84,
              height: 146,
              borderRadius: 16,
              overflow: 'hidden',
            }}>
            <Image
              source={{ uri: asset('c84f4e1efb.svg') }}
              contentFit="cover"
              style={{ width: '100%', height: '100%' }}
            />
          </View>
        </View>
        <View style={{ alignItems: 'center', paddingTop: 20 }}>
          <View style={{ alignItems: 'center', gap: 8, flexDirection: 'row' }}>
            <Text
              style={{
                margin: 0,
                flexShrink: 1,
                fontFamily: 'Inter_700Bold',
                fontSize: 16,
                color: '#ffffff',
              }}>
              Iron Petal – The Movie: Akane Arc
            </Text>
            <Text
              style={{
                backgroundColor: '#f0a52b',
                borderRadius: 5,
                paddingVertical: 3,
                paddingHorizontal: 5,
                flexShrink: 1,
                fontFamily: 'Inter_800ExtraBold',
                fontSize: 11,
                color: '#141414',
              }}>
              16+
            </Text>
          </View>
          <Text
            style={{
              marginTop: 6,
              fontFamily: 'Inter_400Regular',
              fontSize: 12,
              color: '#b3b3b3',
            }}>
            1h 42m
          </Text>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            top: 444,
            bottom: 0,
            backgroundColor: '#ffffff',
            borderTopLeftRadius: 28,
            borderTopRightRadius: 28,
            borderBottomRightRadius: 0,
            borderBottomLeftRadius: 0,
            paddingTop: 18,
            paddingBottom: 0,
            paddingHorizontal: 16,
          }}>
          <View style={{ gap: 8, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              style={{
                width: 50,
                height: 56,
                borderWidth: 0,
                borderRadius: 14,
                backgroundColor: accent,
                alignItems: 'center',
                justifyContent: 'center',
                gap: 2,
              }}>
              <Text style={{ fontFamily: 'Inter_700Bold', fontSize: 11, color: '#ffffff' }}>
                MON
              </Text>
              <Text style={{ fontFamily: 'Inter_700Bold', fontSize: 17, color: '#ffffff' }}>
                16
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                width: 50,
                height: 56,
                borderWidth: 1,
                borderColor: '#e0e0e0',
                borderRadius: 14,
                backgroundColor: '#ffffff',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 2,
              }}>
              <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 11, color: '#141414' }}>
                TUE
              </Text>
              <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 17, color: '#141414' }}>
                17
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                width: 50,
                height: 56,
                borderWidth: 1,
                borderColor: '#e0e0e0',
                borderRadius: 14,
                backgroundColor: '#ffffff',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 2,
              }}>
              <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 11, color: '#141414' }}>
                WED
              </Text>
              <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 17, color: '#141414' }}>
                18
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                width: 50,
                height: 56,
                borderWidth: 1,
                borderColor: '#e0e0e0',
                borderRadius: 14,
                backgroundColor: '#ffffff',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 2,
              }}>
              <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 11, color: '#141414' }}>
                THU
              </Text>
              <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 17, color: '#141414' }}>
                19
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                width: 50,
                height: 56,
                borderWidth: 1,
                borderColor: '#e0e0e0',
                borderRadius: 14,
                backgroundColor: '#ffffff',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 2,
              }}>
              <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 11, color: '#141414' }}>
                FRI
              </Text>
              <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 17, color: '#141414' }}>
                20
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                width: 50,
                height: 56,
                borderWidth: 1,
                borderColor: '#e0e0e0',
                borderRadius: 14,
                backgroundColor: '#ffffff',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 2,
              }}>
              <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 11, color: '#141414' }}>
                SAT
              </Text>
              <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 17, color: '#141414' }}>
                21
              </Text>
            </Pressable>
          </View>
          <View style={{ gap: 8, marginTop: 14, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              style={{
                alignItems: 'center',
                gap: 5,
                borderWidth: 0,
                borderRadius: 999,
                backgroundColor: accent,
                paddingVertical: 7,
                paddingHorizontal: 13,
                flexShrink: 1,
                flexDirection: 'row',
              }}>
              <Svg width="13" height="13" viewBox="0 0 24 24" fill="#ffffff">
                <Path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'Inter_600SemiBold',
                  fontSize: 13,
                  color: '#ffffff',
                  flexShrink: 1,
                }}>
                Mumbai
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                borderWidth: 1,
                borderColor: '#e0e0e0',
                borderRadius: 999,
                backgroundColor: '#ffffff',
                paddingVertical: 7,
                paddingHorizontal: 14,
                flexShrink: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'Inter_400Regular',
                  fontSize: 13,
                  color: '#3d3d3d',
                  textAlign: 'center',
                }}>
                All
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                borderWidth: 1,
                borderColor: '#e0e0e0',
                borderRadius: 999,
                backgroundColor: '#ffffff',
                paddingVertical: 7,
                paddingHorizontal: 14,
                flexShrink: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'Inter_400Regular',
                  fontSize: 13,
                  color: '#3d3d3d',
                  textAlign: 'center',
                }}>
                Special Theatre
              </Text>
            </Pressable>
          </View>
          <View
            style={{
              marginTop: 14,
              borderRadius: 18,
              boxShadow: '0 4px 18px rgba(0,0,0,0.08)',
              paddingTop: 14,
              paddingBottom: 16,
              paddingHorizontal: 14,
            }}>
            <View style={{ alignItems: 'center', gap: 10, flexDirection: 'row' }}>
              <View
                style={{
                  width: 34,
                  height: 34,
                  borderRadius: 10,
                  backgroundColor: '#fff3d6',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Text
                  style={{
                    fontFamily: 'Inter_800ExtraBold',
                    fontSize: 11,
                    color: '#b07400',
                    flexShrink: 1,
                  }}>
                  CV
                </Text>
              </View>
              <View style={{ flex: 1 }}>
                <Text style={{ fontFamily: 'Inter_600SemiBold', fontSize: 15, color: '#141414' }}>
                  Cineverse, Skyline Mall, Borivali
                </Text>
                <Text
                  style={{
                    marginTop: 1,
                    fontFamily: 'Inter_400Regular',
                    fontSize: 11,
                    color: '#6b6b6b',
                  }}>
                  Non-cancellable.
                </Text>
              </View>
              <Pressable
                accessibilityRole="button"
                accessibilityLabel="Favourite this cinema"
                style={{
                  width: 36,
                  height: 36,
                  borderWidth: 0,
                  padding: 0,
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="22"
                  height="22"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#141414"
                  strokeWidth="1.8">
                  <Path d="M12 20s-7-4.3-8.8-8.6C1.9 8 4 4.8 7.2 4.8c2 0 3.5 1 4.8 2.7 1.3-1.7 2.8-2.7 4.8-2.7 3.2 0 5.3 3.2 4 6.6C19 15.7 12 20 12 20z" />
                </Svg>
              </Pressable>
            </View>
            <View style={{ marginTop: 14, gap: 8 }}>
              <View style={{ flexDirection: 'row', gap: 8 }}>
                <Pressable
                  accessibilityRole="link"
                  onPress={() => router.navigate('/seats')}
                  style={{
                    height: 30,
                    borderRadius: 8,
                    backgroundColor: '#141414',
                    borderLeftWidth: 5,
                    borderLeftColor: '#23a55a',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex: 1,
                    flexDirection: 'row',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Inter_600SemiBold',
                      fontSize: 11,
                      color: '#ffffff',
                      flexShrink: 1,
                    }}>
                    4:25 PM
                  </Text>
                </Pressable>
                <Pressable
                  accessibilityRole="link"
                  onPress={() => router.navigate('/seats')}
                  style={{
                    height: 30,
                    borderRadius: 8,
                    backgroundColor: '#141414',
                    borderLeftWidth: 5,
                    borderLeftColor: '#23a55a',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex: 1,
                    flexDirection: 'row',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Inter_600SemiBold',
                      fontSize: 11,
                      color: '#ffffff',
                      flexShrink: 1,
                    }}>
                    4:45 PM
                  </Text>
                </Pressable>
                <Pressable
                  accessibilityRole="link"
                  onPress={() => router.navigate('/seats')}
                  style={{
                    height: 30,
                    borderRadius: 8,
                    alignItems: 'center',
                    justifyContent: 'center',
                    gap: 3,
                    flex: 1,
                    overflow: 'hidden',
                    flexDirection: 'row',
                  }}>
                  <LinearGradient
                    colors={['#f0a52b', '#f0a52b', '#141414', '#141414']}
                    locations={[0, 0.5, 0.5, 1]}
                    start={{ x: 0, y: 0.5 }}
                    end={{ x: 1, y: 0.5 }}
                    style={StyleSheet.absoluteFill}
                  />
                  <Text
                    style={{
                      fontFamily: 'Inter_600SemiBold',
                      fontSize: 11,
                      color: '#ffffff',
                      flexShrink: 1,
                    }}>
                    7:35 PM
                  </Text>
                  <Text
                    style={{
                      flexShrink: 1,
                      fontFamily: 'Inter_600SemiBold',
                      fontSize: 7,
                      color: '#ffffff',
                    }}>
                    · LUX
                  </Text>
                </Pressable>
                <Pressable
                  accessibilityRole="link"
                  onPress={() => router.navigate('/seats')}
                  style={{
                    height: 30,
                    borderRadius: 8,
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex: 1,
                    overflow: 'hidden',
                    flexDirection: 'row',
                  }}>
                  <LinearGradient
                    colors={['#f0a52b', '#f0a52b', '#141414', '#141414']}
                    locations={[0, 0.5, 0.5, 1]}
                    start={{ x: 0, y: 0.5 }}
                    end={{ x: 1, y: 0.5 }}
                    style={StyleSheet.absoluteFill}
                  />
                  <Text
                    style={{
                      fontFamily: 'Inter_600SemiBold',
                      fontSize: 11,
                      color: '#ffffff',
                      flexShrink: 1,
                    }}>
                    7:45 PM
                  </Text>
                </Pressable>
              </View>
              <View style={{ flexDirection: 'row', gap: 8 }}>
                <Pressable
                  accessibilityRole="link"
                  onPress={() => router.navigate('/seats')}
                  style={{
                    height: 30,
                    borderRadius: 8,
                    backgroundColor: '#141414',
                    borderLeftWidth: 5,
                    borderLeftColor: '#23a55a',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex: 1,
                    flexDirection: 'row',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Inter_600SemiBold',
                      fontSize: 11,
                      color: '#ffffff',
                      flexShrink: 1,
                    }}>
                    10:50 PM
                  </Text>
                </Pressable>
                <Pressable
                  accessibilityRole="link"
                  onPress={() => router.navigate('/seats')}
                  style={{
                    height: 30,
                    borderRadius: 8,
                    backgroundColor: '#141414',
                    borderLeftWidth: 5,
                    borderLeftColor: '#23a55a',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex: 1,
                    flexDirection: 'row',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Inter_600SemiBold',
                      fontSize: 11,
                      color: '#ffffff',
                      flexShrink: 1,
                    }}>
                    11:00 PM
                  </Text>
                  <View
                    style={{
                      position: 'absolute',
                      right: -5,
                      top: -7,
                      width: 16,
                      height: 16,
                      borderRadius: '50%',
                      backgroundColor: accent,
                      alignItems: 'center',
                      justifyContent: 'center',
                      flexDirection: 'row',
                    }}>
                    <Svg width="9" height="9" viewBox="0 0 24 24" fill="#ffffff">
                      <Path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z" />
                    </Svg>
                  </View>
                </Pressable>
                <Pressable
                  accessibilityRole="link"
                  onPress={() => router.navigate('/seats')}
                  style={{
                    height: 30,
                    borderRadius: 8,
                    backgroundColor: '#141414',
                    borderLeftWidth: 5,
                    borderLeftColor: '#23a55a',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex: 1,
                    flexDirection: 'row',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Inter_600SemiBold',
                      fontSize: 11,
                      color: '#ffffff',
                      flexShrink: 1,
                    }}>
                    11:05 PM
                  </Text>
                  <View
                    style={{
                      position: 'absolute',
                      right: -5,
                      top: -7,
                      width: 16,
                      height: 16,
                      borderRadius: '50%',
                      backgroundColor: accent,
                      alignItems: 'center',
                      justifyContent: 'center',
                      flexDirection: 'row',
                    }}>
                    <Svg width="9" height="9" viewBox="0 0 24 24" fill="#ffffff">
                      <Path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z" />
                    </Svg>
                  </View>
                </Pressable>
                <View style={{ flex: 1 }} />
              </View>
            </View>
          </View>
          <View
            style={{
              marginTop: 12,
              height: 60,
              borderRadius: 18,
              boxShadow: '0 4px 18px rgba(0,0,0,0.08)',
            }}
          />
          <View
            style={{
              position: 'absolute',
              left: 12,
              right: 12,
              bottom: 30,
              height: 44,
              borderRadius: 12,
              backgroundColor: '#ffffff',
              boxShadow: '0 -2px 16px rgba(0,0,0,0.1)',
              alignItems: 'center',
              justifyContent: 'space-between',
              paddingVertical: 0,
              paddingHorizontal: 12,
              flexDirection: 'row',
            }}>
            <View style={{ alignItems: 'center', gap: 4, flexShrink: 1, flexDirection: 'row' }}>
              <Text
                style={{
                  fontFamily: 'Inter_400Regular',
                  fontSize: 12,
                  color: '#141414',
                  flexShrink: 1,
                }}>
                Make favourite cinemas by tapping the
              </Text>
              <Svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#141414"
                strokeWidth="2">
                <Path d="M12 20s-7-4.3-8.8-8.6C1.9 8 4 4.8 7.2 4.8c2 0 3.5 1 4.8 2.7 1.3-1.7 2.8-2.7 4.8-2.7 3.2 0 5.3 3.2 4 6.6C19 15.7 12 20 12 20z" />
              </Svg>
            </View>
            <View style={{ alignItems: 'center', gap: 6, flexShrink: 1, flexDirection: 'row' }}>
              <Text
                style={{
                  fontFamily: 'Inter_400Regular',
                  fontSize: 12,
                  color: '#3d3d3d',
                  flexShrink: 1,
                }}>
                3/3
              </Text>
              <Pressable
                accessibilityRole="button"
                accessibilityLabel="Dismiss tip"
                style={{
                  width: 20,
                  height: 20,
                  borderWidth: 0,
                  borderRadius: '50%',
                  backgroundColor: '#ececec',
                  padding: 0,
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="10"
                  height="10"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#3d3d3d"
                  strokeWidth="3"
                  strokeLinecap="round">
                  <Path d="M6 6l12 12M18 6L6 18" />
                </Svg>
              </Pressable>
            </View>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            bottom: 8,
            left: '50%',
            transform: [{ translateX: '-50%' }],
            width: 134,
            height: 5,
            borderRadius: 3,
            backgroundColor: '#141414',
          }}
        />
      </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 x 844 artboard, then scaled to the device width.
const ARTBOARD_WIDTH = 390;
const ARTBOARD_HEIGHT = 844;

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

export function Screen({ background, statusBar, 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(ARTBOARD_HEIGHT * scale, height) }}>
      <StatusBar style={statusBar} />
      <View
        style={{
          width: ARTBOARD_WIDTH,
          height: ARTBOARD_HEIGHT,
          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/movie-ticket-booking-app-ui-design/assets';

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