<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />

<style>
.chat-layout .chat-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
    height: var(--chat--header-height);
    padding: var(--chat--header--padding);
    background: #48A6CA;
    color: var(--chat--header--color);
    border-top: var(--chat--header--border-top);
    border-bottom: var(--chat--header--border-bottom);
    border-left: var(--chat--header--border-left);
    border-right: var(--chat--header--border-right);
}

.chat-window-wrapper .chat-window-toggle {
    flex: 0 0 auto;
    background: #48A6CA;
    color: var(--chat--toggle--color);
    cursor: pointer;
    width: var(--chat--toggle--width);
    height: var(--chat--toggle--height);
    border-radius: var(--chat--toggle--border-radius, 50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: transform var(--chat--transition-duration) ease, background var(--chat--transition-duration) ease;
}

:root {
    --chat--color-primary: #add8e6;
    --chat--color-primary-shade-50: #c2e3f0;
    --chat--color-primary-shade-100: #d8eef9;
    --chat--color-secondary: #b0e0e6;
    --chat--color-secondary-shade-50: #c6e8eb;
}
</style>

<script type="module">
    import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

  // Detect browser language: use Spanish if 'es', otherwise English
    const lang = navigator.language && navigator.language.startsWith('es') ? 'es' : 'en';

 // Conditional initial message based on language
    const initialMessages = lang === 'es'
        ? ['Bienvenido a Coral Dental Center. ¿En qué puedo ayudarte hoy?']
        : ['Welcome to Coral Dental Center. How can I help you today?'];



    createChat({
        webhookUrl: 'https://primary-production-ac57.up.railway.app/webhook/07b5f476-db45-4299-9ba9-fb2819bbb38f/chat',
        webhookConfig: {
            method: 'POST',
            headers: {}
        },
        target: '#n8n-chat',
        mode: 'window',
        chatInputKey: 'chatInput',
        chatSessionKey: 'sessionId',
        metadata: {},
        showWelcomeScreen: false,
       defaultLanguage: lang,
        initialMessages: initialMessages,
        i18n: {
            en: {
                title: 'Hello! 👋',
                subtitle: "Start a chat. We're here to help you 24/7.",
                footer: lang,
                getStarted: 'New Conversation',
                inputPlaceholder: 'Type your question..',
            },
            es: {
                title: '¡Hola! 👋',
                subtitle: 'Inicia una conversación. Estamos aquí para ayudarte 24/7.',
                footer: '',
                getStarted: 'Nueva conversación',
                inputPlaceholder: 'Escribe tu pregunta...',
            },
        },
    });
</script>