<script lang="ts">
    import { onMount } from "svelte"

    let interval: NodeJS.Timeout
    let selectedChapter = -1
    let currentColor = "#741e20" // Initial color

    setTimeout(() => {
        // set width and height of placeholder to elements width and height
        const placeholder = document.querySelector(".placeholder")
        const elements = document.querySelector(".elements")
        if (placeholder && elements) {
            const { width, height } = elements.getBoundingClientRect()
            placeholder.style.width = `${width}px`
            placeholder.style.height = `${height}px`
        }
    }, 10)
    function startInterval() {
        interval = setInterval(() => {
            selectedChapter = (selectedChapter + 1) % chapters.length
            updateShadowColor(chapters[selectedChapter]?.color || "#000")
        }, 3000)
    }

    function stopInterval() {
        clearInterval(interval)
    }

    function updateShadowColor(newColor: string) {
        const filter = document.getElementById("redShadow")
        const feDropShadow = filter?.querySelector("feDropShadow")
        if (feDropShadow) {
            feDropShadow.style.transition = "flood-color 1s ease"
            feDropShadow.setAttribute("flood-color", newColor)
            currentColor = newColor
        }
    }

    onMount(() => {
        startInterval()
        return () => clearInterval(interval)
    })

    const chapters = [
        {
            title: "Schneller",
            alias: "Schneller",
            shortDescription:
                "Unser internes System sorgt für eine schnelle und effiziente Umsetzung Ihres Projekts. Dadurch ermöglichen wir, ihr Projekt in Wochen, statt Monaten zu realisieren!",
            color: "#ffffff",
        },
        {
            title: "Qualitativer",
            alias: "Qualitativer",
            shortDescription:
                "Höhere Qualität durch spezialisierte Experten. Wir setzen auf ein Netzwerk aus erfahrenen Fachleuten, um Ihnen die bestmöglichen Lösungen mit State-of-the-Art-Technologien zu bieten.",
            color: "#741e20",
        },
        {
            title: "Entspannter",
            alias: "Entspannter",
            shortDescription:
                "Wir bieten Ihnen einen Rundum-sorglos-Service. Von der Konzeption über die Umsetzung bis hin zur Nachbetreuung. Alles aus einer Hand.",
            color: "#ffffff",
        },
        {
            title: "Autonomer",
            alias: "Autonomer",
            shortDescription:
                "Sie entscheiden wo die Software gehostet wird. Ob bei uns in unseren deutschen Rechenzentren oder bei Ihnen, wir bieten beides an.",
            color: "#741e20",
        },
    ]
</script>

<section
    class="splittedHomepage"
    style="--color: {currentColor}"
