<section class="py-16 md:py-32 bg-slate-900 text-white overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="text-center mb-12 md:mb-16">
            <h2 class="text-3xl md:text-5xl font-bold">
                Der Weg zur Win-Win-Situation.
            </h2>
            <div class="w-16 h-1 bg-amber-500 mx-auto mt-4 md:mt-6"></div>
        </div>

        <div class="flex flex-col lg:grid lg:grid-cols-2 gap-8 md:gap-12 items-center">
            <!-- Steps Selection -->
            <div class="flex flex-col gap-4 md:gap-6 w-full max-w-md mx-auto lg:max-w-none">
                <!-- Step 1 -->
                <div
                        class="step-item relative p-5 md:p-6 rounded-xl border-2 cursor-pointer transition-all duration-300 w-full border-slate-700 bg-slate-800/50 hover:border-amber-500 hover:bg-slate-800 hover:shadow-lg"
                        data-step="1"
                >
                    <h3 class="text-xl md:text-2xl font-bold">
                        1. Anfragen
                    </h3>
                    <div class="step-underline h-1 w-10 md:w-12 bg-amber-500 mt-2 opacity-0 transition-opacity duration-300"></div>
                </div>

                <!-- Step 2 -->
                <div
                        class="step-item relative p-5 md:p-6 rounded-xl border-2 cursor-pointer transition-all duration-300 w-full border-slate-700 bg-slate-800/50 hover:border-amber-500 hover:bg-slate-800 hover:shadow-lg"
                        data-step="2"
                >
                    <h3 class="text-xl md:text-2xl font-bold">
                        2. Abstimmen
                    </h3>
                    <div class="step-underline h-1 w-10 md:w-12 bg-amber-500 mt-2 opacity-0 transition-opacity duration-300"></div>
                </div>

                <!-- Step 3 -->
                <div
                        class="step-item relative p-5 md:p-6 rounded-xl border-2 cursor-pointer transition-all duration-300 w-full border-slate-700 bg-slate-800/50 hover:border-amber-500 hover:bg-slate-800 hover:shadow-lg"
                        data-step="3"
                >
                    <h3 class="text-xl md:text-2xl font-bold">
                        3. Profitieren
                    </h3>
                    <div class="step-underline h-1 w-10 md:w-12 bg-amber-500 mt-2 opacity-0 transition-opacity duration-300"></div>
                </div>
            </div>

            <!-- Content Display -->
            <div class="relative h-64 md:h-96 w-full rounded-2xl overflow-hidden bg-slate-800 mt-6 md:mt-0">
                <img
                        src="/images/partner/step01.avif"
                        alt="Anfragen Schritt"
                        class="step-content absolute inset-0 w-full h-full object-cover transition-opacity duration-500"
                        data-step="1"
                />
                <img
                        src="/images/partner/step02.avif"
                        alt="Abstimmen Schritt"
                        class="step-content absolute inset-0 w-full h-full object-cover transition-opacity duration-500 opacity-0"
                        data-step="2"
                />
                <img
                        src="/images/partner/step03.avif"
                        alt="Profitieren Schritt"
                        class="step-content absolute inset-0 w-full h-full object-cover transition-opacity duration-500 opacity-0"
                        data-step="3"
                />
                <div class="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 md:p-8">
                    <p class="step-text text-base md:text-xl leading-relaxed text-slate-100 transition-opacity duration-300" data-step="1">
                        Ein kurzes Gespräch, um Ihre Wünsche und die Bedürfnisse Ihrer Kunden zu verstehen.
                    </p>
                    <p class="step-text text-base md:text-xl leading-relaxed text-slate-100 transition-opacity duration-300 opacity-0 absolute" data-step="2">
                        Wir erstellen ein individuelles Partnerpaket mit maßgeschneiderten Konditionen und Prozessen.
                    </p>
                    <p class="step-text text-base md:text-xl leading-relaxed text-slate-100 transition-opacity duration-300 opacity-0 absolute" data-step="3">
                        Bieten Sie Ihren Kunden unseren Service an und profitieren Sie von zufriedenen Kunden und attraktiven Provisionen.
                    </p>
                </div>
            </div>
        </div>
    </div>




</section>

<style>
    .step-item {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .step-item:hover {
        transform: translateY(-2px);
    }

    .step-content {
        transition: opacity 0.5s ease-in-out;
    }

    .step-text {
        transition: opacity 0.3s ease-in-out;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const stepItems = document.querySelectorAll('.step-item');
        const stepContents = document.querySelectorAll('.step-content');
        const stepTexts = document.querySelectorAll('.step-text');
        let activeStep = null;

        // Функция для сброса всех активных состояний
        function resetActiveStates() {
            stepItems.forEach(item => {
                item.classList.remove('border-amber-500', 'bg-slate-800');
                item.classList.add('border-slate-700', 'bg-slate-800/50');
            });

            stepContents.forEach(content => {
                content.classList.add('opacity-0');
            });

            stepTexts.forEach(text => {
                text.classList.add('opacity-0');
            });

            // Скрываем все подчеркивания
            document.querySelectorAll('.step-underline').forEach(underline => {
                underline.style.opacity = '0';
            });
        }

        // Функция для активации шага
        function activateStep(stepNumber) {
            resetActiveStates();

            // Активируем выбранный шаг
            const activeItem = document.querySelector(`[data-step="${stepNumber}"]`);
            const activeContent = document.querySelector(`.step-content[data-step="${stepNumber}"]`);
            const activeText = document.querySelector(`.step-text[data-step="${stepNumber}"]`);
            const activeUnderline = activeItem.querySelector('.step-underline');

            if (activeItem && activeContent && activeText) {
                activeItem.classList.remove('border-slate-700', 'bg-slate-800/50');
                activeItem.classList.add('border-amber-500', 'bg-slate-800');

                activeContent.classList.remove('opacity-0');
                activeText.classList.remove('opacity-0');

                if (activeUnderline) {
                    activeUnderline.style.opacity = '1';
                }
            }

            activeStep = stepNumber;
        }

        // Обработчики событий для каждого шага
        stepItems.forEach(item => {
            const stepNumber = item.getAttribute('data-step');

            // Клик - постоянная активация
            item.addEventListener('click', () => {
                activateStep(stepNumber);
            });

            // Наведение - временный эффект
            item.addEventListener('mouseenter', () => {
                if (activeStep !== stepNumber) {
                    item.classList.add('border-amber-500', 'bg-slate-800', 'shadow-lg');
                    item.classList.remove('border-slate-700', 'bg-slate-800/50');
                }
            });

            item.addEventListener('mouseleave', () => {
                if (activeStep !== stepNumber) {
                    item.classList.remove('border-amber-500', 'bg-slate-800', 'shadow-lg');
                    item.classList.add('border-slate-700', 'bg-slate-800/50');
                }
            });
        });

        // По умолчанию показываем первый шаг, но без визуального выделения
        // Контент первого шага виден, но сам пункт не выделен
        const firstContent = document.querySelector('.step-content[data-step="1"]');
        const firstText = document.querySelector('.step-text[data-step="1"]');
        if (firstContent && firstText) {
            firstContent.classList.remove('opacity-0');
            firstText.classList.remove('opacity-0');
        }
    });
</script>