import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import Head from 'expo-router/head';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Linking, Text, TouchableOpacity, View } from 'react-native';

const SupportScreen = () => {
    const { t } = useTranslation('support');
    const handleWeChatSupport = () => {
        Linking.openURL('https://work.weixin.qq.com/kfid/kfca0ac87f4e05e8bfd');
    };

    const handleEmailSupport = () => {
        Linking.openURL('mailto:memowake@fairclip.cn');
    };

    return (
        <>
            <Head>
                <title>{t('pageTitle')}</title>
            </Head>
            <LinearGradient
                colors={['#FFB645', '#E2793F']}
                className="flex-1 items-center justify-center p-6"
            >
                <View className="items-center mb-12">
                    <Text className="text-white text-5xl font-extrabold tracking-tight">
                        MemoWake
                    </Text>
                    <Text className="text-white/90 text-2xl mt-4 text-center max-w-xs">
                        {t('title')}
                    </Text>
                    <Text className="text-white/90 text-lg mt-4 text-center max-w-xs">
                        {t('description')}
                    </Text>
                </View>

                <View className="w-full max-w-xs">
                    <TouchableOpacity
                        className="bg-white/90 rounded-xl px-6 py-4 flex-row items-center justify-center shadow-lg mb-5"
                        onPress={handleWeChatSupport}
                        activeOpacity={0.8}
                    >
                        <Ionicons name="chatbubbles-outline" size={24} color="black" />
                        <Text className="text-black font-bold text-lg ml-3">
                            {t('onlineSupport')}
                        </Text>
                    </TouchableOpacity>

                    <TouchableOpacity
                        className="bg-black/80 rounded-xl px-6 py-4 flex-row items-center justify-center shadow-lg"
                        onPress={handleEmailSupport}
                        activeOpacity={0.8}
                    >
                        <Ionicons name="mail-outline" size={24} color="white" />
                        <Text className="text-white font-bold text-lg ml-3">
                            {t('emailSupport')}
                        </Text>
                    </TouchableOpacity>
                </View>
            </LinearGradient>
        </>
    );
};

export default SupportScreen;
