// App.

js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import IntroScreen from './screens/IntroScreen';
import AuthScreen from './screens/AuthScreen';
import HomeScreen from './screens/HomeScreen';
import DestinationScreen from './screens/DestinationScreen';

const Stack = createNativeStackNavigator();

export default function App() {

return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Intro"
screenOptions={{
headerStyle: {
backgroundColor: '#FF5733',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
>
<Stack.Screen
name="Intro"
component={IntroScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Auth"
component={AuthScreen}
options={{ title: 'Welcome to MahaTourism' }}
/>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Explore Maharashtra' }}
/>
<Stack.Screen
name="Destination"
component={DestinationScreen}
options={({ route }) => ({ title: route.params.name })}
/>
</Stack.Navigator>
</NavigationContainer>
);
}

// screens/IntroScreen.js
import React, { useEffect } from 'react';
import { View, Text, StyleSheet, Animated, ImageBackground } from 'react-native';

export default function IntroScreen({ navigation }) {

const fadeAnim = new Animated.Value(0);
const slideAnim = new Animated.Value(50);
 useEffect(() => {
Animated.parallel([
Animated.timing(fadeAnim, {
toValue: 1,
duration: 2000,
useNativeDriver: true,
}),
Animated.timing(slideAnim, {
toValue: 0,
duration: 1500,
useNativeDriver: true,
}),
]).start(() => {
setTimeout(() => navigation.replace('Auth'), 2000);
});
}, []);

return (
<View style={styles.container}>
<Animated.View
style={[
styles.content,
{
opacity: fadeAnim,
transform: [{ translateY: slideAnim }],
},
]}
>
<Text style={styles.title}>MahaTourism</Text>
<Text style={styles.subtitle}>Discover Maharashtra's Beauty</Text>
</Animated.View>
</View>
);
}

// screens/AuthScreen.js
import React, { useState } from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet,
ImageBackground,
ScrollView,
} from 'react-native';

export default function AuthScreen({ navigation }) {

const [isLogin, setIsLogin] = useState(true);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

const handleSubmit = () => {

navigation.replace('Home');
};

return (
<ScrollView contentContainerStyle={styles.container}>
<View style={styles.formContainer}>
 <Text style={styles.header}>
{isLogin ? 'Welcome Back!' : 'Join MahaTourism'}
</Text>

<TextInput
style={styles.input}
placeholder="Email"
value={email}
onChangeText={setEmail}
keyboardType="email-address"
autoCapitalize="none"
/>

<TextInput
style={styles.input}
placeholder="Password"
value={password}
onChangeText={setPassword}
secureTextEntry
/>

<TouchableOpacity style={styles.button} onPress={handleSubmit}>

<Text style={styles.buttonText}>
{isLogin ? 'Login' : 'Register'}
</Text>
</TouchableOpacity>

<TouchableOpacity onPress={() => setIsLogin(!isLogin)}>

<Text style={styles.switchText}>
{isLogin ? "New user? Register here" : "Already registered? Login"}
</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}

// screens/HomeScreen.js
import React from 'react';
import {
View,
Text,
ScrollView,
TouchableOpacity,
StyleSheet,
Image,
TextInput,
} from 'react-native';
import { Feather } from '@expo/vector-icons';

export default function HomeScreen({ navigation }) {

const topDestinations = [
{
id: 1,
name: 'Gateway of India, Mumbai',
image: '/placeholder/gateway.jpg',
description: 'Historic arch monument built in 20th century'
},
{
 id: 2,
name: 'Ajanta Caves',
image: '/placeholder/ajanta.jpg',
description: 'Ancient Buddhist cave monuments'
},
{
id: 3,
name: 'Ellora Caves',
image: '/placeholder/ellora.jpg',
description: 'UNESCO World Heritage site'
},
];

const culturalExperiences = [
{
id: 1,
name: 'Dagdusheth Ganpati, Pune',
image: '/placeholder/dagdusheth.jpg',
description: 'Famous Hindu temple'
},
{
id: 2,
name: 'Kolhapur Palace',
image: '/placeholder/kolhapur.jpg',
description: 'Historic royal palace'
},
];

const beaches = [
{
id: 1,
name: 'Tarkarli Beach',
image: '/placeholder/tarkarli.jpg',
description: 'Crystal clear waters'
},
{
id: 2,
name: 'Alibaug Beach',
image: '/placeholder/alibaug.jpg',
description: 'Popular weekend getaway'
},
];

return (
<ScrollView style={styles.container}>
<View style={styles.searchContainer}>
<Feather name="search" size={24} color="#666" style={styles.searchIcon} />
<TextInput
style={styles.searchInput}
placeholder="Search destinations in Maharashtra..."
placeholderTextColor="#666"
/>
</View>

<Text style={styles.sectionTitle}>Top Destinations</Text>

<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{topDestinations.map((dest) => (
<TouchableOpacity
key={dest.id}
 style={styles.destinationCard}
onPress={() => navigation.navigate('Destination', dest)}
>
<Image
source={{ uri: `/api/placeholder/300/200` }}
style={styles.destinationImage}
/>
<View style={styles.destinationInfo}>
<Text style={styles.destinationName}>{dest.name}</Text>
<Text style={styles.destinationDesc}>{dest.description}</Text>
</View>
</TouchableOpacity>
))}
</ScrollView>

<Text style={styles.sectionTitle}>Cultural Experiences</Text>

<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{culturalExperiences.map((exp) => (
<TouchableOpacity
key={exp.id}
style={styles.experienceCard}
onPress={() => navigation.navigate('Destination', exp)}
>
<Image
source={{ uri: `/api/placeholder/250/150` }}
style={styles.experienceImage}
/>
<Text style={styles.experienceName}>{exp.name}</Text>
</TouchableOpacity>
))}
</ScrollView>

<Text style={styles.sectionTitle}>Beautiful Beaches</Text>

<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{beaches.map((beach) => (
<TouchableOpacity
key={beach.id}
style={styles.beachCard}
onPress={() => navigation.navigate('Destination', beach)}
>
<Image
source={{ uri: `/api/placeholder/250/150` }}
style={styles.beachImage}
/>
<Text style={styles.beachName}>{beach.name}</Text>
</TouchableOpacity>
))}
</ScrollView>
</ScrollView>
);
}

// screens/DestinationScreen.js
import React from 'react';
import {
ScrollView,
View,
Text,
Image,
 StyleSheet,
TouchableOpacity,
} from 'react-native';

export default function DestinationScreen({ route }) {

const { name, description } = route.params;

return (
<ScrollView style={styles.container}>
<Image
source={{ uri: `/api/placeholder/400/300` }}
style={styles.headerImage}
/>
<View style={styles.content}>
<Text style={styles.title}>{name}</Text>
<Text style={styles.description}>{description}</Text>

<Text style={styles.sectionTitle}>About</Text>
<Text style={styles.text}>
Experience the beauty and cultural heritage of this amazing destination
in Maharashtra.
</Text>

<Text style={styles.sectionTitle}>Highlights</Text>
<View style={styles.highlightsList}>
<Text style={styles.highlight}>• Rich cultural heritage</Text>
<Text style={styles.highlight}>• Popular tourist attraction</Text>
<Text style={styles.highlight}>• Historical significance</Text>
</View>

<TouchableOpacity style={styles.bookButton}>
<Text style={styles.bookButtonText}>Book Your Visit</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}

// styles.js
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
content: {
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
title: {
fontSize: 32,
fontWeight: 'bold',
color: '#FF5733',
textAlign: 'center',
},
subtitle: {
fontSize: 18,
color: '#666',
marginTop: 10,
},
formContainer: {
width: '100%',
padding: 20,
alignItems: 'center',
},
header: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 30,
color: '#FF5733',
},
input: {
width: '90%',
height: 50,
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 10,
paddingHorizontal: 15,
marginBottom: 15,
backgroundColor: '#fff',
},
button: {
width: '90%',
height: 50,
backgroundColor: '#FF5733',
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
marginVertical: 10,
elevation: 3,
},
buttonText: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
},
switchText: {
color: '#FF5733',
marginTop: 15,
},
searchContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#f5f5f5',
margin: 15,
padding: 10,
borderRadius: 10,
},
searchIcon: {
marginRight: 10,
},
searchInput: {
flex: 1,
fontSize: 16,
},
sectionTitle: {
fontSize: 22,
fontWeight: 'bold',
 margin: 15,
color: '#333',
},
destinationCard: {
width: 300,
marginHorizontal: 10,
backgroundColor: '#fff',
borderRadius: 15,
elevation: 5,
marginBottom: 10,
},
destinationImage: {
width: '100%',
height: 200,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
},
destinationInfo: {
padding: 15,
},
destinationName: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 5,
},
destinationDesc: {
color: '#666',
},
experienceCard: {
width: 250,
marginHorizontal: 10,
marginBottom: 10,
},
experienceImage: {
width: '100%',
height: 150,
borderRadius: 10,
},
experienceName: {
fontSize: 16,
fontWeight: 'bold',
marginTop: 5,
},
beachCard: {
width: 250,
marginHorizontal: 10,
marginBottom: 20,
},
beachImage: {
width: '100%',
height: 150,
borderRadius: 10,
},
beachName: {
fontSize: 16,
fontWeight: 'bold',
marginTop: 5,
},
headerImage: {
 width: '100%',
height: 300,
},
content: {
padding: 20,
},
description: {
fontSize: 16,
color: '#666',
marginTop: 10,
lineHeight: 24,
},
highlightsList: {
alignSelf: 'stretch',
marginTop: 10,
},
highlight: {
fontSize: 16,
marginBottom: 5,
color: '#333',
},
bookButton: {
backgroundColor: '#FF5733',
paddingVertical: 15,
paddingHorizontal: 30,
borderRadius: 25,
marginTop: 20,
width: '100%',
alignItems: 'center',
},
bookButtonText: {
color: '#fff',
fontSize: 18,
fontWeight: 'bold',
},
});