@promakeai/cli 0.4.3 → 0.4.5

package/dist/registry/contact-page-centered.json

@@ -25,19 +25,19 @@
       "path": "contact-page-centered/contact-page-centered.tsx",
       "type": "registry:component",
       "target": "$modules$/contact-page-centered/contact-page-centered.tsx",
-      "content": "import React, { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Mail, Phone, MapPin } from \"lucide-react\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface ContactPageCenteredProps {\r\n  className?: string;\r\n}\r\n\r\nexport function ContactPageCentered({ className }: ContactPageCenteredProps) {\r\n  const { t } = useTranslation(\"contact-page-centered\");\r\n  usePageTitle({ title: t(\"title\", \"Contact Us\") });\r\n  const apiService = useApiService();\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    message: \"\",\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\"idle\" | \"success\" | \"error\">(\"idle\");\r\n\r\n  const contactCards = [\r\n    {\r\n      icon: Mail,\r\n      title: t(\"emailTitle\", \"Email\"),\r\n      value: constants.email || \"hello@example.com\",\r\n      href: `mailto:${constants.email || \"hello@example.com\"}`,\r\n    },\r\n    {\r\n      icon: Phone,\r\n      title: t(\"phoneTitle\", \"Phone\"),\r\n      value: constants.phone || \"+1 234 567 890\",\r\n      href: `tel:${constants.phone || \"+1234567890\"}`,\r\n    },\r\n    {\r\n      icon: MapPin,\r\n      title: t(\"addressTitle\", \"Address\"),\r\n      value: constants.address?.city || \"New York, USA\",\r\n      href: \"#\",\r\n    },\r\n  ];\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n\r\n    try {\r\n      await apiService.submitForm(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"message\", required: true },\r\n          ],\r\n        },\r\n        constants.site.defaultLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({ name: \"\", email: \"\", message: \"\" });\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } catch {\r\n      setSubmitStatus(\"error\");\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className={cn(\"min-h-screen bg-muted/30 py-16 md:py-24\", className)}>\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 max-w-4xl\">\r\n          {/* Header */}\r\n          <div className=\"text-center mb-12\">\r\n            <h1 className=\"text-4xl font-bold mb-4\">{t(\"title\", \"Contact Us\")}</h1>\r\n            <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\r\n              {t(\"subtitle\", \"We'd love to hear from you. Send us a message and we'll respond as soon as possible.\")}\r\n            </p>\r\n          </div>\r\n\r\n          {/* Contact Cards */}\r\n          <div className=\"grid sm:grid-cols-3 gap-4 mb-12\">\r\n            {contactCards.map((card, index) => (\r\n              <Card key={index} className=\"text-center\">\r\n                <CardContent className=\"pt-6\">\r\n                  <div className=\"mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4\">\r\n                    <card.icon className=\"h-6 w-6 text-primary\" />\r\n                  </div>\r\n                  <h3 className=\"font-semibold mb-1\">{card.title}</h3>\r\n                  <a\r\n                    href={card.href}\r\n                    className=\"text-sm text-muted-foreground hover:text-primary transition-colors\"\r\n                  >\r\n                    {card.value}\r\n                  </a>\r\n                </CardContent>\r\n              </Card>\r\n            ))}\r\n          </div>\r\n\r\n          {/* Form */}\r\n          <Card>\r\n            <CardContent className=\"pt-6\">\r\n              <form onSubmit={handleSubmit} className=\"space-y-6\">\r\n                <div className=\"grid sm:grid-cols-2 gap-4\">\r\n                  <div>\r\n                    <Label htmlFor=\"name\">{t(\"nameLabel\", \"Name\")} *</Label>\r\n                    <Input\r\n                      id=\"name\"\r\n                      name=\"name\"\r\n                      value={formData.name}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"namePlaceholder\", \"Your name\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </div>\r\n                  <div>\r\n                    <Label htmlFor=\"email\">{t(\"emailLabel\", \"Email\")} *</Label>\r\n                    <Input\r\n                      id=\"email\"\r\n                      name=\"email\"\r\n                      type=\"email\"\r\n                      value={formData.email}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"emailPlaceholder\", \"your@email.com\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n\r\n                <div>\r\n                  <Label htmlFor=\"message\">{t(\"messageLabel\", \"Message\")} *</Label>\r\n                  <Textarea\r\n                    id=\"message\"\r\n                    name=\"message\"\r\n                    value={formData.message}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"messagePlaceholder\", \"How can we help you?\")}\r\n                    required\r\n                    rows={6}\r\n                    className=\"mt-1 resize-none\"\r\n                  />\r\n                </div>\r\n\r\n                {submitStatus === \"success\" && (\r\n                  <div className=\"p-4 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                    <p className=\"text-green-600 dark:text-green-400 text-sm font-medium\">\r\n                      {t(\"success\", \"Message sent successfully! We'll get back to you soon.\")}\r\n                    </p>\r\n                  </div>\r\n                )}\r\n\r\n                {submitStatus === \"error\" && (\r\n                  <div className=\"p-4 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                    <p className=\"text-destructive text-sm font-medium\">\r\n                      {t(\"error\", \"Something went wrong. Please try again.\")}\r\n                    </p>\r\n                  </div>\r\n                )}\r\n\r\n                <Button type=\"submit\" size=\"lg\" className=\"w-full\" disabled={isSubmitting}>\r\n                  {isSubmitting ? t(\"sending\", \"Sending...\") : t(\"submit\", \"Send Message\")}\r\n                </Button>\r\n              </form>\r\n            </CardContent>\r\n          </Card>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageCentered;\r\n"
+      "content": "import React, { useRef, useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Mail, Phone, MapPin, Upload } from \"lucide-react\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\n\r\ninterface ContactPageCenteredProps {\r\n  className?: string;\r\n}\r\n\r\nexport function ContactPageCentered({ className }: ContactPageCenteredProps) {\r\n  const { t } = useTranslation(\"contact-page-centered\");\r\n  usePageTitle({ title: t(\"title\", \"Contact Us\") });\r\n  const apiService = useApiService();\r\n  const fileAcceptTypes = constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\";\r\n  const fileMaxFiles = constants.file?.maxFiles || 5;\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[]\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\"idle\" | \"success\" | \"error\">(\"idle\");\r\n  const fileInputRef = useRef<HTMLInputElement>(null);\r\n\r\n  const contactCards = [\r\n    {\r\n      icon: Mail,\r\n      title: t(\"emailTitle\", \"Email\"),\r\n      value: constants.email || \"hello@example.com\",\r\n      href: `mailto:${constants.email || \"hello@example.com\"}`,\r\n    },\r\n    {\r\n      icon: Phone,\r\n      title: t(\"phoneTitle\", \"Phone\"),\r\n      value: constants.phone || \"+1 234 567 890\",\r\n      href: `tel:${constants.phone || \"+1234567890\"}`,\r\n    },\r\n    {\r\n      icon: MapPin,\r\n      title: t(\"addressTitle\", \"Address\"),\r\n      value: constants.address?.city || \"New York, USA\",\r\n      href: \"#\",\r\n    },\r\n  ];\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n\r\n    const remainingSlots = fileMaxFiles - formData.attachments.length;\r\n\r\n    // If the limit is exceeded, alert and do not add any files\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: fileMaxFiles }));\r\n      e.target.value = ''; // Clear the input\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n\r\n    try {\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        constants.site.defaultLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({ name: \"\", email: \"\", message: \"\", attachments: [] });\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } catch {\r\n      setSubmitStatus(\"error\");\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className={cn(\"min-h-screen bg-muted/30 py-16 md:py-24\", className)}>\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 max-w-4xl\">\r\n          {/* Header */}\r\n          <div className=\"text-center mb-12\">\r\n            <h1 className=\"text-4xl font-bold mb-4\">{t(\"title\", \"Contact Us\")}</h1>\r\n            <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\r\n              {t(\"subtitle\", \"We'd love to hear from you. Send us a message and we'll respond as soon as possible.\")}\r\n            </p>\r\n          </div>\r\n\r\n          {/* Contact Cards */}\r\n          <div className=\"grid sm:grid-cols-3 gap-4 mb-12\">\r\n            {contactCards.map((card, index) => (\r\n              <Card key={index} className=\"text-center\">\r\n                <CardContent className=\"pt-6\">\r\n                  <div className=\"mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4\">\r\n                    <card.icon className=\"h-6 w-6 text-primary\" />\r\n                  </div>\r\n                  <h3 className=\"font-semibold mb-1\">{card.title}</h3>\r\n                  <a\r\n                    href={card.href}\r\n                    className=\"text-sm text-muted-foreground hover:text-primary transition-colors\"\r\n                  >\r\n                    {card.value}\r\n                  </a>\r\n                </CardContent>\r\n              </Card>\r\n            ))}\r\n          </div>\r\n\r\n          {/* Form */}\r\n          <Card>\r\n            <CardContent className=\"pt-6\">\r\n              <form onSubmit={handleSubmit} className=\"space-y-6\">\r\n                <div className=\"grid sm:grid-cols-2 gap-4\">\r\n                  <div>\r\n                    <Label htmlFor=\"name\">{t(\"nameLabel\", \"Name\")} *</Label>\r\n                    <Input\r\n                      id=\"name\"\r\n                      name=\"name\"\r\n                      value={formData.name}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"namePlaceholder\", \"Your name\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </div>\r\n                  <div>\r\n                    <Label htmlFor=\"email\">{t(\"emailLabel\", \"Email\")} *</Label>\r\n                    <Input\r\n                      id=\"email\"\r\n                      name=\"email\"\r\n                      type=\"email\"\r\n                      value={formData.email}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"emailPlaceholder\", \"your@email.com\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n\r\n                <div>\r\n                  <Label htmlFor=\"message\">{t(\"messageLabel\", \"Message\")} *</Label>\r\n                  <Textarea\r\n                    id=\"message\"\r\n                    name=\"message\"\r\n                    value={formData.message}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"messagePlaceholder\", \"How can we help you?\")}\r\n                    required\r\n                    rows={6}\r\n                    className=\"mt-1 resize-none\"\r\n                  />\r\n                </div>\r\n                <FormFileInput\r\n                    files={formData.attachments}\r\n                    onFilesChange={handleFileUploadChange}\r\n                    handleRemoveFile={handleRemoveFile}\r\n                    maxFiles={constants.file?.maxFiles || 5}\r\n                    accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                    disabled={isSubmitting}\r\n                    uploadButtonText={t(\"addFiles\")}\r\n                    maxFilesReachedText={t(\"maxFilesReached\")}\r\n                  />\r\n                {submitStatus === \"success\" && (\r\n                  <div className=\"p-4 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                    <p className=\"text-green-600 dark:text-green-400 text-sm font-medium\">\r\n                      {t(\"success\", \"Message sent successfully! We'll get back to you soon.\")}\r\n                    </p>\r\n                  </div>\r\n                )}\r\n\r\n                {submitStatus === \"error\" && (\r\n                  <div className=\"p-4 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                    <p className=\"text-destructive text-sm font-medium\">\r\n                      {t(\"error\", \"Something went wrong. Please try again.\")}\r\n                    </p>\r\n                  </div>\r\n                )}\r\n\r\n                <Button type=\"submit\" size=\"lg\" className=\"w-full\" disabled={isSubmitting}>\r\n                  {isSubmitting ? t(\"sending\", \"Sending...\") : t(\"submit\", \"Send Message\")}\r\n                </Button>\r\n              </form>\r\n            </CardContent>\r\n          </Card>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageCentered;\r\n"
     },
     {
       "path": "contact-page-centered/lang/en.json",
       "type": "registry:lang",
       "target": "$modules$/contact-page-centered/lang/en.json",
-      "content": "{\r\n  \"title\": \"Contact Us\",\r\n  \"subtitle\": \"This subtitle appears below your contact page heading. Use it to encourage visitors to reach out, explain your availability, or highlight your commitment to customer service. Customize with Promake to reflect your brand's communication style.\",\r\n  \"emailTitle\": \"Email\",\r\n  \"phoneTitle\": \"Phone\",\r\n  \"addressTitle\": \"Address\",\r\n  \"nameLabel\": \"Name\",\r\n  \"namePlaceholder\": \"Your name\",\r\n  \"emailLabel\": \"Email\",\r\n  \"emailPlaceholder\": \"your@email.com\",\r\n  \"messageLabel\": \"Message\",\r\n  \"messagePlaceholder\": \"How can we help you?\",\r\n  \"submit\": \"Send Message\",\r\n  \"sending\": \"Sending...\",\r\n  \"success\": \"Message sent successfully! We'll get back to you soon.\",\r\n  \"error\": \"Something went wrong. Please try again.\"\r\n}\r\n"
+      "content": "{\r\n  \"title\": \"Contact Us\",\r\n  \"subtitle\": \"This subtitle appears below your contact page heading. Use it to encourage visitors to reach out, explain your availability, or highlight your commitment to customer service. Customize with Promake to reflect your brand's communication style.\",\r\n  \"emailTitle\": \"Email\",\r\n  \"phoneTitle\": \"Phone\",\r\n  \"addressTitle\": \"Address\",\r\n  \"nameLabel\": \"Name\",\r\n  \"namePlaceholder\": \"Your name\",\r\n  \"emailLabel\": \"Email\",\r\n  \"emailPlaceholder\": \"your@email.com\",\r\n  \"messageLabel\": \"Message\",\r\n  \"messagePlaceholder\": \"How can we help you?\",\r\n  \"submit\": \"Send Message\",\r\n  \"sending\": \"Sending...\",\r\n  \"success\": \"Message sent successfully! We'll get back to you soon.\",\r\n  \"error\": \"Something went wrong. Please try again.\",\r\n  \"addFiles\": \"Add Files\",\r\n  \"maxFilesReached\": \"Maximum files reached\",\r\n  \"maxFilesLimit\": \"You can add up to {{max}} files\"\r\n}\r\n"
     },
     {
       "path": "contact-page-centered/lang/tr.json",
       "type": "registry:lang",
       "target": "$modules$/contact-page-centered/lang/tr.json",
-      "content": "{\r\n  \"title\": \"İletişim\",\r\n  \"subtitle\": \"Bu alt başlık iletişim sayfası başlığınızın altında görünür. Ziyaretçileri iletişime geçmeye teşvik etmek, müsaitliğinizi açıklamak veya müşteri hizmetlerine olan bağlılığınızı vurgulamak için kullanın. Promake ile markanızın iletişim tarzını yansıtacak şekilde özelleştirin.\",\r\n  \"emailTitle\": \"E-posta\",\r\n  \"phoneTitle\": \"Telefon\",\r\n  \"addressTitle\": \"Adres\",\r\n  \"nameLabel\": \"İsim\",\r\n  \"namePlaceholder\": \"Adınız\",\r\n  \"emailLabel\": \"E-posta\",\r\n  \"emailPlaceholder\": \"email@adresiniz.com\",\r\n  \"messageLabel\": \"Mesaj\",\r\n  \"messagePlaceholder\": \"Size nasıl yardımcı olabiliriz?\",\r\n  \"submit\": \"Mesaj Gönder\",\r\n  \"sending\": \"Gönderiliyor...\",\r\n  \"success\": \"Mesajınız başarıyla gönderildi! En kısa sürede size döneceğiz.\",\r\n  \"error\": \"Bir şeyler yanlış gitti. Lütfen tekrar deneyin.\"\r\n}\r\n"
+      "content": "{\r\n  \"title\": \"İletişim\",\r\n  \"subtitle\": \"Bu alt başlık iletişim sayfası başlığınızın altında görünür. Ziyaretçileri iletişime geçmeye teşvik etmek, müsaitliğinizi açıklamak veya müşteri hizmetlerine olan bağlılığınızı vurgulamak için kullanın. Promake ile markanızın iletişim tarzını yansıtacak şekilde özelleştirin.\",\r\n  \"emailTitle\": \"E-posta\",\r\n  \"phoneTitle\": \"Telefon\",\r\n  \"addressTitle\": \"Adres\",\r\n  \"nameLabel\": \"İsim\",\r\n  \"namePlaceholder\": \"Adınız\",\r\n  \"emailLabel\": \"E-posta\",\r\n  \"emailPlaceholder\": \"email@adresiniz.com\",\r\n  \"messageLabel\": \"Mesaj\",\r\n  \"messagePlaceholder\": \"Size nasıl yardımcı olabiliriz?\",\r\n  \"submit\": \"Mesaj Gönder\",\r\n  \"sending\": \"Gönderiliyor...\",\r\n  \"success\": \"Mesajınız başarıyla gönderildi! En kısa sürede size döneceğiz.\",\r\n  \"error\": \"Bir şeyler yanlış gitti. Lütfen tekrar deneyin.\",\r\n  \"addFiles\": \"Dosya Ekle\",\r\n  \"maxFilesReached\": \"Maksimum dosya sayısına ulaşıldı\",\r\n  \"maxFilesLimit\": \"En fazla {{max}} kadar dosya ekleyebilirsiniz\"\r\n}\r\n"
     }
   ],
   "exports": {

package/dist/registry/contact-page-map-overlay.json

@@ -30,19 +30,19 @@
       "path": "contact-page-map-overlay/contact-page-map-overlay.tsx",
       "type": "registry:component",
       "target": "$modules$/contact-page-map-overlay/contact-page-map-overlay.tsx",
-      "content": "import React, { useState, useMemo, useEffect } from \"react\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { useTranslation } from \"react-i18next\";\nimport { Layout } from \"@/components/Layout\";\nimport { useApiService } from \"@/lib/api\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Label } from \"@/components/ui/label\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport {\n  Mail,\n  Phone,\n  MapPin,\n  Facebook,\n  Twitter,\n  Instagram,\n  Linkedin,\n  Send,\n  ExternalLink,\n} from \"lucide-react\";\nimport constants from \"@/constants/constants.json\";\nimport { GoogleMap } from \"@/modules/google-map\";\n\nconst socialIcons: Record<string, React.ElementType> = {\n  facebook: Facebook,\n  twitter: Twitter,\n  instagram: Instagram,\n  linkedin: Linkedin,\n};\n\nexport function ContactPageMapOverlay() {\n  const { t } = useTranslation(\"contact-page-map-overlay\");\n  usePageTitle({ title: t(\"title\") });\n\n  const apiService = useApiService();\n\n  const socialLinks = useMemo(() => {\n    const socialMedia = constants.socialMedia as\n      | Record<string, string>\n      | undefined;\n    if (!socialMedia) return [];\n    return Object.entries(socialMedia)\n      .filter(([platform, url]) => url && socialIcons[platform])\n      .map(([platform, url]) => ({\n        platform,\n        url,\n        Icon: socialIcons[platform],\n      }));\n  }, []);\n\n  const [formData, setFormData] = useState({\n    name: \"\",\n    email: \"\",\n    message: \"\",\n  });\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [submitStatus, setSubmitStatus] = useState<\n    \"idle\" | \"success\" | \"error\"\n  >(\"idle\");\n\n  // Auto-reset status after 5 seconds with proper cleanup\n  useEffect(() => {\n    if (submitStatus === \"idle\") return;\n    const timer = setTimeout(() => setSubmitStatus(\"idle\"), 5000);\n    return () => clearTimeout(timer);\n  }, [submitStatus]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setIsSubmitting(true);\n    setSubmitStatus(\"idle\");\n\n    try {\n      const currentLanguage = constants.site.defaultLanguage;\n\n      await apiService.submitForm(\n        formData,\n        {\n          email_subject1: \"Thank you for contacting us\",\n          email_subject2: \"New Contact Form Submission\",\n          fields: [\n            { name: \"name\", required: true },\n            { name: \"email\", required: true },\n            { name: \"message\", required: true },\n          ],\n        },\n        currentLanguage\n      );\n\n      setSubmitStatus(\"success\");\n      setFormData({\n        name: \"\",\n        email: \"\",\n        message: \"\",\n      });\n    } catch (error: unknown) {\n      console.error(\"Form submission failed:\", error);\n      setSubmitStatus(\"error\");\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const handleChange = (\n    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    setFormData((prev) => ({\n      ...prev,\n      [e.target.name]: e.target.value,\n    }));\n  };\n\n  // Default coordinates (can be customized via constants)\n  const mapLatitude = (constants as any).location?.latitude || 41.0082;\n  const mapLongitude = (constants as any).location?.longitude || 28.9784;\n\n  return (\n    <Layout>\n      <div className=\"relative min-h-[calc(100vh-4rem)]\">\n        {/* Full-screen Map Background */}\n        <div className=\"absolute inset-0\">\n          <GoogleMap\n            latitude={mapLatitude}\n            longitude={mapLongitude}\n            zoom={14}\n            height=\"100%\"\n            className=\"rounded-none border-0 h-full\"\n            title={t(\"mapTitle\")}\n          />\n          {/* Dark overlay for better readability */}\n          <div className=\"absolute inset-0 bg-black/30 pointer-events-none\" />\n        </div>\n\n        {/* Content Overlay */}\n        <div className=\"relative z-10 min-h-[calc(100vh-4rem)] flex items-center py-12 px-4\">\n          <div className=\"w-full max-w-[var(--container-max-width)] mx-auto\">\n            <div className=\"grid lg:grid-cols-2 gap-8 items-stretch\">\n              {/* Form Card - Glassmorphism */}\n              <Card className=\"backdrop-blur-xl bg-background/85 dark:bg-background/90 border-white/20 shadow-2xl\">\n                <CardHeader>\n                  <CardTitle className=\"text-2xl lg:text-3xl\">\n                    {t(\"title\")}\n                  </CardTitle>\n                  <p className=\"text-muted-foreground mt-2\">\n                    {t(\"description\")}\n                  </p>\n                </CardHeader>\n                <CardContent>\n                  <form onSubmit={handleSubmit} className=\"space-y-5\">\n                    <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                      <div>\n                        <Label htmlFor=\"name\" className=\"text-sm font-medium\">\n                          {t(\"fullName\")} *\n                        </Label>\n                        <Input\n                          id=\"name\"\n                          name=\"name\"\n                          type=\"text\"\n                          value={formData.name}\n                          onChange={handleChange}\n                          placeholder={t(\"fullNamePlaceholder\")}\n                          required\n                          className=\"mt-1.5 bg-background/50\"\n                        />\n                      </div>\n                      <div>\n                        <Label htmlFor=\"email\" className=\"text-sm font-medium\">\n                          {t(\"emailAddress\")} *\n                        </Label>\n                        <Input\n                          id=\"email\"\n                          name=\"email\"\n                          type=\"email\"\n                          value={formData.email}\n                          onChange={handleChange}\n                          placeholder={t(\"emailPlaceholder\")}\n                          required\n                          className=\"mt-1.5 bg-background/50\"\n                        />\n                      </div>\n                    </div>\n\n                    <div>\n                      <Label htmlFor=\"message\" className=\"text-sm font-medium\">\n                        {t(\"message\")} *\n                      </Label>\n                      <Textarea\n                        id=\"message\"\n                        name=\"message\"\n                        value={formData.message}\n                        onChange={handleChange}\n                        placeholder={t(\"messagePlaceholder\")}\n                        required\n                        rows={4}\n                        className=\"mt-1.5 resize-none bg-background/50\"\n                      />\n                    </div>\n\n                    {submitStatus === \"success\" && (\n                      <div className=\"p-3 bg-green-500/10 border border-green-500/30 rounded-lg\">\n                        <p className=\"text-green-600 dark:text-green-400 text-sm\">\n                          {t(\"success\")}\n                        </p>\n                      </div>\n                    )}\n\n                    {submitStatus === \"error\" && (\n                      <div className=\"p-3 bg-destructive/10 border border-destructive/30 rounded-lg\">\n                        <p className=\"text-destructive text-sm\">{t(\"error\")}</p>\n                      </div>\n                    )}\n\n                    <Button\n                      type=\"submit\"\n                      size=\"lg\"\n                      className=\"w-full\"\n                      disabled={isSubmitting}\n                    >\n                      {isSubmitting ? (\n                        <>\n                          <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\n                          {t(\"sending\")}\n                        </>\n                      ) : (\n                        <>\n                          <Send className=\"w-4 h-4 mr-2\" />\n                          {t(\"submit\")}\n                        </>\n                      )}\n                    </Button>\n                  </form>\n                </CardContent>\n              </Card>\n\n              {/* Contact Info Card - Glassmorphism */}\n              <Card className=\"backdrop-blur-xl bg-background/85 dark:bg-background/90 border-white/20 shadow-2xl\">\n                <CardHeader>\n                  <CardTitle>{t(\"contactInfo\")}</CardTitle>\n                </CardHeader>\n                <CardContent className=\"space-y-5\">\n                  <div className=\"flex items-start gap-4\">\n                    <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\n                      <Mail className=\"w-5 h-5 text-primary\" />\n                    </div>\n                    <div>\n                      <p className=\"text-sm text-muted-foreground\">{t(\"email\")}</p>\n                      <a\n                        href={`mailto:${constants.email}`}\n                        className=\"font-medium hover:text-primary transition-colors\"\n                      >\n                        {constants.email}\n                      </a>\n                    </div>\n                  </div>\n\n                  <div className=\"flex items-start gap-4\">\n                    <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\n                      <Phone className=\"w-5 h-5 text-primary\" />\n                    </div>\n                    <div>\n                      <p className=\"text-sm text-muted-foreground\">{t(\"phone\")}</p>\n                      <a\n                        href={`tel:${constants.phone}`}\n                        className=\"font-medium hover:text-primary transition-colors\"\n                      >\n                        {constants.phone}\n                      </a>\n                    </div>\n                  </div>\n\n                  <div className=\"flex items-start gap-4\">\n                    <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\n                      <MapPin className=\"w-5 h-5 text-primary\" />\n                    </div>\n                    <div>\n                      <p className=\"text-sm text-muted-foreground\">{t(\"address\")}</p>\n                      <p className=\"font-medium\">\n                        {constants.address.line1}\n                        <br />\n                        {constants.address.city}, {constants.address.state} {constants.address.postalCode}\n                      </p>\n                    </div>\n                  </div>\n\n                  {/* Open in Maps Link */}\n                  <a\n                    href={`https://www.google.com/maps?q=${mapLatitude},${mapLongitude}`}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"inline-flex items-center gap-2 text-sm text-primary hover:underline mt-2\"\n                  >\n                    <ExternalLink className=\"w-4 h-4\" />\n                    {t(\"openInMaps\")}\n                  </a>\n\n                  {/* Social Links */}\n                  {socialLinks.length > 0 && (\n                    <div className=\"pt-4 border-t\">\n                      <p className=\"text-sm text-muted-foreground mb-3\">\n                        {t(\"followUs\")}\n                      </p>\n                      <div className=\"flex gap-2\">\n                        {socialLinks.map(({ platform, url, Icon }) => (\n                          <a\n                            key={platform}\n                            href={url}\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            className=\"h-10 w-10 flex items-center justify-center rounded-full border text-muted-foreground hover:text-primary hover:border-primary transition-colors\"\n                          >\n                            <Icon className=\"h-4 w-4\" />\n                          </a>\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Layout>\n  );\n}\n\nexport default ContactPageMapOverlay;\n"
+      "content": "import React, { useState, useMemo, useEffect, useRef } from \"react\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\r\nimport {\r\n  Mail,\r\n  Phone,\r\n  MapPin,\r\n  Facebook,\r\n  Twitter,\r\n  Instagram,\r\n  Linkedin,\r\n  Send,\r\n  ExternalLink,\r\n  Upload,\r\n} from \"lucide-react\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { GoogleMap } from \"@/modules/google-map\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\n\r\nconst socialIcons: Record<string, React.ElementType> = {\r\n  facebook: Facebook,\r\n  twitter: Twitter,\r\n  instagram: Instagram,\r\n  linkedin: Linkedin,\r\n};\r\n\r\nexport function ContactPageMapOverlay() {\r\n  const { t } = useTranslation(\"contact-page-map-overlay\");\r\n  usePageTitle({ title: t(\"title\") });\r\n\r\n  const apiService = useApiService();\r\n\r\n  const socialLinks = useMemo(() => {\r\n    const socialMedia = constants.socialMedia as\r\n      | Record<string, string>\r\n      | undefined;\r\n    if (!socialMedia) return [];\r\n    return Object.entries(socialMedia)\r\n      .filter(([platform, url]) => url && socialIcons[platform])\r\n      .map(([platform, url]) => ({\r\n        platform,\r\n        url,\r\n        Icon: socialIcons[platform],\r\n      }));\r\n  }, []);\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[]\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\r\n    \"idle\" | \"success\" | \"error\"\r\n  >(\"idle\");\r\n  const fileInputRef = useRef<HTMLInputElement>(null);\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n    const maxFiles = constants.file?.maxFiles || 5;\r\n\r\n    const remainingSlots = maxFiles - formData.attachments.length;\r\n\r\n    // If the limit is exceeded, alert and do not add any files\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: maxFiles }));\r\n      e.target.value = ''; // Clear the input\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n\r\n  // Auto-reset status after 5 seconds with proper cleanup\r\n  useEffect(() => {\r\n    if (submitStatus === \"idle\") return;\r\n    const timer = setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    return () => clearTimeout(timer);\r\n  }, [submitStatus]);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n    try {\r\n      const currentLanguage = constants.site.defaultLanguage;\r\n\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        currentLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({\r\n        name: \"\",\r\n        email: \"\",\r\n        message: \"\",\r\n        attachments: []\r\n      });\r\n    } catch (error: unknown) {\r\n      console.error(\"Form submission failed:\", error);\r\n      setSubmitStatus(\"error\");\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (\r\n    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\r\n  ) => {\r\n    setFormData((prev) => ({\r\n      ...prev,\r\n      [e.target.name]: e.target.value,\r\n    }));\r\n  };\r\n\r\n  // Default coordinates (can be customized via constants)\r\n  const mapLatitude = (constants as any).location?.latitude || 41.0082;\r\n  const mapLongitude = (constants as any).location?.longitude || 28.9784;\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"relative min-h-[calc(100vh-4rem)]\">\r\n        {/* Full-screen Map Background */}\r\n        <div className=\"absolute inset-0\">\r\n          <GoogleMap\r\n            latitude={mapLatitude}\r\n            longitude={mapLongitude}\r\n            zoom={14}\r\n            height=\"100%\"\r\n            className=\"rounded-none border-0 h-full\"\r\n            title={t(\"mapTitle\")}\r\n          />\r\n          {/* Dark overlay for better readability */}\r\n          <div className=\"absolute inset-0 bg-black/30 pointer-events-none\" />\r\n        </div>\r\n\r\n        {/* Content Overlay */}\r\n        <div className=\"relative z-10 min-h-[calc(100vh-4rem)] flex items-center py-12 px-4\">\r\n          <div className=\"w-full max-w-[var(--container-max-width)] mx-auto\">\r\n            <div className=\"grid lg:grid-cols-2 gap-8 items-stretch\">\r\n              {/* Form Card - Glassmorphism */}\r\n              <Card className=\"backdrop-blur-xl bg-background/85 dark:bg-background/90 border-white/20 shadow-2xl\">\r\n                <CardHeader>\r\n                  <CardTitle className=\"text-2xl lg:text-3xl\">\r\n                    {t(\"title\")}\r\n                  </CardTitle>\r\n                  <p className=\"text-muted-foreground mt-2\">\r\n                    {t(\"description\")}\r\n                  </p>\r\n                </CardHeader>\r\n                <CardContent>\r\n                  <form onSubmit={handleSubmit} className=\"space-y-5\">\r\n                    <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n                      <div>\r\n                        <Label htmlFor=\"name\" className=\"text-sm font-medium\">\r\n                          {t(\"fullName\")} *\r\n                        </Label>\r\n                        <Input\r\n                          id=\"name\"\r\n                          name=\"name\"\r\n                          type=\"text\"\r\n                          value={formData.name}\r\n                          onChange={handleChange}\r\n                          placeholder={t(\"fullNamePlaceholder\")}\r\n                          required\r\n                          className=\"mt-1.5 bg-background/50\"\r\n                        />\r\n                      </div>\r\n                      <div>\r\n                        <Label htmlFor=\"email\" className=\"text-sm font-medium\">\r\n                          {t(\"emailAddress\")} *\r\n                        </Label>\r\n                        <Input\r\n                          id=\"email\"\r\n                          name=\"email\"\r\n                          type=\"email\"\r\n                          value={formData.email}\r\n                          onChange={handleChange}\r\n                          placeholder={t(\"emailPlaceholder\")}\r\n                          required\r\n                          className=\"mt-1.5 bg-background/50\"\r\n                        />\r\n                      </div>\r\n                    </div>\r\n\r\n                    <div>\r\n                      <Label htmlFor=\"message\" className=\"text-sm font-medium\">\r\n                        {t(\"message\")} *\r\n                      </Label>\r\n                      <Textarea\r\n                        id=\"message\"\r\n                        name=\"message\"\r\n                        value={formData.message}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"messagePlaceholder\")}\r\n                        required\r\n                        rows={4}\r\n                        className=\"mt-1.5 resize-none bg-background/50\"\r\n                      />\r\n                    </div>\r\n                    <FormFileInput\r\n                    files={formData.attachments}\r\n                    onFilesChange={handleFileUploadChange}\r\n                    handleRemoveFile={handleRemoveFile}\r\n                    maxFiles={constants.file?.maxFiles || 5}\r\n                    accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                    disabled={isSubmitting}\r\n                    uploadButtonText={t(\"addFiles\")}\r\n                    maxFilesReachedText={t(\"maxFilesReached\")}\r\n                  />\r\n                    {submitStatus === \"success\" && (\r\n                      <div className=\"p-3 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                        <p className=\"text-green-600 dark:text-green-400 text-sm\">\r\n                          {t(\"success\")}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    {submitStatus === \"error\" && (\r\n                      <div className=\"p-3 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                        <p className=\"text-destructive text-sm\">{t(\"error\")}</p>\r\n                      </div>\r\n                    )}\r\n\r\n                    <Button\r\n                      type=\"submit\"\r\n                      size=\"lg\"\r\n                      className=\"w-full\"\r\n                      disabled={isSubmitting}\r\n                    >\r\n                      {isSubmitting ? (\r\n                        <>\r\n                          <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                          {t(\"sending\")}\r\n                        </>\r\n                      ) : (\r\n                        <>\r\n                          <Send className=\"w-4 h-4 mr-2\" />\r\n                          {t(\"submit\")}\r\n                        </>\r\n                      )}\r\n                    </Button>\r\n                  </form>\r\n                </CardContent>\r\n              </Card>\r\n\r\n              {/* Contact Info Card - Glassmorphism */}\r\n              <Card className=\"backdrop-blur-xl bg-background/85 dark:bg-background/90 border-white/20 shadow-2xl\">\r\n                <CardHeader>\r\n                  <CardTitle>{t(\"contactInfo\")}</CardTitle>\r\n                </CardHeader>\r\n                <CardContent className=\"space-y-5\">\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Mail className=\"w-5 h-5 text-primary\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"text-sm text-muted-foreground\">{t(\"email\")}</p>\r\n                      <a\r\n                        href={`mailto:${constants.email}`}\r\n                        className=\"font-medium hover:text-primary transition-colors\"\r\n                      >\r\n                        {constants.email}\r\n                      </a>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Phone className=\"w-5 h-5 text-primary\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"text-sm text-muted-foreground\">{t(\"phone\")}</p>\r\n                      <a\r\n                        href={`tel:${constants.phone}`}\r\n                        className=\"font-medium hover:text-primary transition-colors\"\r\n                      >\r\n                        {constants.phone}\r\n                      </a>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\r\n                      <MapPin className=\"w-5 h-5 text-primary\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"text-sm text-muted-foreground\">{t(\"address\")}</p>\r\n                      <p className=\"font-medium\">\r\n                        {constants.address.line1}\r\n                        <br />\r\n                        {constants.address.city}, {constants.address.state} {constants.address.postalCode}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  {/* Open in Maps Link */}\r\n                  <a\r\n                    href={`https://www.google.com/maps?q=${mapLatitude},${mapLongitude}`}\r\n                    target=\"_blank\"\r\n                    rel=\"noopener noreferrer\"\r\n                    className=\"inline-flex items-center gap-2 text-sm text-primary hover:underline mt-2\"\r\n                  >\r\n                    <ExternalLink className=\"w-4 h-4\" />\r\n                    {t(\"openInMaps\")}\r\n                  </a>\r\n\r\n                  {/* Social Links */}\r\n                  {socialLinks.length > 0 && (\r\n                    <div className=\"pt-4 border-t\">\r\n                      <p className=\"text-sm text-muted-foreground mb-3\">\r\n                        {t(\"followUs\")}\r\n                      </p>\r\n                      <div className=\"flex gap-2\">\r\n                        {socialLinks.map(({ platform, url, Icon }) => (\r\n                          <a\r\n                            key={platform}\r\n                            href={url}\r\n                            target=\"_blank\"\r\n                            rel=\"noopener noreferrer\"\r\n                            className=\"h-10 w-10 flex items-center justify-center rounded-full border text-muted-foreground hover:text-primary hover:border-primary transition-colors\"\r\n                          >\r\n                            <Icon className=\"h-4 w-4\" />\r\n                          </a>\r\n                        ))}\r\n                      </div>\r\n                    </div>\r\n                  )}\r\n                </CardContent>\r\n              </Card>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageMapOverlay;\r\n"
     },
     {
       "path": "contact-page-map-overlay/lang/en.json",
       "type": "registry:lang",
       "target": "$modules$/contact-page-map-overlay/lang/en.json",
-      "content": "{\n  \"title\": \"Contact Us\",\n  \"description\": \"We'd love to hear from you. Send us a message and we'll respond as soon as possible.\",\n  \"contactInfo\": \"Contact Information\",\n  \"email\": \"Email\",\n  \"phone\": \"Phone\",\n  \"address\": \"Address\",\n  \"fullName\": \"Full Name\",\n  \"fullNamePlaceholder\": \"Your name\",\n  \"emailAddress\": \"Email Address\",\n  \"emailPlaceholder\": \"your@email.com\",\n  \"message\": \"Message\",\n  \"messagePlaceholder\": \"How can we help you?\",\n  \"submit\": \"Send Message\",\n  \"sending\": \"Sending...\",\n  \"success\": \"Message sent successfully! We'll get back to you soon.\",\n  \"error\": \"Something went wrong. Please try again.\",\n  \"followUs\": \"Follow us\",\n  \"mapTitle\": \"Our Location\",\n  \"openInMaps\": \"Open in Google Maps\"\n}\n"
+      "content": "{\r\n  \"title\": \"Contact Us\",\r\n  \"description\": \"We'd love to hear from you. Send us a message and we'll respond as soon as possible.\",\r\n  \"contactInfo\": \"Contact Information\",\r\n  \"email\": \"Email\",\r\n  \"phone\": \"Phone\",\r\n  \"address\": \"Address\",\r\n  \"fullName\": \"Full Name\",\r\n  \"fullNamePlaceholder\": \"Your name\",\r\n  \"emailAddress\": \"Email Address\",\r\n  \"emailPlaceholder\": \"your@email.com\",\r\n  \"message\": \"Message\",\r\n  \"messagePlaceholder\": \"How can we help you?\",\r\n  \"submit\": \"Send Message\",\r\n  \"sending\": \"Sending...\",\r\n  \"success\": \"Message sent successfully! We'll get back to you soon.\",\r\n  \"error\": \"Something went wrong. Please try again.\",\r\n  \"followUs\": \"Follow us\",\r\n  \"mapTitle\": \"Our Location\",\r\n  \"openInMaps\": \"Open in Google Maps\",\r\n  \"addFiles\": \"Add Files\",\r\n  \"maxFilesReached\": \"Maximum files reached\",\r\n  \"maxFilesLimit\": \"You can add up to {{max}} files\"\r\n}\r\n"
     },
     {
       "path": "contact-page-map-overlay/lang/tr.json",
       "type": "registry:lang",
       "target": "$modules$/contact-page-map-overlay/lang/tr.json",
-      "content": "{\n  \"title\": \"Bize Ulaşın\",\n  \"description\": \"Sizden haber almak isteriz. Bize mesaj gönderin, en kısa sürede yanıtlayacağız.\",\n  \"contactInfo\": \"İletişim Bilgileri\",\n  \"email\": \"E-posta\",\n  \"phone\": \"Telefon\",\n  \"address\": \"Adres\",\n  \"fullName\": \"Ad Soyad\",\n  \"fullNamePlaceholder\": \"Adınız\",\n  \"emailAddress\": \"E-posta Adresi\",\n  \"emailPlaceholder\": \"email@adresiniz.com\",\n  \"message\": \"Mesaj\",\n  \"messagePlaceholder\": \"Size nasıl yardımcı olabiliriz?\",\n  \"submit\": \"Mesaj Gönder\",\n  \"sending\": \"Gönderiliyor...\",\n  \"success\": \"Mesaj başarıyla gönderildi! En kısa sürede yanıtlayacağız.\",\n  \"error\": \"Bir hata oluştu. Lütfen tekrar deneyin.\",\n  \"followUs\": \"Bizi takip edin\",\n  \"mapTitle\": \"Konumumuz\",\n  \"openInMaps\": \"Google Maps'te Aç\"\n}\n"
+      "content": "{\r\n  \"title\": \"Bize Ulaşın\",\r\n  \"description\": \"Sizden haber almak isteriz. Bize mesaj gönderin, en kısa sürede yanıtlayacağız.\",\r\n  \"contactInfo\": \"İletişim Bilgileri\",\r\n  \"email\": \"E-posta\",\r\n  \"phone\": \"Telefon\",\r\n  \"address\": \"Adres\",\r\n  \"fullName\": \"Ad Soyad\",\r\n  \"fullNamePlaceholder\": \"Adınız\",\r\n  \"emailAddress\": \"E-posta Adresi\",\r\n  \"emailPlaceholder\": \"email@adresiniz.com\",\r\n  \"message\": \"Mesaj\",\r\n  \"messagePlaceholder\": \"Size nasıl yardımcı olabiliriz?\",\r\n  \"submit\": \"Mesaj Gönder\",\r\n  \"sending\": \"Gönderiliyor...\",\r\n  \"success\": \"Mesaj başarıyla gönderildi! En kısa sürede yanıtlayacağız.\",\r\n  \"error\": \"Bir hata oluştu. Lütfen tekrar deneyin.\",\r\n  \"followUs\": \"Bizi takip edin\",\r\n  \"mapTitle\": \"Konumumuz\",\r\n  \"openInMaps\": \"Google Maps'te Aç\",\r\n  \"addFiles\": \"Dosya Ekle\",\r\n  \"maxFilesReached\": \"Maksimum dosya sayısına ulaşıldı\",\r\n  \"maxFilesLimit\": \"En fazla {{max}} kadar dosya ekleyebilirsiniz\"\r\n}\r\n"
     }
   ],
   "exports": {

package/dist/registry/contact-page-map-split.json

@@ -30,19 +30,19 @@
       "path": "contact-page-map-split/contact-page-map-split.tsx",
       "type": "registry:component",
       "target": "$modules$/contact-page-map-split/contact-page-map-split.tsx",
-      "content": "import React, { useState, useMemo, useEffect } from \"react\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { useTranslation } from \"react-i18next\";\nimport { Layout } from \"@/components/Layout\";\nimport { useApiService } from \"@/lib/api\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n  Mail,\n  Phone,\n  MapPin,\n  Facebook,\n  Twitter,\n  Instagram,\n  Linkedin,\n  Send,\n} from \"lucide-react\";\nimport constants from \"@/constants/constants.json\";\nimport { GoogleMap } from \"@/modules/google-map\";\n\nconst socialIcons: Record<string, React.ElementType> = {\n  facebook: Facebook,\n  twitter: Twitter,\n  instagram: Instagram,\n  linkedin: Linkedin,\n};\n\nexport function ContactPageMapSplit() {\n  const { t } = useTranslation(\"contact-page-map-split\");\n  usePageTitle({ title: t(\"title\") });\n\n  const apiService = useApiService();\n\n  const socialLinks = useMemo(() => {\n    const socialMedia = constants.socialMedia as\n      | Record<string, string>\n      | undefined;\n    if (!socialMedia) return [];\n    return Object.entries(socialMedia)\n      .filter(([platform, url]) => url && socialIcons[platform])\n      .map(([platform, url]) => ({\n        platform,\n        url,\n        Icon: socialIcons[platform],\n      }));\n  }, []);\n\n  const [formData, setFormData] = useState({\n    name: \"\",\n    email: \"\",\n    phone: \"\",\n    message: \"\",\n  });\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [submitStatus, setSubmitStatus] = useState<\n    \"idle\" | \"success\" | \"error\"\n  >(\"idle\");\n\n  // Auto-reset status after 5 seconds with proper cleanup\n  useEffect(() => {\n    if (submitStatus === \"idle\") return;\n    const timer = setTimeout(() => setSubmitStatus(\"idle\"), 5000);\n    return () => clearTimeout(timer);\n  }, [submitStatus]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setIsSubmitting(true);\n    setSubmitStatus(\"idle\");\n\n    try {\n      const currentLanguage = constants.site.defaultLanguage;\n\n      await apiService.submitForm(\n        formData,\n        {\n          email_subject1: \"Thank you for contacting us\",\n          email_subject2: \"New Contact Form Submission\",\n          fields: [\n            { name: \"name\", required: true },\n            { name: \"email\", required: true },\n            { name: \"phone\", required: false },\n            { name: \"message\", required: true },\n          ],\n        },\n        currentLanguage\n      );\n\n      setSubmitStatus(\"success\");\n      setFormData({\n        name: \"\",\n        email: \"\",\n        phone: \"\",\n        message: \"\",\n      });\n    } catch (error: unknown) {\n      console.error(\"Form submission failed:\", error);\n      setSubmitStatus(\"error\");\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const handleChange = (\n    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    setFormData((prev) => ({\n      ...prev,\n      [e.target.name]: e.target.value,\n    }));\n  };\n\n  // Default coordinates (can be customized via constants)\n  const mapLatitude = (constants as any).location?.latitude || 41.0082;\n  const mapLongitude = (constants as any).location?.longitude || 28.9784;\n\n  return (\n    <Layout>\n      <div className=\"min-h-screen flex flex-col lg:flex-row\">\n        {/* Left Side - Form & Info */}\n        <div className=\"w-full lg:w-1/2 bg-background py-12 lg:py-16 px-6 lg:px-12 flex flex-col justify-center\">\n          <div className=\"max-w-lg mx-auto w-full\">\n            {/* Header */}\n            <div className=\"mb-10\">\n              <h1 className=\"text-3xl lg:text-4xl font-bold text-foreground mb-3\">\n                {t(\"title\")}\n              </h1>\n              <p className=\"text-muted-foreground\">\n                {t(\"description\")}\n              </p>\n            </div>\n\n            {/* Contact Info Cards */}\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10\">\n              <div className=\"flex items-center gap-3 p-4 rounded-xl bg-muted/50\">\n                <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center\">\n                  <Mail className=\"w-5 h-5 text-primary\" />\n                </div>\n                <div className=\"min-w-0\">\n                  <p className=\"text-xs text-muted-foreground\">{t(\"email\")}</p>\n                  <p className=\"text-sm font-medium truncate\">{constants.email}</p>\n                </div>\n              </div>\n\n              <div className=\"flex items-center gap-3 p-4 rounded-xl bg-muted/50\">\n                <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center\">\n                  <Phone className=\"w-5 h-5 text-primary\" />\n                </div>\n                <div className=\"min-w-0\">\n                  <p className=\"text-xs text-muted-foreground\">{t(\"phone\")}</p>\n                  <p className=\"text-sm font-medium truncate\">{constants.phone}</p>\n                </div>\n              </div>\n\n              <div className=\"flex items-center gap-3 p-4 rounded-xl bg-muted/50 sm:col-span-2\">\n                <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\n                  <MapPin className=\"w-5 h-5 text-primary\" />\n                </div>\n                <div className=\"min-w-0\">\n                  <p className=\"text-xs text-muted-foreground\">{t(\"address\")}</p>\n                  <p className=\"text-sm font-medium\">\n                    {constants.address.line1}, {constants.address.city}\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            {/* Contact Form */}\n            <form onSubmit={handleSubmit} className=\"space-y-5\">\n              <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                <div>\n                  <Label htmlFor=\"name\" className=\"text-sm font-medium\">\n                    {t(\"fullName\")} *\n                  </Label>\n                  <Input\n                    id=\"name\"\n                    name=\"name\"\n                    type=\"text\"\n                    value={formData.name}\n                    onChange={handleChange}\n                    placeholder={t(\"fullNamePlaceholder\")}\n                    required\n                    className=\"mt-1.5\"\n                  />\n                </div>\n                <div>\n                  <Label htmlFor=\"email\" className=\"text-sm font-medium\">\n                    {t(\"emailAddress\")} *\n                  </Label>\n                  <Input\n                    id=\"email\"\n                    name=\"email\"\n                    type=\"email\"\n                    value={formData.email}\n                    onChange={handleChange}\n                    placeholder={t(\"emailPlaceholder\")}\n                    required\n                    className=\"mt-1.5\"\n                  />\n                </div>\n              </div>\n\n              <div>\n                <Label htmlFor=\"phone\" className=\"text-sm font-medium\">\n                  {t(\"phoneNumber\")}\n                </Label>\n                <Input\n                  id=\"phone\"\n                  name=\"phone\"\n                  type=\"tel\"\n                  value={formData.phone}\n                  onChange={handleChange}\n                  placeholder={t(\"phonePlaceholder\")}\n                  className=\"mt-1.5\"\n                />\n              </div>\n\n              <div>\n                <Label htmlFor=\"message\" className=\"text-sm font-medium\">\n                  {t(\"message\")} *\n                </Label>\n                <Textarea\n                  id=\"message\"\n                  name=\"message\"\n                  value={formData.message}\n                  onChange={handleChange}\n                  placeholder={t(\"messagePlaceholder\")}\n                  required\n                  rows={4}\n                  className=\"mt-1.5 resize-none\"\n                />\n              </div>\n\n              {submitStatus === \"success\" && (\n                <div className=\"p-3 bg-green-500/10 border border-green-500/30 rounded-lg\">\n                  <p className=\"text-green-600 dark:text-green-400 text-sm\">\n                    {t(\"success\")}\n                  </p>\n                </div>\n              )}\n\n              {submitStatus === \"error\" && (\n                <div className=\"p-3 bg-destructive/10 border border-destructive/30 rounded-lg\">\n                  <p className=\"text-destructive text-sm\">{t(\"error\")}</p>\n                </div>\n              )}\n\n              <Button\n                type=\"submit\"\n                size=\"lg\"\n                className=\"w-full\"\n                disabled={isSubmitting}\n              >\n                {isSubmitting ? (\n                  <>\n                    <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\n                    {t(\"sending\")}\n                  </>\n                ) : (\n                  <>\n                    <Send className=\"w-4 h-4 mr-2\" />\n                    {t(\"submit\")}\n                  </>\n                )}\n              </Button>\n            </form>\n\n            {/* Social Links */}\n            {socialLinks.length > 0 && (\n              <div className=\"mt-10 pt-6 border-t\">\n                <p className=\"text-sm text-muted-foreground mb-3\">\n                  {t(\"followUs\")}\n                </p>\n                <div className=\"flex gap-2\">\n                  {socialLinks.map(({ platform, url, Icon }) => (\n                    <a\n                      key={platform}\n                      href={url}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"h-10 w-10 flex items-center justify-center rounded-full border text-muted-foreground hover:text-primary hover:border-primary transition-colors\"\n                    >\n                      <Icon className=\"h-4 w-4\" />\n                    </a>\n                  ))}\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* Right Side - Map */}\n        <div className=\"w-full lg:w-1/2 h-[400px] lg:h-[calc(100vh-4rem)] relative\">\n          <GoogleMap\n            latitude={mapLatitude}\n            longitude={mapLongitude}\n            zoom={14}\n            height=\"100%\"\n            className=\"rounded-none border-0 h-full\"\n            title={t(\"mapTitle\")}\n          />\n        </div>\n      </div>\n    </Layout>\n  );\n}\n\nexport default ContactPageMapSplit;\n"
+      "content": "import React, { useState, useMemo, useEffect, useRef } from \"react\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport {\r\n  Mail,\r\n  Phone,\r\n  MapPin,\r\n  Facebook,\r\n  Twitter,\r\n  Instagram,\r\n  Linkedin,\r\n  Send,\r\n  Upload,\r\n} from \"lucide-react\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { GoogleMap } from \"@/modules/google-map\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\n\r\nconst socialIcons: Record<string, React.ElementType> = {\r\n  facebook: Facebook,\r\n  twitter: Twitter,\r\n  instagram: Instagram,\r\n  linkedin: Linkedin,\r\n};\r\n\r\nexport function ContactPageMapSplit() {\r\n  const { t } = useTranslation(\"contact-page-map-split\");\r\n  usePageTitle({ title: t(\"title\") });\r\n\r\n  const apiService = useApiService();\r\n\r\n  const socialLinks = useMemo(() => {\r\n    const socialMedia = constants.socialMedia as\r\n      | Record<string, string>\r\n      | undefined;\r\n    if (!socialMedia) return [];\r\n    return Object.entries(socialMedia)\r\n      .filter(([platform, url]) => url && socialIcons[platform])\r\n      .map(([platform, url]) => ({\r\n        platform,\r\n        url,\r\n        Icon: socialIcons[platform],\r\n      }));\r\n  }, []);\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    phone: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[]\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\r\n    \"idle\" | \"success\" | \"error\"\r\n  >(\"idle\");\r\n  const fileInputRef = useRef<HTMLInputElement>(null);\r\n\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n    const maxFiles = constants.file?.maxFiles || 5;\r\n\r\n    const remainingSlots = maxFiles - formData.attachments.length;\r\n\r\n    // If the limit is exceeded, alert and do not add any files\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: maxFiles }));\r\n      e.target.value = ''; // Clear the input\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n\r\n  // Auto-reset status after 5 seconds with proper cleanup\r\n  useEffect(() => {\r\n    if (submitStatus === \"idle\") return;\r\n    const timer = setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    return () => clearTimeout(timer);\r\n  }, [submitStatus]);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n\r\n    try {\r\n      const currentLanguage = constants.site.defaultLanguage;\r\n\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"phone\", required: false },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        currentLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({\r\n        name: \"\",\r\n        email: \"\",\r\n        phone: \"\",\r\n        message: \"\",\r\n        attachments: []\r\n      });\r\n    } catch (error: unknown) {\r\n      console.error(\"Form submission failed:\", error);\r\n      setSubmitStatus(\"error\");\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (\r\n    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\r\n  ) => {\r\n    setFormData((prev) => ({\r\n      ...prev,\r\n      [e.target.name]: e.target.value,\r\n    }));\r\n  };\r\n\r\n  // Default coordinates (can be customized via constants)\r\n  const mapLatitude = (constants as any).location?.latitude || 41.0082;\r\n  const mapLongitude = (constants as any).location?.longitude || 28.9784;\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"min-h-screen flex flex-col lg:flex-row\">\r\n        {/* Left Side - Form & Info */}\r\n        <div className=\"w-full lg:w-1/2 bg-background py-12 lg:py-16 px-6 lg:px-12 flex flex-col justify-center\">\r\n          <div className=\"max-w-lg mx-auto w-full\">\r\n            {/* Header */}\r\n            <div className=\"mb-10\">\r\n              <h1 className=\"text-3xl lg:text-4xl font-bold text-foreground mb-3\">\r\n                {t(\"title\")}\r\n              </h1>\r\n              <p className=\"text-muted-foreground\">\r\n                {t(\"description\")}\r\n              </p>\r\n            </div>\r\n\r\n            {/* Contact Info Cards */}\r\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10\">\r\n              <div className=\"flex items-center gap-3 p-4 rounded-xl bg-muted/50\">\r\n                <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center\">\r\n                  <Mail className=\"w-5 h-5 text-primary\" />\r\n                </div>\r\n                <div className=\"min-w-0\">\r\n                  <p className=\"text-xs text-muted-foreground\">{t(\"email\")}</p>\r\n                  <p className=\"text-sm font-medium truncate\">{constants.email}</p>\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"flex items-center gap-3 p-4 rounded-xl bg-muted/50\">\r\n                <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center\">\r\n                  <Phone className=\"w-5 h-5 text-primary\" />\r\n                </div>\r\n                <div className=\"min-w-0\">\r\n                  <p className=\"text-xs text-muted-foreground\">{t(\"phone\")}</p>\r\n                  <p className=\"text-sm font-medium truncate\">{constants.phone}</p>\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"flex items-center gap-3 p-4 rounded-xl bg-muted/50 sm:col-span-2\">\r\n                <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\r\n                  <MapPin className=\"w-5 h-5 text-primary\" />\r\n                </div>\r\n                <div className=\"min-w-0\">\r\n                  <p className=\"text-xs text-muted-foreground\">{t(\"address\")}</p>\r\n                  <p className=\"text-sm font-medium\">\r\n                    {constants.address.line1}, {constants.address.city}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            {/* Contact Form */}\r\n            <form onSubmit={handleSubmit} className=\"space-y-5\">\r\n              <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n                <div>\r\n                  <Label htmlFor=\"name\" className=\"text-sm font-medium\">\r\n                    {t(\"fullName\")} *\r\n                  </Label>\r\n                  <Input\r\n                    id=\"name\"\r\n                    name=\"name\"\r\n                    type=\"text\"\r\n                    value={formData.name}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"fullNamePlaceholder\")}\r\n                    required\r\n                    className=\"mt-1.5\"\r\n                  />\r\n                </div>\r\n                <div>\r\n                  <Label htmlFor=\"email\" className=\"text-sm font-medium\">\r\n                    {t(\"emailAddress\")} *\r\n                  </Label>\r\n                  <Input\r\n                    id=\"email\"\r\n                    name=\"email\"\r\n                    type=\"email\"\r\n                    value={formData.email}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"emailPlaceholder\")}\r\n                    required\r\n                    className=\"mt-1.5\"\r\n                  />\r\n                </div>\r\n              </div>\r\n\r\n              <div>\r\n                <Label htmlFor=\"phone\" className=\"text-sm font-medium\">\r\n                  {t(\"phoneNumber\")}\r\n                </Label>\r\n                <Input\r\n                  id=\"phone\"\r\n                  name=\"phone\"\r\n                  type=\"tel\"\r\n                  value={formData.phone}\r\n                  onChange={handleChange}\r\n                  placeholder={t(\"phonePlaceholder\")}\r\n                  className=\"mt-1.5\"\r\n                />\r\n              </div>\r\n\r\n              <div>\r\n                <Label htmlFor=\"message\" className=\"text-sm font-medium\">\r\n                  {t(\"message\")} *\r\n                </Label>\r\n                <Textarea\r\n                  id=\"message\"\r\n                  name=\"message\"\r\n                  value={formData.message}\r\n                  onChange={handleChange}\r\n                  placeholder={t(\"messagePlaceholder\")}\r\n                  required\r\n                  rows={4}\r\n                  className=\"mt-1.5 resize-none\"\r\n                />\r\n              </div>\r\n              <FormFileInput\r\n                files={formData.attachments}\r\n                onFilesChange={handleFileUploadChange}\r\n                handleRemoveFile={handleRemoveFile}\r\n                maxFiles={constants.file?.maxFiles || 5}\r\n                accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                disabled={isSubmitting}\r\n                uploadButtonText={t(\"addFiles\")}\r\n                maxFilesReachedText={t(\"maxFilesReached\")}\r\n              />\r\n              {submitStatus === \"success\" && (\r\n                <div className=\"p-3 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                  <p className=\"text-green-600 dark:text-green-400 text-sm\">\r\n                    {t(\"success\")}\r\n                  </p>\r\n                </div>\r\n              )}\r\n\r\n              {submitStatus === \"error\" && (\r\n                <div className=\"p-3 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                  <p className=\"text-destructive text-sm\">{t(\"error\")}</p>\r\n                </div>\r\n              )}\r\n\r\n              <Button\r\n                type=\"submit\"\r\n                size=\"lg\"\r\n                className=\"w-full\"\r\n                disabled={isSubmitting}\r\n              >\r\n                {isSubmitting ? (\r\n                  <>\r\n                    <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                    {t(\"sending\")}\r\n                  </>\r\n                ) : (\r\n                  <>\r\n                    <Send className=\"w-4 h-4 mr-2\" />\r\n                    {t(\"submit\")}\r\n                  </>\r\n                )}\r\n              </Button>\r\n            </form>\r\n\r\n            {/* Social Links */}\r\n            {socialLinks.length > 0 && (\r\n              <div className=\"mt-10 pt-6 border-t\">\r\n                <p className=\"text-sm text-muted-foreground mb-3\">\r\n                  {t(\"followUs\")}\r\n                </p>\r\n                <div className=\"flex gap-2\">\r\n                  {socialLinks.map(({ platform, url, Icon }) => (\r\n                    <a\r\n                      key={platform}\r\n                      href={url}\r\n                      target=\"_blank\"\r\n                      rel=\"noopener noreferrer\"\r\n                      className=\"h-10 w-10 flex items-center justify-center rounded-full border text-muted-foreground hover:text-primary hover:border-primary transition-colors\"\r\n                    >\r\n                      <Icon className=\"h-4 w-4\" />\r\n                    </a>\r\n                  ))}\r\n                </div>\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n\r\n        {/* Right Side - Map */}\r\n        <div className=\"w-full lg:w-1/2 h-[400px] lg:h-[calc(100vh-4rem)] relative\">\r\n          <GoogleMap\r\n            latitude={mapLatitude}\r\n            longitude={mapLongitude}\r\n            zoom={14}\r\n            height=\"100%\"\r\n            className=\"rounded-none border-0 h-full\"\r\n            title={t(\"mapTitle\")}\r\n          />\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageMapSplit;\r\n"
     },
     {
       "path": "contact-page-map-split/lang/en.json",
       "type": "registry:lang",
       "target": "$modules$/contact-page-map-split/lang/en.json",
-      "content": "{\n  \"title\": \"Get in Touch\",\n  \"description\": \"Have a question or want to work together? Fill out the form below and we'll get back to you as soon as possible.\",\n  \"email\": \"Email\",\n  \"phone\": \"Phone\",\n  \"address\": \"Address\",\n  \"fullName\": \"Full Name\",\n  \"fullNamePlaceholder\": \"Your name\",\n  \"emailAddress\": \"Email Address\",\n  \"emailPlaceholder\": \"your@email.com\",\n  \"phoneNumber\": \"Phone Number\",\n  \"phonePlaceholder\": \"+1 (555) 000-0000\",\n  \"message\": \"Message\",\n  \"messagePlaceholder\": \"How can we help you?\",\n  \"submit\": \"Send Message\",\n  \"sending\": \"Sending...\",\n  \"success\": \"Your message has been sent successfully! We'll get back to you soon.\",\n  \"error\": \"Something went wrong. Please try again later.\",\n  \"followUs\": \"Follow us on social media\",\n  \"mapTitle\": \"Our Location\"\n}\n"
+      "content": "{\r\n  \"title\": \"Get in Touch\",\r\n  \"description\": \"Have a question or want to work together? Fill out the form below and we'll get back to you as soon as possible.\",\r\n  \"email\": \"Email\",\r\n  \"phone\": \"Phone\",\r\n  \"address\": \"Address\",\r\n  \"fullName\": \"Full Name\",\r\n  \"fullNamePlaceholder\": \"Your name\",\r\n  \"emailAddress\": \"Email Address\",\r\n  \"emailPlaceholder\": \"your@email.com\",\r\n  \"phoneNumber\": \"Phone Number\",\r\n  \"phonePlaceholder\": \"+1 (555) 000-0000\",\r\n  \"message\": \"Message\",\r\n  \"messagePlaceholder\": \"How can we help you?\",\r\n  \"submit\": \"Send Message\",\r\n  \"sending\": \"Sending...\",\r\n  \"success\": \"Your message has been sent successfully! We'll get back to you soon.\",\r\n  \"error\": \"Something went wrong. Please try again later.\",\r\n  \"followUs\": \"Follow us on social media\",\r\n  \"mapTitle\": \"Our Location\",\r\n  \"addFiles\": \"Add Files\",\r\n  \"maxFilesReached\": \"Maximum files reached\",\r\n  \"maxFilesLimit\": \"You can add up to {{max}} files\"\r\n}\r\n"
     },
     {
       "path": "contact-page-map-split/lang/tr.json",
       "type": "registry:lang",
       "target": "$modules$/contact-page-map-split/lang/tr.json",
-      "content": "{\n  \"title\": \"Bize Ulaşın\",\n  \"description\": \"Sorunuz mu var veya birlikte çalışmak mı istiyorsunuz? Aşağıdaki formu doldurun, en kısa sürede size döneceğiz.\",\n  \"email\": \"E-posta\",\n  \"phone\": \"Telefon\",\n  \"address\": \"Adres\",\n  \"fullName\": \"Ad Soyad\",\n  \"fullNamePlaceholder\": \"Adınız\",\n  \"emailAddress\": \"E-posta Adresi\",\n  \"emailPlaceholder\": \"email@adresiniz.com\",\n  \"phoneNumber\": \"Telefon Numarası\",\n  \"phonePlaceholder\": \"+90 (555) 000 00 00\",\n  \"message\": \"Mesaj\",\n  \"messagePlaceholder\": \"Size nasıl yardımcı olabiliriz?\",\n  \"submit\": \"Mesaj Gönder\",\n  \"sending\": \"Gönderiliyor...\",\n  \"success\": \"Mesajınız başarıyla gönderildi! En kısa sürede size döneceğiz.\",\n  \"error\": \"Bir hata oluştu. Lütfen daha sonra tekrar deneyin.\",\n  \"followUs\": \"Sosyal medyada bizi takip edin\",\n  \"mapTitle\": \"Konumumuz\"\n}\n"
+      "content": "{\r\n  \"title\": \"Bize Ulaşın\",\r\n  \"description\": \"Sorunuz mu var veya birlikte çalışmak mı istiyorsunuz? Aşağıdaki formu doldurun, en kısa sürede size döneceğiz.\",\r\n  \"email\": \"E-posta\",\r\n  \"phone\": \"Telefon\",\r\n  \"address\": \"Adres\",\r\n  \"fullName\": \"Ad Soyad\",\r\n  \"fullNamePlaceholder\": \"Adınız\",\r\n  \"emailAddress\": \"E-posta Adresi\",\r\n  \"emailPlaceholder\": \"email@adresiniz.com\",\r\n  \"phoneNumber\": \"Telefon Numarası\",\r\n  \"phonePlaceholder\": \"+90 (555) 000 00 00\",\r\n  \"message\": \"Mesaj\",\r\n  \"messagePlaceholder\": \"Size nasıl yardımcı olabiliriz?\",\r\n  \"submit\": \"Mesaj Gönder\",\r\n  \"sending\": \"Gönderiliyor...\",\r\n  \"success\": \"Mesajınız başarıyla gönderildi! En kısa sürede size döneceğiz.\",\r\n  \"error\": \"Bir hata oluştu. Lütfen daha sonra tekrar deneyin.\",\r\n  \"followUs\": \"Sosyal medyada bizi takip edin\",\r\n  \"mapTitle\": \"Konumumuz\",\r\n  \"addFiles\": \"Dosya Ekle\",\r\n  \"maxFilesReached\": \"Maksimum dosya sayısına ulaşıldı\",\r\n  \"maxFilesLimit\": \"En fazla {{max}} kadar dosya ekleyebilirsiniz\"\r\n}\r\n"
     }
   ],
   "exports": {

package/dist/registry/contact-page-split.json

@@ -24,19 +24,19 @@
       "path": "contact-page-split/contact-page-split.tsx",
       "type": "registry:component",
       "target": "$modules$/contact-page-split/contact-page-split.tsx",
-      "content": "import React, { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Mail, Phone, MapPin, Clock } from \"lucide-react\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface ContactPageSplitProps {\r\n  className?: string;\r\n}\r\n\r\nexport function ContactPageSplit({ className }: ContactPageSplitProps) {\r\n  const { t } = useTranslation(\"contact-page-split\");\r\n  usePageTitle({ title: t(\"pageTitle\", \"Contact Us\") });\r\n  const apiService = useApiService();\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    phone: \"\",\r\n    message: \"\",\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\"idle\" | \"success\" | \"error\">(\"idle\");\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n\r\n    try {\r\n      await apiService.submitForm(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"phone\", required: false },\r\n            { name: \"message\", required: true },\r\n          ],\r\n        },\r\n        constants.site.defaultLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({ name: \"\", email: \"\", phone: \"\", message: \"\" });\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } catch {\r\n      setSubmitStatus(\"error\");\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className={cn(\"min-h-[calc(100vh-200px)] py-8 md:py-12\", className)}>\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n          <div className=\"grid lg:grid-cols-2 h-full rounded-xl overflow-hidden shadow-lg\">\r\n          {/* Left Side - Info & Image */}\r\n          <div className=\"relative bg-primary text-primary-foreground p-8 lg:p-12 flex flex-col justify-center\">\r\n            {/* Background Pattern */}\r\n            <div className=\"absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:4rem_4rem]\" />\r\n\r\n            <div className=\"relative z-10 max-w-lg\">\r\n              <h1 className=\"text-3xl lg:text-4xl font-bold mb-4\">\r\n                {t(\"title\", \"Let's Start a Conversation\")}\r\n              </h1>\r\n              <p className=\"text-primary-foreground/80 mb-8\">\r\n                {t(\"subtitle\", \"Have a project in mind? We'd love to hear about it. Get in touch and let's create something amazing together.\")}\r\n              </p>\r\n\r\n              <div className=\"space-y-6\">\r\n                <div className=\"flex items-start gap-4\">\r\n                  <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                    <Mail className=\"h-5 w-5\" />\r\n                  </div>\r\n                  <div>\r\n                    <p className=\"font-semibold\">{t(\"emailLabel\", \"Email\")}</p>\r\n                    <p className=\"text-primary-foreground/70\">{constants.email || \"hello@example.com\"}</p>\r\n                  </div>\r\n                </div>\r\n\r\n                <div className=\"flex items-start gap-4\">\r\n                  <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                    <Phone className=\"h-5 w-5\" />\r\n                  </div>\r\n                  <div>\r\n                    <p className=\"font-semibold\">{t(\"phoneLabel\", \"Phone\")}</p>\r\n                    <p className=\"text-primary-foreground/70\">{constants.phone || \"+1 234 567 890\"}</p>\r\n                  </div>\r\n                </div>\r\n\r\n                <div className=\"flex items-start gap-4\">\r\n                  <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                    <MapPin className=\"h-5 w-5\" />\r\n                  </div>\r\n                  <div>\r\n                    <p className=\"font-semibold\">{t(\"addressLabel\", \"Address\")}</p>\r\n                    <p className=\"text-primary-foreground/70\">\r\n                      {constants.address?.line1 || \"123 Main Street\"}<br />\r\n                      {constants.address?.city || \"New York\"}, {constants.address?.country || \"USA\"}\r\n                    </p>\r\n                  </div>\r\n                </div>\r\n\r\n                <div className=\"flex items-start gap-4\">\r\n                  <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                    <Clock className=\"h-5 w-5\" />\r\n                  </div>\r\n                  <div>\r\n                    <p className=\"font-semibold\">{t(\"hoursLabel\", \"Business Hours\")}</p>\r\n                    <p className=\"text-primary-foreground/70\">{t(\"hours\", \"Mon - Fri: 9:00 AM - 6:00 PM\")}</p>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          {/* Right Side - Form */}\r\n          <div className=\"p-8 lg:p-12 flex items-center justify-center bg-background\">\r\n            <div className=\"w-full max-w-md\">\r\n              <h2 className=\"text-2xl font-bold mb-2\">{t(\"formTitle\", \"Send us a message\")}</h2>\r\n              <p className=\"text-muted-foreground mb-8\">\r\n                {t(\"formSubtitle\", \"Fill out the form below and we'll get back to you as soon as possible.\")}\r\n              </p>\r\n\r\n              <form onSubmit={handleSubmit} className=\"space-y-5\">\r\n                <div>\r\n                  <Label htmlFor=\"name\">{t(\"nameLabel\", \"Full Name\")} *</Label>\r\n                  <Input\r\n                    id=\"name\"\r\n                    name=\"name\"\r\n                    value={formData.name}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"namePlaceholder\", \"John Doe\")}\r\n                    required\r\n                    className=\"mt-1\"\r\n                  />\r\n                </div>\r\n\r\n                <div>\r\n                  <Label htmlFor=\"email\">{t(\"emailInputLabel\", \"Email\")} *</Label>\r\n                  <Input\r\n                    id=\"email\"\r\n                    name=\"email\"\r\n                    type=\"email\"\r\n                    value={formData.email}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"emailPlaceholder\", \"john@example.com\")}\r\n                    required\r\n                    className=\"mt-1\"\r\n                  />\r\n                </div>\r\n\r\n                <div>\r\n                  <Label htmlFor=\"phone\">{t(\"phoneInputLabel\", \"Phone\")}</Label>\r\n                  <Input\r\n                    id=\"phone\"\r\n                    name=\"phone\"\r\n                    type=\"tel\"\r\n                    value={formData.phone}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"phonePlaceholder\", \"+1 234 567 890\")}\r\n                    className=\"mt-1\"\r\n                  />\r\n                </div>\r\n\r\n                <div>\r\n                  <Label htmlFor=\"message\">{t(\"messageLabel\", \"Message\")} *</Label>\r\n                  <Textarea\r\n                    id=\"message\"\r\n                    name=\"message\"\r\n                    value={formData.message}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"messagePlaceholder\", \"Tell us about your project...\")}\r\n                    required\r\n                    rows={5}\r\n                    className=\"mt-1 resize-none\"\r\n                  />\r\n                </div>\r\n\r\n                {submitStatus === \"success\" && (\r\n                  <div className=\"p-4 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                    <p className=\"text-green-600 dark:text-green-400 text-sm font-medium\">\r\n                      {t(\"success\", \"Message sent! We'll be in touch soon.\")}\r\n                    </p>\r\n                  </div>\r\n                )}\r\n\r\n                {submitStatus === \"error\" && (\r\n                  <div className=\"p-4 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                    <p className=\"text-destructive text-sm font-medium\">\r\n                      {t(\"error\", \"Something went wrong. Please try again.\")}\r\n                    </p>\r\n                  </div>\r\n                )}\r\n\r\n                <Button type=\"submit\" size=\"lg\" className=\"w-full\" disabled={isSubmitting}>\r\n                  {isSubmitting ? t(\"sending\", \"Sending...\") : t(\"submit\", \"Send Message\")}\r\n                </Button>\r\n              </form>\r\n            </div>\r\n          </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageSplit;\r\n"
+      "content": "import React, { useRef, useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Mail, Phone, MapPin, Clock } from \"lucide-react\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\n\r\ninterface ContactPageSplitProps {\r\n  className?: string;\r\n}\r\n\r\nexport function ContactPageSplit({ className }: ContactPageSplitProps) {\r\n  const { t } = useTranslation(\"contact-page-split\");\r\n  usePageTitle({ title: t(\"pageTitle\", \"Contact Us\") });\r\n  const apiService = useApiService();\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    phone: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[]\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\"idle\" | \"success\" | \"error\">(\"idle\");\r\n\r\n\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n    const fileMaxFiles = constants.file?.maxFiles || 5;\r\n\r\n    const remainingSlots = fileMaxFiles - formData.attachments.length;\r\n\r\n    // If the limit is exceeded, alert and do not add any files\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: fileMaxFiles }));\r\n      e.target.value = ''; // Clear the input\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n\r\n    try {\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"phone\", required: false },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        constants.site.defaultLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({ name: \"\", email: \"\", phone: \"\", message: \"\", attachments: [] });\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } catch {\r\n      setSubmitStatus(\"error\");\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className={cn(\"min-h-[calc(100vh-200px)] py-8 md:py-12\", className)}>\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n          <div className=\"grid lg:grid-cols-2 h-full rounded-xl overflow-hidden shadow-lg\">\r\n            {/* Left Side - Info & Image */}\r\n            <div className=\"relative bg-primary text-primary-foreground p-8 lg:p-12 flex flex-col justify-center\">\r\n              {/* Background Pattern */}\r\n              <div className=\"absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:4rem_4rem]\" />\r\n\r\n              <div className=\"relative z-10 max-w-lg\">\r\n                <h1 className=\"text-3xl lg:text-4xl font-bold mb-4\">\r\n                  {t(\"title\", \"Let's Start a Conversation\")}\r\n                </h1>\r\n                <p className=\"text-primary-foreground/80 mb-8\">\r\n                  {t(\"subtitle\", \"Have a project in mind? We'd love to hear about it. Get in touch and let's create something amazing together.\")}\r\n                </p>\r\n\r\n                <div className=\"space-y-6\">\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Mail className=\"h-5 w-5\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"font-semibold\">{t(\"emailLabel\", \"Email\")}</p>\r\n                      <p className=\"text-primary-foreground/70\">{constants.email || \"hello@example.com\"}</p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Phone className=\"h-5 w-5\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"font-semibold\">{t(\"phoneLabel\", \"Phone\")}</p>\r\n                      <p className=\"text-primary-foreground/70\">{constants.phone || \"+1 234 567 890\"}</p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                      <MapPin className=\"h-5 w-5\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"font-semibold\">{t(\"addressLabel\", \"Address\")}</p>\r\n                      <p className=\"text-primary-foreground/70\">\r\n                        {constants.address?.line1 || \"123 Main Street\"}<br />\r\n                        {constants.address?.city || \"New York\"}, {constants.address?.country || \"USA\"}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Clock className=\"h-5 w-5\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"font-semibold\">{t(\"hoursLabel\", \"Business Hours\")}</p>\r\n                      <p className=\"text-primary-foreground/70\">{t(\"hours\", \"Mon - Fri: 9:00 AM - 6:00 PM\")}</p>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            {/* Right Side - Form */}\r\n            <div className=\"p-8 lg:p-12 flex items-center justify-center bg-background\">\r\n              <div className=\"w-full max-w-md\">\r\n                <h2 className=\"text-2xl font-bold mb-2\">{t(\"formTitle\", \"Send us a message\")}</h2>\r\n                <p className=\"text-muted-foreground mb-8\">\r\n                  {t(\"formSubtitle\", \"Fill out the form below and we'll get back to you as soon as possible.\")}\r\n                </p>\r\n\r\n                <form onSubmit={handleSubmit} className=\"space-y-5\">\r\n                  <div>\r\n                    <Label htmlFor=\"name\">{t(\"nameLabel\", \"Full Name\")} *</Label>\r\n                    <Input\r\n                      id=\"name\"\r\n                      name=\"name\"\r\n                      value={formData.name}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"namePlaceholder\", \"John Doe\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div>\r\n                    <Label htmlFor=\"email\">{t(\"emailInputLabel\", \"Email\")} *</Label>\r\n                    <Input\r\n                      id=\"email\"\r\n                      name=\"email\"\r\n                      type=\"email\"\r\n                      value={formData.email}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"emailPlaceholder\", \"john@example.com\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div>\r\n                    <Label htmlFor=\"phone\">{t(\"phoneInputLabel\", \"Phone\")}</Label>\r\n                    <Input\r\n                      id=\"phone\"\r\n                      name=\"phone\"\r\n                      type=\"tel\"\r\n                      value={formData.phone}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"phonePlaceholder\", \"+1 234 567 890\")}\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div>\r\n                    <Label htmlFor=\"message\">{t(\"messageLabel\", \"Message\")} *</Label>\r\n                    <Textarea\r\n                      id=\"message\"\r\n                      name=\"message\"\r\n                      value={formData.message}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"messagePlaceholder\", \"Tell us about your project...\")}\r\n                      required\r\n                      rows={5}\r\n                      className=\"mt-1 resize-none\"\r\n                    />\r\n                  </div>\r\n                  <FormFileInput\r\n                    files={formData.attachments}\r\n                    onFilesChange={handleFileUploadChange}\r\n                    handleRemoveFile={handleRemoveFile}\r\n                    maxFiles={constants.file?.maxFiles || 5}\r\n                    accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                    disabled={isSubmitting}\r\n                    uploadButtonText={t(\"addFiles\")}\r\n                    maxFilesReachedText={t(\"maxFilesReached\")}\r\n                  />\r\n                  {submitStatus === \"success\" && (\r\n                    <div className=\"p-4 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                      <p className=\"text-green-600 dark:text-green-400 text-sm font-medium\">\r\n                        {t(\"success\", \"Message sent! We'll be in touch soon.\")}\r\n                      </p>\r\n                    </div>\r\n                  )}\r\n\r\n                  {submitStatus === \"error\" && (\r\n                    <div className=\"p-4 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                      <p className=\"text-destructive text-sm font-medium\">\r\n                        {t(\"error\", \"Something went wrong. Please try again.\")}\r\n                      </p>\r\n                    </div>\r\n                  )}\r\n\r\n                  <Button type=\"submit\" size=\"lg\" className=\"w-full\" disabled={isSubmitting}>\r\n                    {isSubmitting ? t(\"sending\", \"Sending...\") : t(\"submit\", \"Send Message\")}\r\n                  </Button>\r\n                </form>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageSplit;\r\n"
     },
     {
       "path": "contact-page-split/lang/en.json",
       "type": "registry:lang",
       "target": "$modules$/contact-page-split/lang/en.json",
-      "content": "{\r\n  \"pageTitle\": \"Contact Us\",\r\n  \"title\": \"Let's Start a Conversation\",\r\n  \"subtitle\": \"This welcoming message sets the tone for visitor communication. Explain why they should contact you, what kind of help you can provide, or your typical response time. Use Promake to create an inviting message that encourages engagement.\",\r\n  \"emailLabel\": \"Email\",\r\n  \"phoneLabel\": \"Phone\",\r\n  \"addressLabel\": \"Address\",\r\n  \"hoursLabel\": \"Hours\",\r\n  \"hours\": \"Mon - Fri: 9:00 AM - 6:00 PM\",\r\n  \"formTitle\": \"Send us a message\",\r\n  \"formSubtitle\": \"Fill out the form below and we'll get back to you as soon as possible.\",\r\n  \"nameLabel\": \"Full Name\",\r\n  \"namePlaceholder\": \"John Doe\",\r\n  \"emailInputLabel\": \"Email\",\r\n  \"emailPlaceholder\": \"john@example.com\",\r\n  \"phoneInputLabel\": \"Phone\",\r\n  \"phonePlaceholder\": \"+1 234 567 890\",\r\n  \"messageLabel\": \"Message\",\r\n  \"messagePlaceholder\": \"Tell us about your project...\",\r\n  \"submit\": \"Send Message\",\r\n  \"sending\": \"Sending...\",\r\n  \"success\": \"Message sent! We'll be in touch soon.\",\r\n  \"error\": \"Something went wrong. Please try again.\"\r\n}\r\n"
+      "content": "{\r\n  \"pageTitle\": \"Contact Us\",\r\n  \"title\": \"Let's Start a Conversation\",\r\n  \"subtitle\": \"This welcoming message sets the tone for visitor communication. Explain why they should contact you, what kind of help you can provide, or your typical response time. Use Promake to create an inviting message that encourages engagement.\",\r\n  \"emailLabel\": \"Email\",\r\n  \"phoneLabel\": \"Phone\",\r\n  \"addressLabel\": \"Address\",\r\n  \"hoursLabel\": \"Hours\",\r\n  \"hours\": \"Mon - Fri: 9:00 AM - 6:00 PM\",\r\n  \"formTitle\": \"Send us a message\",\r\n  \"formSubtitle\": \"Fill out the form below and we'll get back to you as soon as possible.\",\r\n  \"nameLabel\": \"Full Name\",\r\n  \"namePlaceholder\": \"John Doe\",\r\n  \"emailInputLabel\": \"Email\",\r\n  \"emailPlaceholder\": \"john@example.com\",\r\n  \"phoneInputLabel\": \"Phone\",\r\n  \"phonePlaceholder\": \"+1 234 567 890\",\r\n  \"messageLabel\": \"Message\",\r\n  \"messagePlaceholder\": \"Tell us about your project...\",\r\n  \"submit\": \"Send Message\",\r\n  \"sending\": \"Sending...\",\r\n  \"success\": \"Message sent! We'll be in touch soon.\",\r\n  \"error\": \"Something went wrong. Please try again.\",\r\n  \"addFiles\": \"Add Files\",\r\n  \"maxFilesReached\": \"Maximum files reached\",\r\n  \"maxFilesLimit\": \"You can add up to {{max}} files\"\r\n}\r\n"
     },
     {
       "path": "contact-page-split/lang/tr.json",
       "type": "registry:lang",
       "target": "$modules$/contact-page-split/lang/tr.json",
-      "content": "{\r\n  \"pageTitle\": \"İletişim\",\r\n  \"title\": \"Bir Sohbet Başlatalım\",\r\n  \"subtitle\": \"Bu karşılama mesajı ziyaretçi iletişimi için tonu belirler. Neden sizinle iletişime geçmeleri gerektiğini, ne tür yardım sağlayabileceğinizi veya tipik yanıt sürenizi açıklayın. Promake ile etkileşimi teşvik eden davetkar bir mesaj oluşturun.\",\r\n  \"emailLabel\": \"E-posta\",\r\n  \"phoneLabel\": \"Telefon\",\r\n  \"addressLabel\": \"Adres\",\r\n  \"hoursLabel\": \"Çalışma Saatleri\",\r\n  \"hours\": \"Pazartesi - Cuma: 09:00 - 18:00\",\r\n  \"formTitle\": \"Bize mesaj gönderin\",\r\n  \"formSubtitle\": \"Aşağıdaki formu doldurun, en kısa sürede size döneceğiz.\",\r\n  \"nameLabel\": \"Ad Soyad\",\r\n  \"namePlaceholder\": \"Ahmet Yılmaz\",\r\n  \"emailInputLabel\": \"E-posta\",\r\n  \"emailPlaceholder\": \"ahmet@ornek.com\",\r\n  \"phoneInputLabel\": \"Telefon\",\r\n  \"phonePlaceholder\": \"+90 532 123 4567\",\r\n  \"messageLabel\": \"Mesaj\",\r\n  \"messagePlaceholder\": \"Projeniz hakkında bize bilgi verin...\",\r\n  \"submit\": \"Mesaj Gönder\",\r\n  \"sending\": \"Gönderiliyor...\",\r\n  \"success\": \"Mesaj gönderildi! En kısa sürede iletişime geçeceğiz.\",\r\n  \"error\": \"Bir şeyler yanlış gitti. Lütfen tekrar deneyin.\"\r\n}\r\n"
+      "content": "{\r\n  \"pageTitle\": \"İletişim\",\r\n  \"title\": \"Bir Sohbet Başlatalım\",\r\n  \"subtitle\": \"Bu karşılama mesajı ziyaretçi iletişimi için tonu belirler. Neden sizinle iletişime geçmeleri gerektiğini, ne tür yardım sağlayabileceğinizi veya tipik yanıt sürenizi açıklayın. Promake ile etkileşimi teşvik eden davetkar bir mesaj oluşturun.\",\r\n  \"emailLabel\": \"E-posta\",\r\n  \"phoneLabel\": \"Telefon\",\r\n  \"addressLabel\": \"Adres\",\r\n  \"hoursLabel\": \"Çalışma Saatleri\",\r\n  \"hours\": \"Pazartesi - Cuma: 09:00 - 18:00\",\r\n  \"formTitle\": \"Bize mesaj gönderin\",\r\n  \"formSubtitle\": \"Aşağıdaki formu doldurun, en kısa sürede size döneceğiz.\",\r\n  \"nameLabel\": \"Ad Soyad\",\r\n  \"namePlaceholder\": \"Ahmet Yılmaz\",\r\n  \"emailInputLabel\": \"E-posta\",\r\n  \"emailPlaceholder\": \"ahmet@ornek.com\",\r\n  \"phoneInputLabel\": \"Telefon\",\r\n  \"phonePlaceholder\": \"+90 532 123 4567\",\r\n  \"messageLabel\": \"Mesaj\",\r\n  \"messagePlaceholder\": \"Projeniz hakkında bize bilgi verin...\",\r\n  \"submit\": \"Mesaj Gönder\",\r\n  \"sending\": \"Gönderiliyor...\",\r\n  \"success\": \"Mesaj gönderildi! En kısa sürede iletişime geçeceğiz.\",\r\n  \"error\": \"Bir şeyler yanlış gitti. Lütfen tekrar deneyin.\",\r\n  \"addFiles\": \"Dosya Ekle\",\r\n  \"maxFilesReached\": \"Maksimum dosya sayısına ulaşıldı\",\r\n  \"maxFilesLimit\": \"En fazla {{max}} kadar dosya ekleyebilirsiniz\"\r\n}\r\n"
     }
   ],
   "exports": {

package/dist/registry/contact-page.json

@@ -22,19 +22,19 @@
       "path": "contact-page/contact-page.tsx",
       "type": "registry:page",
       "target": "$modules$/contact-page/contact-page.tsx",
-      "content": "import React, { useState, useMemo } from \"react\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { useTranslation } from \"react-i18next\";\nimport { Layout } from \"@/components/Layout\";\nimport { useApiService } from \"@/lib/api\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Label } from \"@/components/ui/label\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport {\n  Mail,\n  Phone,\n  MapPin,\n  MessageSquare,\n  Facebook,\n  Twitter,\n  Instagram,\n  Linkedin,\n} from \"lucide-react\";\nimport constants from \"@/constants/constants.json\";\nimport { FadeIn, SlideInLeft, SlideInRight } from \"@/modules/animations\";\n\nconst socialIcons: Record<string, React.ElementType> = {\n  facebook: Facebook,\n  twitter: Twitter,\n  instagram: Instagram,\n  linkedin: Linkedin,\n};\n\nexport function ContactPage() {\n  const { t } = useTranslation(\"contact-page\");\n  usePageTitle({ title: t(\"title\") });\n\n  const apiService = useApiService();\n\n  const socialLinks = useMemo(() => {\n    const socialMedia = constants.socialMedia as\n      | Record<string, string>\n      | undefined;\n    if (!socialMedia) return [];\n    return Object.entries(socialMedia)\n      .filter(([platform, url]) => url && socialIcons[platform])\n      .map(([platform, url]) => ({\n        platform,\n        url,\n        Icon: socialIcons[platform],\n      }));\n  }, []);\n\n  const [formData, setFormData] = useState({\n    name: \"\",\n    email: \"\",\n    phone: \"\",\n    subject: \"\",\n    message: \"\",\n  });\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [submitStatus, setSubmitStatus] = useState<\n    \"idle\" | \"success\" | \"error\"\n  >(\"idle\");\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setIsSubmitting(true);\n    setSubmitStatus(\"idle\");\n\n    try {\n      const currentLanguage = constants.site.defaultLanguage;\n\n      await apiService.submitForm(\n        formData,\n        {\n          email_subject1: \"Thank you for contacting us\",\n          email_subject2: \"New Contact Form Submission\",\n          fields: [\n            { name: \"name\", required: true },\n            { name: \"email\", required: true },\n            { name: \"phone\", required: false },\n            { name: \"subject\", required: false },\n            { name: \"message\", required: true },\n          ],\n        },\n        currentLanguage\n      );\n\n      setSubmitStatus(\"success\");\n      setFormData({\n        name: \"\",\n        email: \"\",\n        phone: \"\",\n        subject: \"\",\n        message: \"\",\n      });\n\n      setTimeout(() => {\n        setSubmitStatus(\"idle\");\n      }, 5000);\n    } catch (error: unknown) {\n      console.error(\"Form submission failed:\", error);\n      setSubmitStatus(\"error\");\n\n      setTimeout(() => {\n        setSubmitStatus(\"idle\");\n      }, 5000);\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const handleChange = (\n    e: React.ChangeEvent<\n      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n    >\n  ) => {\n    setFormData((prev) => ({\n      ...prev,\n      [e.target.name]: e.target.value,\n    }));\n  };\n\n  return (\n    <Layout>\n      <div className=\"min-h-screen bg-muted/30 py-12\">\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 max-w-6xl\">\n          {/* Hero Section */}\n          <FadeIn className=\"text-center mb-12\">\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\n              {t(\"title\")}\n            </h1>\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\n            <p className=\"text-lg text-muted-foreground max-w-3xl mx-auto\">\n              {t(\"description\")}\n            </p>\n          </FadeIn>\n\n          <div className=\"grid lg:grid-cols-3 gap-8\">\n            {/* Contact Information */}\n            <SlideInLeft className=\"lg:col-span-1 space-y-6\">\n              {/* Company Info */}\n              <Card>\n                <CardHeader>\n                  <CardTitle className=\"flex items-center gap-2\">\n                    <MessageSquare className=\"w-5 h-5 text-primary\" />\n                    {t(\"getInTouch\")}\n                  </CardTitle>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  <div className=\"flex items-start gap-3\">\n                    <Mail className=\"w-5 h-5 text-primary mt-1\" />\n                    <div>\n                      <p className=\"font-medium text-foreground\">\n                        {t(\"email\")}\n                      </p>\n                      <p className=\"text-muted-foreground\">{constants.email}</p>\n                      <p className=\"text-sm text-muted-foreground mt-1\">\n                        {t(\"emailResponse\")}\n                      </p>\n                    </div>\n                  </div>\n\n                  <div className=\"flex items-start gap-3\">\n                    <Phone className=\"w-5 h-5 text-primary mt-1\" />\n                    <div>\n                      <p className=\"font-medium text-foreground\">\n                        {t(\"phone\")}\n                      </p>\n                      <p className=\"text-muted-foreground\">{constants.phone}</p>\n                    </div>\n                  </div>\n\n                  <div className=\"flex items-start gap-3\">\n                    <MapPin className=\"w-5 h-5 text-primary mt-1\" />\n                    <div>\n                      <p className=\"font-medium text-foreground\">\n                        {t(\"address\")}\n                      </p>\n                      <div className=\"text-muted-foreground\">\n                        <p>{constants.address.line1}</p>\n                        {constants.address.line2 && (\n                          <p>{constants.address.line2}</p>\n                        )}\n                        <p>\n                          {constants.address.city}, {constants.address.state}{\" \"}\n                          {constants.address.postalCode}\n                        </p>\n                        {constants.address.country && (\n                          <p>{constants.address.country}</p>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n\n                  {/* Social Media Links */}\n                  {socialLinks.length > 0 && (\n                    <div className=\"pt-4 border-t\">\n                      <p className=\"font-medium text-foreground mb-3\">\n                        {t(\"followUs\")}\n                      </p>\n                      <div className=\"flex gap-2\">\n                        {socialLinks.map(({ platform, url, Icon }) => (\n                          <a\n                            key={platform}\n                            href={url}\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            className=\"h-10 w-10 flex items-center justify-center rounded-md border text-muted-foreground hover:text-primary hover:border-primary transition-colors\"\n                          >\n                            <Icon className=\"h-5 w-5\" />\n                          </a>\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </CardContent>\n              </Card>\n\n              {/* Support Info */}\n              <Card>\n                <CardHeader>\n                  <CardTitle>{t(\"needSupport\")}</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <p className=\"text-muted-foreground mb-4\">\n                    {t(\"supportDescription\")}\n                  </p>\n                  <div className=\"space-y-2\">\n                    <p className=\"font-medium text-foreground\">\n                      {t(\"supportEmail\")}\n                    </p>\n                    <p className=\"text-muted-foreground\">{constants.email}</p>\n                  </div>\n                </CardContent>\n              </Card>\n            </SlideInLeft>\n\n            {/* Contact Form */}\n            <SlideInRight className=\"lg:col-span-2\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>{t(\"sendMessage\")}</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <form onSubmit={handleSubmit} className=\"space-y-6\">\n                    {/* Full Name */}\n                    <div>\n                      <Label htmlFor=\"name\">{t(\"fullName\")} *</Label>\n                      <Input\n                        id=\"name\"\n                        name=\"name\"\n                        type=\"text\"\n                        value={formData.name}\n                        onChange={handleChange}\n                        placeholder={t(\"fullNamePlaceholder\")}\n                        required\n                        className=\"mt-1\"\n                      />\n                    </div>\n\n                    {/* Email */}\n                    <div>\n                      <Label htmlFor=\"email\">{t(\"emailAddress\")} *</Label>\n                      <Input\n                        id=\"email\"\n                        name=\"email\"\n                        type=\"email\"\n                        value={formData.email}\n                        onChange={handleChange}\n                        placeholder={t(\"emailPlaceholder\")}\n                        required\n                        className=\"mt-1\"\n                      />\n                    </div>\n\n                    {/* Phone */}\n                    <div>\n                      <Label htmlFor=\"phone\">{t(\"phoneNumber\")}</Label>\n                      <Input\n                        id=\"phone\"\n                        name=\"phone\"\n                        type=\"tel\"\n                        value={formData.phone}\n                        onChange={handleChange}\n                        placeholder={t(\"phonePlaceholder\")}\n                        className=\"mt-1\"\n                      />\n                    </div>\n\n                    {/* Subject */}\n                    <div>\n                      <Label htmlFor=\"subject\">{t(\"subject\")}</Label>\n                      <Input\n                        id=\"subject\"\n                        name=\"subject\"\n                        type=\"text\"\n                        value={formData.subject}\n                        onChange={handleChange}\n                        placeholder={t(\"subjectPlaceholder\")}\n                        className=\"mt-1\"\n                      />\n                    </div>\n\n                    {/* Message */}\n                    <div>\n                      <Label htmlFor=\"message\">{t(\"message\")} *</Label>\n                      <Textarea\n                        id=\"message\"\n                        name=\"message\"\n                        value={formData.message}\n                        onChange={handleChange}\n                        placeholder={t(\"messagePlaceholder\")}\n                        required\n                        rows={6}\n                        className=\"mt-1 resize-none\"\n                      />\n                    </div>\n\n                    {submitStatus === \"success\" && (\n                      <div className=\"p-4 bg-green-500/10 dark:bg-green-500/20 border border-green-500/30 rounded-lg\">\n                        <p className=\"text-green-600 dark:text-green-400 text-sm font-medium\">\n                          {t(\"success\")}\n                        </p>\n                      </div>\n                    )}\n\n                    {submitStatus === \"error\" && (\n                      <div className=\"p-4 bg-destructive/10 border border-destructive/30 rounded-lg\">\n                        <p className=\"text-destructive text-sm font-medium\">\n                          {t(\"error\")}\n                        </p>\n                      </div>\n                    )}\n\n                    <Button\n                      type=\"submit\"\n                      size=\"lg\"\n                      className=\"w-full\"\n                      disabled={isSubmitting}\n                    >\n                      {isSubmitting ? (\n                        <>\n                          <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\n                          {t(\"sending\")}\n                        </>\n                      ) : (\n                        t(\"submit\")\n                      )}\n                    </Button>\n                  </form>\n                </CardContent>\n              </Card>\n            </SlideInRight>\n          </div>\n        </div>\n      </div>\n    </Layout>\n  );\n}\n\nexport default ContactPage;\n"
+      "content": "import React, { useState, useMemo, useRef } from \"react\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\r\nimport {\r\n  Mail,\r\n  Phone,\r\n  MapPin,\r\n  MessageSquare,\r\n  Facebook,\r\n  Twitter,\r\n  Instagram,\r\n  Linkedin,\r\n  Upload,\r\n} from \"lucide-react\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { FadeIn, SlideInLeft, SlideInRight } from \"@/modules/animations\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\n\r\nconst socialIcons: Record<string, React.ElementType> = {\r\n  facebook: Facebook,\r\n  twitter: Twitter,\r\n  instagram: Instagram,\r\n  linkedin: Linkedin,\r\n};\r\n\r\nexport function ContactPage() {\r\n  const { t } = useTranslation(\"contact-page\");\r\n  usePageTitle({ title: t(\"title\") });\r\n\r\n  const apiService = useApiService();\r\n\r\n  const socialLinks = useMemo(() => {\r\n    const socialMedia = constants.socialMedia as\r\n      | Record<string, string>\r\n      | undefined;\r\n    if (!socialMedia) return [];\r\n    return Object.entries(socialMedia)\r\n      .filter(([platform, url]) => url && socialIcons[platform])\r\n      .map(([platform, url]) => ({\r\n        platform,\r\n        url,\r\n        Icon: socialIcons[platform],\r\n      }));\r\n  }, []);\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    phone: \"\",\r\n    subject: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[],\r\n  });\r\n  const fileInputRef = useRef<HTMLInputElement>(null);\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\r\n    \"idle\" | \"success\" | \"error\"\r\n  >(\"idle\");\r\n  const fileAcceptTypes = constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\";\r\n  const fileMaxFiles = constants.file?.maxFiles || 5;\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n    setIsSubmitting(false);\r\n    try {\r\n      const currentLanguage = constants.site.defaultLanguage;\r\n\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"phone\", required: false },\r\n            { name: \"subject\", required: false },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        currentLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({\r\n        name: \"\",\r\n        email: \"\",\r\n        phone: \"\",\r\n        subject: \"\",\r\n        message: \"\",\r\n        attachments: [],\r\n      });\r\n\r\n      setTimeout(() => {\r\n        setSubmitStatus(\"idle\");\r\n      }, 5000);\r\n    } catch (error: unknown) {\r\n      console.error(\"Form submission failed:\", error);\r\n      setSubmitStatus(\"error\");\r\n\r\n      setTimeout(() => {\r\n        setSubmitStatus(\"idle\");\r\n      }, 5000);\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n    const remainingSlots = fileMaxFiles - formData.attachments.length;\r\n\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: fileMaxFiles }));\r\n      e.target.value = ''; // Clear the input value\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n  const handleChange = (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\r\n    >\r\n  ) => {\r\n    setFormData((prev) => ({\r\n      ...prev,\r\n      [e.target.name]: e.target.value,\r\n    }));\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"min-h-screen bg-muted/30 py-12\">\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 max-w-6xl\">\r\n          {/* Hero Section */}\r\n          <FadeIn className=\"text-center mb-12\">\r\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\r\n              {t(\"title\")}\r\n            </h1>\r\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\r\n            <p className=\"text-lg text-muted-foreground max-w-3xl mx-auto\">\r\n              {t(\"description\")}\r\n            </p>\r\n          </FadeIn>\r\n\r\n          <div className=\"grid lg:grid-cols-3 gap-8\">\r\n            {/* Contact Information */}\r\n            <SlideInLeft className=\"lg:col-span-1 space-y-6\">\r\n              {/* Company Info */}\r\n              <Card>\r\n                <CardHeader>\r\n                  <CardTitle className=\"flex items-center gap-2\">\r\n                    <MessageSquare className=\"w-5 h-5 text-primary\" />\r\n                    {t(\"getInTouch\")}\r\n                  </CardTitle>\r\n                </CardHeader>\r\n                <CardContent className=\"space-y-4\">\r\n                  <div className=\"flex items-start gap-3\">\r\n                    <Mail className=\"w-5 h-5 text-primary mt-1\" />\r\n                    <div>\r\n                      <p className=\"font-medium text-foreground\">\r\n                        {t(\"email\")}\r\n                      </p>\r\n                      <p className=\"text-muted-foreground\">{constants.email}</p>\r\n                      <p className=\"text-sm text-muted-foreground mt-1\">\r\n                        {t(\"emailResponse\")}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-3\">\r\n                    <Phone className=\"w-5 h-5 text-primary mt-1\" />\r\n                    <div>\r\n                      <p className=\"font-medium text-foreground\">\r\n                        {t(\"phone\")}\r\n                      </p>\r\n                      <p className=\"text-muted-foreground\">{constants.phone}</p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-3\">\r\n                    <MapPin className=\"w-5 h-5 text-primary mt-1\" />\r\n                    <div>\r\n                      <p className=\"font-medium text-foreground\">\r\n                        {t(\"address\")}\r\n                      </p>\r\n                      <div className=\"text-muted-foreground\">\r\n                        <p>{constants.address.line1}</p>\r\n                        {constants.address.line2 && (\r\n                          <p>{constants.address.line2}</p>\r\n                        )}\r\n                        <p>\r\n                          {constants.address.city}, {constants.address.state}{\" \"}\r\n                          {constants.address.postalCode}\r\n                        </p>\r\n                        {constants.address.country && (\r\n                          <p>{constants.address.country}</p>\r\n                        )}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  {/* Social Media Links */}\r\n                  {socialLinks.length > 0 && (\r\n                    <div className=\"pt-4 border-t\">\r\n                      <p className=\"font-medium text-foreground mb-3\">\r\n                        {t(\"followUs\")}\r\n                      </p>\r\n                      <div className=\"flex gap-2\">\r\n                        {socialLinks.map(({ platform, url, Icon }) => (\r\n                          <a\r\n                            key={platform}\r\n                            href={url}\r\n                            target=\"_blank\"\r\n                            rel=\"noopener noreferrer\"\r\n                            className=\"h-10 w-10 flex items-center justify-center rounded-md border text-muted-foreground hover:text-primary hover:border-primary transition-colors\"\r\n                          >\r\n                            <Icon className=\"h-5 w-5\" />\r\n                          </a>\r\n                        ))}\r\n                      </div>\r\n                    </div>\r\n                  )}\r\n                </CardContent>\r\n              </Card>\r\n\r\n              {/* Support Info */}\r\n              <Card>\r\n                <CardHeader>\r\n                  <CardTitle>{t(\"needSupport\")}</CardTitle>\r\n                </CardHeader>\r\n                <CardContent>\r\n                  <p className=\"text-muted-foreground mb-4\">\r\n                    {t(\"supportDescription\")}\r\n                  </p>\r\n                  <div className=\"space-y-2\">\r\n                    <p className=\"font-medium text-foreground\">\r\n                      {t(\"supportEmail\")}\r\n                    </p>\r\n                    <p className=\"text-muted-foreground\">{constants.email}</p>\r\n                  </div>\r\n                </CardContent>\r\n              </Card>\r\n            </SlideInLeft>\r\n\r\n            {/* Contact Form */}\r\n            <SlideInRight className=\"lg:col-span-2\">\r\n              <Card>\r\n                <CardHeader>\r\n                  <CardTitle>{t(\"sendMessage\")}</CardTitle>\r\n                </CardHeader>\r\n                <CardContent>\r\n                  <form onSubmit={handleSubmit} className=\"space-y-6\">\r\n                    {/* Full Name */}\r\n                    <div>\r\n                      <Label htmlFor=\"name\">{t(\"fullName\")} *</Label>\r\n                      <Input\r\n                        id=\"name\"\r\n                        name=\"name\"\r\n                        type=\"text\"\r\n                        value={formData.name}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"fullNamePlaceholder\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                      />\r\n                    </div>\r\n\r\n                    {/* Email */}\r\n                    <div>\r\n                      <Label htmlFor=\"email\">{t(\"emailAddress\")} *</Label>\r\n                      <Input\r\n                        id=\"email\"\r\n                        name=\"email\"\r\n                        type=\"email\"\r\n                        value={formData.email}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"emailPlaceholder\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                      />\r\n                    </div>\r\n\r\n                    {/* Phone */}\r\n                    <div>\r\n                      <Label htmlFor=\"phone\">{t(\"phoneNumber\")}</Label>\r\n                      <Input\r\n                        id=\"phone\"\r\n                        name=\"phone\"\r\n                        type=\"tel\"\r\n                        value={formData.phone}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"phonePlaceholder\")}\r\n                        className=\"mt-1\"\r\n                      />\r\n                    </div>\r\n\r\n                    {/* Subject */}\r\n                    <div>\r\n                      <Label htmlFor=\"subject\">{t(\"subject\")}</Label>\r\n                      <Input\r\n                        id=\"subject\"\r\n                        name=\"subject\"\r\n                        type=\"text\"\r\n                        value={formData.subject}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"subjectPlaceholder\")}\r\n                        className=\"mt-1\"\r\n                      />\r\n                    </div>\r\n\r\n                    {/* Message */}\r\n                    <div>\r\n                      <Label htmlFor=\"message\">{t(\"message\")} *</Label>\r\n                      <Textarea\r\n                        id=\"message\"\r\n                        name=\"message\"\r\n                        value={formData.message}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"messagePlaceholder\")}\r\n                        required\r\n                        rows={6}\r\n                        className=\"mt-1 resize-none\"\r\n                      />\r\n                    </div>\r\n                    <FormFileInput\r\n                      files={formData.attachments}\r\n                      onFilesChange={handleFileUploadChange}\r\n                      handleRemoveFile={handleRemoveFile}\r\n                      maxFiles={constants.file?.maxFiles || 5}\r\n                      accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                      disabled={isSubmitting}\r\n                      uploadButtonText={t(\"addFiles\")}\r\n                      maxFilesReachedText={t(\"maxFilesReached\")}\r\n                    />\r\n\r\n                    {submitStatus === \"success\" && (\r\n                      <div className=\"p-4 bg-green-500/10 dark:bg-green-500/20 border border-green-500/30 rounded-lg\">\r\n                        <p className=\"text-green-600 dark:text-green-400 text-sm font-medium\">\r\n                          {t(\"success\")}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    {submitStatus === \"error\" && (\r\n                      <div className=\"p-4 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                        <p className=\"text-destructive text-sm font-medium\">\r\n                          {t(\"error\")}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    <Button\r\n                      type=\"submit\"\r\n                      size=\"lg\"\r\n                      className=\"w-full\"\r\n                      disabled={isSubmitting}\r\n                    >\r\n                      {isSubmitting ? (\r\n                        <>\r\n                          <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                          {t(\"sending\")}\r\n                        </>\r\n                      ) : (\r\n                        t(\"submit\")\r\n                      )}\r\n                    </Button>\r\n                  </form>\r\n                </CardContent>\r\n              </Card>\r\n            </SlideInRight>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPage;\r\n"
     },
     {
       "path": "contact-page/lang/en.json",
       "type": "registry:lang",
       "target": "$modules$/contact-page/lang/en.json",
-      "content": "{\r\n  \"title\": \"Contact Us\",\r\n  \"getInTouch\": \"Get in Touch\",\r\n  \"emailUs\": \"Email Us\",\r\n  \"callUs\": \"Call Us\",\r\n  \"visitUs\": \"Visit Us\",\r\n  \"businessHours\": \"Hours\",\r\n  \"sendMessage\": \"Send us a Message\",\r\n  \"formNotAvailable\": \"Form is not available at the moment.\",\r\n  \"fullName\": \"Full Name\",\r\n  \"emailAddress\": \"Email Address\",\r\n  \"phoneNumber\": \"Phone Number\",\r\n  \"subject\": \"Subject\",\r\n  \"message\": \"Message\",\r\n  \"submit\": \"Send Message\",\r\n  \"sending\": \"Sending...\",\r\n  \"success\": \"Thank you for your message! We will get back to you soon.\",\r\n  \"error\": \"Failed to send message. Please try again later.\",\r\n  \"description\": \"Have a question or need support? We're here to help and typically respond within 24 hours.\",\r\n  \"email\": \"Email\",\r\n  \"phone\": \"Phone\",\r\n  \"address\": \"Address\",\r\n  \"fullNamePlaceholder\": \"Your full name\",\r\n  \"emailPlaceholder\": \"your@email.com\",\r\n  \"phonePlaceholder\": \"+1 (555) 123-4567\",\r\n  \"subjectPlaceholder\": \"What is this regarding?\",\r\n  \"messagePlaceholder\": \"Tell us how we can help you...\",\r\n  \"loading\": \"Loading contact information...\",\r\n  \"emailResponse\": \"We typically respond within 24 hours\",\r\n  \"needSupport\": \"Need Support?\",\r\n  \"supportDescription\": \"For technical support or general inquiries, contact our dedicated support team:\",\r\n  \"supportEmail\": \"Support Email\",\r\n  \"monday_friday\": \"Monday - Friday\",\r\n  \"saturday\": \"Saturday\",\r\n  \"sunday\": \"Sunday\",\r\n  \"closed\": \"Closed\",\r\n  \"am\": \"AM\",\r\n  \"pm\": \"PM\"\r\n}"
+      "content": "{\r\n  \"title\": \"Contact Us\",\r\n  \"getInTouch\": \"Get in Touch\",\r\n  \"emailUs\": \"Email Us\",\r\n  \"callUs\": \"Call Us\",\r\n  \"visitUs\": \"Visit Us\",\r\n  \"businessHours\": \"Hours\",\r\n  \"sendMessage\": \"Send us a Message\",\r\n  \"formNotAvailable\": \"Form is not available at the moment.\",\r\n  \"fullName\": \"Full Name\",\r\n  \"emailAddress\": \"Email Address\",\r\n  \"phoneNumber\": \"Phone Number\",\r\n  \"subject\": \"Subject\",\r\n  \"message\": \"Message\",\r\n  \"submit\": \"Send Message\",\r\n  \"sending\": \"Sending...\",\r\n  \"success\": \"Thank you for your message! We will get back to you soon.\",\r\n  \"error\": \"Failed to send message. Please try again later.\",\r\n  \"description\": \"Have a question or need support? We're here to help and typically respond within 24 hours.\",\r\n  \"email\": \"Email\",\r\n  \"phone\": \"Phone\",\r\n  \"address\": \"Address\",\r\n  \"fullNamePlaceholder\": \"Your full name\",\r\n  \"emailPlaceholder\": \"your@email.com\",\r\n  \"phonePlaceholder\": \"+1 (555) 123-4567\",\r\n  \"subjectPlaceholder\": \"What is this regarding?\",\r\n  \"messagePlaceholder\": \"Tell us how we can help you...\",\r\n  \"loading\": \"Loading contact information...\",\r\n  \"emailResponse\": \"We typically respond within 24 hours\",\r\n  \"needSupport\": \"Need Support?\",\r\n  \"supportDescription\": \"For technical support or general inquiries, contact our dedicated support team:\",\r\n  \"supportEmail\": \"Support Email\",\r\n  \"monday_friday\": \"Monday - Friday\",\r\n  \"saturday\": \"Saturday\",\r\n  \"sunday\": \"Sunday\",\r\n  \"closed\": \"Closed\",\r\n  \"am\": \"AM\",\r\n  \"pm\": \"PM\",\r\n  \"addFiles\": \"Add Files\",\r\n  \"maxFilesReached\": \"Maximum files reached\",\r\n  \"maxFilesLimit\": \"You can add up to {{max}} files\",\r\n  \"followUs\": \"Follow Us\"\r\n}"
     },
     {
       "path": "contact-page/lang/tr.json",
       "type": "registry:lang",
       "target": "$modules$/contact-page/lang/tr.json",
-      "content": "{\r\n  \"title\": \"İletişim\",\r\n  \"getInTouch\": \"Bize Ulaşın\",\r\n  \"emailUs\": \"E-posta Gönderin\",\r\n  \"callUs\": \"Bizi Arayın\",\r\n  \"visitUs\": \"Bizi Ziyaret Edin\",\r\n  \"businessHours\": \"Çalışma Saatleri\",\r\n  \"sendMessage\": \"Bize Mesaj Gönderin\",\r\n  \"formNotAvailable\": \"Form şu anda kullanılamıyor.\",\r\n  \"fullName\": \"Ad Soyad\",\r\n  \"emailAddress\": \"E-posta Adresi\",\r\n  \"phoneNumber\": \"Telefon Numarası\",\r\n  \"subject\": \"Konu\",\r\n  \"message\": \"Mesaj\",\r\n  \"submit\": \"Mesaj Gönder\",\r\n  \"sending\": \"Gönderiliyor...\",\r\n  \"success\": \"Mesajınız için teşekkürler! En kısa sürede size dönüş yapacağız.\",\r\n  \"error\": \"Mesaj gönderilemedi. Lütfen tekrar deneyin.\",\r\n  \"description\": \"İletişim seçenekleri ve müsaitlik bilgisi. Yanıt süreleri ve soru türlerini ekleyin.\",\r\n  \"email\": \"E-posta\",\r\n  \"phone\": \"Telefon\",\r\n  \"address\": \"Adres\",\r\n  \"fullNamePlaceholder\": \"Adınız ve soyadınız\",\r\n  \"emailPlaceholder\": \"eposta@adresiniz.com\",\r\n  \"phonePlaceholder\": \"+90 5XX XXX XX XX\",\r\n  \"subjectPlaceholder\": \"Konu nedir?\",\r\n  \"messagePlaceholder\": \"Size nasıl yardımcı olabiliriz...\",\r\n  \"loading\": \"İletişim bilgileri yükleniyor...\",\r\n  \"emailResponse\": \"Genellikle 24 saat içinde yanıt veririz\",\r\n  \"needSupport\": \"Desteğe İhtiyacınız mı Var?\",\r\n  \"supportDescription\": \"Teknik destek veya sipariş sorularınız için özel destek ekibimizle iletişime geçin:\",\r\n  \"supportEmail\": \"Destek E-postası\",\r\n  \"monday_friday\": \"Pazartesi - Cuma\",\r\n  \"saturday\": \"Cumartesi\",\r\n  \"sunday\": \"Pazar\",\r\n  \"closed\": \"Kapalı\",\r\n  \"am\": \"\",\r\n  \"pm\": \"\"\r\n}"
+      "content": "{\r\n  \"title\": \"İletişim\",\r\n  \"getInTouch\": \"Bize Ulaşın\",\r\n  \"emailUs\": \"E-posta Gönderin\",\r\n  \"callUs\": \"Bizi Arayın\",\r\n  \"visitUs\": \"Bizi Ziyaret Edin\",\r\n  \"businessHours\": \"Çalışma Saatleri\",\r\n  \"sendMessage\": \"Bize Mesaj Gönderin\",\r\n  \"formNotAvailable\": \"Form şu anda kullanılamıyor.\",\r\n  \"fullName\": \"Ad Soyad\",\r\n  \"emailAddress\": \"E-posta Adresi\",\r\n  \"phoneNumber\": \"Telefon Numarası\",\r\n  \"subject\": \"Konu\",\r\n  \"message\": \"Mesaj\",\r\n  \"submit\": \"Mesaj Gönder\",\r\n  \"sending\": \"Gönderiliyor...\",\r\n  \"success\": \"Mesajınız için teşekkürler! En kısa sürede size dönüş yapacağız.\",\r\n  \"error\": \"Mesaj gönderilemedi. Lütfen tekrar deneyin.\",\r\n  \"description\": \"İletişim seçenekleri ve müsaitlik bilgisi. Yanıt süreleri ve soru türlerini ekleyin.\",\r\n  \"email\": \"E-posta\",\r\n  \"phone\": \"Telefon\",\r\n  \"address\": \"Adres\",\r\n  \"fullNamePlaceholder\": \"Adınız ve soyadınız\",\r\n  \"emailPlaceholder\": \"eposta@adresiniz.com\",\r\n  \"phonePlaceholder\": \"+90 5XX XXX XX XX\",\r\n  \"subjectPlaceholder\": \"Konu nedir?\",\r\n  \"messagePlaceholder\": \"Size nasıl yardımcı olabiliriz...\",\r\n  \"loading\": \"İletişim bilgileri yükleniyor...\",\r\n  \"emailResponse\": \"Genellikle 24 saat içinde yanıt veririz\",\r\n  \"needSupport\": \"Desteğe İhtiyacınız mı Var?\",\r\n  \"supportDescription\": \"Teknik destek veya sipariş sorularınız için özel destek ekibimizle iletişime geçin:\",\r\n  \"supportEmail\": \"Destek E-postası\",\r\n  \"monday_friday\": \"Pazartesi - Cuma\",\r\n  \"saturday\": \"Cumartesi\",\r\n  \"sunday\": \"Pazar\",\r\n  \"closed\": \"Kapalı\",\r\n  \"am\": \"\",\r\n  \"pm\": \"\",\r\n  \"addFiles\": \"Dosya Ekle\",\r\n  \"maxFilesReached\": \"Maksimum dosya sayısına ulaşıldı\",\r\n  \"maxFilesLimit\": \"En fazla {{max}} kadar dosya ekleyebilirsiniz\",\r\n  \"followUs\": \"Bizi Takip Edin\"\r\n}"
     }
   ],
   "exports": {

package/dist/registry/payment-success-block.json

@@ -20,7 +20,7 @@
       "path": "payment-success-block/payment-success-block.tsx",
       "type": "registry:block",
       "target": "$modules$/payment-success-block/payment-success-block.tsx",
-      "content": "import { Link } from \"react-router\";\nimport {\n  CheckCircle,\n  XCircle,\n  Loader2,\n  ShoppingBag,\n  Package,\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { useTranslation } from \"react-i18next\";\nimport { formatPrice } from \"@/modules/ecommerce-core\";\n\ntype PaymentStatus = \"loading\" | \"success\" | \"failed\";\n\ninterface OrderDetails {\n  id?: string;\n  totalAmount?: number;\n  currency?: string;\n  paymentMethod?: string;\n  paymentStatus?: string;\n  status?: string;\n}\n\ninterface PaymentSuccessBlockProps {\n  status: PaymentStatus;\n  orderDetails?: OrderDetails | null;\n  errorMessage?: string;\n  onRetry?: () => void;\n}\n\nexport function PaymentSuccessBlock({\n  status,\n  orderDetails,\n  errorMessage,\n  onRetry,\n}: PaymentSuccessBlockProps) {\n  const { t } = useTranslation(\"payment-success-block\");\n\n  // Loading State\n  if (status === \"loading\") {\n    return (\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-16\">\n        <div className=\"max-w-md mx-auto text-center\">\n          <Card>\n            <CardContent className=\"pt-8 pb-8\">\n              <Loader2 className=\"w-16 h-16 text-primary mx-auto mb-4 animate-spin\" />\n              <h1 className=\"text-2xl font-bold mb-2\">\n                {t(\"verifyingPayment\", \"Verifying Payment\")}\n              </h1>\n              <p className=\"text-muted-foreground\">\n                {t(\n                  \"pleaseWait\",\n                  \"Please wait while we verify your payment...\"\n                )}\n              </p>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    );\n  }\n\n  // Failed State\n  if (status === \"failed\") {\n    return (\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-16\">\n        <div className=\"max-w-md mx-auto text-center\">\n          <Card>\n            <CardContent className=\"pt-8 pb-8\">\n              <XCircle className=\"w-16 h-16 text-destructive mx-auto mb-4\" />\n              <h1 className=\"text-2xl font-bold mb-2\">\n                {t(\"paymentFailed\", \"Payment Failed\")}\n              </h1>\n\n              {/* Error Message */}\n              {errorMessage && (\n                <div className=\"bg-destructive/10 border border-destructive/30 rounded-lg p-4 mb-4\">\n                  <p className=\"text-sm text-destructive\">{errorMessage}</p>\n                </div>\n              )}\n\n              <p className=\"text-muted-foreground mb-6\">\n                {t(\n                  \"paymentFailedDescription\",\n                  \"We couldn't verify your payment. Please try again or contact support.\"\n                )}\n              </p>\n\n              <div className=\"flex flex-col gap-3\">\n                {onRetry && (\n                  <Button onClick={onRetry}>\n                    {t(\"tryAgain\", \"Try Again\")}\n                  </Button>\n                )}\n                <Button variant=\"outline\" asChild>\n                  <Link to=\"/contact\">\n                    {t(\"contactSupport\", \"Contact Support\")}\n                  </Link>\n                </Button>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    );\n  }\n\n  // Success State\n  return (\n    <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-16\">\n      <div className=\"max-w-lg mx-auto text-center\">\n        <Card>\n          <CardContent className=\"pt-8 pb-8\">\n            <CheckCircle className=\"w-20 h-20 text-green-600 dark:text-green-400 mx-auto mb-6\" />\n            <h1 className=\"text-3xl font-bold mb-2\">\n              {t(\"thankYou\", \"Thank You!\")}\n            </h1>\n            <p className=\"text-xl text-muted-foreground mb-6\">\n              {t(\"orderConfirmed\", \"Your order has been confirmed.\")}\n            </p>\n\n            {orderDetails && (\n              <div className=\"bg-muted/50 rounded-lg p-4 mb-6 text-left\">\n                <h3 className=\"font-semibold mb-2\">\n                  {t(\"orderDetails\", \"Order Details\")}\n                </h3>\n                <div className=\"text-sm space-y-1\">\n                  {orderDetails.id && (\n                    <p>\n                      <span className=\"text-muted-foreground\">\n                        {t(\"orderId\", \"Order ID\")}:\n                      </span>{\" \"}\n                      <span className=\"font-medium\">{orderDetails.id}</span>\n                    </p>\n                  )}\n                  {orderDetails.totalAmount !== undefined && orderDetails.currency && (\n                    <p>\n                      <span className=\"text-muted-foreground\">\n                        {t(\"total\", \"Total\")}:\n                      </span>{\" \"}\n                      <span className=\"font-medium\">\n                        {formatPrice(orderDetails.totalAmount, orderDetails.currency)}\n                      </span>\n                    </p>\n                  )}\n                  {orderDetails.paymentMethod && (\n                    <p>\n                      <span className=\"text-muted-foreground\">\n                        {t(\"paymentMethod\", \"Payment Method\")}:\n                      </span>{\" \"}\n                      <span className=\"font-medium capitalize\">\n                        {orderDetails.paymentMethod}\n                      </span>\n                    </p>\n                  )}\n                  {orderDetails.paymentStatus && (\n                    <p>\n                      <span className=\"text-muted-foreground\">\n                        {t(\"paymentStatus\", \"Payment Status\")}:\n                      </span>{\" \"}\n                      <span className=\"font-medium capitalize text-green-600 dark:text-green-400\">\n                        {orderDetails.paymentStatus}\n                      </span>\n                    </p>\n                  )}\n                  {orderDetails.status && (\n                    <p>\n                      <span className=\"text-muted-foreground\">\n                        {t(\"orderStatus\", \"Order Status\")}:\n                      </span>{\" \"}\n                      <span className=\"font-medium capitalize\">\n                        {orderDetails.status}\n                      </span>\n                    </p>\n                  )}\n                </div>\n              </div>\n            )}\n\n            <p className=\"text-sm text-muted-foreground mb-6\">\n              {t(\n                \"confirmationEmailSent\",\n                \"A confirmation email has been sent to your email address.\"\n              )}\n            </p>\n\n            <div className=\"flex flex-col gap-3\">\n              <Button asChild size=\"lg\">\n                <Link to=\"/orders\">\n                  <Package className=\"w-4 h-4 mr-2\" />\n                  {t(\"viewMyOrders\", \"View My Orders\")}\n                </Link>\n              </Button>\n              <Button variant=\"outline\" asChild>\n                <Link to=\"/products\">\n                  <ShoppingBag className=\"w-4 h-4 mr-2\" />\n                  {t(\"continueShopping\", \"Continue Shopping\")}\n                </Link>\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  );\n}\n"
+      "content": "import { Link } from \"react-router\";\r\nimport {\r\n  CheckCircle,\r\n  XCircle,\r\n  Loader2,\r\n  ShoppingBag,\r\n  Package,\r\n} from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { formatPrice } from \"@/modules/ecommerce-core\";\r\n\r\ntype PaymentStatus = \"loading\" | \"success\" | \"failed\";\r\n\r\ninterface OrderDetails {\r\n  id?: string;\r\n  totalAmount?: number;\r\n  currency?: string;\r\n  paymentMethod?: string;\r\n  paymentStatus?: string;\r\n  status?: string;\r\n}\r\n\r\ninterface PaymentSuccessBlockProps {\r\n  status: PaymentStatus;\r\n  orderDetails?: OrderDetails | null;\r\n  errorMessage?: string;\r\n  onRetry?: () => void;\r\n}\r\n\r\nexport function PaymentSuccessBlock({\r\n  status,\r\n  orderDetails,\r\n  errorMessage,\r\n  onRetry,\r\n}: PaymentSuccessBlockProps) {\r\n  const { t } = useTranslation(\"payment-success-block\");\r\n\r\n  // Loading State\r\n  if (status === \"loading\") {\r\n    return (\r\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-16\">\r\n        <div className=\"max-w-md mx-auto text-center\">\r\n          <Card>\r\n            <CardContent className=\"pt-8 pb-8\">\r\n              <Loader2 className=\"w-16 h-16 text-primary mx-auto mb-4 animate-spin\" />\r\n              <h1 className=\"text-2xl font-bold mb-2\">\r\n                {t(\"verifyingPayment\", \"Verifying Payment\")}\r\n              </h1>\r\n              <p className=\"text-muted-foreground\">\r\n                {t(\r\n                  \"pleaseWait\",\r\n                  \"Please wait while we verify your payment...\"\r\n                )}\r\n              </p>\r\n            </CardContent>\r\n          </Card>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Failed State\r\n  if (status === \"failed\") {\r\n    return (\r\n      <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-16\">\r\n        <div className=\"max-w-md mx-auto text-center\">\r\n          <Card>\r\n            <CardContent className=\"pt-8 pb-8\">\r\n              <XCircle className=\"w-16 h-16 text-destructive mx-auto mb-4\" />\r\n              <h1 className=\"text-2xl font-bold mb-2\">\r\n                {t(\"paymentFailed\", \"Payment Failed\")}\r\n              </h1>\r\n\r\n              {/* Error Message */}\r\n              {errorMessage && (\r\n                <div className=\"bg-destructive/10 border border-destructive/30 rounded-lg p-4 mb-4\">\r\n                  <p className=\"text-sm text-destructive\">{errorMessage}</p>\r\n                </div>\r\n              )}\r\n\r\n              <p className=\"text-muted-foreground mb-6\">\r\n                {t(\r\n                  \"paymentFailedDescription\",\r\n                  \"We couldn't verify your payment. Please try again or contact support.\"\r\n                )}\r\n              </p>\r\n\r\n              <div className=\"flex flex-col gap-3\">\r\n                {onRetry && (\r\n                  <Button onClick={onRetry}>\r\n                    {t(\"tryAgain\", \"Try Again\")}\r\n                  </Button>\r\n                )}\r\n                <Button variant=\"outline\" asChild>\r\n                  <Link to=\"/contact\">\r\n                    {t(\"contactSupport\", \"Contact Support\")}\r\n                  </Link>\r\n                </Button>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Success State\r\n  return (\r\n    <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 py-16\">\r\n      <div className=\"max-w-lg mx-auto text-center\">\r\n        <Card>\r\n          <CardContent className=\"pt-8 pb-8\">\r\n            <CheckCircle className=\"w-20 h-20 text-green-600 dark:text-green-400 mx-auto mb-6\" />\r\n            <h1 className=\"text-3xl font-bold mb-2\">\r\n              {t(\"thankYou\", \"Thank You!\")}\r\n            </h1>\r\n            <p className=\"text-xl text-muted-foreground mb-6\">\r\n              {t(\"orderConfirmed\", \"Your order has been confirmed.\")}\r\n            </p>\r\n\r\n            {orderDetails && (\r\n              <div className=\"bg-muted/50 rounded-lg p-4 mb-6 text-left\">\r\n                <h3 className=\"font-semibold mb-2\">\r\n                  {t(\"orderDetails\", \"Order Details\")}\r\n                </h3>\r\n                <div className=\"text-sm space-y-1\">\r\n                  {orderDetails.id && (\r\n                    <p>\r\n                      <span className=\"text-muted-foreground\">\r\n                        {t(\"orderId\", \"Order ID\")}:\r\n                      </span>{\" \"}\r\n                      <span className=\"font-medium\">{orderDetails.id}</span>\r\n                    </p>\r\n                  )}\r\n                  {orderDetails.totalAmount !== undefined && orderDetails.currency && (\r\n                    <p>\r\n                      <span className=\"text-muted-foreground\">\r\n                        {t(\"total\", \"Total\")}:\r\n                      </span>{\" \"}\r\n                      <span className=\"font-medium\">\r\n                        {formatPrice(orderDetails.totalAmount, orderDetails.currency)}\r\n                      </span>\r\n                    </p>\r\n                  )}\r\n                  {orderDetails.paymentMethod && (\r\n                    <p>\r\n                      <span className=\"text-muted-foreground\">\r\n                        {t(\"paymentMethod\", \"Payment Method\")}:\r\n                      </span>{\" \"}\r\n                      <span className=\"font-medium capitalize\">\r\n                        {orderDetails.paymentMethod}\r\n                      </span>\r\n                    </p>\r\n                  )}\r\n                  {orderDetails.paymentStatus && (\r\n                    <p>\r\n                      <span className=\"text-muted-foreground\">\r\n                        {t(\"paymentStatus\", \"Payment Status\")}:\r\n                      </span>{\" \"}\r\n                      <span className=\"font-medium capitalize text-green-600 dark:text-green-400\">\r\n                        {orderDetails.paymentStatus}\r\n                      </span>\r\n                    </p>\r\n                  )}\r\n                  {orderDetails.status && (\r\n                    <p>\r\n                      <span className=\"text-muted-foreground\">\r\n                        {t(\"orderStatus\", \"Order Status\")}:\r\n                      </span>{\" \"}\r\n                      <span className=\"font-medium capitalize\">\r\n                        {orderDetails.status}\r\n                      </span>\r\n                    </p>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            )}\r\n\r\n            <p className=\"text-sm text-muted-foreground mb-6\">\r\n              {t(\r\n                \"confirmationEmailSent\",\r\n                \"A confirmation email has been sent to your email address.\"\r\n              )}\r\n            </p>\r\n\r\n            <div className=\"flex flex-col gap-3\">\r\n              <Button asChild size=\"lg\">\r\n                <Link to=\"/my-orders\">\r\n                  <Package className=\"w-4 h-4 mr-2\" />\r\n                  {t(\"viewMyOrders\", \"View My Orders\")}\r\n                </Link>\r\n              </Button>\r\n              <Button variant=\"outline\" asChild>\r\n                <Link to=\"/products\">\r\n                  <ShoppingBag className=\"w-4 h-4 mr-2\" />\r\n                  {t(\"continueShopping\", \"Continue Shopping\")}\r\n                </Link>\r\n              </Button>\r\n            </div>\r\n          </CardContent>\r\n        </Card>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"
     },
     {
       "path": "payment-success-block/lang/en.json",