<script lang="ts">
    import CrinkledSection from "../CrinkledSection.svelte"
    import Icon from "../widgets/Icon.svelte"
    import { mdiChevronDown, mdiChevronUp } from "@mdi/js"
    import SectionTitle from "../widgets/SectionTitle.svelte"

    const faqs: Array<{ question: string; answer: string }> = [
        {
            question: "Wie schnell sind wir mit Kontextwerk live?",
            answer: "Ein FAQ-Chatbot ist in 3–5 Tagen einsatzbereit, komplexere Voice- oder Multichannel-Lösungen benötigen je nach Integrationen 3–6 Wochen. Ein klarer Projektplan mit festen Meilensteinen sorgt dafür, dass Sie jederzeit den Überblick behalten.",
        },
        {
            question: "Brauchen wir eigene Entwickler oder IT-Ressourcen?",
            answer: "Nein – im Starter-Paket übernehmen wir Analyse, Implementierung, Hosting und Optimierung vollständig. Wenn Sie später selbst eingreifen möchten, schulen wir Ihr Team und übergeben Quellcode und containerisierte Deployments für den Eigenbetrieb.",
        },
        {
            question: "Welche Sprachen, Kanäle und Anwendungsfälle sind möglich?",
            answer: "Unsere Bots sprechen über 90 Sprachen und unterstützen Website-Chat, WhatsApp, Slack, MS Teams, Telefon sowie WebRTC. Typische Use-Cases: Hotline-Entlastung, Lead-Qualifizierung, internes Wissensportal oder Außendienst-Support.",
        },
        {
            question: "Wie sicher sind unsere Daten?",
            answer: "Alle Daten liegen verschlüsselt in einem deutschen Rechenzentrum (ISO 27001). Wir schließen einen DSGVO-konformen AVV und nutzen TLS 1.3, rollenbasierte Zugriffe und optionale On-Premise-Deployments, falls Sie maximale Datenhoheit wünschen.",
        },
        {
            question: "Welche messbaren Ergebnisse können wir erwarten?",
            answer: "Wir tracken KPIs wie Deflection-Rate, AHT und CSAT in Echtzeit. Typische Effekte: mehr qualifizierte Leads, kürzere Antwortzeiten und eine deutliche Entlastung der Mitarbeiter. Monatliche Reports machen den Erfolg transparent.",
        },
    ]

    let activeIndex: number | null = 0

    const toggle = (index: number) => {
        activeIndex = activeIndex === index ? null : index
    }

    const answerId = (index: number) => `faq-answer-${index}`
    const description = `
        Vom ersten Prototyp bis zum laufenden Betrieb:
        Hier finden Sie Antworten auf die meistgestellten Fragen.
        Alles Weitere besprechen wir gerne persönlich – oder live mit unserem Demo-Bot.
    `
</script>

<CrinkledSection
    brightBackground={true}
    border={true}
>
    {#snippet contentSnippet()}
        <section
            class="faq-row"
            id="faq"
        >
            <div class="faq-wrapper">
                <SectionTitle
                    brightBackground={true}
                    subtitle="FAQ"
                    title="Häufige Fragen"
                    {description}
                />
                <div class="faq-list">
                    {#each faqs as faq, index}
                        <article
                            class="faq-item"
                            class:expanded={activeIndex === index}
                        >
                            <button
                                class="faq-question"
                                type="button"
                                aria-expanded={activeIndex === index}
                                aria-controls={answerId(index)}
                                onclick={() => toggle(index)}
                            >
                                <span>{faq.question}</span>
                                <span class="faq-icon">
                                    <Icon
                                        path={activeIndex === index ? mdiChevronUp : mdiChevronDown}
                                        size="1.2rem"
                                    />
                                </span>
                            </button>
                            <div
                                class="faq-answer"
                                id={answerId(index)}
                                style={`max-height: ${activeIndex === index ? "420px" : "0"};`}
                                aria-hidden={activeIndex === index ? "false" : "true"}
                            >
                                <p>{faq.answer}</p>
                            </div>
                        </article>
                    {/each}
                </div>
            </div>
        </section>
    {/snippet}
</CrinkledSection>

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

    .faq-row {
        display: flex;
        justify-content: center;
        background-color: var(--neutral-white);
        color: var(--text-invers-100);
        width: 100%;
        padding: 4.8rem 0;

        .faq-wrapper {
            max-width: var(--small-max-width);
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 2.8rem;
            margin: 0 auto;
            padding: 0 var(--horizontal-default-margin);
        }
    }

    .faq-list {
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
    }

    .faq-item {
        position: relative;
        border-radius: 1.25rem;
        background:
            radial-gradient(130% 160% at 15% -20%, rgba(173, 81, 76, 0.08) 0%, rgba(255, 255, 255, 0.98) 64%),
            rgba(255, 255, 255, 0.99);
        border: 1px solid rgba(173, 81, 76, 0.1);
        box-shadow:
            0 20px 48px rgba(13, 12, 12, 0.08),
            inset 0 0 0 1px rgba(255, 255, 255, 0.6);
        overflow: hidden;
        isolation: isolate;
        transition:
            border-color 0.3s ease,
            box-shadow 0.3s ease,
            transform 0.3s ease;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(
                145deg,
                rgba(173, 81, 76, 0.1) 0%,
                rgba(255, 255, 255, 0.45) 38%,
                transparent 92%
            );
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            z-index: -1;
        }

        &:hover,
        &.expanded {
            border-color: rgba(173, 81, 76, 0.38);
            box-shadow:
                0 26px 56px rgba(13, 12, 12, 0.12),
                inset 0 0 0 1px rgba(255, 255, 255, 0.75);
            transform: translateY(-4px);

            &::after {
                opacity: 1;
            }
        }
    }

    .faq-question {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.6rem;
        padding: 1.4rem 1.8rem;
        background: none;
        border: none;
        color: var(--text-invers-100);
        font: inherit;
        text-align: left;
        cursor: pointer;
        position: relative;
        z-index: 1;

        span:first-child {
            font-size: 1.05rem;
            font-weight: 600;
            line-height: 1.45;
            color: inherit;
            transition: color 0.3s ease;
        }

        .faq-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            background: rgba(173, 81, 76, 0.12);
            box-shadow: inset 0 0 0 1px rgba(173, 81, 76, 0.28);
            transition:
                background 0.3s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }
    }

    .faq-item:hover span:first-child {
        color: var(--primary-200);
    }

    .faq-item.expanded span:first-child {
        color: var(--primary-100);
    }

    .faq-item.expanded .faq-icon {
        background: rgba(255, 82, 82, 0.2);
        box-shadow: inset 0 0 0 1px rgba(255, 82, 82, 0.4);
        transform: rotate(180deg);
    }

    .faq-answer {
        overflow: hidden;
        transition: max-height 0.35s ease;
        padding: 0 1.8rem;

        p {
            margin: 0 0 1.6rem 0;
            line-height: 1.6;
            color: rgba(47, 72, 88, 0.9);
        }
    }

    .faq-item:not(.expanded) .faq-answer {
        padding-bottom: 0;
    }

    @media @mobile {
        .faq-row {
            padding: 3.6rem 0;
        }

        .faq-wrapper {
            gap: 2rem;
        }

        .faq-question {
            padding: 1.2rem 1.4rem;
        }

        .faq-answer {
            padding: 0 1.4rem;
        }
    }
</style>
