import React from "react";
import { Image, SafeAreaView, StyleSheet, Dimensions, ScrollView, Text } from "react-native";

const SitiosDeInteres = () => {
    const windowWidth = Dimensions.get('window').width;
    const windowHeight = Dimensions.get('window').height;
    return(

        <SafeAreaView style = {styles.Contenedor}>
            <ScrollView style = {styles.containerscroll}>

                <Image style = {[styles.ImgUno, {width: windowWidth * 0.7, height: windowHeight * 0.3}]}
                    source={require("../assets/FigTitulos/SDI.png")}/>

                <Text style = {styles.textuno}>El juego de Elena y Toñito</Text>
                <Image style = {[styles.Imguno, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/1.png")}/>
                <Image style = {[styles.Imgunoo, {width: windowWidth * 0.7, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/1.5.png")}/>

                <Text style = {styles.textdos}>Kobijo</Text>
                <Image style = {[styles.Imgdos, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/2.png")}/>
                <Image style = {[styles.Imgdoss, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/2.5.png")}/>

                <Text style = {styles.texttres}>RETHINK-STOP CYBERBULLING</Text>
                <Image style = {[styles.Imgtres, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/3.png")}/>
                <Image style = {[styles.Imgtress, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/3.5.png")}/>

                <Text style = {styles.textcuatro}>B-ESOL</Text>
                <Image style = {[styles.Imgcuatro, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/4.png")}/>
                <Image style = {[styles.Imgcuatroo, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/4.5.png")}/>

                <Text style = {styles.textquinto}>Detente</Text>
                <Image style = {[styles.Imgquinto, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/5.png")}/>
                <Image style = {[styles.Imgquintoo, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/5.1.png")}/>
                <Image style = {[styles.Imgquintooo, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/5.3.png")}/>

                <Text style = {styles.textseis}>Andrea</Text>
                <Image style = {[styles.Imgseis, {width: windowWidth * 0.8, height: windowHeight * 0.3}]}
                source={require("../assets/CapIn/6.png")}/>
                <Image style = {[styles.Imgseiss, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/6.1.png")}/>
                <Image style = {[styles.Imgseisss, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/6.2.png")}/>

                <Text style = {styles.textsiete}>NANOCURSO</Text>
                <Image style = {[styles.Imgsiete, {width: windowWidth * 0.8, height: windowHeight * 0.3}]}
                source={require("../assets/CapIn/7.png")}/>
                <Image style = {[styles.Imgsietee, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/7.5.png")}/>
                <Image style = {[styles.Imgsieteee, {width: windowWidth * 0.9, height: windowHeight * 0.5}]}
                source={require("../assets/CapIn/7.6.png")}/>
                

            </ScrollView>
        </SafeAreaView>

    )
}

const styles = StyleSheet.create({
    Contenedor: {
        backgroundColor: "#519ab4",
        flex: 1,
        justifyContent: "flex-start",
    },
    containerscroll: {
        flex: 1,
    },
    ImgUno: {
        resizeMode: "center",
        alignSelf: "center",
        top: "0.0%",
    },
    textuno: {//juego de elena y tonñito
        textAlign: "center",
        color:"#D9D9D9",
        fontSize: 16,
        fontWeight: "bold",
        top: "-0.00%"
    },
    Imguno: {
        resizeMode: "center",
        alignSelf: "center",
        top: "-0.7%"
    },
    Imgunoo: {
        resizeMode: "center",
        alignSelf: "center",
        top: "-2.9%"
    },
    textdos: {//KObijo
        textAlign: "center",
        color:"#D9D9D9",
        fontSize: 16,
        fontWeight: "bold",
        top: "-3%"
    },
    Imgdos: {
        resizeMode: "center",
        alignSelf: "center",
        top: "-3.9%"
    },
    Imgdoss: {
        resizeMode: "center",
        alignSelf: "center",
        top: "-6%"
    },
    texttres: {//RETHINK-STOP CYBERBULLING
        textAlign: "center",
        color:"#D9D9D9",
        fontSize: 16,
        fontWeight: "bold",
        top: "-5.9%"
    },
    Imgtres: {
        resizeMode: "center",
        alignSelf: "center",
        top: "-7.4%"
    },
    Imgtress: {
        resizeMode: "center",
        alignSelf: "center",
        top: "-11%"
    },
    textcuatro: {//B-ESOL
        textAlign: "center",
        color:"#D9D9D9",
        fontSize: 16,
        fontWeight: "bold",
        top: "-11.8%"
    },
    Imgcuatro: {
        resizeMode: "center",
        alignSelf: "center",
        top: "-12.8%"
    },
    Imgcuatroo: {
        resizeMode: "center",
        alignSelf: "center",
        top: "-15.3%"
    },
    textquinto: {//Detente
        textAlign: "center",
        color:"#D9D9D9",
        fontSize: 16,
        fontWeight: "bold",
        top: "-15.6%",
    },
    Imgquinto: {
        resizeMode: "center",
        alignSelf: "center",
        top: "-16.94%",
        right: "-30%"
    },
    Imgquintoo: {
        resizeMode: "center",
        alignSelf: "center",
        top: "-22.78%",
        right: "30%",
    },
    Imgquintooo: {
        resizeMode: "center",
        alignSelf: "center",
        top: "-28.6%",
    },
    textseis: {//Andrea
        textAlign: "center",
        color:"#D9D9D9",
        fontSize: 16,
        fontWeight: "bold",
        top: "-29%"
    },
    Imgseis: {
        resizeMode: "contain",
        alignSelf: "center",
        top: "-28.7%",
    },
    Imgseiss: {
        resizeMode: "contain",
        alignSelf: "center",
        top: "-28.6%"
    },
    Imgseisss: {
        resizeMode: "contain",
        alignSelf: "center",
        top: "-28.5%"
    },
    textsiete: {//NANOCURSO
        textAlign: "center",
        color:"#D9D9D9",
        fontSize: 16,
        fontWeight: "bold",
        top: "-27.6%"
    },
    Imgsiete: {
        resizeMode: "contain",
        alignSelf: "center",
        top: "-27.3%",
    },
    Imgsietee: {
        resizeMode: "contain",
        alignSelf: "center",
        top: "-27.2%"
    },
    Imgsieteee: {
        resizeMode: "contain",
        alignSelf: "center",
        top: "-27.1%"
    },
})

export default SitiosDeInteres;