import { Linking, ScrollView, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../lib/theme';
import { AppHeader } from '../../components/AppHeader';
import { Button } from '../../components/Button';

export default function ContactScreen() {
  const { t } = useTranslation();
  const colors = useColors();
  const insets = useSafeAreaInsets();

  return (
    <View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
      <AppHeader showBack title={t('help.contact_title')} />

      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{
          paddingHorizontal: 16,
          paddingTop: 20,
          paddingBottom: insets.bottom + 40,
        }}
        showsVerticalScrollIndicator={false}
      >
        <View
          style={{
            backgroundColor: colors.card,
            borderRadius: 14,
            padding: 16,
            marginBottom: 16,
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 1 },
            shadowOpacity: 0.04,
            shadowRadius: 3,
            elevation: 1,
          }}
        >
          <Text
            style={{
              fontSize: 15,
              fontFamily: 'Nunito_700Bold',
              color: colors.text,
              marginBottom: 8,
            }}
          >
            {t('help.contact_email_label')}
          </Text>
          <Text
            style={{
              fontSize: 14,
              fontFamily: 'Nunito_400Regular',
              color: colors.textMuted,
              lineHeight: 21,
              marginBottom: 16,
            }}
          >
            {t('help.contact_email_desc')}
          </Text>
          <Button
            title={t('help.contact_email_cta')}
            onPress={() =>
              Linking.openURL(
                'mailto:hilfe@rebreak.org?subject=Support%20Anfrage',
              )
            }
            size="md"
          />
        </View>

        <View
          style={{
            backgroundColor: colors.card,
            borderRadius: 14,
            padding: 16,
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 1 },
            shadowOpacity: 0.04,
            shadowRadius: 3,
            elevation: 1,
          }}
        >
          <Text
            style={{
              fontSize: 15,
              fontFamily: 'Nunito_700Bold',
              color: colors.text,
              marginBottom: 8,
            }}
          >
            {t('help.contact_address_label')}
          </Text>
          <Text
            style={{
              fontSize: 14,
              fontFamily: 'Nunito_400Regular',
              color: colors.textMuted,
              lineHeight: 22,
            }}
          >
            {t('help.contact_address_block')}
          </Text>
        </View>
      </ScrollView>
    </View>
  );
}