Added translation to all site with edit style

app/support/page.js

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslation } from 'react-i18next';
 import { motion } from "framer-motion";
 import {
   MessageCircle,
@@ -15,6 +16,7 @@ import { submitReport } from "../utils/api";
 import AuthService from "../services/AuthService";
 
 export default function SupportPage() {
+  const { t, i18n } = useTranslation();
   const [subject, setSubject] = useState("");
   const [body, setBody] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -22,23 +24,23 @@ export default function SupportPage() {
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!subject.trim() || !body.trim()) {
-      toast.error("يرجى تعبئة جميع الحقول");
+      toast.error(t('support.fillAllFields'));
       return;
     }
 
     if (!AuthService.isAuthenticated()) {
-      toast.error("يرجى تسجيل الدخول أولاً لإرسال طلب دعم");
+      toast.error(t('auth.loginRequired'));
       return;
     }
 
     setIsSubmitting(true);
     try {
       await submitReport(subject, body);
-      toast.success("تم إرسال طلب الدعم بنجاح");
+      toast.success(t('support.submittedSuccess'));
       setSubject("");
       setBody("");
     } catch (error) {
-      toast.error("حدث خطأ أثناء إرسال الطلب. حاول مرة أخرى");
+      toast.error(t('support.submitError'));
     } finally {
       setIsSubmitting(false);
     }
@@ -47,7 +49,7 @@ export default function SupportPage() {
   return (
     <div
       className="min-h-screen bg-gradient-to-b from-amber-50/50 to-white py-12"
-      dir="rtl"
+      dir={i18n.language === 'ar' ? 'rtl' : 'ltr'}
     >
       <Toaster position="top-center" reverseOrder={false} />
       <div className="container mx-auto px-4 max-w-5xl">
@@ -60,11 +62,10 @@ export default function SupportPage() {
             <MessageCircle className="w-10 h-10 text-amber-600" />
           </div>
           <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            خدمة العملاء
+            {t('support.customerService')}
           </h1>
           <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-            نحن هنا لمساعدتك. تواصل معنا عبر النموذج أدناه أو من خلال معلومات
-            الاتصال المباشرة
+            {t('support.hereToHelp')}
           </p>
         </motion.div>
 
@@ -77,30 +78,30 @@ export default function SupportPage() {
           >
             <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
               <h2 className="text-2xl font-bold text-gray-900 mb-6">
-                أرسل لنا رسالة
+                {t('support.sendMessage')}
               </h2>
               <form onSubmit={handleSubmit} className="space-y-6">
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
-                    الموضوع
+                    {t('support.subjectLabel')}
                   </label>
                   <input
                     type="text"
                     value={subject}
                     onChange={(e) => setSubject(e.target.value)}
-                    placeholder="اكتب موضوع الرسالة..."
+                    placeholder={t('support.subjectPlaceholder')}
                     className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-gray-900 placeholder-gray-400"
                   />
                 </div>
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
-                    الرسالة
+                    {t('support.messageLabel')}
                   </label>
                   <textarea
                     value={body}
                     onChange={(e) => setBody(e.target.value)}
                     rows={6}
-                    placeholder="اكتب تفاصيل طلبك..."
+                    placeholder={t('support.messagePlaceholder')}
                     className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-gray-900 placeholder-gray-400 resize-none"
                   />
                 </div>
@@ -114,7 +115,7 @@ export default function SupportPage() {
                   ) : (
                     <Send className="w-5 h-5" />
                   )}
-                  {isSubmitting ? "جاري الإرسال..." : "إرسال"}
+                  {isSubmitting ? t('support.sending') : t('support.send')}
                 </button>
               </form>
             </div>
@@ -128,7 +129,7 @@ export default function SupportPage() {
           >
             <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
               <h3 className="text-lg font-bold text-gray-900 mb-4">
-                معلومات الاتصال
+                {t('support.contactInfo')}
               </h3>
               <div className="space-y-4">
                 <div className="flex items-center gap-3">
@@ -136,7 +137,7 @@ export default function SupportPage() {
                     <Mail className="w-5 h-5 text-blue-600" />
                   </div>
                   <div>
-                    <p className="text-sm text-gray-500">البريد الإلكتروني</p>
+                    <p className="text-sm text-gray-500">{t('support.email')}</p>
                     <p className="font-medium text-gray-900">
                       support@sweethome.com
                     </p>
@@ -147,7 +148,7 @@ export default function SupportPage() {
                     <Phone className="w-5 h-5 text-green-600" />
                   </div>
                   <div>
-                    <p className="text-sm text-gray-500">رقم الهاتف</p>
+                    <p className="text-sm text-gray-500">{t('support.phone')}</p>
                     <p className="font-medium text-gray-900" dir="ltr">
                       +963 11 234 5678
                     </p>
@@ -158,8 +159,8 @@ export default function SupportPage() {
                     <MapPin className="w-5 h-5 text-amber-600" />
                   </div>
                   <div>
-                    <p className="text-sm text-gray-500">العنوان</p>
-                    <p className="font-medium text-gray-900">دمشق، سورية</p>
+                    <p className="text-sm text-gray-500">{t('support.address')}</p>
+                    <p className="font-medium text-gray-900">{t('support.addressValue')}</p>
                   </div>
                 </div>
               </div>
@@ -167,16 +168,16 @@ export default function SupportPage() {
 
             <div className="bg-amber-50 rounded-2xl border border-amber-200 p-6">
               <h3 className="text-lg font-bold text-amber-800 mb-2">
-                ساعات العمل
+                {t('support.workingHours')}
               </h3>
               <div className="space-y-2 text-amber-700">
                 <div className="flex justify-between">
-                  <span>السبت - الخميس</span>
+                  <span>{t('support.weekdays')}</span>
                   <span>9:00 - 18:00</span>
                 </div>
                 <div className="flex justify-between">
-                  <span>الجمعة</span>
-                  <span>مغلق</span>
+                  <span>{t('support.friday')}</span>
+                  <span>{t('support.closed')}</span>
                 </div>
               </div>
             </div>