muken
3bdaee333b
- Created contact API endpoint to store messages - Added contact_messages table - Contact page now displays phone, email, WhatsApp, and address from site config
200 lines
7.9 KiB
TypeScript
200 lines
7.9 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { useLanguage } from '@/lib/i18n';
|
||
|
||
const gold = '#E8A849';
|
||
const navy = '#010D1E';
|
||
const cream = '#f5f0e8';
|
||
|
||
const copy = {
|
||
en: {
|
||
title: 'Contact Us',
|
||
subtitle: 'Get in touch with us',
|
||
phone: 'Phone',
|
||
email: 'Email',
|
||
whatsapp: 'WhatsApp',
|
||
location: 'Location',
|
||
send_message: 'Send us a message',
|
||
form_name: 'Your Name',
|
||
form_email: 'Your Email',
|
||
form_message: 'Message',
|
||
form_submit: 'Send Message',
|
||
form_sending: 'Sending...',
|
||
form_success: 'Message sent successfully!',
|
||
form_error: 'Failed to send message. Please try again.',
|
||
},
|
||
es: {
|
||
title: 'Contáctenos',
|
||
subtitle: 'Póngase en contacto con nosotros',
|
||
phone: 'Teléfono',
|
||
email: 'Correo',
|
||
whatsapp: 'WhatsApp',
|
||
location: 'Ubicación',
|
||
send_message: 'Envíenos un mensaje',
|
||
form_name: 'Su Nombre',
|
||
form_email: 'Su Correo',
|
||
form_message: 'Mensaje',
|
||
form_submit: 'Enviar Mensaje',
|
||
form_sending: 'Enviando...',
|
||
form_success: '¡Mensaje enviado exitosamente!',
|
||
form_error: 'Error al enviar el mensaje. Intente de nuevo.',
|
||
},
|
||
};
|
||
|
||
export default function ContactPage() {
|
||
const language = useLanguage();
|
||
const t = copy[language];
|
||
const [form, setForm] = useState({ name: '', email: '', message: '' });
|
||
const [status, setStatus] = useState<'idle' | 'sending' | 'success' | 'error'>('idle');
|
||
const [config, setConfig] = useState<{ phone?: string; email?: string; whatsapp_url?: string; address?: string }>({});
|
||
|
||
useEffect(() => {
|
||
fetch('/api/site-assets')
|
||
.then(res => res.json())
|
||
.then(data => setConfig(data.data || {}))
|
||
.catch(() => {});
|
||
}, []);
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setStatus('sending');
|
||
try {
|
||
const res = await fetch('/api/contact', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(form),
|
||
});
|
||
if (res.ok) {
|
||
setStatus('success');
|
||
setForm({ name: '', email: '', message: '' });
|
||
} else {
|
||
setStatus('error');
|
||
}
|
||
} catch {
|
||
setStatus('error');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<main style={{ minHeight: 'calc(100vh - 56px)', background: navy, color: cream, padding: '3rem 2rem' }}>
|
||
<div style={{ maxWidth: '900px', margin: '0 auto' }}>
|
||
<h1 style={{ fontSize: 'clamp(32px, 5vw, 48px)', fontWeight: 400, fontStyle: 'italic', marginBottom: '0.5rem', color: cream }}>
|
||
{t.title}
|
||
</h1>
|
||
<p style={{ fontSize: '16px', color: 'rgba(245,240,232,0.7)', marginBottom: '3rem' }}>
|
||
{t.subtitle}
|
||
</p>
|
||
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '2rem', marginBottom: '3rem' }}>
|
||
{/* Phone */}
|
||
<div style={{ background: 'rgba(245,240,232,0.06)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(245,240,232,0.12)' }}>
|
||
<div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>📞</div>
|
||
<div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', color: gold, marginBottom: '0.25rem' }}>{t.phone}</div>
|
||
<div style={{ fontSize: '16px' }}>{config.phone || '+593 99 XXX XXXX'}</div>
|
||
</div>
|
||
|
||
{/* Email */}
|
||
<div style={{ background: 'rgba(245,240,232,0.06)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(245,240,232,0.12)' }}>
|
||
<div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>✉️</div>
|
||
<div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', color: gold, marginBottom: '0.25rem' }}>{t.email}</div>
|
||
<div style={{ fontSize: '16px' }}>{config.email || 'info@lahuasca.com'}</div>
|
||
</div>
|
||
|
||
{/* WhatsApp */}
|
||
<div style={{ background: 'rgba(245,240,232,0.06)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(245,240,232,0.12)' }}>
|
||
<div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>💬</div>
|
||
<div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', color: gold, marginBottom: '0.25rem' }}>{t.whatsapp}</div>
|
||
<div style={{ fontSize: '16px' }}>{config.whatsapp_url ? <a href={config.whatsapp_url} target="_blank" rel="noopener noreferrer" style={{ color: cream, textDecoration: 'underline' }}>WhatsApp</a> : (config.phone || '+593 99 XXX XXXX')}</div>
|
||
</div>
|
||
|
||
{/* Location */}
|
||
<div style={{ background: 'rgba(245,240,232,0.06)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(245,240,232,0.12)' }}>
|
||
<div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>📍</div>
|
||
<div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', color: gold, marginBottom: '0.25rem' }}>{t.location}</div>
|
||
<div style={{ fontSize: '16px' }}>{config.address || 'Otavalo, Imbabura, Ecuador'}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Contact Form */}
|
||
<div style={{ background: 'rgba(245,240,232,0.04)', borderRadius: '16px', padding: '2rem', border: '1px solid rgba(245,240,232,0.1)' }}>
|
||
<h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '1.5rem', color: cream }}>
|
||
{t.send_message}
|
||
</h2>
|
||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||
<input
|
||
type="text"
|
||
placeholder={t.form_name}
|
||
value={form.name}
|
||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||
required
|
||
style={{
|
||
padding: '0.875rem 1rem',
|
||
background: 'rgba(245,240,232,0.08)',
|
||
border: '1px solid rgba(245,240,232,0.2)',
|
||
borderRadius: '8px',
|
||
color: cream,
|
||
fontSize: '15px',
|
||
}}
|
||
/>
|
||
<input
|
||
type="email"
|
||
placeholder={t.form_email}
|
||
value={form.email}
|
||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||
required
|
||
style={{
|
||
padding: '0.875rem 1rem',
|
||
background: 'rgba(245,240,232,0.08)',
|
||
border: '1px solid rgba(245,240,232,0.2)',
|
||
borderRadius: '8px',
|
||
color: cream,
|
||
fontSize: '15px',
|
||
}}
|
||
/>
|
||
<textarea
|
||
placeholder={t.form_message}
|
||
value={form.message}
|
||
onChange={(e) => setForm({ ...form, message: e.target.value })}
|
||
required
|
||
rows={5}
|
||
style={{
|
||
padding: '0.875rem 1rem',
|
||
background: 'rgba(245,240,232,0.08)',
|
||
border: '1px solid rgba(245,240,232,0.2)',
|
||
borderRadius: '8px',
|
||
color: cream,
|
||
fontSize: '15px',
|
||
resize: 'vertical',
|
||
}}
|
||
/>
|
||
<button
|
||
type="submit"
|
||
disabled={status === 'sending'}
|
||
style={{
|
||
padding: '0.875rem 1.5rem',
|
||
background: gold,
|
||
color: navy,
|
||
border: 'none',
|
||
borderRadius: '8px',
|
||
fontSize: '15px',
|
||
fontWeight: 600,
|
||
cursor: status === 'sending' ? 'wait' : 'pointer',
|
||
opacity: status === 'sending' ? 0.7 : 1,
|
||
transition: 'opacity 200ms',
|
||
}}
|
||
>
|
||
{status === 'sending' ? t.form_sending : t.form_submit}
|
||
</button>
|
||
{status === 'success' && (
|
||
<p style={{ color: '#4CAF50', margin: 0 }}>{t.form_success}</p>
|
||
)}
|
||
{status === 'error' && (
|
||
<p style={{ color: '#f44336', margin: 0 }}>{t.form_error}</p>
|
||
)}
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
);
|
||
} |