<script lang="ts">
    import CrinkledSection from "../CrinkledSection.svelte"
    import CardWrapper from "../widgets/CardWrapper.svelte"
    import Icon from "../widgets/Icon.svelte"
    import { mdiCheck, mdiCheckAll, mdiCheckCircleOutline } from "@mdi/js"
    import SectionTitle from "../widgets/SectionTitle.svelte"

    const offers: Array<{
        title: string
        tagline: string
        badge?: string
        accent?: boolean
        features: string[]
        note?: string
    }> = [
        {
            title: "Kontextwerk Starter",
            tagline: "„Schnell live, komplett gemanagt“",
            badge: "Beliebtestes Paket",
            accent: true,
            features: [
                "Komplettlösung: ab 2 500 €",
                "Hosting &amp; Monitoring im deutschen Rechenzentrum: ab 100&nbsp;€/Monat",
                "Transparente Nutzungskosten: ca. 2&nbsp;€ auf 100&nbsp;Chat-Sessions bzw. ca. 5&nbsp;€ auf 100&nbsp;Telefongespräche*",
                "Optionale laufende Optimierungen: ab 250&nbsp;€/Monat",
                "Vollständig DSGVO-konform, jederzeit kündbar mit 30 Tagen Frist",
            ],
            note: "*ca. 10 Minuten Dialogdauer pro Session; tatsächliche API-Preise werden 1:1 durchgereicht und hängen vom gewählten Anbieter ab.",
        },
        {
            title: "Kontextwerk Enterprise",
            tagline: "„Volle Kontrolle in Ihrer Umgebung“",
            badge: "Für komplexe Landschaften",
            features: [
                "On-Premise- oder Private-Cloud-Deployment (Kubernetes/Docker)",
                "Schulung &amp; Enablement Ihres Teams: 1–3 Tage, feste Tagessätze",
                "Plattform-Lizenz pro Serverinstanz",
                "Gleicher Funktionsumfang wie Starter",
            ],
        },
    ]
</script>

<CrinkledSection
    brightBackground={false}
    border={true}
    activated={true}
>
    {#snippet contentSnippet()}
        <section
            class="offer-row"
            id="angebote"
        >
            <SectionTitle
                subtitle="Pakete"
                title="Unsere Angebotsmodelle"
                description="Wählen Sie zwischen einem voll gemanagten Einstieg oder maximaler Eigenkontrolle: Beide Pakete bieten den kompletten Funktionsumfang unserer KI-Plattform."
            />

            <div class="offer-cards">
                {#each offers as offer}
                    <article
                        class="offer-card"
                        class:offer-card--accented={offer.accent}
                    >
                        {#if offer.badge}
                            <span class="offer-card__badge">{offer.badge}</span>
                        {/if}
                        <header>
                            <h3>{offer.title}</h3>
                            <p class="tagline">{offer.tagline}</p>
                        </header>
                        <ul>
                            {#each offer.features as feature}
                                <li>
                                    <span
                                        class="icon"
                                        style="color: var(--primary-200);"
                                    >
                                        <Icon
                                            path={mdiCheck}
                                            size="1.1rem"
                                        />
                                    </span>
                                    <span>{@html feature}</span>
                                </li>
                            {/each}
                        </ul>
                        {#if offer.note}
                            <p class="footnote">{offer.note}</p>
                        {/if}
                    </article>
                {/each}
            </div>
        </section>
    {/snippet}
</CrinkledSection>

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

    .offer-row {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        max-width: var(--small-max-width);
        margin: 0 auto;
        width: 100%;
        color: var(--neutral-white);
        padding-bottom: 4.8rem;
    }

    .offer-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 2.4rem;
        width: 100%;

        .card-wrapper {
            .header {
                display: none;
            }

            .body {
                border: none;
                border-radius: 1.6rem;
                padding: 0;
                background: transparent;
            }
        }
    }

    .offer-card {
        position: relative;
        overflow: hidden;
        padding: 2.4rem 2.2rem;
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
        border-radius: 4px;
        color: var(--neutral-white);
        border: 1px solid rgba(255, 255, 255, 0.08);
        background:
            radial-gradient(120% 130% at 20% 10%, rgba(173, 81, 76, 0.35) 0%, rgba(13, 12, 12, 0.75) 55%),
            rgba(13, 12, 12, 0.86);
        box-shadow:
            0 18px 40px rgba(0, 0, 0, 0.45),
            inset 0 0 0 1px rgba(255, 255, 255, 0.02);
        backdrop-filter: blur(12px);
        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                140deg,
                rgba(255, 255, 255, 0.08) 0%,
                rgba(173, 81, 76, 0.18) 45%,
                transparent 90%
            );
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        &:hover {
            transform: translateY(-6px);
            box-shadow:
                0 24px 60px rgba(0, 0, 0, 0.55),
                inset 0 0 0 1px rgba(255, 255, 255, 0.03);

            &::after {
                opacity: 1;
            }
        }

        header {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;

            h3 {
                margin: 0;
                font-size: 1.5rem;
                letter-spacing: -0.02em;
            }

            .tagline {
                margin: 0;
                font-weight: 500;
                color: var(--text-200);
            }
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.9rem;

            li {
                display: grid;
                grid-template-columns: auto 1fr;
                align-items: center;
                gap: 0.9rem;
                line-height: 1.55;
                background-color: none;
                border: none;
                .icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 1.6rem;
                    height: 1.6rem;

                    svg {
                        filter: drop-shadow(0 0 6px rgba(173, 81, 76, 0.45));
                    }
                }

                strong {
                    color: var(--text-200);
                    font-weight: 600;
                }
            }
        }

        .footnote {
            margin: 0;
            font-size: 0.85rem;
            color: var(--text-200);
            opacity: 0.85;
        }
    }

    .offer-card__badge {
        align-self: flex-start;
        padding: 0.35rem 0.9rem;
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(173, 81, 76, 0.95), rgba(255, 82, 82, 0.7));
        color: var(--neutral-white);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        box-shadow: 0 10px 24px rgba(173, 81, 76, 0.35);
    }

    .offer-card--accented {
        border-color: rgba(173, 81, 76, 0.5);

        &:hover {
            border-color: rgba(255, 82, 82, 0.65);
        }
    }

    @media @mobile {
        .offer-row {
            gap: 2.4rem;
        }

        .offer-card {
            padding: 2.1rem 1.7rem;
        }
    }
</style>
