'use client'; import { useState } from 'react'; import { CSMAX_ASSET as A, CSMAX_STYLES } from '@/components/themes/csmax/csmax-styles'; import { useIsEN } from '@/components/themes/csmax/csmax-i18n'; const LOCAL_ASSET = A; const CONTACT_STYLES = ` :where(.csmax-root) .contact-main-section{ width:100%; max-width:1064px; margin:0 auto; padding:60px 0 66px; display:grid; grid-template-columns:521px 521px; gap:22px; } :where(.csmax-root) .contact-info-list{ width:521px; } :where(.csmax-root) .contact-info-item{ width:459px; } :where(.csmax-root) .contact-info-label{ font-size:16px; font-weight:400; line-height:35px; color:var(--csmax-ink); letter-spacing:.15em; } :where(.csmax-root) .contact-info-value{ font-family:var(--font-en); font-size:20px; font-weight:300; line-height:35px; color:var(--csmax-ink); letter-spacing:.15em; } :where(.csmax-root) .contact-info-value.time{ font-family:var(--font-en),var(--font-body); } :where(.csmax-root) .contact-info-rule{ width:459px; height:1px; background:var(--csmax-line-soft); margin:24px 0 24px; } :where(.csmax-root) .contact-social-row{ display:flex; gap:15px; margin-top:38px; } :where(.csmax-root) .contact-social-row img{ width:40px; height:40px; object-fit:contain; } :where(.csmax-root) .contact-form{ width:521px; } :where(.csmax-root) .contact-intro{ font-size:16px; line-height:35px; color:var(--csmax-ink); letter-spacing:.15em; margin:0 0 13px; } :where(.csmax-root) .contact-fields{ display:flex; flex-direction:column; gap:18px; } :where(.csmax-root) .contact-field{ height:61px; background:var(--csmax-cream); color:var(--csmax-ink); font-size:16px; line-height:35px; letter-spacing:.15em; padding:0 20px; } :where(.csmax-root) textarea.contact-field{ height:190px; padding-top:13px; } :where(.csmax-root) .contact-submit-row{ display:flex; justify-content:center; margin-top:18px; } :where(.csmax-root) .contact-submit{ min-width:148px; height:45px; font-size:16px; line-height:35px; letter-spacing:.05em; } @media (max-width:1120px){ :where(.csmax-root) .contact-main-section{ max-width:none; padding:60px 32px 72px; grid-template-columns:1fr 1fr; gap:36px; } :where(.csmax-root) .contact-info-list, :where(.csmax-root) .contact-form, :where(.csmax-root) .contact-info-item, :where(.csmax-root) .contact-info-rule{ width:100%; } } @media (max-width:760px){ :where(.csmax-root) .contact-main-section{ padding:48px 20px 58px; grid-template-columns:1fr; gap:42px; } :where(.csmax-root) .contact-info-label, :where(.csmax-root) .contact-intro, :where(.csmax-root) .contact-field{ font-size:14px; letter-spacing:.08em; } :where(.csmax-root) .contact-info-value{ font-size:18px; letter-spacing:.08em; overflow-wrap:anywhere; } :where(.csmax-root) .contact-info-rule{ margin:18px 0; } :where(.csmax-root) .contact-social-row{ margin-top:30px; } :where(.csmax-root) .contact-intro{ line-height:30px; } :where(.csmax-root) .contact-submit-row{ justify-content:center; } } `; function ContactPage() { const en = useIsEN(); const [form, setForm] = useState({ name: '', email: '', phone: '', msg: '' }); const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle'); const [errorMsg, setErrorMsg] = useState(''); const submit = async (e: React.FormEvent) => { e.preventDefault(); setStatus('sending'); setErrorMsg(''); try { const res = await fetch('/v1/public/forms/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ formKey: 'contact', payload: form }), }); if (!res.ok) { const errBody = await res.json().catch(() => ({})); throw new Error(errBody.message || `送出失敗 (${res.status})`); } setStatus('sent'); setForm({ name: '', email: '', phone: '', msg: '' }); setTimeout(() => setStatus('idle'), 4000); } catch (err) { setStatus('error'); setErrorMsg(err instanceof Error ? err.message : '送出失敗，請稍後再試'); } }; const set = (k: keyof typeof form) => (e: React.ChangeEvent) => setForm({ ...form, [k]: e.target.value }); return ( <>

{en ? 'CONTACT US' : '聯絡我們'}

{en ? 'Phone' : '客服電話'}

(02)2999-3319

{en ? 'Email' : '客服信箱'}

censilcsmax@gmail.com

{en ? 'Service Hours' : '服務時間'}

{en ? 'Mon-Fri 10:00-12:00 / 13:00-17:00' : '週一-週五 10:00-12:00 / 13:00-17:00'}

{en ? ( <>If you have any questions or feedback, please leave your suggestions below.
We'll get back to you as soon as possible — thank you! ) : ( <>若您有任何疑問或建議，歡迎留下您寶貴的建議，
我們將盡速與您聯繫，感謝！ )}