<script lang="ts">
    import { onMount } from "svelte"
    import { mdiBookAccountOutline, mdiCreation, mdiFaceAgent, mdiHours24 } from "@mdi/js"
    import ProductCategoryFrame from "../widgets/ProductCategoryFrame.svelte"
    import CrinkledSection from "../CrinkledSection.svelte"
    import { createVoicebotPreviewController } from "../voicebotDemo/voicebotPreviewController"
    import Label from "../widgets/Label.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",
        },
    ]
    const upperDescription = `
        Klicken Sie auf den grünen Hörer  
        und sprechen Sie jetzt live mit unserer  
        KontextWerk-Expertin – direkt hier im Browser.
    `
    const lowerDescription = `
        Die Demo liefert exakt die Gesprächsqualität, die wir später als Telefon-Bot auf
        Ihrer Hotline bereitstellen: 24/7 verfügbar, auf Ihr Unternehmenswissen trainiert
        und bei Bedarf mit nahtloser Übergabe an Ihr Serviceteam.<br/><br/>

        Im Hintergrund steuert ein individuell von uns programmierter Workflow-Graph jeden Schritt des Dialogs –
        von der Bedarfsklärung bis zur Datenerfassung – genau so, wie es ein Mitarbeiter
        am Telefon tun würde. DSGVO-konformes Hosting in Deutschland, minimale Latenz und
        offene Schnittstellen machen Ihren Kundenservice zuverlässig, sicher und skalierbar.
    `
    const controller = createVoicebotPreviewController()
    const { status, statusHint, toggle, setup, teardown } = controller

    const handleKeydown = (event: KeyboardEvent) => {
        if (event.key !== "Enter" && event.key !== " ") return
        event.preventDefault()
        void toggle()
    }

    onMount(() => {
        setup()
        return () => teardown()
    })
</script>

<CrinkledSection
    brightBackground={true}
    border={true}
    activated={true}
>
    {#snippet contentSnippet()}
        <ProductCategoryFrame
            properties={voiceProperties}
            title="Voicebot"
            subtitle="Demoversion"
            sectionId="voicebot-demo"
            {upperDescription}
            {lowerDescription}
        >
            {#snippet primaryContent()}
                <div
                    class="img"
                    class:connected={$status === "connected"}
                    class:errored={$status === "error"}
                    role="button"
                    tabindex="0"
                    aria-pressed={$status === "connected"}
                    aria-busy={$status === "connecting"}
                    aria-label="Voicebot Demo starten"
                    onclick={() => void toggle()}
                    onkeydown={handleKeydown}
                >
                    <img
                        src="/media/iphone.png"
                        alt="Kontextwerk is calling"
                    />
                    <div class="shadow"></div>
                </div>
                <button
                    onclick={() => void toggle()}
                    class="voice-status"
                    data-status={$status}
                    aria-live="polite"
                >
                    <Label label={$statusHint} />
                </button>
            {/snippet}
        </ProductCategoryFrame>
    {/snippet}
</CrinkledSection>

<style lang="less">
    .img {
        position: relative;
        width: 400px;
        min-width: 400px;
        max-height: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-radius: 1.6rem;
        transition:
            transform 0.2s ease,
            border-color 0.2s ease;
        outline: none;

        img {
            width: 60% !important;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
            user-select: none;
        }

        &:hover {
            transform: translateY(-4px);
        }

        &:focus-visible {
            outline: 2px solid var(--primary-200);
            outline-offset: 4px;
        }
    }
    .voice-status {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1.2rem;
    }
</style>
