{{- $speed := .Get "speed" | default "30s" -}} {{- $gap := .Get "gap" | default
"4rem" -}} {{- $height := .Get "height" | default "80px" -}}

<div
    class="tech-banner-wrapper"
    style="overflow: hidden; width: 100%; position: relative; margin: 2rem 0"
>
    <!-- Gradient overlays for smooth fade effect -->
    <div
        style="
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 100%;
            background: linear-gradient(to right, var(--color-bg), transparent);
            z-index: 2;
            pointer-events: none;
        "
    ></div>
    <div
        style="
            position: absolute;
            top: 0;
            right: 0;
            width: 150px;
            height: 100%;
            background: linear-gradient(to left, var(--color-bg), transparent);
            z-index: 2;
            pointer-events: none;
        "
    ></div>

    <!-- Scrolling container -->
    <div
        class="tech-banner-scroll"
        style="display: flex; gap: {{ $gap }}; will-change: transform;"
    >
        <!-- First set of logos -->
        <div
            class="tech-banner-track"
            style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0; animation: scroll-left {{ $speed }} linear infinite;"
        >
            <img
                src="/images/tech-banner/arista-color.svg"
                alt="Arista"
                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
            />
            <img
                src="/images/tech-banner/aws-color.svg"
                alt="AWS"
                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
            />
            <img
                src="/images/tech-banner/containerlab-color.svg"
                alt="ContainerLab"
                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
            />
            <img
                src="/images/tech-banner/k8s-color.svg"
                alt="Kubernetes"
                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
            />
            <img
                src="/images/tech-banner/nokia-color.svg"
                alt="Nokia"
                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
            />
            <img
                src="/images/tech-banner/scaleway-color.svg"
                alt="Scaleway"
                style="height: {{ $height }}; width: 200px; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
            />
        </div>
        <!-- Duplicate set for seamless loop -->
        <div
            class="tech-banner-track"
            style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0; animation: scroll-left {{ $speed }} linear infinite;"
            aria-hidden="true"
        >
            <img
                src="/images/tech-banner/arista-color.svg"
                alt="Arista"
                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
            />
            <img
                src="/images/tech-banner/aws-color.svg"
                alt="AWS"
                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
            />
            <img
                src="/images/tech-banner/containerlab-color.svg"
                alt="ContainerLab"
                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
            />
            <img
                src="/images/tech-banner/k8s-color.svg"
                alt="Kubernetes"
                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
            />
            <img
                src="/images/tech-banner/nokia-color.svg"
                alt="Nokia"
                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
            />
            <img
                src="/images/tech-banner/scaleway-color.svg"
                alt="Scaleway"
                style="height: {{ $height }}; width: 200px; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
            />
        </div>
    </div>
</div>

<style>
    :root {
        --color-bg: #ffffff;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --color-bg: #111111;
        }
    }

    [data-theme="dark"] {
        --color-bg: #111111;
    }

    [data-theme="light"] {
        --color-bg: #ffffff;
    }

    @keyframes scroll-left {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-100% - {{$gap}}));
        }
    }

    .tech-banner-track:hover {
        animation-play-state: paused;
    }

    .tech-banner-scroll:hover .tech-banner-track {
        animation-play-state: paused;
    }
</style>