410 lines
22 KiB
TypeScript
410 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import { useState, useEffect } from 'react';
|
|
import PageLayout from '../../../components/PageLayout';
|
|
import Icon from '../../../components/Icon';
|
|
import { content } from '../../../data/content';
|
|
import { contactContent } from '../../../data/pageContent';
|
|
|
|
export default function ContactPage() {
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const currentLang = typeof params.lang === 'string' ? params.lang : 'en';
|
|
|
|
// Form state
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
company: '',
|
|
subject: '',
|
|
message: '',
|
|
});
|
|
const [formSubmitted, setFormSubmitted] = useState(false);
|
|
const [isClient, setIsClient] = useState(false);
|
|
|
|
// Set client-side flag
|
|
useEffect(() => {
|
|
setIsClient(true);
|
|
}, []);
|
|
|
|
// Validate language and redirect if invalid
|
|
useEffect(() => {
|
|
const supportedLangs = ['zh-CN', 'zh-TW', 'en', 'ko', 'ja'];
|
|
if (!supportedLangs.includes(currentLang)) {
|
|
router.push('/en/contact');
|
|
}
|
|
}, [currentLang, router]);
|
|
|
|
const currentContent = content[currentLang as keyof typeof content] || content.en;
|
|
const pageContent =
|
|
contactContent[currentLang as keyof typeof contactContent] || contactContent.en;
|
|
|
|
const handleLanguageChange = (lang: string) => {
|
|
router.push(`/${lang}/contact`);
|
|
};
|
|
|
|
const handleInputChange = (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
|
|
) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Here you would typically send the form data to your backend
|
|
console.log('Form submitted:', formData);
|
|
setFormSubmitted(true);
|
|
|
|
// Reset form after submission
|
|
setTimeout(() => {
|
|
setFormData({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
company: '',
|
|
subject: '',
|
|
message: '',
|
|
});
|
|
setFormSubmitted(false);
|
|
}, 5000);
|
|
};
|
|
|
|
return (
|
|
<PageLayout
|
|
title={pageContent.title}
|
|
description={pageContent.description}
|
|
keywords={pageContent.keywords}
|
|
currentLang={currentLang}
|
|
currentContent={currentContent}
|
|
handleLanguageChange={handleLanguageChange}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
{/* Page Header */}
|
|
<div className="text-center mb-16">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-4">{pageContent.heading}</h1>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
{pageContent.subheading}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-12">
|
|
{/* Contact Information */}
|
|
<div className="bg-white rounded-lg shadow-lg p-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
|
{currentLang === 'en'
|
|
? 'Contact Information'
|
|
: currentLang === 'zh-CN'
|
|
? '联系信息'
|
|
: currentLang === 'zh-TW'
|
|
? '聯繫信息'
|
|
: currentLang === 'ko'
|
|
? '연락처 정보'
|
|
: '連絡先情報'}
|
|
</h2>
|
|
|
|
<div className="space-y-6">
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0 mt-1">
|
|
<Icon name="map-pin" className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="ml-4">
|
|
<h3 className="font-semibold text-gray-900">
|
|
{currentLang === 'en'
|
|
? 'Address'
|
|
: currentLang === 'zh-CN'
|
|
? '地址'
|
|
: currentLang === 'zh-TW'
|
|
? '地址'
|
|
: currentLang === 'ko'
|
|
? '주소'
|
|
: '住所'}
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
{pageContent.contactInfo.address}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0 mt-1">
|
|
<Icon name="phone" className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="ml-4">
|
|
<h3 className="font-semibold text-gray-900">
|
|
{currentLang === 'en'
|
|
? 'Phone'
|
|
: currentLang === 'zh-CN'
|
|
? '电话'
|
|
: currentLang === 'zh-TW'
|
|
? '電話'
|
|
: currentLang === 'ko'
|
|
? '전화'
|
|
: '電話'}
|
|
</h3>
|
|
<p className="text-gray-600">{pageContent.contactInfo.phone}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0 mt-1">
|
|
<Icon name="mail" className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="ml-4">
|
|
<h3 className="font-semibold text-gray-900">
|
|
{currentLang === 'en'
|
|
? 'Email'
|
|
: currentLang === 'zh-CN'
|
|
? '电子邮箱'
|
|
: currentLang === 'zh-TW'
|
|
? '電子郵箱'
|
|
: currentLang === 'ko'
|
|
? '이메일'
|
|
: 'メール'}
|
|
</h3>
|
|
<p className="text-gray-600">{pageContent.contactInfo.email}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0 mt-1">
|
|
<Icon name="clock" className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="ml-4">
|
|
<h3 className="font-semibold text-gray-900">
|
|
{currentLang === 'en'
|
|
? 'Business Hours'
|
|
: currentLang === 'zh-CN'
|
|
? '营业时间'
|
|
: currentLang === 'zh-TW'
|
|
? '營業時間'
|
|
: currentLang === 'ko'
|
|
? '영업 시간'
|
|
: '営業時間'}
|
|
</h3>
|
|
<p className="text-gray-600">{pageContent.contactInfo.hours}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Map Placeholder */}
|
|
<div className="mt-8 bg-gray-200 rounded-lg h-64 flex items-center justify-center">
|
|
<p className="text-gray-500">
|
|
{currentLang === 'en'
|
|
? 'Map will be displayed here'
|
|
: currentLang === 'zh-CN'
|
|
? '地图将显示在这里'
|
|
: currentLang === 'zh-TW'
|
|
? '地圖將顯示在這裡'
|
|
: currentLang === 'ko'
|
|
? '지도가 여기에 표시됩니다'
|
|
: '地図がここに表示されます'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Form */}
|
|
<div className="bg-white rounded-lg shadow-lg p-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
|
{pageContent.formTitle}
|
|
</h2>
|
|
|
|
{!isClient ? (
|
|
<div className="space-y-6">
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<div className="block text-sm font-medium text-gray-700 mb-1">
|
|
{pageContent.formFields.name.label}
|
|
</div>
|
|
<div className="w-full px-4 py-2 border border-gray-300 rounded-md bg-gray-100">
|
|
{pageContent.formFields.name.placeholder}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="block text-sm font-medium text-gray-700 mb-1">
|
|
{pageContent.formFields.email.label}
|
|
</div>
|
|
<div className="w-full px-4 py-2 border border-gray-300 rounded-md bg-gray-100">
|
|
{pageContent.formFields.email.placeholder}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-center py-8">
|
|
<div className="text-gray-500">Loading form...</div>
|
|
</div>
|
|
</div>
|
|
) : formSubmitted ? (
|
|
<div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-6">
|
|
<strong className="font-bold">
|
|
{currentLang === 'en'
|
|
? 'Thank you!'
|
|
: currentLang === 'zh-CN'
|
|
? '谢谢！'
|
|
: currentLang === 'zh-TW'
|
|
? '謝謝！'
|
|
: currentLang === 'ko'
|
|
? '감사합니다!'
|
|
: 'ありがとうございます！'}
|
|
</strong>
|
|
<span className="block sm:inline">
|
|
{' '}
|
|
{currentLang === 'en'
|
|
? 'Your message has been sent. We will contact you soon.'
|
|
: currentLang === 'zh-CN'
|
|
? '您的消息已发送。我们将尽快与您联系。'
|
|
: currentLang === 'zh-TW'
|
|
? '您的訊息已發送。我們將盡快與您聯繫。'
|
|
: currentLang === 'ko'
|
|
? '메시지가 전송되었습니다. 곧 연락 드리겠습니다.'
|
|
: 'メッセージが送信されました。すぐにご連絡いたします。'}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="space-y-6"
|
|
>
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label
|
|
htmlFor="name"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
{pageContent.formFields.name.label}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleInputChange}
|
|
placeholder={pageContent.formFields.name.placeholder}
|
|
required
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="email"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
{pageContent.formFields.email.label}
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleInputChange}
|
|
placeholder={pageContent.formFields.email.placeholder}
|
|
required
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label
|
|
htmlFor="phone"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
{pageContent.formFields.phone.label}
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
id="phone"
|
|
name="phone"
|
|
value={formData.phone}
|
|
onChange={handleInputChange}
|
|
placeholder={pageContent.formFields.phone.placeholder}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="company"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
{pageContent.formFields.company.label}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="company"
|
|
name="company"
|
|
value={formData.company}
|
|
onChange={handleInputChange}
|
|
placeholder={pageContent.formFields.company.placeholder}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="subject"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
{pageContent.formFields.subject.label}
|
|
</label>
|
|
<select
|
|
id="subject"
|
|
name="subject"
|
|
value={formData.subject}
|
|
onChange={handleInputChange}
|
|
required
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="" disabled>
|
|
{pageContent.formFields.subject.placeholder}
|
|
</option>
|
|
{pageContent.formFields.subject.options.map(
|
|
(option, index) => (
|
|
<option key={index} value={option}>
|
|
{option}
|
|
</option>
|
|
),
|
|
)}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="message"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
{pageContent.formFields.message.label}
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleInputChange}
|
|
placeholder={pageContent.formFields.message.placeholder}
|
|
required
|
|
rows={5}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors"
|
|
>
|
|
{pageContent.formFields.submit}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PageLayout>
|
|
);
|
|
}
|