refactor: update UI components and page layouts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/[slug]/page.tsx

@@ -70,14 +70,14 @@ export default function PublicWishlistPage() {
       setClaimNote('');
       fetchWishlist();
     } catch (err: any) {
-      setClaimError(err.message || 'Failed to claim item');
+      setClaimError(err.message || 'Erro ao reservar item');
     } finally {
       setIsClaiming(false);
     }
   };
 
   const handleUnclaim = async (itemId: string) => {
-    if (!confirm('Are you sure you want to unclaim this item?')) {
+    if (!confirm('Tem certeza que deseja cancelar a reserva deste item?')) {
       return;
     }
 
@@ -88,7 +88,7 @@ export default function PublicWishlistPage() {
       await claimingApi.unclaim(itemId);
       fetchWishlist();
     } catch (err: any) {
-      setUnclaimError(err.message || 'Failed to unclaim item');
+      setUnclaimError(err.message || 'Erro ao cancelar reserva');
     } finally {
       setIsUnclaiming(false);
     }
@@ -100,16 +100,16 @@ export default function PublicWishlistPage() {
 
   const formatPrice = (price: number | null, currency: string) => {
     if (!price) return null;
-    return new Intl.NumberFormat('en-US', {
+    return new Intl.NumberFormat('pt-BR', {
       style: 'currency',
-      currency: currency || 'USD',
+      currency: currency || 'BRL',
     }).format(price);
   };
 
   if (isLoading) {
     return (
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
-        <p className="text-gray-600 dark:text-gray-400">Loading...</p>
+        <p className="text-gray-600 dark:text-gray-400">Carregando...</p>
       </div>
     );
   }
@@ -118,8 +118,8 @@ export default function PublicWishlistPage() {
     return (
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
         <div className="text-center">
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Wishlist Not Found</h1>
-          <p className="text-gray-600 dark:text-gray-400">{error || 'This wishlist does not exist or is not public.'}</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Lista não encontrada</h1>
+          <p className="text-gray-600 dark:text-gray-400">{error || 'Esta lista não existe ou não é pública.'}</p>
         </div>
       </div>
     );
@@ -155,14 +155,14 @@ export default function PublicWishlistPage() {
                 d="M10 19l-7-7m0 0l7-7m-7 7h18"
               />
             </svg>
-            Back to Home
+            Voltar ao início
           </a>
 
           {/* Preferences Section */}
           {wishlist.preferences && (
             <div className="mb-8 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
               <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
-                General Interests & Preferences
+                Interesses e Preferências
               </h2>
               <div
                 className="prose prose-indigo dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 [&_a]:text-indigo-600 [&_a]:dark:text-indigo-400 [&_a]:hover:underline"
@@ -189,11 +189,11 @@ export default function PublicWishlistPage() {
                   onChange={(e) => setShowClaimed(e.target.checked)}
                   className="h-4 w-4 text-blue-600 border-gray-300 rounded"
                 />
-                <span className="ml-2 text-sm text-gray-700 dark:text-gray-300">Show claimed items</span>
+                <span className="ml-2 text-sm text-gray-700 dark:text-gray-300">Mostrar itens reservados</span>
               </label>
             </div>
             <div className="text-sm text-gray-600 dark:text-gray-400">
-              {filteredItems.length} of {items.length} items
+              {filteredItems.length} de {items.length} itens
             </div>
           </div>
 
@@ -201,7 +201,7 @@ export default function PublicWishlistPage() {
           {filteredItems.length === 0 ? (
             <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow">
               <p className="text-gray-500 dark:text-gray-400">
-                {showClaimed ? 'No items in this wishlist yet' : 'All items have been claimed!'}
+                {showClaimed ? 'Nenhum item nesta lista ainda' : 'Todos os itens já foram reservados!'}
               </p>
             </div>
           ) : (
@@ -272,30 +272,30 @@ export default function PublicWishlistPage() {
                             </div>
                           </div>
                           <p className="text-center text-lg font-semibold text-gray-900 dark:text-white mb-1">
-                            Item Claimed!
+                            Item reservado!
                           </p>
                           <p className="text-center text-sm text-gray-600 dark:text-gray-400 mb-2">
-                            The status is now locked.
+                            O status está confirmado.
                           </p>
                           {justClaimedNote && (
                             <p className="text-center text-xs text-gray-600 dark:text-gray-400 italic">
-                              Your Note: &quot;{justClaimedNote}&quot;
+                              Sua nota: &quot;{justClaimedNote}&quot;
                             </p>
                           )}
                         </div>
                       ) : item.claimedAt ? (
                         <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded p-3">
                           <p className="text-sm font-medium text-green-800 dark:text-green-200">
-                            Claimed by {item.claimedByName}
+                            Reservado por {item.claimedByName}
                           </p>
                           {item.claimedByNote && (
                             <p className="text-xs text-green-700 dark:text-green-300 mt-1">
-                              Note: {item.claimedByNote}
+                              Nota: {item.claimedByNote}
                             </p>
                           )}
                           {item.isPurchased && (
                             <p className="text-xs text-green-700 dark:text-green-300 mt-1 font-medium">
-                              ✓ Purchased
+                              ✓ Comprado
                             </p>
                           )}
                           {showClaimed && (
@@ -304,7 +304,7 @@ export default function PublicWishlistPage() {
                               disabled={isUnclaiming}
                               className="mt-3 w-full px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 font-medium disabled:opacity-50 transition-colors cursor-pointer text-sm"
                             >
-                              {isUnclaiming ? 'Unclaiming...' : 'Unclaim Item'}
+                              {isUnclaiming ? 'Cancelando...' : 'Cancelar reserva'}
                             </button>
                           )}
                         </div>
@@ -319,12 +319,12 @@ export default function PublicWishlistPage() {
 
                             <div>
                               <label htmlFor={`claim-note-${item.id}`} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                Add a Note (Optional):
+                                Deixe uma nota (opcional):
                               </label>
                               <textarea
                                 id={`claim-note-${item.id}`}
                                 rows={3}
-                                placeholder="Let them know your plans! e.g., 'Buying this next week' or 'Found a great deal online' or 'Need to check the size first'"
+                                placeholder="Ex: 'Vou comprar na semana que vem' ou 'Achei uma boa promoção'"
                                 className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:text-white resize-none"
                                 value={claimNote}
                                 onChange={(e) => setClaimNote(e.target.value)}
@@ -336,7 +336,7 @@ export default function PublicWishlistPage() {
                               disabled={isClaiming}
                               className="w-full px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 font-medium disabled:opacity-50 transition-colors cursor-pointer"
                             >
-                              {isClaiming ? 'Claiming...' : 'Confirm Claim'}
+                              {isClaiming ? 'Reservando...' : 'Confirmar reserva'}
                             </button>
                           </form>
                         </div>
@@ -345,7 +345,7 @@ export default function PublicWishlistPage() {
                           onClick={() => handleClaimItem(item.id)}
                           className="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 font-medium transition-colors cursor-pointer"
                         >
-                          Claim This Item
+                          Vou dar este presente
                         </button>
                       )}
                       </div>

app/layout.tsx

@@ -14,13 +14,13 @@ async function getSettings() {
     }, {} as Record<string, string>);
 
     return {
-      siteTitle: settingsObj.siteTitle || 'Wishlist',
-      homepageSubtext: settingsObj.homepageSubtext || 'Browse and explore available wishlists',
+      siteTitle: settingsObj.siteTitle || 'Chá de Bebê',
+      homepageSubtext: settingsObj.homepageSubtext || 'Escolha um presente da lista!',
     };
   } catch (error) {
     return {
-      siteTitle: 'Wishlist',
-      homepageSubtext: 'Browse and explore available wishlists',
+      siteTitle: 'Chá de Bebê',
+      homepageSubtext: 'Escolha um presente da lista!',
     };
   }
 }
@@ -29,7 +29,7 @@ export async function generateMetadata(): Promise<Metadata> {
   const settings = await getSettings();
   return {
     title: settings.siteTitle,
-    description: "Self-hosted wishlist application for families",
+    description: "Lista de presentes para o chá de bebê",
     icons: {
       icon: '/icon.svg',
     },
@@ -42,7 +42,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="pt-BR">
       <body className="font-sans antialiased bg-gray-50 dark:bg-gray-900">
         <AuthProvider>
           <ThemeProvider>{children}</ThemeProvider>

app/lock/page.tsx

@@ -32,11 +32,11 @@ export default function LockPage() {
         router.push('/');
         router.refresh();
       } else {
-        setError(data.error || 'Incorrect password');
+        setError(data.error || 'Senha incorreta');
         setPassword('');
       }
     } catch (err) {
-      setError('Failed to verify password. Please try again.');
+      setError('Erro ao verificar senha. Tente novamente.');
       console.error('Lock verification error:', err);
     } finally {
       setIsSubmitting(false);
@@ -46,8 +46,8 @@ export default function LockPage() {
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       <Header
-        title="Password Required"
-        subtitle="Please enter the password to access this site"
+        title="Senha necessária"
+        subtitle="Digite a senha para acessar o site"
       />
 
       <div className="max-w-md mx-auto py-12 px-4 sm:px-6 lg:px-8">
@@ -62,7 +62,7 @@ export default function LockPage() {
 
               <div>
                 <label htmlFor="password" className="block text-base font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Password
+                  Senha
                 </label>
                 <input
                   type="password"
@@ -72,7 +72,7 @@ export default function LockPage() {
                   className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-lg"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  placeholder="Enter password"
+                  placeholder="Digite a senha"
                   disabled={isSubmitting}
                 />
               </div>
@@ -82,7 +82,7 @@ export default function LockPage() {
                 disabled={isSubmitting}
                 className="w-full px-6 py-3 text-lg font-semibold text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                {isSubmitting ? 'Verifying...' : 'Submit'}
+                {isSubmitting ? 'Verificando...' : 'Entrar'}
               </button>
             </form>
           </div>

app/not-found.tsx

@@ -1,7 +1,6 @@
-// Root-level not-found page
 export default function RootNotFound() {
   return (
-    <html lang="en">
+    <html lang="pt-BR">
       <body>
         <div style={{
           minHeight: '100vh',
@@ -22,10 +21,10 @@ export default function RootNotFound() {
           }}>
             <div style={{ fontSize: '3.75rem', fontWeight: 'bold', color: '#1f2937' }}>404</div>
             <h1 style={{ fontSize: '1.5rem', fontWeight: '600', color: '#111827', marginTop: '1rem' }}>
-              Page Not Found
+              Página não encontrada
             </h1>
             <p style={{ color: '#4b5563', marginTop: '1rem' }}>
-              The page you are looking for doesn't exist.
+              A página que você procura não existe.
             </p>
             <a
               href="/"
@@ -40,7 +39,7 @@ export default function RootNotFound() {
                 textDecoration: 'none'
               }}
             >
-              Go Home
+              Voltar ao início
             </a>
           </div>
         </div>

app/page.tsx

@@ -11,7 +11,7 @@ import ShareButton from '@/components/share-button';
 export default function Home() {
   const [wishlists, setWishlists] = useState<Wishlist[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [settings, setSettings] = useState<Settings>({ siteTitle: 'Wishlist', homepageSubtext: 'Browse and explore available wishlists' });
+  const [settings, setSettings] = useState<Settings>({ siteTitle: 'Chá de Bebê', homepageSubtext: 'Escolha um presente da lista!' });
 
   useEffect(() => {
     fetchWishlists();
@@ -47,8 +47,8 @@ export default function Home() {
           subtitle={settings.homepageSubtext}
           actions={
             <ShareButton
-              title="Check out this wishlist!"
-              text="I thought you might be interested in this wishlist."
+              title="Veja a lista do chá de bebê!"
+              text="Dê uma olhada na lista de presentes do chá de bebê."
             />
           }
         />
@@ -58,11 +58,11 @@ export default function Home() {
           <div className="px-4 sm:px-0">
             {isLoading ? (
               <div className="text-center py-12">
-                <p className="text-gray-600 dark:text-gray-400">Loading...</p>
+                <p className="text-gray-600 dark:text-gray-400">Carregando...</p>
               </div>
             ) : wishlists.length === 0 ? (
               <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow">
-                <p className="text-gray-500 dark:text-gray-400">No public wishlists available yet</p>
+                <p className="text-gray-500 dark:text-gray-400">Nenhuma lista disponível ainda</p>
               </div>
             ) : (
               <div className="grid grid-cols-1 gap-6">

components/footer.tsx

@@ -1,55 +1,18 @@
 'use client';
 
-import Link from 'next/link';
 import { useTheme } from '@/components/theme-provider';
-import { useAuth } from '@/lib/auth-context';
 
 export default function Footer() {
   const { theme, toggleTheme } = useTheme();
-  const { isAuthenticated } = useAuth();
 
   return (
     <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
       <div className="flex flex-col items-center gap-2 text-sm">
-        <div className="flex items-center gap-3 text-gray-500 dark:text-gray-400">
-          <p>Built for families</p>
-        </div>
         <div className="flex items-center gap-3">
-          <Link
-            href="/admin/login"
-            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-          >
-            Admin
-          </Link>
-          {isAuthenticated && (
-            <>
-              <span className="text-gray-400">•</span>
-              <a
-                href="https://github.com/Reggio-Digital/wishlist"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-                title="GitHub Repository"
-              >
-                <svg
-                  className="w-5 h-5"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </a>
-            </>
-          )}
-          <span className="text-gray-400">•</span>
           <button
             onClick={toggleTheme}
             className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors text-gray-700 dark:text-gray-300 font-medium"
-            aria-label="Toggle theme"
+            aria-label="Alternar tema"
           >
             {theme === 'light' ? (
               <>
@@ -66,7 +29,7 @@ export default function Footer() {
                     d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
                   />
                 </svg>
-                <span>Dark Mode</span>
+                <span>Modo escuro</span>
               </>
             ) : (
               <>
@@ -83,7 +46,7 @@ export default function Footer() {
                     d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
                   />
                 </svg>
-                <span>Light Mode</span>
+                <span>Modo claro</span>
               </>
             )}
           </button>

components/header.tsx

@@ -20,7 +20,7 @@ export default function Header({ title, subtitle, imageUrl, actions, maxWidth =
         <div className="sticky top-0 z-50 bg-yellow-50 dark:bg-yellow-900 border-b border-yellow-200 dark:border-yellow-800">
           <div className={`${maxWidth} mx-auto py-3 px-4 sm:px-6 lg:px-8`}>
             <p className="text-center text-sm text-yellow-800 dark:text-yellow-200">
-              ⚠️ Warning: Viewing public wishlists may spoil surprises
+              ⚠️ Atenção: visualizar listas públicas pode estragar surpresas
             </p>
           </div>
         </div>

components/share-button.tsx

@@ -10,8 +10,8 @@ interface ShareButtonProps {
 }
 
 export default function ShareButton({
-  title = 'Check out this wishlist!',
-  text = 'I thought you might be interested in this wishlist.',
+  title = 'Veja a lista do chá de bebê!',
+  text = 'Dê uma olhada na lista de presentes do chá de bebê.',
   url,
   className = ''
 }: ShareButtonProps) {
@@ -27,10 +27,10 @@ export default function ShareButton({
       // Fallback: copy to clipboard
       try {
         await navigator.clipboard.writeText(shareUrl);
-        alert('Link copied to clipboard!');
+        alert('Link copiado!');
       } catch (err) {
         console.error('Failed to copy:', err);
-        alert('Unable to share or copy link');
+        alert('Não foi possível compartilhar');
       }
       return;
     }
@@ -58,7 +58,7 @@ export default function ShareButton({
     <button
       onClick={handleShare}
       className={`inline-flex items-center px-6 py-3 border-2 border-indigo-600 dark:border-indigo-500 text-base font-semibold rounded-lg text-indigo-600 dark:text-indigo-400 bg-white dark:bg-gray-800 hover:bg-indigo-50 dark:hover:bg-gray-700 transition-all cursor-pointer ${className}`}
-      title="Share this page"
+      title="Compartilhar"
     >
       <svg
         className="w-5 h-5 mr-2"
@@ -73,7 +73,7 @@ export default function ShareButton({
           d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
         />
       </svg>
-      Share
+      Compartilhar
     </button>
   );
 }