<script lang="ts">
    import {
        mdiBookAccountOutline,
        mdiCalendarCursor,
        mdiCompareHorizontal,
        mdiCreation,
        mdiDatabaseCheckOutline,
        mdiPoll,
    } from "@mdi/js"
    import ProductCategoryFrame from "../widgets/ProductCategoryFrame.svelte"
    import CrinkledSection from "../CrinkledSection.svelte"
    import CardWrapper from "../widgets/CardWrapper.svelte"
    import Chatbot from "../chatbotDemo/Chatbot.svelte"

    const voiceProperties: Array<{ title: string; icon: string; color: string }> = [
        {
            title: "Trackbar",
            icon: mdiPoll,
            color: "#FFFFFF",
        },
        {
            title: "Up To Date",
            icon: mdiDatabaseCheckOutline,
            color: "#EB5757",
        },
        {
            title: "End To End",
            icon: mdiCompareHorizontal,
            color: "#FFFFFF",
        },
        {
            title: "Wochen statt Monate",
            icon: mdiCalendarCursor,
            color: "#EB5757",
        },
    ]
    const upperDescriptionChat = `
        Tippen Sie in das Chat-Fenster und testen Sie unseren KI-Chatbot – live in Ihrem Browser.
    `

    const lowerDescriptionChat = `
        Der Bot greift auf dieselbe Wissensbasis wie sein Voice-Pendant zu
        und beantwortet Anfragen in Sekundenschnelle – rund um die Uhr und
        auf Wunsch mehrsprachig.<br/><br/>

        Dank des zugrunde liegenden Workflow-Graphs können wir Ihre individuellen
        Prozesse, Abfragen und Eskalationsregeln detailgenau abbilden. DSGVO-konformes
        Hosting, belastbare KPIs und optionale A/B-Tests sorgen dafür, dass Ihr
        digitaler Kundenservice messbar Mehrwert liefert.
    `
</script>

<CrinkledSection
    brightBackground={false}
    border={true}
    activated={true}
>
    {#snippet contentSnippet()}
        <ProductCategoryFrame
            properties={voiceProperties}
            subtitle="Demoversion"
            title="Chatbot"
            reverse={true}
            sectionId="chatbot-demo"
            upperDescription={upperDescriptionChat}
            lowerDescription={lowerDescriptionChat}
        >
            {#snippet primaryContent()}
                <CardWrapper>
                    {#snippet contentSnippet()}
                        <Chatbot />
                    {/snippet}
                </CardWrapper>
            {/snippet}
        </ProductCategoryFrame>
    {/snippet}
</CrinkledSection>

<style lang="less">
    @import "../../assets/css/variables.less";

    .card-wrapper {
        min-width: 100%;
    }

    @media @mobile {
        .card-wrapper {
            min-width: 100%;
        }
    }
</style>
