@php
    $settings = $section->settings ?? [];
    $text = $settings['marquee_items'] ?? "JOIN 150K+ CREATORS • BUILD THE FUTURE • LAUNCH FASTER • EARN MORE • JOIN THE ELITE";
    $speed = $settings['marquee_speed'] ?? '30s';
    $bgColor = $settings['bg_color'] ?? 'bg-zinc-950';
    $textColor = $settings['text_color'] ?? 'text-white/20';
@endphp

<div class="py-6 overflow-hidden {{ $bgColor }} border-y border-white/5 relative z-20">
    <div class="flex whitespace-nowrap animate-marquee group" style="animation-duration: {{ $speed }};">
        <div class="flex shrink-0 items-center">
            @for ($i = 0; $i < 10; $i++)
                <span class="text-2xl md:text-6xl font-black uppercase tracking-[0.2em] {{ $textColor }} mx-8 highlight-hover transition-colors duration-500 hover:text-brand-500">
                    {{ $text }}
                </span>
            @endfor
        </div>
    </div>
</div>

<style>
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    .animate-marquee {
        display: flex;
        width: max-content;
        animation: marquee linear infinite;
    }
    .animate-marquee:hover {
        animation-play-state: paused;
    }
    .highlight-hover:hover {
        text-shadow: 0 0 30px rgba(20, 184, 166, 0.4);
    }
</style>