auto-claude: subtask-3-2 - Add rate limit feedback to ContactForm UI

- Added rate limit translations for en, de, and sr locales
- Added state to track remaining attempts from X-RateLimit-Remaining header
- Display warning when remaining attempts are low (<=2)
- Show user-friendly error messages with time until reset for 429 errors
- Added AlertTriangle icon for visual feedback on warnings
- All messages now use i18n translation keys for multilingual support

src/components/contact/ContactForm.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { motion } from 'framer-motion';
-import { MapPin, Phone, Mail, Send, Loader2, CheckCircle2 } from 'lucide-react';
+import { MapPin, Phone, Mail, Send, Loader2, CheckCircle2, AlertTriangle } from 'lucide-react';
 import Image from 'next/image';
 
 interface FormData {
@@ -24,6 +24,7 @@ export function ContactForm() {
     message: ''
   });
   const [errors, setErrors] = useState<Partial<FormData>>({});
+  const [remainingAttempts, setRemainingAttempts] = useState<number | null>(null);
 
   const validateForm = () => {
     const newErrors: Partial<FormData> = {};
@@ -76,12 +77,19 @@ export function ContactForm() {
 
       const data = await response.json();
 
+      // Parse rate limit headers
+      const rateLimitRemaining = response.headers.get('X-RateLimit-Remaining');
+      if (rateLimitRemaining !== null) {
+        setRemainingAttempts(parseInt(rateLimitRemaining, 10));
+      }
+
       if (response.ok) {
         setSubmitStatus('success');
         setFormData({ name: '', email: '', message: '' });
       } else if (response.status === 429) {
         // Rate limit exceeded
         setSubmitStatus('error');
+        setRemainingAttempts(0);
         const retryAfter = data.retryAfter || 0;
         const minutes = Math.ceil(retryAfter / 60);
         const hours = Math.floor(minutes / 60);
@@ -95,7 +103,7 @@ export function ContactForm() {
         }
 
         setErrorMessage(
-          `Too many requests. Please try again in ${timeMessage}.`
+          t('contactForm.rateLimit.error', { time: timeMessage })
         );
       } else {
         // Other errors (400, 500, etc.)
@@ -314,6 +322,20 @@ export function ContactForm() {
                   </div>
                 </div>
 
+                {/* Rate limit warning - show when attempts are low */}
+                {remainingAttempts !== null && remainingAttempts > 0 && remainingAttempts <= 2 && (
+                  <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="flex items-center gap-2 p-3 bg-yellow-900/20 border border-yellow-900/50 rounded-lg"
+                  >
+                    <AlertTriangle className="h-4 w-4 text-yellow-500 flex-shrink-0" />
+                    <p className="text-yellow-400 text-sm">
+                      {t('contactForm.rateLimit.warning', { count: remainingAttempts })}
+                    </p>
+                  </motion.div>
+                )}
+
                 {submitStatus === 'success' && (
                   <motion.div
                     initial={{ opacity: 0, y: 10 }}