feat: CMS com limites de caracteres, traduções auto e painel de notificações

frontend/src/components/Header.tsx

@@ -3,16 +3,19 @@
 import Link from 'next/link';
 import { useState, useEffect } from 'react';
 import { useTheme } from "next-themes";
-import { useLanguage } from '@/contexts/LanguageContext';
-import { T } from '@/components/TranslatedText';
+import { useLocale } from '@/contexts/LocaleContext';
+import { localeFlags, localeNames, type Locale } from '@/lib/i18n';
 
 export default function Header() {
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const { theme, setTheme } = useTheme();
-  const { language, setLanguage, t } = useLanguage();
+  const { locale, setLocale, t } = useLocale();
   const [mounted, setMounted] = useState(false);
 
+  // Prefixo para links baseado no locale
+  const prefix = locale === 'pt' ? '' : `/${locale}`;
+
   useEffect(() => {
     setMounted(true);
   }, []);
@@ -33,17 +36,10 @@ export default function Header() {
     setTheme(theme === 'dark' ? 'light' : 'dark');
   };
 
-  const cycleLanguage = () => {
-    const langs: ('PT' | 'EN' | 'ES')[] = ['PT', 'EN', 'ES'];
-    const currentIndex = langs.indexOf(language);
-    const nextIndex = (currentIndex + 1) % langs.length;
-    setLanguage(langs[nextIndex]);
-  };
-
   return (
     <header className="w-full bg-white dark:bg-secondary shadow-sm sticky top-0 z-50 transition-colors duration-300">
       <div className="container mx-auto px-4 h-20 flex items-center justify-between gap-4">
-        <Link href="/" className="flex items-center gap-3 shrink-0 group mr-auto z-50 relative">
+        <Link href={`${prefix}/`} className="flex items-center gap-3 shrink-0 group mr-auto z-50 relative">
           <i className="ri-building-2-fill text-4xl text-primary group-hover:scale-105 transition-transform"></i>
           <div className="flex items-center gap-2">
             <span className="text-3xl font-bold text-secondary dark:text-white font-headline leading-none">OCCTO</span>
@@ -67,35 +63,35 @@ export default function Header() {
           </div>
 
           <nav className="flex items-center gap-6 mr-4">
-            <Link href="/" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+            <Link href={`${prefix}/`} className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
               <i className="ri-home-4-line text-lg group-hover:scale-110 transition-transform"></i>
-              <span className="hidden lg:inline"><T>{t('nav.home')}</T></span>
+              <span className="hidden lg:inline">{t('nav.home')}</span>
             </Link>
-            <Link href="/servicos" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+            <Link href={`${prefix}/servicos`} className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
               <i className="ri-tools-line text-lg group-hover:scale-110 transition-transform"></i>
-              <span className="hidden lg:inline"><T>{t('nav.services')}</T></span>
+              <span className="hidden lg:inline">{t('nav.services')}</span>
             </Link>
-            <Link href="/projetos" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+            <Link href={`${prefix}/projetos`} className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
               <i className="ri-briefcase-line text-lg group-hover:scale-110 transition-transform"></i>
-              <span className="hidden lg:inline"><T>{t('nav.projects')}</T></span>
+              <span className="hidden lg:inline">{t('nav.projects')}</span>
             </Link>
-            <Link href="/contato" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+            <Link href={`${prefix}/contato`} className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
               <i className="ri-mail-send-line text-lg group-hover:scale-110 transition-transform"></i>
-              <span className="hidden lg:inline"><T>{t('nav.contact')}</T></span>
+              <span className="hidden lg:inline">{t('nav.contact')}</span>
             </Link>
-            <Link href="/sobre" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+            <Link href={`${prefix}/sobre`} className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
               <i className="ri-user-line text-lg group-hover:scale-110 transition-transform"></i>
-              <span className="hidden lg:inline"><T>{t('nav.about')}</T></span>
+              <span className="hidden lg:inline">{t('nav.about')}</span>
             </Link>
           </nav>
 
           <div className="shrink-0 ml-2">
             <Link 
-              href="/contato" 
+              href={`${prefix}/contato`} 
               className="px-6 py-2.5 bg-primary text-white rounded-lg font-bold hover-primary transition-colors flex items-center gap-2"
             >
               <i className="ri-whatsapp-line"></i>
-              <span className="hidden xl:inline"><T>{t('nav.contact_us')}</T></span>
+              <span className="hidden xl:inline">{t('nav.contactUs')}</span>
             </Link>
           </div>
 
@@ -119,24 +115,24 @@ export default function Header() {
                 className="h-10 px-3 rounded-full bg-gray-100 dark:bg-white/10 flex items-center justify-center gap-2 text-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-white/20 transition-colors font-bold text-sm cursor-pointer"
                 aria-label="Alterar idioma"
               >
-                <span>{language === 'PT' ? '🇧🇷' : language === 'EN' ? '🇺🇸' : '🇪🇸'}</span>
-                <span>{language}</span>
+                <span>{localeFlags[locale]}</span>
+                <span>{locale.toUpperCase()}</span>
                 <i className="ri-arrow-down-s-line text-xs opacity-50"></i>
               </button>
               
               <div className="absolute top-full right-0 pt-2 w-32 hidden group-hover:block animate-in fade-in slide-in-from-top-2 duration-200">
                 <div className="bg-white dark:bg-secondary rounded-xl shadow-xl border border-gray-100 dark:border-white/10 overflow-hidden">
-                  <button onClick={() => setLanguage('PT')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
-                    <span className="text-lg">🇧🇷</span>
-                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">Português</span>
+                  <button onClick={() => setLocale('pt')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
+                    <span className="text-lg">{localeFlags.pt}</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">{localeNames.pt}</span>
                   </button>
-                  <button onClick={() => setLanguage('EN')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
-                    <span className="text-lg">🇺🇸</span>
-                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">English</span>
+                  <button onClick={() => setLocale('en')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
+                    <span className="text-lg">{localeFlags.en}</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">{localeNames.en}</span>
                   </button>
-                  <button onClick={() => setLanguage('ES')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
-                    <span className="text-lg">🇪🇸</span>
-                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">Español</span>
+                  <button onClick={() => setLocale('es')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
+                    <span className="text-lg">{localeFlags.es}</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">{localeNames.es}</span>
                   </button>
                 </div>
               </div>
@@ -167,43 +163,43 @@ export default function Header() {
           </div>
 
           <nav className="flex flex-col gap-4 text-base font-medium">
-            <Link href="/" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+            <Link href={`${prefix}/`} onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
               <i className="ri-home-4-line text-primary text-lg"></i>
-              <T>{t('nav.home')}</T>
+              {t('nav.home')}
             </Link>
-            <Link href="/servicos" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+            <Link href={`${prefix}/servicos`} onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
               <i className="ri-tools-line text-primary text-lg"></i>
-              <T>{t('nav.services')}</T>
+              {t('nav.services')}
             </Link>
-            <Link href="/projetos" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+            <Link href={`${prefix}/projetos`} onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
               <i className="ri-briefcase-line text-primary text-lg"></i>
-              <T>{t('nav.projects')}</T>
+              {t('nav.projects')}
             </Link>
-            <Link href="/contato" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+            <Link href={`${prefix}/contato`} onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
               <i className="ri-mail-send-line text-primary text-lg"></i>
-              <T>{t('nav.contact')}</T>
+              {t('nav.contact')}
             </Link>
-            <Link href="/sobre" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+            <Link href={`${prefix}/sobre`} onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
               <i className="ri-user-line text-primary text-lg"></i>
-              <T>{t('nav.about')}</T>
+              {t('nav.about')}
             </Link>
           </nav>
 
           <div className="mt-6 flex flex-col gap-4 pb-8 shrink-0">
             <Link 
-              href="/contato" 
+              href={`${prefix}/contato`} 
               onClick={() => setIsMobileMenuOpen(false)}
               className="w-full py-4 bg-primary text-white rounded-xl font-bold text-center flex items-center justify-center gap-2 shadow-lg shadow-primary/20"
             >
               <i className="ri-whatsapp-line text-xl"></i>
-              <T>{t('nav.contact_us')}</T>
+              {t('nav.contactUs')}
             </Link>
 
             <div 
               className="flex items-center justify-between p-4 bg-gray-50 dark:bg-white/5 rounded-xl cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10 transition-colors"
               onClick={toggleTheme}
             >
-              <span className="text-sm font-bold text-gray-500 dark:text-gray-400"><T>{t('nav.theme')}</T></span>
+              <span className="text-sm font-bold text-gray-500 dark:text-gray-400">{t('nav.theme')}</span>
               <button 
                 className="w-10 h-10 rounded-full bg-white dark:bg-white/10 flex items-center justify-center text-gray-600 dark:text-yellow-400 shadow-sm transition-colors"
               >
@@ -216,11 +212,11 @@ export default function Header() {
             </div>
 
             <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-white/5 rounded-xl">
-              <span className="text-sm font-bold text-gray-500 dark:text-gray-400"><T>{t('nav.language')}</T></span>
+              <span className="text-sm font-bold text-gray-500 dark:text-gray-400">{t('nav.language')}</span>
               <div className="flex gap-2">
-                <button onClick={() => setLanguage('PT')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${language === 'PT' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>🇧🇷</button>
-                <button onClick={() => setLanguage('EN')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${language === 'EN' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>🇺🇸</button>
-                <button onClick={() => setLanguage('ES')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${language === 'ES' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>🇪🇸</button>
+                <button onClick={() => setLocale('pt')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${locale === 'pt' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>{localeFlags.pt}</button>
+                <button onClick={() => setLocale('en')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${locale === 'en' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>{localeFlags.en}</button>
+                <button onClick={() => setLocale('es')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${locale === 'es' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>{localeFlags.es}</button>
               </div>
             </div>
           </div>