changes: Added chatbot

app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import ChatwootWidget from "@/components/chatwoot-widget";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -42,6 +43,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased select-none overscroll-none`}
       >
         {children}
+        <ChatwootWidget />
       </body>
     </html>
   );

app/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState, useCallback, Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { Camera, History, VideoOff, Settings, Video, X } from 'lucide-react';
+import { Camera, History, VideoOff, Settings, Video, X, MessageCircle } from 'lucide-react';
 
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { type Shoe } from '@/lib/shoe-database';
@@ -607,14 +607,20 @@ function HomePageContent() {
                 <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-3xl px-4 sm:px-8 py-3 sm:py-4 shadow-2xl">
                   <div className="flex items-center gap-4 sm:gap-6">
                     
-                    {/* Settings Button - Touch optimized (min 44px) */}
+                    {/* Chatbot Button - Touch optimized (min 44px) */}
                     <button
-                      onClick={() => setSettingsPanelOpen(!isSettingsPanelOpen)}
+                      onClick={() => {
+                        if (window.$chatwoot) {
+                          window.$chatwoot.toggle();
+                        } else {
+                          console.warn('Chatwoot not loaded yet');
+                        }
+                      }}
                       className='group relative min-w-[44px] min-h-[44px]'
-                      aria-label="Ajustes"
+                      aria-label="Abrir chat de soporte"
                     >
                       <div className="w-11 h-11 sm:w-12 sm:h-12 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full flex items-center justify-center border border-white/30 active:from-blue-500/60 active:to-purple-500/60 transition-all duration-200 active:scale-95">
-                        <Settings size={18} className="sm:w-5 sm:h-5 text-white drop-shadow-sm" />
+                        <MessageCircle size={18} className="sm:w-5 sm:h-5 text-white drop-shadow-sm" />
                       </div>
                       {/* Glow Effect on active */}
                       <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur opacity-0 group-active:opacity-100 transition-opacity duration-200"></div>

components/chatwoot-widget.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useEffect } from 'react';
+
+declare global {
+  interface Window {
+    chatwootSDK?: {
+      run: (config: {
+        websiteToken: string;
+        baseUrl: string;
+        hideMessageBubble?: boolean;
+        type?: 'standard' | 'expanded_bubble';
+      }) => void;
+    };
+    $chatwoot?: {
+      toggle: () => void;
+      open: () => void;
+      close: () => void;
+      setCustomAttributes?: (attributes: Record<string, any>) => void;
+    };
+    chatwootSettings?: {
+      type?: 'standard' | 'expanded_bubble';
+      hideMessageBubble?: boolean;
+      position?: 'left' | 'right';
+    };
+  }
+}
+
+export default function ChatwootWidget() {
+  useEffect(() => {
+    // Add Chatwoot Settings
+    const BASE_URL = 'https://ainoc-omnichannel.beprime.mx/';
+    const WEBSITE_TOKEN = 'U8Ce8yUzN9hngW5sAmFDDhvv';
+
+    // Configurar opciones antes de cargar el script
+    window.chatwootSettings = {
+      hideMessageBubble: true,
+      position: 'right',
+      type: 'expanded_bubble', // Modo Chat simple
+    };
+
+    // Check if script already exists
+    if (document.getElementById('chatwoot-sdk')) {
+      return;
+    }
+
+    // Create script element
+    const script = document.createElement('script');
+    script.id = 'chatwoot-sdk';
+    script.src = `${BASE_URL}/packs/js/sdk.js`;
+    script.async = true;
+
+    script.onload = () => {
+      window.chatwootSDK?.run({
+        websiteToken: WEBSITE_TOKEN,
+        baseUrl: BASE_URL,
+        hideMessageBubble: true, // Ocultar el botón flotante predeterminado
+        type: 'expanded_bubble', // Modo Chat simple y directo
+      });
+    };
+
+    // Append to body
+    document.body.appendChild(script);
+
+    // Cleanup function
+    return () => {
+      const existingScript = document.getElementById('chatwoot-sdk');
+      if (existingScript) {
+        document.body.removeChild(existingScript);
+      }
+      // Limpiar configuración global
+      delete window.chatwootSettings;
+    };
+  }, []);
+
+  return (
+    <>
+      {/* Ocultar el botón flotante de Chatwoot con CSS */}
+      <style jsx global>{`
+        .woot-widget-bubble,
+        .woot--bubble-holder {
+          display: none !important;
+        }
+      `}</style>
+    </>
+  );
+}