<script lang="ts">
    import { mdiBookAccountOutline, mdiCreation, mdiFaceAgent, mdiHours24 } from "@mdi/js"
    import ProductCategoryFrame from "../widgets/ProductCategoryFrame.svelte"
    import CrinkledSection from "../CrinkledSection.svelte"

    const voiceProperties: Array<{ title: string; icon: string; color: string }> = [
        {
            title: "24/7 Verfügbar",
            icon: mdiHours24,
            color: "var(--text-reverse-100)",
        },
        {
            title: "Individuell",
            icon: mdiFaceAgent,
            color: "#EB5757",
        },
        {
            title: "DSGVO konform",
            icon: mdiBookAccountOutline,
            color: "var(--text-reverse-100)",
        },
        {
            title: "Intelligent",
            icon: mdiCreation,
            color: "#EB5757",
        },
    ]
</script>

<CrinkledSection
    brightBackground={true}
    border={true}
    activated={true}
>
    {#snippet contentSnippet()}
        <ProductCategoryFrame
            properties={voiceProperties}
            title="Voicebot Demo"
            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()}
                <div class="img">
                    <img
                        src="/media/iphone.png"
                        alt="Kontextwerk is calling"
                    />
                    <div class="shadow"></div>
                </div>
            {/snippet}
        </ProductCategoryFrame>
    {/snippet}
</CrinkledSection>

<style lang="less">
    .img {
        width: 400px;
        min-width: 400px;
        max-height: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        img {
            width: 60% !important;
            height: 100%;
            object-fit: contain;
        }
        .shadow {
            display: none;
        }
    }
</style>
