<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",
        },
    ]
</script>

<CrinkledSection
    brightBackground={false}
    border={true}
    activated={true}
>
    {#snippet contentSnippet()}
        <ProductCategoryFrame
            properties={voiceProperties}
            title="Chatbot Demo"
            reverse={true}
            upperDescription="Unsere Voicebots sind rund um die Uhr für Ihre Kunden da und bieten maßgeschneiderte Lösungen, die perfekt auf Ihre Bedürfnisse abgestimmt sind."
            lowerDescription="Durch den Einsatz modernster KI-Technologien gewährleisten wir eine intelligente und effiziente Kommunikation, die den höchsten Datenschutzstandards entspricht."
        >
            {#snippet primaryContent()}
                <CardWrapper>
                    {#snippet contentSnippet()}
                        <Chatbot />
                    {/snippet}
                </CardWrapper>
            {/snippet}
        </ProductCategoryFrame>
    {/snippet}
</CrinkledSection>

<style lang="less">
    section {
        max-width: var(--small-max-width);
    }
</style>
