80 lines
5.0 KiB
React
80 lines
5.0 KiB
React
import React, { useState } from 'react'
|
|
import { useFormSubmit } from '../hooks/useFormSubmit'
|
|
import { validateContact } from '../utils/validation'
|
|
import SEOHead from '../components/SEOHead'
|
|
|
|
export default function Contact() {
|
|
const [form, setForm] = useState({ name: '', email: '', message: '', company_website: '' })
|
|
const { submit, loading, success, errors, serverError } = useFormSubmit('/api/contact', validateContact)
|
|
|
|
function handleChange(e) {
|
|
setForm(prev => ({ ...prev, [e.target.name]: e.target.value }))
|
|
}
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault()
|
|
await submit(form)
|
|
}
|
|
|
|
if (success) {
|
|
return (
|
|
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
|
|
<SEOHead title="Kontakt" description="Nimm Kontakt zu Dr. André Knie auf." url="/kontakt" />
|
|
<div className="app-container" style={{ textAlign: 'center', maxWidth: '600px' }}>
|
|
<div role="status" aria-live="polite">
|
|
<h1 style={{ marginBottom: '16px' }}>Nachricht gesendet</h1>
|
|
</div>
|
|
<p style={{ color: 'var(--text-secondary)' }}>Du erhältst eine Bestätigungs-E-Mail. Bitte klicke den Link darin, damit deine Nachricht weitergeleitet wird.</p>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
|
|
<SEOHead title="Kontakt" description="Nimm Kontakt zu Dr. André Knie auf." url="/kontakt" />
|
|
<div className="app-container" style={{ maxWidth: '600px' }}>
|
|
<div className="section-header">
|
|
<h1 className="section-title"><span className="text-gradient">Kontakt</span></h1>
|
|
<p className="section-subtitle">Schreib mir. Ich melde mich.</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="glass-panel" style={{ padding: '40px' }}>
|
|
{/* Honeypot — hidden from real users, only bots fill this. */}
|
|
<div hidden>
|
|
<label>
|
|
Firmen-Website (bitte leer lassen)
|
|
<input name="company_website" tabIndex={-1} autoComplete="off" value={form.company_website} onChange={handleChange} />
|
|
</label>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '20px' }}>
|
|
<label htmlFor="contact-name" style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>Name</label>
|
|
<input id="contact-name" name="name" value={form.name} onChange={handleChange} aria-invalid={Boolean(errors.name)} aria-describedby={errors.name ? 'contact-name-error' : undefined} style={{ width: '100%', padding: '12px', background: 'var(--bg-elevated)', border: errors.name ? '1px solid #ff4444' : '1px solid var(--glass-border)', borderRadius: 'var(--radius-sm)', color: 'var(--text-primary)', fontSize: '1rem' }} />
|
|
{errors.name && <p id="contact-name-error" role="alert" style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.name}</p>}
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '20px' }}>
|
|
<label htmlFor="contact-email" style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>E-Mail</label>
|
|
<input id="contact-email" name="email" type="email" value={form.email} onChange={handleChange} aria-invalid={Boolean(errors.email)} aria-describedby={errors.email ? 'contact-email-error' : undefined} style={{ width: '100%', padding: '12px', background: 'var(--bg-elevated)', border: errors.email ? '1px solid #ff4444' : '1px solid var(--glass-border)', borderRadius: 'var(--radius-sm)', color: 'var(--text-primary)', fontSize: '1rem' }} />
|
|
{errors.email && <p id="contact-email-error" role="alert" style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.email}</p>}
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<label htmlFor="contact-message" style={{ display: 'block', marginBottom: '6px', fontSize: '0.9rem' }}>Nachricht</label>
|
|
<textarea id="contact-message" name="message" value={form.message} onChange={handleChange} rows={6} maxLength={2000} aria-invalid={Boolean(errors.message)} aria-describedby={errors.message ? 'contact-message-error' : undefined} style={{ width: '100%', padding: '12px', background: 'var(--bg-elevated)', border: errors.message ? '1px solid #ff4444' : '1px solid var(--glass-border)', borderRadius: 'var(--radius-sm)', color: 'var(--text-primary)', fontSize: '1rem', resize: 'vertical' }} />
|
|
{errors.message && <p id="contact-message-error" role="alert" style={{ color: '#ff4444', fontSize: '0.85rem', margin: '4px 0 0' }}>{errors.message}</p>}
|
|
<p style={{ color: 'var(--text-secondary)', fontSize: '0.8rem', margin: '4px 0 0' }}>{form.message.length}/2000</p>
|
|
</div>
|
|
|
|
{serverError && <p role="alert" aria-live="assertive" style={{ color: '#ff4444', marginBottom: '16px' }}>{serverError}</p>}
|
|
|
|
<button type="submit" className="primary-button" disabled={loading} style={{ width: '100%' }}>
|
|
{loading ? 'Wird gesendet...' : 'Nachricht senden'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|