import React from 'react';

import { Linking, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';

import { Text } from '@/components/ui/Text';

import { useThemeColor } from '@/hooks/use-theme-color';

const WEBSITE_URL = 'https://usenexo.xyz';

export default function TermsScreen() {

  const textColor = useThemeColor({}, 'text');

  const tintColor = useThemeColor({}, 'tint');

  const backgroundColor = useThemeColor({}, 'background');

  return (

    <ScrollView

      style={{ backgroundColor }}

      contentContainerStyle={styles.content}

      showsVerticalScrollIndicator={false}

    >

      <Text style={[styles.title, { color: textColor }]}>

        Termos e Condições

      </Text>

      <Text style={[styles.heading, { color: textColor }]}>

        Um app acadêmico

      </Text>

      <Text style={[styles.body, { color: textColor }]}>

        O nexo é um projeto acadêmico, desenvolvido como trabalho de conclusão de

        curso. Ele não é um produto comercial nem um dispositivo médico, e não

        substitui acompanhamento profissional. Em caso de crise, procure ajuda

        médica ou um serviço de emergência.

      </Text>

      <Text style={[styles.heading, { color: textColor }]}>

        Seus dados

      </Text>

      <Text style={[styles.body, { color: textColor }]}>

        Os registros que você faz aqui são seus. Usamos seus dados apenas para o

        app funcionar: montar o seu histórico, gerar a sua jornada de indicadores

        e enviar os lembretes que você pedir. Não vendemos nem compartilhamos seus

        dados com terceiros.

      </Text>

      <Text style={[styles.body, { color: textColor }]}>

        Você pode exportar tudo o que registrou a qualquer momento, e pode pedir a

        remoção da sua conta e dos seus dados. O código-fonte é auditável e aberto.

      </Text>

      <Text style={[styles.heading, { color: textColor }]}>

        Saiba mais

      </Text>

      <Text style={[styles.body, { color: textColor }]}>

        Para saber mais sobre o projeto, visite:

      </Text>

      <TouchableOpacity style={styles.linkWrapper}

                        onPress={() => Linking.openURL(WEBSITE_URL)}>

        <Text style={[styles.link, { color: tintColor }]}>{WEBSITE_URL}</Text>

      </TouchableOpacity>

    </ScrollView>

  );

}

const styles = StyleSheet.create({

  content: {

    paddingHorizontal: 24,

    paddingTop: 16,

    paddingBottom: 40,

  },

  title: {

    fontSize: 24,

    fontWeight: 'bold',

    marginBottom: 16,

  },

  heading: {

    fontSize: 18,

    fontWeight: 'bold',

    marginTop: 8,

    marginBottom: 8,

  },

  body: {

    fontSize: 16,

    lineHeight: 24,

    marginBottom: 16,

  },

  linkWrapper: {

    marginBottom: 50

  },

  link: {

    fontSize: 16,

    textDecorationLine: 'underline',

  },

});