import React from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
import { router } from 'expo-router';
import COLORS from '@/constants/colors';
import { StatusBar } from 'expo-status-bar';


const OpeningScreen = () => {

  return (
    <View style={styles.container}>
          <StatusBar style="inverted" />
      <Image source={require('@/assets/images/logo.png')} style={styles.logo} />
      <Text style={styles.welcomeText}>Bienvenue chez Brix Café</Text>
      <Image source={require('@/assets/images/coffee_cup.jpg')} style={styles.coffeeImage} />
      <Text style={styles.descriptionText}>
        Depuis 2024, Brix Café vous fait vivre une expérience café unique,
        inspirée du savoir-faire italien et portée par une passion authentique.
        Des grains d’exception, une qualité incomparable.
      </Text>

      <TouchableOpacity style={styles.signInButton} onPress={() => router.push('/screens/auth/SignIn-Screen')}>
  <Text style={styles.buttonText}>Se connecter</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.signUpButton} onPress={() => router.push('/screens/auth/SignUpScreen')}>
  <Text style={styles.buttonText}>Créer un compte</Text>
</TouchableOpacity>
    </View>
  );
};

// Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000000',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  logo: {
    width: 120,
    height: 120,
    marginBottom: 20,
  },
  welcomeText: {
    fontSize: 26,
    fontWeight: 'bold',
    color: COLORS.text,
    marginBottom: 20,
  },
  coffeeImage: {
    width: '120%',
    height: 150,
    marginTop:40,
    marginBottom: 30,
  },
  descriptionText: {
    fontSize: 14,
    color: COLORS.text,
    textAlign: 'center',
    marginBottom: 40,
  },
  signInButton: {
    backgroundColor: COLORS.primary,
    paddingVertical: 15,
    paddingHorizontal: 40,
    borderRadius: 10,
    marginBottom: 20,
    width: '80%',
    alignItems: 'center',
  },
  signUpButton: {
    borderWidth: 1,
    borderColor: COLORS.primary,
    paddingVertical: 15,
    paddingHorizontal: 40,
    borderRadius: 10,
    width: '80%',
    alignItems: 'center',
  },
  buttonText: {
    fontSize: 16,
    color: COLORS.text,
    fontWeight: 'bold',
  },
});

export default OpeningScreen;