438 lines
22 KiB
TypeScript
438 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import Link from 'next/link';
|
|
import Header from './Header';
|
|
import Footer from './Footer';
|
|
import { Button } from './ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
|
|
import { Input } from './ui/input';
|
|
import { Label } from './ui/label';
|
|
import { Textarea } from './ui/textarea';
|
|
import { Badge } from './ui/badge';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from './ui/select';
|
|
import {
|
|
Phone,
|
|
Mail,
|
|
MapPin,
|
|
Clock,
|
|
MessageCircle,
|
|
Send,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
ExternalLink,
|
|
Building
|
|
} from 'lucide-react';
|
|
import { contactConfig } from '../../lib/useContact';
|
|
|
|
interface ContactPageClientProps {
|
|
locale: string;
|
|
}
|
|
|
|
export default function ContactPageClient({ locale }: ContactPageClientProps) {
|
|
const { t: tContact } = useTranslation('contact');
|
|
const { t: tCommon } = useTranslation('common');
|
|
const [language, setLanguage] = useState(locale);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
// 表单状态
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
company: '',
|
|
subject: '',
|
|
message: ''
|
|
});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
setLanguage(locale);
|
|
}, [locale]);
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSelectChange = (value: string) => {
|
|
setFormData(prev => ({ ...prev, subject: value }));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
setSubmitStatus('idle');
|
|
|
|
try {
|
|
const response = await fetch('https://formspree.io/f/mldbwvwo', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
...formData,
|
|
language: locale,
|
|
source: 'contact_page',
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
setSubmitStatus('success');
|
|
setFormData({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
company: '',
|
|
subject: '',
|
|
message: ''
|
|
});
|
|
setTimeout(() => setSubmitStatus('idle'), 5000);
|
|
} else {
|
|
setSubmitStatus('error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Form submission error:', error);
|
|
setSubmitStatus('error');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<div className="flex items-center justify-center h-96">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<Header
|
|
language={language}
|
|
setLanguage={setLanguage}
|
|
translations={tCommon}
|
|
locale={locale}
|
|
/>
|
|
|
|
{/* Hero Section */}
|
|
<section className="bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800 text-white py-16 lg:py-24">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h1 className="text-4xl lg:text-6xl font-bold mb-6">
|
|
{tContact('contact.title')}
|
|
</h1>
|
|
<p className="text-xl lg:text-2xl text-blue-100 mb-4">
|
|
{tContact('contact.subtitle')}
|
|
</p>
|
|
<p className="text-lg text-blue-200 max-w-3xl mx-auto">
|
|
{tContact('contact.description')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Quick Contact Bar */}
|
|
<section className="bg-white shadow-sm border-b">
|
|
<div className="container mx-auto px-4 py-6">
|
|
<div className="flex flex-wrap justify-center gap-4 lg:gap-8">
|
|
<a
|
|
href={contactConfig.telegram}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-4 py-2 text-blue-500 hover:bg-blue-50 rounded-lg transition-colors"
|
|
>
|
|
<Send size={20} />
|
|
<span className="font-medium">{tContact('contact.quickContact.telegram')}</span>
|
|
</a>
|
|
<a
|
|
href={contactConfig.whatsapp}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-4 py-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
|
|
>
|
|
<MessageCircle size={20} />
|
|
<span className="font-medium">{tContact('contact.quickContact.whatsapp')}</span>
|
|
</a>
|
|
<a
|
|
href={contactConfig.phoneHref}
|
|
className="flex items-center gap-2 px-4 py-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
|
>
|
|
<Phone size={20} />
|
|
<span className="font-medium">{tContact('contact.quickContact.phone')}</span>
|
|
</a>
|
|
<a
|
|
href="mailto:service@dongyun.com"
|
|
className="flex items-center gap-2 px-4 py-2 text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
|
|
>
|
|
<Mail size={20} />
|
|
<span className="font-medium">{tContact('contact.quickContact.email')}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Main Content */}
|
|
<section className="py-16">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
|
{/* Contact Form */}
|
|
<div className="lg:col-span-2">
|
|
<Card className="shadow-lg">
|
|
<CardHeader className="pb-8">
|
|
<CardTitle className="text-2xl text-gray-900">
|
|
{tContact('contact.form.title')}
|
|
</CardTitle>
|
|
<CardDescription className="text-lg">
|
|
{tContact('contact.form.subtitle')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">{tContact('contact.form.name')} *</Label>
|
|
<Input
|
|
id="name"
|
|
name="name"
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={handleInputChange}
|
|
placeholder={tContact('contact.form.namePlaceholder')}
|
|
required
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">{tContact('contact.form.email')} *</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={handleInputChange}
|
|
placeholder={tContact('contact.form.emailPlaceholder')}
|
|
required
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone">{tContact('contact.form.phone')} *</Label>
|
|
<Input
|
|
id="phone"
|
|
name="phone"
|
|
type="tel"
|
|
value={formData.phone}
|
|
onChange={handleInputChange}
|
|
placeholder={tContact('contact.form.phonePlaceholder')}
|
|
required
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="company">{tContact('contact.form.company')}</Label>
|
|
<Input
|
|
id="company"
|
|
name="company"
|
|
type="text"
|
|
value={formData.company}
|
|
onChange={handleInputChange}
|
|
placeholder={tContact('contact.form.companyPlaceholder')}
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="subject">{tContact('contact.form.subject')} *</Label>
|
|
<Select onValueChange={handleSelectChange} required>
|
|
<SelectTrigger className="h-12">
|
|
<SelectValue placeholder={tContact('contact.form.subjectPlaceholder')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="general">{tContact('contact.subjects.general')}</SelectItem>
|
|
<SelectItem value="technical">{tContact('contact.subjects.technical')}</SelectItem>
|
|
<SelectItem value="sales">{tContact('contact.subjects.sales')}</SelectItem>
|
|
<SelectItem value="partnership">{tContact('contact.subjects.partnership')}</SelectItem>
|
|
<SelectItem value="complaint">{tContact('contact.subjects.complaint')}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="message">{tContact('contact.form.message')} *</Label>
|
|
<Textarea
|
|
id="message"
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleInputChange}
|
|
placeholder={tContact('contact.form.messagePlaceholder')}
|
|
required
|
|
rows={6}
|
|
className="resize-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Submit Status */}
|
|
{submitStatus === 'success' && (
|
|
<div className="flex items-center gap-2 p-4 bg-green-50 text-green-800 rounded-lg">
|
|
<CheckCircle size={20} />
|
|
<span>{tContact('contact.form.success')}</span>
|
|
</div>
|
|
)}
|
|
|
|
{submitStatus === 'error' && (
|
|
<div className="flex items-center gap-2 p-4 bg-red-50 text-red-800 rounded-lg">
|
|
<AlertCircle size={20} />
|
|
<span>{tContact('contact.form.error')}</span>
|
|
</div>
|
|
)}
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="w-full h-12 text-lg"
|
|
>
|
|
{isSubmitting ? (
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
|
{tContact('contact.form.submitting')}
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<Send size={20} />
|
|
{tContact('contact.form.submit')}
|
|
</div>
|
|
)}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Contact Information Sidebar */}
|
|
<div className="space-y-6">
|
|
{/* Company Info */}
|
|
<Card className="shadow-lg">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Building className="text-blue-600" size={24} />
|
|
{tContact('contact.info.title')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div>
|
|
<h4 className="font-semibold text-gray-900 mb-2">
|
|
{tContact('contact.info.company')}
|
|
</h4>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<MapPin className="text-gray-500 mt-1 flex-shrink-0" size={18} />
|
|
<span className="text-gray-700">
|
|
{tContact('contact.info.address')}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<Mail className="text-gray-500 mt-1 flex-shrink-0" size={18} />
|
|
<a
|
|
href="mailto:service@dongyun.com"
|
|
className="text-blue-600 hover:underline"
|
|
>
|
|
{tContact('contact.info.email')}
|
|
</a>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<Phone className="text-gray-500 mt-1 flex-shrink-0" size={18} />
|
|
<a
|
|
href={contactConfig.phoneHref}
|
|
className="text-blue-600 hover:underline"
|
|
>
|
|
{tContact('contact.info.phone')}
|
|
</a>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Business Hours */}
|
|
<Card className="shadow-lg">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Clock className="text-blue-600" size={24} />
|
|
{tContact('contact.businessHours.title')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-700">{tContact('contact.businessHours.weekdays')}</span>
|
|
<span className="font-medium">{tContact('contact.businessHours.weekdaysTime')}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-700">{tContact('contact.businessHours.weekends')}</span>
|
|
<span className="text-sm text-gray-500">{tContact('contact.businessHours.weekendsTime')}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-700">{tContact('contact.businessHours.holidays')}</span>
|
|
<span className="text-sm text-gray-500">{tContact('contact.businessHours.holidaysTime')}</span>
|
|
</div>
|
|
<div className="pt-3 border-t border-gray-200">
|
|
<Badge variant="secondary" className="bg-green-100 text-green-800">
|
|
{tContact('contact.info.emergencySupport')}
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Map Section */}
|
|
<section className="py-16 bg-white">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
|
{tContact('contact.locations.title')}
|
|
</h2>
|
|
<p className="text-gray-600 max-w-2xl mx-auto">
|
|
{tContact('contact.locations.headquarters')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="aspect-video bg-gray-200 rounded-lg flex items-center justify-center">
|
|
<div className="text-center">
|
|
<MapPin className="text-gray-400 mx-auto mb-4" size={48} />
|
|
<p className="text-gray-600 mb-4">地图位置展示</p>
|
|
<Button variant="outline">
|
|
{tContact('contact.locations.directions')}
|
|
<ExternalLink className="ml-2" size={16} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer translations={tCommon} />
|
|
</div>
|
|
);
|
|
}
|