'use client';

import SupportSurveyForm from '@/components/support/SupportSurveyForm';
import { Button } from '@/components/ui/button';
import { useLanguage } from '@/lib/language-context';
import { HelpCircle, Mail, Phone } from 'lucide-react';
import { useRouter } from 'next/navigation';

export default function SupportCenterPage() {
    const router = useRouter();
    const { t } = useLanguage();
    const supportEmail = 'info.medklinix@gmail.com';
    const supportPhone = '(809) 842-2595';

    return (
        <div className="min-h-screen bg-white pt-20">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
                <div className="text-center">
                    <div className="flex justify-center mb-6">
                        <div className="p-4 bg-green-100 rounded-full">
                            <HelpCircle className="w-12 h-12 text-green-600" />
                        </div>
                    </div>
                    <h1 className="text-4xl font-bold text-gray-900 mb-4">{t('supportCenter.title')}</h1>
                    <p className="text-xl text-gray-600 mb-12 max-w-2xl mx-auto">
                        {t('supportCenter.description')}
                    </p>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                        <div className="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition-shadow">
                            <Mail className="w-8 h-8 text-cyan-600 mb-4 mx-auto" />
                            <h3 className="text-xl font-semibold mb-2">{t('supportCenter.emailUs')}</h3>
                            <a href={`mailto:${supportEmail}`} className="text-gray-500 hover:text-cyan-600 transition-colors">{supportEmail}</a>
                        </div>
                        <div className="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition-shadow">
                            <Phone className="w-8 h-8 text-cyan-600 mb-4 mx-auto" />
                            <h3 className="text-xl font-semibold mb-2">{t('supportCenter.callUs')}</h3>
                            <a href="tel:+18098422595" className="text-gray-500 hover:text-cyan-600 transition-colors">{supportPhone}</a>
                        </div>
                    </div>

                    <div className="mb-12">
                        <SupportSurveyForm />
                    </div>

                    <Button
                        onClick={() => router.push('/')}
                        className="bg-cyan-600 text-white hover:bg-cyan-500 rounded-full px-8"
                    >
                        {t('supportCenter.backToHome')}
                    </Button>
                </div>
            </div>
        </div>
    );
}
