import React from 'react'; import { Head, Link, useForm, usePage } from '@inertiajs/react'; import { useTranslation } from 'react-i18next'; import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes'; import MarketingLayout from '@/layouts/mainWebsite'; import { Loader2, CheckCircle2 } from 'lucide-react'; import { motion, useReducedMotion } from 'framer-motion'; interface HoneypotPayload { enabled: boolean; nameFieldName: string; validFromFieldName: string; encryptedValidFrom: string; } type ContactFormData = { name: string; email: string; message: string; [key: string]: string; }; const Kontakt: React.FC = () => { const { honeypot, flash } = usePage<{ flash?: { success?: string }; honeypot?: HoneypotPayload }>().props; const honeypotDefaults = React.useMemo(() => { if (!honeypot?.enabled) { return {}; } return { [honeypot.nameFieldName]: '', [honeypot.validFromFieldName]: honeypot.encryptedValidFrom, }; }, [honeypot?.enabled, honeypot?.encryptedValidFrom, honeypot?.nameFieldName, honeypot?.validFromFieldName]); const { data, setData, post, processing, errors, reset } = useForm({ name: '', email: '', message: '', ...honeypotDefaults, }); const { t } = useTranslation('marketing'); const { localizedPath } = useLocalizedRoutes(); const shouldReduceMotion = useReducedMotion(); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post(localizedPath('/kontakt'), { onSuccess: () => reset(), }); }; React.useEffect(() => { if (Object.keys(errors).length > 0) { window.scrollTo({ top: 0, behavior: 'smooth' }); } }, [errors]); return (

{t('kontakt.title')}

{t('kontakt.description')}

{flash?.success && (
{flash.success}
)}
{honeypot?.enabled ? (
setData(honeypot.nameFieldName, event.target.value)} autoComplete="off" tabIndex={-1} />
) : null}
setData('name', e.target.value)} required className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" aria-invalid={Boolean(errors.name)} aria-describedby={errors.name ? 'kontakt-name-error' : undefined} /> {errors.name &&

{errors.name}

}
setData('email', e.target.value)} required className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" aria-invalid={Boolean(errors.email)} aria-describedby={errors.email ? 'kontakt-email-error' : undefined} /> {errors.email &&

{errors.email}

}
{errors.message &&

{errors.message}

}
{flash?.success &&

{flash.success}

} {Object.keys(errors).length > 0 && (
    {Object.values(errors).map((error, index) => (
  • {error}
    • ))}
)}
{t('kontakt.back_home')}
); }; Kontakt.layout = (page: React.ReactNode) => page; export default Kontakt;