<script lang="ts">
    import { onMount } from "svelte";
    import { fade, fly } from "svelte/transition";

    let currentIndex = $state(0);

    const items = [
        {
            image: "/coffee-cup.png",
            title: "Analyze Packaging",
            desc: "Check if your daily coffee cup is truly compostable",
        },
        {
            image: "/water-bottle.png",
            title: "Verify Materials",
            desc: "Scan plastic bottles to see their recycling potential",
        },
        {
            image: "/plastic-bag.png",
            title: "Detect Greenwashing",
            desc: 'Find out the truth about "biodegradable" bags',
        },
    ];

    onMount(() => {
        const interval = setInterval(() => {
            currentIndex = (currentIndex + 1) % items.length;
        }, 4000);

        return () => clearInterval(interval);
    });
</script>

<div class="carousel-container">
    {#each [items[currentIndex]] as item (currentIndex)}
        <div
            class="carousel-item"
            in:fly={{ y: 20, duration: 800, delay: 200 }}
            out:fade={{ duration: 400 }}
        >
            <div class="image-wrapper">
                <img src={item.image} alt={item.title} />
                <div class="backdrop-glow"></div>
            </div>

            <div class="content">
                <h3>{item.title}</h3>
                <p>{item.desc}</p>
            </div>
        </div>
    {/each}

    <div class="indicators">
        {#each items as _, i}
            <button
                class="indicator {i === currentIndex ? 'active' : ''}"
                onclick={() => (currentIndex = i)}
                aria-label="Go to slide {i + 1}"
            ></button>
        {/each}
    </div>
</div>

<style>
    .carousel-container {
        position: relative;
        width: 100%;
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-item {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .image-wrapper {
        position: relative;
        width: 320px;
        height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        border-radius: 50%;
        transition: all 0.5s ease;
    }

    /* Natural container glow (subtle) + Hover intensity */
    .image-wrapper:hover {
        background: radial-gradient(
            circle,
            rgba(74, 222, 128, 0.05) 0%,
            rgba(0, 0, 0, 0) 70%
        );
        box-shadow: 0 0 60px rgba(74, 222, 128, 0.15);
    }

    img {
        max-width: 85%;
        max-height: 85%;
        object-fit: contain;
        position: relative;
        z-index: 2;
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .image-wrapper:hover img {
        transform: scale(1.1) translateY(-10px);
    }

    .backdrop-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background: radial-gradient(
            circle,
            rgba(74, 222, 128, 0.3) 0%,
            rgba(0, 0, 0, 0) 70%
        );
        border-radius: 50%;
        z-index: 1;
        filter: blur(40px);
        opacity: 0.6;
        transition: all 0.5s ease;
        animation: pulse 4s infinite ease-in-out;
    }

    .image-wrapper:hover .backdrop-glow {
        opacity: 0.9;
        width: 260px;
        height: 260px;
        filter: blur(50px);
    }

    @keyframes pulse {
        0% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.5;
        }
        50% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 0.7;
        }
        100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.5;
        }
    }

    .content {
        max-width: 400px;
        position: relative;
        z-index: 3;
    }

    h3 {
        font-size: 24px;
        font-weight: 700;
        color: white;
        margin: 0 0 8px 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    p {
        font-size: 16px;
        color: #d1d5db;
        line-height: 1.5;
        margin: 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .indicators {
        position: absolute;
        bottom: 20px;
        display: flex;
        gap: 8px;
        z-index: 10;
    }

    .indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 0;
    }

    .indicator:hover {
        background: rgba(255, 255, 255, 0.5);
    }

    .indicator.active {
        background: #4ade80;
        width: 24px;
        border-radius: 4px;
    }
</style>
