import React, { useState } from 'react';

import { StyleSheet, Text, View, TextInput, TouchableOpacity, Image } from 'react-

native';

export default function App() {

const [service, setService] = useState('');
const [price, setPrice] = useState('');
const [address, setAddress] = useState('');
const [note, setNote] = useState('');

const handleServiceChange = (text) => {

setService(text);
}

const handlePriceChange = (text) => {

setPrice(text);
}

const handleAddressChange = (text) => {

setAddress(text);
}

const handleNoteChange = (text) => {

setNote(text);
}

const handleSubmit = () => {

// Here you can send the form data to your server or perform other actions
console.log('Submitted:', { service, price, address, note });
alert('Service request submitted!');
}

return (
<View style={styles.container}>
<Image source={require('./assets/cleaning.jpg')} style={styles.image} />
<View style={styles.titleContainer}>
<Text style={styles.title}>Cleaning Services</Text>
</View>
<View style={styles.form}>
<TextInput style={styles.input}
placeholder="Service"
onChangeText={handleServiceChange}
value={service}
/>
<TextInput style={styles.input}
placeholder="Price"
onChangeText={handlePriceChange}
value={price}
/>
<TextInput style={styles.input}
placeholder="Address"
onChangeText={handleAddressChange}
value={address}
/>
<TextInput style={[styles.input, styles.noteInput]}
placeholder="Note (optional)"
onChangeText={handleNoteChange}
value={note}
multiline={true}
 numberOfLines={4}
/>
<TouchableOpacity style={styles.button} onPress={handleSubmit}>
<Text style={styles.buttonText}>Submit</Text>
</TouchableOpacity>
</View>
</View>
);
}

const styles = StyleSheet.create({

container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
image: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
titleContainer: {
backgroundColor: 'rgba(0,0,0,0.5)',
padding: 10,
},
title: {
fontSize: 24,
fontWeight: 'bold',
color: '#fff',
textAlign: 'center',
},
form: {
width: '80%',
alignItems: 'center',
backgroundColor: 'rgba(255,255,255,0.8)',
borderRadius: 10,
padding: 20,
marginTop: 100,
marginBottom: 20,
},
input: {
width: '100%',
height: 50,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 10,
paddingLeft: 10,
marginBottom: 20,
backgroundColor: '#fff',
},
noteInput: {
height: 100,
paddingTop: 10,
textAlignVertical: 'top',
},
button: {
 width: '100%',
height: 50,
backgroundColor: '#0099ff',
borderRadius: 10,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
color: '#