@extends('layouts.app')

@section('title', 'Young & Branded Podcast')

@section('content')

<!-- Custom Podcast Styles -->
<style>
    .text-podcast-primary { color: #692E8A; }
    .text-podcast-secondary { color: #CA2791; }
    .bg-podcast-primary { background-color: #692E8A; }
    .bg-podcast-secondary { background-color: #CA2791; }
    .hover\:bg-podcast-primary-dark:hover { background-color: #552470; }
    .border-podcast-primary { border-color: #692E8A; }
</style>

<!-- Hero Section -->
<section class="podcast-hero relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-6 md:px-12 pt-28 md:pt-32 pb-8 text-center relative z-20">
        <div class="flex justify-center mb-6">
            <img src="{{ asset('images/young-branded-logo.svg') }}" alt="Young & Branded Logo" class="h-20 md:h-28 w-auto">
        </div>
        <h2 class="text-xl md:text-2xl font-serif text-theme-700 mb-2 italic">Welcome to the movement, where we talk about</h2>
        <h1 class="text-5xl md:text-6xl font-bold font-heading text-theme-900 mb-6 leading-[1.2] tracking-tight min-h-[80px] md:min-h-[96px]">
            <span id="animated-podcast-topic" class="inline-block text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-500 transition-all duration-500 transform origin-center pb-2">Creativity</span>
        </h1>
        
        <p class="text-lg text-theme-600 max-w-2xl mx-auto mb-10 leading-relaxed">
            Honest conversations and intentional storytelling. We help young people understand who they are, how they show up, and how they take ownership of their voice.
        </p>

        <a href="#episodes" class="inline-flex items-center gap-3 bg-gradient-to-r from-purple-600 to-pink-500 text-white font-bold px-8 py-4 rounded-full transition-all shadow-[0_10px_30px_rgba(147,51,234,0.3)] hover:shadow-[0_15px_40px_rgba(147,51,234,0.4)] transform hover:-translate-y-1">
            Listen to the Latest Episode
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
        </a>
    </div>

    <!-- Coverflow Display (5 visible, infinite loop) -->
    @if(isset($heroVideos) && $heroVideos->count() > 0)
    <div class="relative z-10 py-12 md:py-20">
        <!-- Anti-gravity dark diffused shadow centered behind the layout -->
        <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-4xl h-[200px] bg-black/40 blur-[90px] rounded-[100%] pointer-events-none z-0"></div>
        
        <div class="coverflow-fan relative mx-auto z-10" style="perspective: 1400px; height: clamp(300px, 40vw, 450px); max-width: clamp(500px, 75vw, 1000px);">
            @foreach($heroVideos as $idx => $video)
                <a href="{{ $video->video_url }}" target="_blank" rel="noopener noreferrer" 
                   class="coverflow-card group absolute left-1/2 top-1/2"
                   style="width: clamp(160px, 18vw, 240px); opacity: 0; transform-style: preserve-3d;"
                   data-index="{{ $idx }}">
                    <div class="coverflow-inner relative w-full aspect-[3/4] rounded-[24px] overflow-hidden border border-white/20 bg-white/10 backdrop-blur-xl transition-all duration-700 shadow-[0_10px_30px_rgba(0,0,0,0.15)]">
                        
                        <!-- Image -->
                        @if($video->thumbnail)
                            <img src="{{ asset('storage/' . $video->thumbnail) }}" alt="{{ $video->title }}" class="w-full h-full object-cover">
                        @else
                            <div class="w-full h-full bg-gradient-to-br from-podcast-secondary to-podcast-primary flex items-center justify-center">
                                <svg class="w-12 h-12 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                            </div>
                        @endif
                        
                        <!-- Hover play overlay -->
                        <div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-20">
                            <div class="w-16 h-16 rounded-full bg-white/95 backdrop-blur-md flex items-center justify-center shadow-2xl scale-90 group-hover:scale-100 transition-transform duration-300">
                                <div class="w-8 h-8 rounded-full bg-[#1A1A1A] flex items-center justify-center shadow-inner">
                                    <svg class="w-4 h-4 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Minimalist text labels at bottom -->
                        <div class="absolute bottom-0 left-0 right-0 p-5 pt-16 bg-gradient-to-t from-black/90 via-black/40 to-transparent text-center z-10">
                            <h3 class="text-white font-semibold text-sm md:text-base leading-snug line-clamp-1 drop-shadow-md">{{ $video->title }}</h3>
                            <p class="text-white/70 text-[10px] md:text-xs mt-1 tracking-widest uppercase drop-shadow-sm">Hannah Arinaitwe</p>
                        </div>

                    </div>
                </a>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Dummy Audio Player -->
    <div class="max-w-2xl mx-auto px-6 md:px-12 pb-12 relative z-20">
        <div class="bg-white/40 backdrop-blur-lg border border-white/50 rounded-2xl p-4 md:p-5 flex items-center gap-4 shadow-xl">
            <!-- Album art -->
            <div class="w-14 h-14 md:w-16 md:h-16 rounded-xl bg-gradient-to-br from-podcast-secondary to-podcast-primary flex items-center justify-center flex-shrink-0 shadow-md">
                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path></svg>
            </div>
            <!-- Track info + controls -->
            <div class="flex-grow min-w-0">
                <div class="flex items-center justify-between mb-1.5">
                    <div class="min-w-0">
                        <h4 class="text-theme-900 font-bold text-sm md:text-base truncate">Young & Branded — Latest Episode</h4>
                        <p class="text-theme-500 text-xs truncate">Hannah Arinaitwe</p>
                    </div>
                    <div class="flex items-center gap-3 flex-shrink-0 ml-4">
                        <button id="btn-prev-carousel" class="text-theme-400 hover:text-podcast-primary transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z"></path></svg>
                        </button>
                        <button id="btn-play-pause-carousel" class="w-10 h-10 rounded-full bg-podcast-primary flex items-center justify-center shadow-md hover:scale-105 transition-transform">
                            <svg id="icon-play" class="w-5 h-5 text-white ml-0.5 hidden" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
                            <svg id="icon-pause" class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"></path></svg>
                        </button>
                        <button id="btn-next-carousel" class="text-theme-400 hover:text-podcast-primary transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.933 12.8a1 1 0 000-1.6L6.6 7.2A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z"></path></svg>
                        </button>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-theme-400 text-[10px] font-mono">Loop</span>
                    <div class="flex-grow h-1.5 bg-theme-200 rounded-full overflow-hidden">
                        <div id="carousel-progress" class="h-full bg-podcast-primary rounded-full transition-all duration-500 ease-out" style="width: 0%;"></div>
                    </div>
                    <span class="text-theme-400 text-[10px] font-mono">End</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Coverflow Infinite Carousel Script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
    const cards = [...document.querySelectorAll('.coverflow-card')];
    if (cards.length === 0) return;
    
    const N = cards.length;
    let activeIndex = 0;   
    let paused = false;
    
    // 5 visible slot positions (proportional via %)
    const SLOTS = [
        { xPct: -48, rotate: 45,  scale: 0.70, zIdx: 1 },  // far-left
        { xPct: -24, rotate: 25,  scale: 0.85, zIdx: 3 },  // left
        { xPct:   0, rotate: 0,   scale: 1.15, zIdx: 5 },  // center
        { xPct:  24, rotate: -25, scale: 0.85, zIdx: 3 },  // right
        { xPct:  48, rotate: -45, scale: 0.70, zIdx: 1 },  // far-right
    ];
    
    function positionCards() {
        const containerW = document.querySelector('.coverflow-fan').offsetWidth;
        
        cards.forEach((card, i) => {
            let diff = i - activeIndex;
            // Wrap logic for infinite loop
            if (diff > Math.floor(N / 2)) diff -= N;
            if (diff < -Math.floor(N / 2)) diff += N;
            
            const slotIdx = diff + 2; // map -2..+2 → 0..4
            const cardInner = card.querySelector('.coverflow-inner');
            
            if (slotIdx < 0 || slotIdx > 4) {
                card.style.transition = 'none';
                card.style.opacity = '0';
                card.style.pointerEvents = 'none';
                const offX = diff > 0 ? containerW * 0.6 : -containerW * 0.6;
                card.style.transform = `translate(-50%, -50%) translateX(${offX}px) perspective(1400px) rotateY(${diff > 0 ? -50 : 50}deg) scale(0.5)`;
                return;
            }
            
            const slot = SLOTS[slotIdx];
            const xPx = (slot.xPct / 100) * containerW;
            
            card.style.transition = 'transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease';
            card.style.transform = `translate(-50%, -50%) translateX(${xPx}px) perspective(1400px) rotateY(${slot.rotate}deg) scale(${slot.scale})`;
            card.style.opacity = '1';
            card.style.zIndex = slot.zIdx;
            card.style.pointerEvents = 'auto';

            // Dynamic styles for the center card vs flanking cards
            if (slotIdx === 2) {
                // Center card styling: sharp, realistic drop shadow, bright border
                cardInner.style.boxShadow = '0 25px 60px -12px rgba(0,0,0,0.6), 0 0 30px rgba(0,0,0,0.2)';
                cardInner.style.borderColor = 'rgba(255, 255, 255, 0.4)';
            } else {
                // Flanking cards styling: softer shadow, dimmer border
                cardInner.style.boxShadow = '0 10px 30px rgba(0,0,0,0.15)';
                cardInner.style.borderColor = 'rgba(255, 255, 255, 0.15)';
            }
        });
    }
    
    function updateProgress() {
        const progress = document.getElementById('carousel-progress');
        if (progress) {
            const pct = N > 1 ? (activeIndex / (N - 1)) * 100 : 100;
            progress.style.width = pct + '%';
        }
    }
    
    function advance() {
        activeIndex = (activeIndex + 1) % N;
        positionCards();
        updateProgress();
    }
    
    positionCards();
    updateProgress();
    
    let timer = setInterval(() => { if (!paused) advance(); }, 3500);
    
    function resetTimer() {
        clearInterval(timer);
        timer = setInterval(() => { if (!paused) advance(); }, 3500);
    }
    
    // Player Controls Logic
    let isManuallyPaused = false;
    const btnPrev = document.getElementById('btn-prev-carousel');
    const btnNext = document.getElementById('btn-next-carousel');
    const btnPlayPause = document.getElementById('btn-play-pause-carousel');
    const iconPlay = document.getElementById('icon-play');
    const iconPause = document.getElementById('icon-pause');
    
    if (btnPrev) {
        btnPrev.addEventListener('click', () => {
            activeIndex = (activeIndex - 1 + N) % N;
            positionCards();
            updateProgress();
            resetTimer();
        });
    }
    
    if (btnNext) {
        btnNext.addEventListener('click', () => {
            activeIndex = (activeIndex + 1) % N;
            positionCards();
            updateProgress();
            resetTimer();
        });
    }
    
    if (btnPlayPause) {
        btnPlayPause.addEventListener('click', () => {
            isManuallyPaused = !isManuallyPaused;
            paused = isManuallyPaused;
            if (isManuallyPaused) {
                iconPause.classList.add('hidden');
                iconPlay.classList.remove('hidden');
            } else {
                iconPlay.classList.add('hidden');
                iconPause.classList.remove('hidden');
                resetTimer();
            }
        });
    }
    
    const fan = document.querySelector('.coverflow-fan');
    if (fan) {
        fan.addEventListener('mouseenter', () => paused = true);
        fan.addEventListener('mouseleave', () => {
             if (!isManuallyPaused) paused = false;
        });
    }
    
    window.addEventListener('resize', positionCards);
});
</script>

<!-- Feature Blurbs (from Mockup) -->
<section class="py-16 bg-white border-b border-theme-200">
    <div class="max-w-7xl mx-auto px-6 md:px-12">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-12 text-center md:text-left divide-y md:divide-y-0 md:divide-x divide-theme-200">
            
            <div class="md:pr-8 pt-8 md:pt-0">
                <h3 class="text-xl font-bold font-heading text-theme-900 mb-3">Intentional Storytelling</h3>
                <p class="text-sm text-theme-600 leading-relaxed">
                    We dive deep into the journeys of bold young minds. Hear the stories of becoming, the doubts faced, and the breakthroughs that changed everything.
                </p>
            </div>

            <div class="md:px-8 pt-8 md:pt-0">
                <h3 class="text-xl font-bold font-heading text-theme-900 mb-3">Shaping Identity</h3>
                <p class="text-sm text-theme-600 leading-relaxed">
                    Everyone is a brand in motion. Learn how to actively define who you are, how you show up, and how you take ownership of your unique voice.
                </p>
            </div>

            <div class="md:pl-8 pt-8 md:pt-0">
                <h3 class="text-xl font-bold font-heading text-theme-900 mb-3">Actionable Insights</h3>
                <p class="text-sm text-theme-600 leading-relaxed">
                    Make smarter decisions about your personal brand and influence with real-world lessons, discipline strategies, and practical advice from our guests.
                </p>
            </div>

        </div>
    </div>
</section>

<!-- Episodes List -->
<section id="episodes" class="py-24 bg-theme-100">
    <div class="max-w-7xl mx-auto px-6 md:px-12">
        
        <div class="flex flex-col md:flex-row justify-between items-center md:items-end mb-12 gap-6 text-center md:text-left">
            <div>
                <h2 class="text-3xl font-bold font-heading text-theme-900 mb-2">All Episodes</h2>
                <p class="text-theme-600">Catch up on the latest conversations.</p>
            </div>
            
            <div class="flex flex-col sm:flex-row items-center justify-center md:justify-end gap-4">
                <a href="{{ route('guest.apply') }}" class="btn-secondary text-podcast-primary border-podcast-primary hover:bg-podcast-primary hover:text-white transition-colors text-sm py-2">Become a Guest</a>
                <div class="flex items-center gap-4">
                    <a href="https://www.instagram.com/brandedyoungug?igsh=bTVhZHNkeGJzcnNx" target="_blank" class="text-podcast-primary hover:text-podcast-secondary font-medium transition-colors flex items-center gap-2">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                        Instagram
                    </a>
                    <a href="https://www.tiktok.com/@young_brandedug?_r=1&_t=ZS-97jGc0jlqYj" target="_blank" class="text-podcast-primary hover:text-podcast-secondary font-medium transition-colors flex items-center gap-2">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/></svg>
                        TikTok
                    </a>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse($episodes as $episode)
                <div class="bg-white rounded-2xl shadow-sm border border-theme-200 overflow-hidden hover:shadow-md transition-all group">
                    <div class="aspect-video relative bg-theme-100 overflow-hidden">
                        @if($episode->featured_image)
                            <img src="{{ asset('storage/' . $episode->featured_image) }}" alt="{{ $episode->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                        @else
                            <div class="w-full h-full bg-gradient-to-br from-podcast-secondary to-podcast-primary flex items-center justify-center text-white">
                                <span class="font-bold font-heading text-4xl opacity-80">#{{ $episode->episode_number ?? 'Ep' }}</span>
                            </div>
                        @endif
                        <div class="absolute inset-0 bg-black/10 group-hover:bg-black/30 transition-colors flex items-center justify-center">
                            <a href="{{ route('podcast.show', $episode->slug) }}" class="w-16 h-16 rounded-full bg-white shadow-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform scale-90 group-hover:scale-100">
                                <div class="w-8 h-8 rounded-full bg-[#1A1A1A] flex items-center justify-center shadow-inner">
                                    <svg class="w-4 h-4 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                                </div>
                            </a>
                        </div>
                    </div>
                    
                    <div class="p-6">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-xs font-bold text-podcast-primary uppercase tracking-wider bg-podcast-primary/10 px-2 py-1 rounded">Episode {{ $episode->episode_number }}</span>
                            <span class="text-xs text-theme-500 font-medium">{{ $episode->created_at->format('M d, Y') }}</span>
                        </div>
                        
                        <h3 class="text-xl font-bold font-heading text-theme-900 mb-2 line-clamp-2">
                            <a href="{{ route('podcast.show', $episode->slug) }}" class="hover:text-podcast-primary transition-colors">{{ $episode->title }}</a>
                        </h3>
                        
                        <a href="{{ route('podcast.show', $episode->slug) }}" class="inline-flex items-center gap-1.5 text-sm font-semibold text-podcast-primary hover:text-podcast-secondary transition-colors mt-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            Listen/Watch Now
                        </a>
                    </div>
                </div>
            @empty
                <div class="text-center py-12 bg-white rounded-2xl border border-theme-200">
                    <svg class="w-12 h-12 text-theme-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path></svg>
                    <h3 class="text-lg font-medium text-theme-900 mb-2">No episodes yet</h3>
                    <p class="text-theme-500">Check back soon for our first episode!</p>
                </div>
            @endforelse
        </div>
        
        <div class="mt-12">
            {{ $episodes->links() }}
        </div>
        
        <!-- Terms and Conditions section -->
        <div class="mt-20 pt-10 border-t border-theme-200 text-center max-w-2xl mx-auto">
            <h4 class="text-lg font-semibold text-theme-900 mb-2">Podcast Terms & Conditions</h4>
            <p class="text-theme-500 text-sm mb-4">By becoming a guest or listening to our content, you agree to our terms. Views expressed by guests are their own and do not necessarily reflect the views of Young & Branded.</p>
            <a href="{{ route('guest.apply') }}" class="text-podcast-primary hover:underline text-sm font-medium">Read Full Terms & Conditions</a>
        </div>
    </div>
</section>

<!-- Animation Script for Hero Text -->
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const topics = [
            'Creativity',
            'Purpose',
            '& Owning your Brand.'
        ];
        let i = 0;
        const topicSpan = document.getElementById('animated-podcast-topic');
        if (!topicSpan) return;
        
        setInterval(() => {
            topicSpan.style.opacity = '0';
            topicSpan.style.transform = 'translateY(10px) scale(0.95)';
            
            setTimeout(() => {
                i = (i + 1) % topics.length;
                topicSpan.innerText = topics[i];
                topicSpan.style.opacity = '1';
                topicSpan.style.transform = 'translateY(0) scale(1)';
            }, 500); 
        }, 3000); 
    });
</script>
@endsection