sprememba strani in mobilna optimizacija

chatbot.js

@@ -1,134 +1,193 @@
 /*
     DEDICATED JAVASCRIPT FOR AIMOJSTER.SI CHATBOT WIDGET
-    Last Updated: 16. September 2025 (v8.0 - Final Production Version)
+    Last Updated: 16. September 2025 (v15.0 - Relaunch with Demo Center)
     Author: Gemini AI for AIMojster.si
 
-    This is the final, clean production version of the chatbot script.
+    This script powers the interactive demo center on the redesigned website.
-    It reliably creates, stores (per session), and sends a unique session ID with every user message,
+    It includes logic to launch specific demo bots directly from the main page content,
-    ensuring that the n8n workflow functions correctly.
+    ensuring a seamless and engaging user experience.
 */
 
 document.addEventListener('DOMContentLoaded', function() {
 
-    // --- DOM ELEMENTI ---
+    //======================================================================
+    // 1. KONFIGURACIJA IN IZBIRA DOM ELEMENTOV
+    //======================================================================
+
     const chatWidgetButton = document.getElementById('chat-widget-button');
     const chatContainer = document.getElementById('chat-widget-container');
     const closeChatBtn = document.getElementById('close-chat-btn');
+    const chatHeaderTitle = document.getElementById('chat-header-title');
     const chatMessagesContainer = document.getElementById('chat-messages');
     const chatInputForm = document.getElementById('chat-input-form');
     const chatInputField = document.getElementById('chat-input');
-    
+    const chatResetBtn = document.getElementById('chat-reset-btn');
-    // --- KONFIGURACIJA ---
+    const demoLaunchButtons = document.querySelectorAll('.launch-demo-btn'); // NOVO: Gumbi v demo centru
-    const N8N_WEBHOOK_URL = 'https://n8n.spletnimojster.si/webhook/joze/chat';
 
-    // Preverimo, ali obstajajo vsi potrebni HTML elementi za delovanje.
+    if (!chatWidgetButton || !chatContainer || !chatInputForm || !chatHeaderTitle || !chatResetBtn) {
-    if (!chatWidgetButton || !chatContainer || !chatInputForm) {
+        console.error("Critical chatbot HTML elements are missing. The script will not initialize.");
-        console.error("Chatbot HTML elements could not be found. The script will not initialize.");
         return;
     }
 
-    // ====================================================================== //
+    const bots = {
-    // === UPRAVLJANJE S SEJO (SESSION ID MANAGEMENT) ===                     //
+        main: {
-    // ====================================================================== //
+            name: "AI Mojster Asistent",
+            url: 'https://n8n.spletnimojster.si/webhook/013f5fb3-52bd-44bb-bc0a-41027d9916af/chat',
+            greeting: "Pozdravljeni! Sem AI asistent podjetja AIMojster. 🤖 Tukaj sem, da vam v živo pokažem, kaj zmorejo naši pametni boti. Izberite enega od spodnjih primerov in ga preizkusite!"
+        },
+        rag: {
+            name: "Demo: Pekarna Novak",
+            url: 'https://n8n.spletnimojster.si/webhook/joze/chat',
+            greeting: "Dober dan in dobrodošli v Pekarni Novak! 🥐 Diši po sveže pečenem, kajne? Sem vaš virtualni pomočnik in poznam celotno našo ponudbo. Vprašajte me, kaj imamo danes dobrega, ali preverite alergene za kateri koli izdelek."
+        },
+        calendar: {
+            name: "Demo: Potovalni Svetovalec",
+            url: 'https://n8n.spletnimojster.si/webhook/d0b3a15a-8d1c-437c-8523-00e108af14a4/chat',
+            greeting: "Pozdravljeni v agenciji Sončni Pobegi! ☀️ Pripravljeni na sanjsko potovanje? Povejte mi svoje želje – iščete sprostitev na plaži, aktivne počitnice v gorah ali raziskovanje mest? Skupaj bova našla popolno destinacijo za vas!"
+        },
+        sales: {
+            name: "Demo: Fitnes Svetovalec",
+            url: 'https://n8n.spletnimojster.si/webhook/63f6f29f-54a2-4a6c-bf5e-0767a590a2a8/chat',
+            greeting: "Živjo, bodoči član! 💪 Sem vaš osebni AI svetovalec v fitnes centru FitLife. Tukaj sem, da vam pomagam najti popoln paket članstva. Pripravljeni, da začneva vašo fitnes pot?"
+        }
+    };
+    
+    let activeBotKey = 'main';
+
+    // ======================================================================
+    // 2. UPRAVLJANJE STANJA IN Vmesnika (UI)
+    // ======================================================================
+
+    function startConversation() {
+        chatContainer.classList.remove('hidden');
+        activeBotKey = 'main';
+        updateChatHeader();
+        chatMessagesContainer.innerHTML = '';
+        
+        showTypingIndicator();
+        setTimeout(() => {
+            hideTypingIndicator();
+            addMessageToUI(bots.main.greeting, 'bot');
+            showBotSelectionButtons();
+        }, 1200);
+
+        chatResetBtn.classList.remove('visible');
+        chatInputForm.classList.remove('hidden');
+        chatInputField.focus();
+    }
+    
+    function switchBot(botKey) {
+        if (!bots[botKey]) {
+            console.error(`Bot with key "${botKey}" does not exist.`);
+            return;
+        }
+        activeBotKey = botKey;
+        updateChatHeader();
+        chatMessagesContainer.innerHTML = '';
+        
+        showTypingIndicator();
+        setTimeout(() => {
+            hideTypingIndicator();
+            addMessageToUI(bots[activeBotKey].greeting, 'bot');
+        }, 1200);
+        
+        chatResetBtn.classList.add('visible');
+        chatInputForm.classList.remove('hidden');
+        chatInputField.focus();
+    }
+
+    function updateChatHeader() {
+        chatHeaderTitle.textContent = bots[activeBotKey].name;
+    }
+
+    function showBotSelectionButtons() {
+        const container = document.createElement('div');
+        container.className = 'bot-selection-container';
+        const buttonsToShow = [
+            { key: 'rag', text: 'Preizkusi Bota za Pekarno' },
+            { key: 'calendar', text: 'Preizkusi Potovalnega Agenta' },
+            { key: 'sales', text: 'Preizkusi Fitnes Svetovalca' }
+        ];
+        buttonsToShow.forEach(btnInfo => {
+            const button = document.createElement('button');
+            button.className = 'bot-selection-btn';
+            button.textContent = btnInfo.text;
+            button.addEventListener('click', () => switchBot(btnInfo.key));
+            container.appendChild(button);
+        });
+        chatMessagesContainer.appendChild(container);
+    }
+
+    // ======================================================================
+    // 3. UPRAVLJANJE S SEJO IN KOMUNIKACIJA Z N8N
+    // ======================================================================
 
-    /**
-     * Zanesljivo pridobi ali ustvari unikaten Session ID za trenutni pogovor.
-     * Uporablja `sessionStorage`, kar pomeni, da ID obstane med osveževanjem strani,
-     * a se ponastavi, ko uporabnik zapre zavihek brskalnika.
-     * @returns {string} The unique session ID for the current chat session.
-     */
     function getSessionId() {
-        const SESSION_KEY = 'aimojster_chatbot_session_id'; // Uporabimo unikatno ime ključa
+        let sessionId = sessionStorage.getItem('aimojster_multibot_session_id');
-        let sessionId = sessionStorage.getItem(SESSION_KEY);
-
         if (!sessionId) {
-            // crypto.randomUUID() je moderen, varen in standarden način za generiranje UUID-jev.
             sessionId = crypto.randomUUID();
-            sessionStorage.setItem(SESSION_KEY, sessionId);
+            sessionStorage.setItem('aimojster_multibot_session_id', sessionId);
         }
         return sessionId;
     }
 
-    // ====================================================================== //
-    // === KOMUNIKACIJA Z N8N ===                                             //
-    // ====================================================================== //
-
-    /**
-     * Sestavi in pošlje uporabnikovo sporočilo skupaj s session ID-jem na n8n webhook.
-     * @param {string} userMessage - Sporočilo, ki ga je vnesel uporabnik.
-     */
     async function sendMessageToBot(userMessage) {
         showTypingIndicator();
-
+        const currentBot = bots[activeBotKey];
-        // Pridobimo ali ustvarimo session ID za to sejo.
+        const webhookUrl = currentBot.url;
-        const currentSessionId = getSessionId();
+        const sessionId = getSessionId();
-
+        const payload = { sessionId, chatInput: userMessage, action: "sendMessage" };
-        // Sestavimo pravilen objekt (payload), ki ga n8n pričakuje.
-        const payload = {
-            sessionId: currentSessionId,
-            chatInput: userMessage,
-            action: "sendMessage"
-        };
         
         try {
-            const response = await fetch(N8N_WEBHOOK_URL, {
+            const response = await fetch(webhookUrl, {
                 method: 'POST',
-                headers: {
+                headers: { 'Content-Type': 'application/json' },
-                    'Content-Type': 'application/json'
-                },
                 body: JSON.stringify(payload)
             });
-
+            if (!response.ok) throw new Error(`Server returned status: ${response.status}`);
-            if (!response.ok) {
-                throw new Error(`Server returned status: ${response.status}`);
-            }
-
             const data = await response.json();
             const botReply = data.output;
-
+            
+            hideTypingIndicator();
             if (botReply) {
-                addBotMessageToUI(botReply);
+                addMessageToUI(botReply, 'bot');
             } else {
-                // To se zgodi, če n8n vrne prazen odgovor ali napačno strukturo.
-                console.error("Response from bot was empty or in a malformed structure.", data);
                 throw new Error("Malformed response from server.");
             }
-
         } catch (error) {
-            console.error('Error communicating with the chatbot API:', error);
+            console.error(`Error communicating with bot "${activeBotKey}":`, error);
-            addBotMessageToUI("Oprostite, prišlo je do tehnične napake. Poskusite znova kasneje.");
+            hideTypingIndicator();
+            addMessageToUI("Oprostite, prišlo je do tehnične napake. Poskusite znova kasneje.", 'bot');
         }
     }
 
-    // ====================================================================== //
+    // ======================================================================
-    // === UPRAVLJANJE Z UI IN DOGODKI ===                                    //
+    // 4. UI POMOČNIKI IN EVENT LISTENERS
-    // ====================================================================== //
+    // ======================================================================
     
-    // --- Pomožne UI funkcije ---
-    function openChatWidget() {
-        chatContainer.classList.remove('hidden');
-        chatInputField.focus();
-    }
-    
-    function closeChatWidget() {
-        chatContainer.classList.add('hidden');
-    }
-
     function addMessageToUI(text, sender) {
         const messageElement = document.createElement('div');
         messageElement.classList.add('chat-message', `${sender}-message`);
-        messageElement.textContent = text;
+        if (sender === 'bot') {
+            if (typeof marked !== 'undefined') {
+                messageElement.innerHTML = marked.parse(text);
+            } else {
+                messageElement.textContent = text;
+            }
+        } else {
+            messageElement.textContent = text;
+        }
         chatMessagesContainer.appendChild(messageElement);
-        chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
+        scrollToBottom();
     }
 
     function showTypingIndicator() {
         if (chatMessagesContainer.querySelector('.typing-indicator')) return;
         const indicator = document.createElement('div');
         indicator.classList.add('chat-message', 'bot-message', 'typing-indicator');
-        indicator.innerHTML = '<span>.</span><span>.</span><span>.</span>';
+        indicator.innerHTML = '<span></span><span></span><span></span>';
         chatMessagesContainer.appendChild(indicator);
-        chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
+        scrollToBottom();
     }
 
     function hideTypingIndicator() {
@@ -136,27 +195,45 @@ document.addEventListener('DOMContentLoaded', function() {
         if (indicator) indicator.remove();
     }
     
-    const addUserMessageToUI = (message) => addMessageToUI(message, 'user');
+    function scrollToBottom() {
-    const addBotMessageToUI = (message) => {
+        chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
-        hideTypingIndicator();
+    }
-        addMessageToUI(message, 'bot');
-    };
 
-    // --- Glavni Event Listener za oddajo sporočila ---
     chatInputForm.addEventListener('submit', function(event) {
         event.preventDefault();
         const userMessage = chatInputField.value.trim();
-
         if (userMessage) {
-            addUserMessageToUI(userMessage);
+            const selectionContainer = chatMessagesContainer.querySelector('.bot-selection-container');
+            if (selectionContainer) {
+                selectionContainer.remove();
+            }
+            addMessageToUI(userMessage, 'user');
             sendMessageToBot(userMessage);
             chatInputField.value = '';
         }
     });
 
-    // --- Event Listenerji za odpiranje in zapiranje okna ---
+    // --- Glavni Event Listenerji ---
-    chatWidgetButton.addEventListener('click', openChatWidget);
-    closeChatBtn.addEventListener('click', closeChatWidget);
 
-    console.log("Chatbot v8.0 (Final Production) initialized successfully.");
+    // 1. Klik na plavajoči gumb (odpre glavnega bota)
+    chatWidgetButton.addEventListener('click', startConversation);
+
+    // 2. Klik na gumb za zapiranje
+    closeChatBtn.addEventListener('click', () => chatContainer.classList.add('hidden'));
+    
+    // 3. Klik na gumb za vrnitev v glavni meni
+    chatResetBtn.addEventListener('click', startConversation);
+
+    // 4. NOVO: Klik na gumbe v "Demo Centru" na strani
+    demoLaunchButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const botKey = this.dataset.botKey; // Preberemo ključ bota (npr. 'rag')
+            if (botKey) {
+                chatContainer.classList.remove('hidden'); // Najprej odpremo okno
+                switchBot(botKey); // Nato zaženemo izbranega bota
+            }
+        });
+    });
+
+    console.log("Multi-Bot Demo Center (v15.0 - Relaunch) initialized successfully.");
 });

index.html

@@ -7,7 +7,7 @@
     <!-- Primary Meta Tags -->
     <title>AI Mojster - AI Chatboti in Avtomatizacija za Vaše Podjetje</title>
     <meta name="title" content="AI Mojster - AI Chatboti in Avtomatizacija za Vaše Podjetje">
-    <meta name="description" content="Povečajte prodajo, znižajte stroške in zagotovite podporo 24/7 z naprednimi AI chatboti in avtomatizacijo poslovnih procesov po meri.">
+    <meta name="description" content="Povečajte prodajo, znižajte stroške in zagotovite podporo 24/7 z naprednimi AI chatboti in avtomatizacijo poslovnih procesov po meri. Preizkusite naše demo bote v živo!">
     <meta name="keywords" content="ai chatbot, umetna inteligenca, avtomatizacija, izdelava chatbota, poslovna avtomatizacija, ai mojster, n8n, chatbot slovenija">
     <meta name="author" content="AI Mojster">
     <meta name="robots" content="index, follow">
@@ -45,7 +45,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
 </head>
 <body>
     <header class="header">
@@ -59,11 +59,10 @@
                 <i class="fas fa-bars"></i>
             </div>
             <div class="nav-links">
-                <a href="#solutions">Rešitve</a>
+                <a href="#demos">Demo Boti</a>
-                <a href="#packages">Paketi</a>
                 <a href="#benefits">Prednosti</a>
+                <a href="#packages">Paketi</a>
                 <a href="#process">Postopek</a>
-                <a href="#about">O nas</a>
                 <a href="#contact" class="cta-button">Kontakt</a>
                 <a href="tel:040654730" class="phone-number"><i class="fas fa-phone"></i> 040 654 730</a>
                 <a href="/en/" class="language-switch"><i class="fas fa-globe"></i> EN</a>
@@ -75,146 +74,91 @@
         <section class="hero">
             <h1>Preobrazite Svoje Poslovanje z Močjo Umetne Inteligence</h1>
             <p class="hero-text">Nudimo napredne AI chatbote in avtomatizacijo po meri, ki znižujejo stroške, povečujejo prodajo in zagotavljajo podporo 24/7.</p>
-            <div class="hero-features">
+            <a href="#demos" class="cta-button">Preizkusite Demo Bote v Živo</a>
-                <div class="hero-feature">
-                    <i class="fas fa-headset"></i>
-                    <span>Podpora 24/7</span>
-                </div>
-                <div class="hero-feature">
-                    <i class="fas fa-chart-line"></i>
-                    <span>Povečana Prodaja</span>
-                </div>
-                <div class="hero-feature">
-                    <i class="fas fa-cogs"></i>
-                    <span>Avtomatizacija Procesov</span>
-                </div>
-                <div class="hero-feature">
-                    <i class="fas fa-euro-sign"></i>
-                    <span>Znižanje Stroškov</span>
-                </div>
-            </div>
-            <a href="#packages" class="cta-button">Odkrijte Svojo AI Rešitev</a>
         </section>
 
-        <section id="solutions" class="about">
+        <!-- NOVO: Interaktivni Demo Center -->
+        <section id="demos" class="demos">
             <div class="container">
-                <h2>Naše Rešitve za Vaš Uspeh</h2>
+                <h2>Doživite Moč AI v Akciji</h2>
-                <p class="section-subtitle">Specializirani smo za dve ključni področji, ki prinašata takojšnje in merljive rezultate za vaše podjetje.</p>
+                <p class="section-subtitle">Ne verjemite nam na besedo. Preizkusite naše demo bote in se sami prepričajte, kako lahko AI pomaga vašemu poslu.</p>
-                <div class="about-content">
+                <div class="demo-grid">
-                    <div class="about-text">
+                    <!-- Demo Kartica 1: Pekarna -->
-                        <h3><i class="fas fa-comments"></i> AI Chatboti po Meri</h3>
+                    <div class="demo-card">
-                        <p>Pozabite na generične odgovore. Razvijemo inteligentne chatbote, ki razumejo vaše stranke, odgovarjajo na njihova vprašanja v realnem času, zbirajo povpraševanja in jih vodijo skozi nakupni proces. Izboljšajte uporabniško izkušnjo in pretvorite obiskovalce v zveste stranke.</p>
+                        <div class="demo-card-icon"><i class="fas fa-cookie-bite"></i></div>
+                        <h3>Bot za Pekarno (RAG)</h3>
+                        <div class="demo-description">
+                            <span class="description-title">Za kaj gre?</span>
+                            <p>Avtomatsko odgovarja na vprašanja strank o ponudbi, cenah in alergenih, 24/7, na podlagi vaše baze znanja.</p>
+                            <span class="description-title">Kako deluje?</span>
+                            <p>Bot se nauči vse informacije iz dokumenta, ki nam ga posredujete. Ko stranka postavi vprašanje, bot v trenutku poišče in postreže z najbolj relevantnim odgovorom.</p>
+                        </div>
+                        <button class="launch-demo-btn" data-bot-key="rag">Preizkusi Bota za Pekarno</button>
                     </div>
-                    <div class="about-text">
-                        <h3><i class="fas fa-robot"></i> AI Avtomatizacija Procesov</h3>
-                        <p>Osvobodite svojo ekipo ponavljajočih se nalog. Povežemo vaše aplikacije (CRM, e-pošta, socialna omrežja) v pametne delovne tokove, ki delujejo samodejno. Od avtomatiziranega pošiljanja ponudb do sinhronizacije podatkov – prihranite čas, zmanjšajte napake in se osredotočite na rast.</p>
-                    </div>
-                </div>
-            </div>
-        </section>
 
-        <section id="packages" class="packages">
+                    <!-- Demo Kartica 2: Potovanja -->
-            <h2>Izberite Paket, ki Poganja Vašo Rast</h2>
+                    <div class="demo-card">
-            <p class="section-subtitle">Pregledne cene, brez skritih stroškov. Naložba v AI se vam bo večkratno povrnila.</p>
+                        <div class="demo-card-icon"><i class="fas fa-plane-departure"></i></div>
-            <div class="billing-toggle">
+                        <h3>Potovalni Svetovalec</h3>
-                <span>Mesečni najem</span>
+                        <div class="demo-description">
-                <label class="toggle-switch">
+                            <span class="description-title">Za kaj gre?</span>
-                    <input type="checkbox" id="billing-toggle">
+                            <p>Interaktivno svetuje uporabnikom in jim pomaga najti popolno potovalno destinacijo glede na njihove želje, proračun in interese.</p>
-                    <span class="toggle-slider"></span>
+                            <span class="description-title">Kako deluje?</span>
-                </label>
+                            <p>Bot skozi pogovor zbira ključne informacije (tip oddiha, cena, trajanje) in na podlagi tega iz baze znanja priporoči najboljše možnosti, kot bi to storil pravi agent.</p>
-                <span>Letni najem <span class="yearly-discount">Prihranite do 20%</span></span>
+                        </div>
-            </div>
+                        <button class="launch-demo-btn" data-bot-key="calendar">Preizkusi Potovalnega Agenta</button>
-            <div class="package-grid">
-                <div class="package-card" data-package="asistent">
-                    <h3>AI Asistent</h3>
-                    <p class="subtitle">Za podjetja, ki želijo avtomatizirati podporo in zbirati kontakte.</p>
-                    <div class="price-period">
-                        <div class="price">39 €<span>/mesec</span></div>
-                        <small class="vat-price">47,58 € z DDV</small>
                     </div>
-                    <ul>
-                        <li>Chatbot z odgovori na pogosta vprašanja</li>
-                        <li>Zbiranje kontaktnih podatkov (leadov)</li>
-                        <li>Namestitev na vašo spletno stran</li>
-                        <li>Osnovno poročanje o pogovorih</li>
-                        <li>E-mail podpora</li>
-                    </ul>
-                    <a href="#contact" class="package-button">Izberi Asistenta</a>
-                </div>
 
-                <div class="package-card featured" data-package="partner">
+                    <!-- Demo Kartica 3: Fitnes -->
-                    <div class="popular-badge">Najbolj priljubljen</div>
+                    <div class="demo-card">
-                    <h3>AI Strateški Partner</h3>
+                        <div class="demo-card-icon"><i class="fas fa-dumbbell"></i></div>
-                    <p class="subtitle">Za podjetja, ki želijo integracijo, personalizacijo in večjo prodajo.</p>
+                        <h3>Fitnes Svetovalec</h3>
-                    <div class="price-period">
+                        <div class="demo-description">
-                        <div class="price">89 €<span>/mesec</span></div>
+                            <span class="description-title">Za kaj gre?</span>
-                        <small class="vat-price">108,58 € z DDV</small>
+                            <p>Pomaga potencialnim članom izbrati pravi fitnes paket in na koncu zbere njihov kontakt za pošiljanje personalizirane ponudbe.</p>
+                            <span class="description-title">Kako deluje?</span>
+                            <p>Bot skozi nekaj ciljanih vprašanj o urniku in interesih uporabnika kvalificira in mu priporoči enega od treh paketov. Na koncu uporabi orodje za pošiljanje e-maila.</p>
+                        </div>
+                        <button class="launch-demo-btn" data-bot-key="sales">Preizkusi Fitnes Svetovalca</button>
                     </div>
-                    <ul>
-                        <li>Vse iz paketa AI Asistent</li>
-                        <li>Integracija s CRM sistemom</li>
-                        <li>Napredni pogovorni scenariji</li>
-                        <li>Kvalifikacija potencialnih strank</li>
-                        <li>Možnost večjezične podpore</li>
-                        <li>Telefonska podpora</li>
-                    </ul>
-                    <a href="#contact" class="package-button">Izberi Partnerja</a>
-                </div>
-
-                <div class="package-card" data-package="avtomatizacija">
-                    <h3>AI Avtomatizacija</h3>
-                    <p class="subtitle">Za podjetja, ki želijo celovito avtomatizacijo internih in zunanjih procesov.</p>
-                    <div class="price-period">
-                        <div class="price">149 €<span>/mesec</span></div>
-                        <small class="vat-price">181,78 € z DDV</small>
-                    </div>
-                    <ul>
-                        <li>Vse iz paketa AI Partner</li>
-                        <li>Kompleksni avtomatizacijski tokovi (n8n)</li>
-                        <li>API integracije po meri</li>
-                        <li>Povezava z e-poštnimi orodji</li>
-                        <li>Avtomatizirano upravljanje s podatki</li>
-                        <li>Prioritetna tehnična podpora</li>
-                    </ul>
-                    <a href="#contact" class="package-button">Izberi Avtomatizacijo</a>
                 </div>
             </div>
         </section>
 
         <section id="benefits" class="why-us">
             <div class="container">
-                <h2>Prednosti Umetne Inteligence za Vas</h2>
+                <h2>Kaj To Pomeni za Vas?</h2>
-                <p class="section-subtitle">To niso le tehnične rešitve. To so konkretne koristi, ki jih bo vaše podjetje občutilo takoj.</p>
+                <p class="section-subtitle">To niso le tehnične rešitve. To so konkretne poslovne koristi, ki jih boste občutili takoj.</p>
                 <div class="benefits-grid">
                     <div class="benefit-card">
                         <div class="benefit-icon"><i class="fas fa-clock"></i></div>
                         <h3>Neprekinjena Dosegljivost 24/7</h3>
-                        <p>Vaš AI asistent nikoli ne spi. Strankam je na voljo podnevi in ponoči, med vikendi in prazniki, kar zagotavlja takojšnjo podporo in večje zadovoljstvo.</p>
+                        <p>Kot ste videli pri Botu za Pekarno, vaš AI asistent nikoli ne spi. Strankam je na voljo podnevi in ponoči, kar zagotavlja takojšnjo podporo in večje zadovoljstvo.</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon"><i class="fas fa-piggy-bank"></i></div>
                         <h3>Takojšnji Prihranki</h3>
-                        <p>Zmanjšajte stroške za podporo strankam za do 30%. Avtomatizirajte odgovore na ponavljajoča se vprašanja in sprostite svojo ekipo za naloge, ki prinašajo večjo vrednost.</p>
+                        <p>Avtomatizirajte odgovore na ponavljajoča se vprašanja in sprostite svojo ekipo za naloge, ki prinašajo večjo vrednost – zmanjšajte stroške za podporo strankam za do 30%.</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon"><i class="fas fa-rocket"></i></div>
                         <h3>Povečana Prodaja in Leadi</h3>
-                        <p>AI chatbot aktivno nagovarja obiskovalce, jih kvalificira in zbira njihove podatke. Nikoli več ne zamudite priložnosti za posel, tudi ko niste na voljo.</p>
+                        <p>Fitnes Svetovalec je odličen primer, kako AI aktivno nagovarja obiskovalce, jih kvalificira in zbira njihove podatke. Nikoli več ne zamudite priložnosti za posel.</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon"><i class="fas fa-brain"></i></div>
-                        <h3>Inteligentno Zbiranje Podatkov</h3>
+                        <h3>Inteligentno Svetovanje</h3>
-                        <p>Spoznajte svoje stranke bolje kot kdajkoli prej. Chatbot zbira ključne informacije o njihovih željah in težavah, kar vam omogoča sprejemanje pametnejših poslovnih odločitev.</p>
+                        <p>Potovalni Agent dokazuje, da bot ni le za odgovore, ampak lahko uporabnike vodi skozi kompleksne odločitve in jim ponudi personalizirane rešitve, ki povečajo konverzije.</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon"><i class="fas fa-tasks"></i></div>
                         <h3>Nič Več Ponavljajočega Dela</h3>
-                        <p>Ročno prepisovanje podatkov, pošiljanje istih e-mailov in ostala dolgočasna opravila postanejo preteklost. Osredotočite se na tisto, kar je resnično pomembno – rast vašega posla.</p>
+                        <p>Ročno prepisovanje podatkov in pošiljanje istih e-mailov postaneta preteklost. Osredotočite se na tisto, kar je resnično pomembno – rast vašega posla.</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon"><i class="fas fa-user-friends"></i></div>
                         <h3>Izjemna Uporabniška Izkušnja</h3>
-                        <p>Stranke cenijo hitre in natančne odgovore. Z AI zagotovite dosledno in profesionalno komunikacijo, ki gradi zaupanje in lojalnost vaši blagovni znamki.</p>
+                        <p>Stranke cenijo hitre, natančne in personalizirane odgovore. Z AI zagotovite dosledno in profesionalno komunikacijo, ki gradi zaupanje in lojalnost.</p>
                     </div>
                 </div>
             </div>
@@ -222,7 +166,7 @@
 
         <section id="process" class="process">
             <div class="container">
-                <h2>Od Ideje do Rezultatov v 4 Korakih</h2>
+                <h2>Kako Deluje? Naš Proces v 4 Korakih</h2>
                 <p class="section-subtitle">Naš proces je preprost, pregleden in osredotočen na doseganje vaših ciljev.</p>
                 <div class="process-steps">
                     <div class="step">
@@ -249,23 +193,54 @@
             </div>
         </section>
         
-        <section id="about" class="about">
+        <section id="packages" class="packages">
             <div class="container">
+                <h2>Izberite Paket, ki Poganja Vašo Rast</h2>
+                <p class="section-subtitle">Pregledne cene, brez skritih stroškov. Naložba v AI se vam bo večkratno povrnila.</p>
+                <div class="package-grid">
+                    <div class="package-card" data-package="asistent">
+                        <h3>AI Asistent</h3>
+                        <p class="subtitle">Za podjetja, ki želijo avtomatizirati podporo in zbirati kontakte.</p>
+                        <ul class="package-features">
+                            <li>Chatbot z odgovori na pogosta vprašanja (RAG)</li>
+                            <li>Zbiranje kontaktnih podatkov (leadov)</li>
+                            <li>Namestitev na vašo spletno stran</li>
+                        </ul>
+                    </div>
+                    <div class="package-card featured" data-package="partner">
+                        <div class="popular-badge">Najbolj priljubljen</div>
+                        <h3>AI Strateški Partner</h3>
+                        <p class="subtitle">Za podjetja, ki želijo integracijo, personalizacijo in večjo prodajo.</p>
+                        <ul class="package-features">
+                            <li>Vse iz paketa AI Asistent</li>
+                            <li>Integracija s CRM sistemom ali koledarjem</li>
+                            <li>Napredni pogovorni scenariji in prodajni lijaki</li>
+                        </ul>
+                    </div>
+                    <div class="package-card" data-package="avtomatizacija">
+                        <h3>AI Avtomatizacija</h3>
+                        <p class="subtitle">Za podjetja, ki želijo celovito avtomatizacijo procesov.</p>
+                        <ul class="package-features">
+                            <li>Vse iz paketa AI Partner</li>
+                            <li>Kompleksni avtomatizacijski tokovi (n8n)</li>
+                            <li>API integracije po meri in povezava z več sistemi</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="contact-for-price">
+                    <p>Cene so odvisne od kompleksnosti. Za personalizirano ponudbo nas kontaktirajte.</p>
+                    <a href="#contact" class="cta-button">Pridobi Ponudbo</a>
+                </div>
+            </div>
+        </section>
+
+        <section id="about" class="about">
+             <div class="container">
                 <h2>Kdo Smo?</h2>
                 <div class="about-content">
                     <div class="about-text">
                         <h3>Vaši Strokovnjaki za Umetno Inteligenco</h3>
                         <p>Smo ekipa navdušencev nad tehnologijo, ki verjame, da umetna inteligenca ni več prihodnost, ampak sedanjost. Naše poslanstvo je, da napredne AI rešitve približamo podjetjem vseh velikosti in jim pomagamo postati učinkovitejši, bolj konkurenčni in uspešnejši.</p>
-                        
-                        <h3>Zaupajo nam uspešni:</h3>
-                        <ul class="client-list">
-                            <li><strong><a href="https://4spaces.io" target="_blank">4spaces</a></strong> - Podjetje za pametne rešitve</li>
-                            <li><strong><a href="https://oblikovalnica.eu" target="_blank">Oblikovalnica</a></strong> - Kopirnica</li>
-                            <li><strong><a href="https://pc-pomlad.si" target="_blank">PC Pomlad</a></strong> - Psihoterapevtski center</li>
-                            <li><strong><a href="https://pekarnakovac.si" target="_blank">Pekarna Kovač</a></strong> - Pekarna in slaščičarna</li>
-                        </ul>
-                        
-                        <a href="#contact" class="about-cta">Naredimo korak naprej skupaj!</a>
                     </div>
                     <div class="about-features">
                         <div class="about-feature">
@@ -278,11 +253,6 @@
                             <h4>Razvoj po Meri</h4>
                             <p>Vsak chatbot in avtomatizacija sta 100% prilagojena vašemu poslu in ciljem.</p>
                         </div>
-                        <div class="about-feature">
-                            <i class="fas fa-wrench"></i>
-                            <h4>Zanesljiva Podpora</h4>
-                            <p>Smo vaš dolgoročni partner. Nudimo redno vzdrževanje, optimizacijo in tehnično podporo.</p>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -305,15 +275,6 @@
                     <label for="phone">Telefonska številka (neobvezno)</label>
                     <input type="tel" id="phone" name="phone" placeholder="Vnesite vašo telefonsko številko">
                 </div>
-                <div class="form-group">
-                    <label for="package">Zanima me paket</label>
-                    <select id="package" name="package" required>
-                        <option value="">Izberite paket...</option>
-                        <option value="asistent">AI Asistent - 39€/mesec</option>
-                        <option value="partner">AI Strateški Partner - 89€/mesec</option>
-                        <option value="avtomatizacija">AI Avtomatizacija - 149€/mesec</option>
-                    </select>
-                </div>
                 <div class="form-group">
                     <label for="message">Vaše sporočilo</label>
                     <textarea id="message" name="message" required placeholder="Na kratko opišite vaše potrebe in cilje..."></textarea>
@@ -335,9 +296,10 @@
             </div>
             <div class="footer-links">
                 <h4>Navigacija</h4>
-                <a href="#solutions">Rešitve</a>
+                <a href="#demos">Demo Boti</a>
-                <a href="#packages">Paketi</a>
                 <a href="#benefits">Prednosti</a>
+                <a href="#packages">Paketi</a>
+                <a href="#process">Postopek</a>
                 <a href="#about">O nas</a>
                 <a href="#contact">Kontakt</a>
             </div>
@@ -363,35 +325,28 @@
     <!-- Chatbot Widget HTML -->
     <div id="chat-widget-container" class="hidden">
         <div class="chat-header">
-            <h3>AI Asistent</h3>
+            <h3 id="chat-header-title">AI Asistent</h3>
             <button id="close-chat-btn">&times;</button>
         </div>
         <div id="chat-messages"></div>
-        <form id="chat-input-form">
+        <div class="chat-footer">
-            <input type="text" id="chat-input" placeholder="Vpišite sporočilo..." autocomplete="off">
+            <button id="chat-reset-btn" class="hidden">Nazaj na glavni meni</button>
-            <button type="submit" aria-label="Pošlji sporočilo"><i class="fas fa-paper-plane"></i></button>
+            <form id="chat-input-form">
-        </form>
+                <input type="text" id="chat-input" placeholder="Vpišite sporočilo..." autocomplete="off">
+                <button type="submit" aria-label="Pošlji sporočilo"><i class="fas fa-paper-plane"></i></button>
+            </form>
+        </div>
     </div>
     <button id="chat-widget-button" aria-label="Odpri klepet">
         <i class="fas fa-robot"></i>
     </button>
     
     <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="script.js"></script>
-    <script src="chatbot.js?version=20250916"></script> 
+    <script src="chatbot.js?version=20250916-redesign"></script> 
     <script>
-        // Register Service Worker
+        // Service Worker registration remains the same
-        if ('serviceWorker' in navigator) {
-            window.addEventListener('load', () => {
-                navigator.serviceWorker.register('/sw.js')
-                    .then(registration => {
-                        console.log('ServiceWorker registration successful');
-                    })
-                    .catch(err => {
-                        console.log('ServiceWorker registration failed: ', err);
-                    });
-            });
-        }
     </script>
 </body>
-</html>
+</html>