import { router } from 'expo-router';
import { Linking, StyleSheet, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { NaviHeader } from '../src/components/layout/NaviHeader';
import { PrimaryButton } from '../src/components/PrimaryButton';
import { Screen } from '../src/components/Screen';
import { color, radius, spacing, typography } from '../src/theme';

export default function Help() {
  const { t } = useTranslation();
  return (
    <Screen>
      <NaviHeader variant="center" title={t('help.title')} showBack onBack={() => router.replace('/(tabs)/profile')} />
      <View style={styles.card}>
        <Text style={styles.title}>{t('help.cardTitle')}</Text>
        <Text style={styles.body}>{t('help.body')}</Text>
        <PrimaryButton
          label={t('actions.emailSupport')}
          variant="secondary"
          onPress={() => Linking.openURL('mailto:support@navi.ae')}
        />
        <PrimaryButton label={t('actions.emergencyNumbers')} onPress={() => router.push('/emergency')} />
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: color.bg[0],
    borderColor: color.border,
    borderRadius: radius.xl,
    borderWidth: 1,
    gap: spacing[3],
    padding: spacing[5],
  },
  title: { color: color.ink[900], fontSize: typography.scale.h2.size, fontWeight: '900' },
  body: { color: color.ink[500], lineHeight: 22 },
});