feat: Reorganize admin config tabs and sync contact info across pages

frontend/src/app/[locale]/contato/page.tsx

@@ -26,10 +26,18 @@ interface ContactContent {
   };
 }
 
+interface SettingsData {
+  address?: string | null;
+  phone?: string | null;
+  email?: string | null;
+  whatsapp?: string | null;
+}
+
 export default function ContatoPage() {
   const { success, error: showError } = useToast();
   const { locale, t } = useLocale();
   const [content, setContent] = useState<ContactContent | null>(null);
+  const [settings, setSettings] = useState<SettingsData>({});
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const [formData, setFormData] = useState({
@@ -42,6 +50,7 @@ export default function ContatoPage() {
 
   useEffect(() => {
     fetchContent();
+    fetchSettings();
   }, [locale]);
 
   const fetchContent = async () => {
@@ -61,6 +70,23 @@ export default function ContatoPage() {
     }
   };
 
+  const fetchSettings = async () => {
+    try {
+      const response = await fetch('/api/settings');
+      if (response.ok) {
+        const data = await response.json();
+        setSettings({
+          address: data.address,
+          phone: data.phone,
+          email: data.email,
+          whatsapp: data.whatsapp
+        });
+      }
+    } catch (error) {
+      console.error('Erro ao carregar configurações:', error);
+    }
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setSubmitting(true);
@@ -102,31 +128,46 @@ export default function ContatoPage() {
     title: t('contact.infoTitle'),
     subtitle: t('contact.infoSubtitle'),
     description: t('contact.infoDescription'),
-    items: [
-      {
-        icon: 'ri-whatsapp-line',
-        title: t('contact.phone'),
-        description: t('contact.phoneDescription'),
-        link: 'https://wa.me/5527999999999',
-        linkText: '(27) 99999-9999'
-      },
-      {
-        icon: 'ri-mail-send-line',
-        title: t('contact.email'),
-        description: t('contact.emailDescription'),
-        link: 'mailto:contato@octto.com.br',
-        linkText: 'contato@octto.com.br'
-      },
-      {
-        icon: 'ri-map-pin-line',
-        title: t('contact.address'),
-        description: t('contact.addressDescription'),
-        link: 'https://maps.google.com',
-        linkText: t('contact.viewOnMap')
-      }
-    ]
+    items: [] as ContactInfo[]
   };
 
+  // Montar items dinamicamente baseado nas configurações
+  const contactItems: ContactInfo[] = [];
+  
+  if (settings.whatsapp || settings.phone) {
+    const phoneNumber = settings.whatsapp || settings.phone;
+    contactItems.push({
+      icon: 'ri-whatsapp-line',
+      title: t('contact.phone'),
+      description: t('contact.phoneDescription'),
+      link: settings.whatsapp ? `https://wa.me/55${settings.whatsapp.replace(/\D/g, '')}` : `tel:${phoneNumber?.replace(/\D/g, '')}`,
+      linkText: phoneNumber || ''
+    });
+  }
+  
+  if (settings.email) {
+    contactItems.push({
+      icon: 'ri-mail-send-line',
+      title: t('contact.email'),
+      description: t('contact.emailDescription'),
+      link: `mailto:${settings.email}`,
+      linkText: settings.email
+    });
+  }
+  
+  if (settings.address) {
+    contactItems.push({
+      icon: 'ri-map-pin-line',
+      title: t('contact.address'),
+      description: settings.address,
+      link: `https://maps.google.com/maps?q=${encodeURIComponent(settings.address)}`,
+      linkText: t('contact.viewOnMap')
+    });
+  }
+
+  // Usar items do CMS se existir, senão usar os dinâmicos
+  const displayItems = info.items?.length > 0 ? info.items : contactItems;
+
   return (
     <main className="bg-white dark:bg-secondary transition-colors duration-300">
       {/* Hero Section */}
@@ -164,20 +205,30 @@ export default function ContatoPage() {
               </div>
               
               <div className="space-y-6">
-                {info.items.map((item, index) => (
-                  <div key={index} className="group bg-gray-50 dark:bg-white/5 p-6 rounded-2xl border border-gray-100 dark:border-white/10 hover:border-primary/50 transition-colors">
-                    <div className="flex items-start gap-5">
-                      <div className="w-14 h-14 bg-white dark:bg-white/10 rounded-xl flex items-center justify-center text-primary shadow-sm group-hover:scale-110 transition-transform duration-300">
-                        <i className={`${item.icon} text-3xl`}></i>
-                      </div>
-                      <div>
-                        <h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-2">{item.title}</h4>
-                        <p className="text-gray-600 dark:text-gray-400 mb-3 text-sm whitespace-pre-line">{item.description}</p>
-                        <a href={item.link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all">
-                          {item.linkText} <i className="ri-arrow-right-line"></i>
-                        </a>
+                {displayItems.length > 0 ? (
+                  displayItems.map((item, index) => (
+                    <div key={index} className="group bg-gray-50 dark:bg-white/5 p-6 rounded-2xl border border-gray-100 dark:border-white/10 hover:border-primary/50 transition-colors">
+                      <div className="flex items-start gap-5">
+                        <div className="w-14 h-14 bg-white dark:bg-white/10 rounded-xl flex items-center justify-center text-primary shadow-sm group-hover:scale-110 transition-transform duration-300">
+                          <i className={`${item.icon} text-3xl`}></i>
+                        </div>
+                        <div>
+                          <h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-2">{item.title}</h4>
+                          <p className="text-gray-600 dark:text-gray-400 mb-3 text-sm whitespace-pre-line">{item.description}</p>
+                          <a href={item.link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all cursor-pointer">
+                            {item.linkText} <i className="ri-arrow-right-line"></i>
+                          </a>
+                        </div>
                       </div>
                     </div>
+                  ))
+                ) : (
+                  <div className="text-center text-gray-500 dark:text-gray-400 py-8">
+                    <i className="ri-information-line text-4xl mb-2 block"></i>
+                    <p>{t('contact.noInfoConfigured')}</p>
+                  </div>
+                )}
+              </div>
                   </div>
                 ))}
               </div>