auto-claude: subtask-7-1 - Create functionality tests for navigation, forms, and language switching

- Add comprehensive E2E functionality tests (33 tests):
  - Navigation: page loading, desktop/mobile nav links, active states
  - Contact Form: validation, submission, error handling
  - Language Switching: locale changes, URL preservation, dropdown behavior
  - Cross-functional: combined navigation and language flows
  - Accessibility: ARIA attributes for nav, menu, form labels

- Fix Next.js 15 ssr:false in server component issue:
  - Create ChatbotLoader client wrapper for dynamic import
  - Update layout.tsx to use ChatbotLoader instead of direct dynamic import

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/[locale]/layout.tsx

@@ -2,19 +2,14 @@ import { notFound } from 'next/navigation';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages, setRequestLocale } from 'next-intl/server';
 import { Inter } from 'next/font/google';
-import dynamic from 'next/dynamic';
 import { locales, localeMetadata, seoKeywords, type Locale } from '@/i18n/config';
 import type { Metadata } from 'next';
 import { Header, Footer, GlobalBackground } from '@/components/layout';
 import { PersonJsonLd, ProfessionalServiceJsonLd, OrganizationJsonLd, WebSiteJsonLd } from '@/components/seo';
 import { WebVitals } from '@/components/analytics';
+import { ChatbotLoader } from '@/components/chat/ChatbotLoader';
 import '../globals.css';
 
-// Lazy load Chatbot component - uses browser-only APIs (localStorage)
-const Chatbot = dynamic(() => import('@/components/chat/Chatbot').then((mod) => mod.Chatbot), {
-  ssr: false,
-});
-
 const inter = Inter({
   subsets: ['latin'],
   display: 'swap',
@@ -130,7 +125,7 @@ export default async function LocaleLayout({ children, params }: Props) {
             <Footer />
           </div>
           {/* AI Chatbot - lazy loaded for performance */}
-          <Chatbot />
+          <ChatbotLoader />
         </NextIntlClientProvider>
         {/* Core Web Vitals monitoring */}
         <WebVitals />

src/components/chat/ChatbotLoader.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+/**
+ * Client-side wrapper for the Chatbot component.
+ * Uses dynamic import with ssr: false to prevent hydration issues
+ * with browser-only APIs like localStorage.
+ */
+const Chatbot = dynamic(
+  () => import('./Chatbot').then((mod) => mod.Chatbot),
+  { ssr: false }
+);
+
+export function ChatbotLoader() {
+  return <Chatbot />;
+}

src/components/chat/index.ts

@@ -3,5 +3,6 @@
  */
 
 export { Chatbot } from './Chatbot';
+export { ChatbotLoader } from './ChatbotLoader';
 export { ChatMessage, TypingIndicator, WelcomeMessage } from './ChatMessage';
 export type { ChatMessageData, ChatRole } from './ChatMessage';