import * as React from 'react';
import { StyleSheet, View, ScrollView, Text, Button, Linking} from 'react-native';
import Header from '../shared/header';

export default function Donate({navigation}) {
    return (
        <ScrollView style={styles.container}>
        <Text style={styles.title}>
            APOYA EL TRABAJO DE <Text style={styles.redText}>TPMG </Text>
            CON SU COMPROMISO A <Text style={styles.blueText}>LA COMUNIDAD</Text></Text>
        <Text style={styles.paragraph}>Estamos muy contentos(as)
        de que te interese involucrarte con nuestro trabajo aquí
        en Techos Pa' Mi Gente. Hay muchas maneras de ayudar,
        y verdaderamente apreciamos cada esfuerzo. Tu apoyo será una
        parte esencial para nuestra organización, que ayudará a fortalecer
        nuestro trabajo. Nuestro compromiso es que 90% de los fondos recaudados
        van a servicios directos y el 10% se destina en gastos operacionales.</Text>

         <Button
            onPress={ () => {Linking.openURL("https://www.tpmgcorp.org/toma-acción")}}
            title="Donar"
            accessibilityLabel="Donar presionando el botón."
        />

        </ScrollView>
    )
}

const styles = StyleSheet.create({
    container: {
        padding: 24
    },
    title: {
        fontWeight: 'bold',
        fontFamily: "AvenirNext-Bold",
        fontSize: 40
    },
    subtitle: {
        fontWeight: 'bold',
        fontFamily: "Avenir-Black",
        fontSize: 15 
    },
    paragraph: {
        fontWeight: 'normal',
        fontFamily: "Avenir-Black",
        fontSize: 15,
        textAlign: 'justify'
    },
    redText:{
        color: '#DF4844'
    },
    blueText:{
        color: '#047CC3'
    }
});