>
    <div class="wrapper">
        <div class="placeholder"></div>
        <ul class="elements">
            {#each chapters as chapter, i}
                <li
                    class:selected={i == selectedChapter}
                    on:mouseenter={() => {
                        stopInterval()
                        selectedChapter = i
                        updateShadowColor(chapter.color)
                    }}
                    on:mouseleave={startInterval}
                >
                    {#if i == selectedChapter}
                        <h2
                            class={i % 2 ? "" : "transparent-heading"}
                            style={i % 2 ? `color: ${chapter.color}` : `-webkit-text-stroke: 1px ${chapter.color}`}
                        >
                            {chapter.title}
                        </h2>
                    {:else}
                        <h2 class={i % 2 ? "white-heading" : "transparent-heading"}>{chapter.alias}</h2>
                    {/if}

                    <p style="color: {chapter.color} !important;">
                        {@html chapter.shortDescription}
                    </p>
                </li>
            {/each}
        </ul>
        <div class="media">
            <svg
                viewBox="0 0 51 57"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <defs>
                    <filter
                        id="redShadow"
                        x="-20%"
                        y="-20%"
                        width="200%"
                        height="200%"
                        primitiveUnits="objectBoundingBox"
                    >
                        <feDropShadow
                            dx="-0.01"
                            dy="0"
                            stdDeviation="0.01"
                            flood-color="currentColor"
                        ></feDropShadow>
                    </filter>
                    <clipPath id="bd9e6d0ed5"
                        ><path
                            d="M 165 159.082031 L 215.691406 159.082031 L 215.691406 216 L 165 216 Z M 165 159.082031 "
                            clip-rule="nonzero"
                        ></path></clipPath
                    ><clipPath id="8bf626c89e"
                        ><path
                            d="M 0.601562 0.0820312 L 50.519531 0.0820312 L 50.519531 56.761719 L 0.601562 56.761719 Z M 0.601562 0.0820312 "
                            clip-rule="nonzero"
                        ></path></clipPath
                    ><clipPath id="e48e3f235c"
                        ><rect
                            x="0"
                            width="51"
                            y="0"
                            height="57"
                        ></rect></clipPath
                    >
                </defs>
                <path
                    fill="black"
                    d="M 32.6875 31.042969 C 40.058594 28.636719 47.421875 35.292969 45.523438 42.96875 C 43.078125 52.433594 32.925781 56.882812 22.929688 56.535156 L 22.929688 49.703125 C 39.636719 49.835938 45.316406 32.035156 32.6875 31.042969 M 29.917969 36.039062 C 30.808594 36.039062 31.53125 36.761719 31.53125 37.652344 C 31.53125 38.542969 30.808594 39.265625 29.917969 39.265625 C 29.027344 39.265625 28.304688 38.542969 28.304688 37.652344 C 28.304688 36.761719 29.027344 36.039062 29.917969 36.039062 Z M 24.203125 36.039062 C 25.09375 36.039062 25.816406 36.761719 25.816406 37.652344 C 25.816406 38.542969 25.09375 39.265625 24.203125 39.265625 C 23.3125 39.265625 22.589844 38.542969 22.589844 37.652344 C 22.589844 36.761719 23.3125 36.039062 24.203125 36.039062 Z M 18.484375 36.039062 C 19.378906 36.039062 20.097656 36.761719 20.097656 37.652344 C 20.097656 38.542969 19.378906 39.265625 18.484375 39.265625 C 17.59375 39.265625 16.871094 38.542969 16.871094 37.652344 C 16.871094 36.761719 17.59375 36.039062 18.484375 36.039062 Z M 28.578125 16.488281 C 36.304688 14.222656 46.632812 9.421875 49.421875 1.210938 C 50.289062 3.949219 50.550781 6.75 50.269531 9.457031 C 50.066406 11.445312 49.726562 13.175781 49.273438 14.691406 C 47.90625 18.25 45.480469 21.414062 42.160156 23.6875 C 42.496094 21.765625 42.253906 19.792969 41.460938 18.011719 C 36.949219 23.855469 21.6875 25.710938 14.578125 30.480469 C 11.671875 32.429688 9.898438 35.710938 9.898438 39.257812 C 9.898438 45.679688 18.644531 51.957031 22.769531 56.53125 C 13.492188 56.164062 4.390625 51.664062 1.753906 43.210938 C -5.558594 19.773438 30.507812 16.988281 42.691406 0.109375 C 42.144531 8.601562 36.023438 13.347656 28.578125 16.488281 Z M 28.578125 16.488281 "
                    fill-opacity="1"
                    fill-rule="evenodd"
                    filter="url(#redShadow)"
                ></path>
            </svg>
        </div>
    </div>
</section>

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

    .splittedHomepage {
        display: flex;
        width: 100%;
        position: relative;
        height: 100%;
        align-items: center;
        justify-content: center;
        transition: --color 1s ease;
        background-color: var(--bg-100);
        margin-top: -4.8rem;
        padding: 4.8rem 0;

        z-index: 1000;

        .wrapper {
            max-width: var(--normal-max-width);
            display: flex;
            width: 100%;
            position: relative;
            height: 100%;
            align-items: center;
            justify-content: space-between;
            transition: --color 1s ease;
        }
        .elements {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            position: absolute;
            width: 100%;
            @media @mobile {
                gap: 0.5rem;
            }
            li {
                transition: max-height 1.5s ease;

                max-height: 5rem;
                max-width: 900px;
                h2 {
                    font-size: 4.5rem;
                    text-transform: uppercase;
                    font-weight: 700;
                    line-height: 4.5rem;
                    font-family: sans-serif;
                    @media @mobile {
                        font-size: 3rem;
                        line-height: 3rem;
                    }
                    &.transparent-heading {
                        @media @mobile {
                            font-size: 3rem;
                        }
                        font-weight: 700;
                        color: transparent;
                        position: relative;
                        display: inline-block;
                        -webkit-text-stroke: 1px white;
                    }
                }
                height: fit-content;
                max-height: 10rem;
                display: flex;
                flex-direction: column;
                p {
                    opacity: 0;
                    transition: opacity 1s;
                }
                &.selected {
                    p {
                        opacity: 1;
                    }
                }
            }
        }
        .media {
            max-width: 600px;
            width: 100%;
            display: flex;
            height: 100%;
            align-items: center;
            flex-grow: 1;
            @media @mobile {
                width: 100%;
            }
            overflow: visible;
            svg {
                width: 100%;
                transition: fill 1s ease;
                overflow: visible;
            }
        }
        @media @mobile {
            flex-direction: column;
        }
    }
</style>
