@php
    $blogs = \App\Models\BlogPost::where('is_published', true)
        ->latest('published_at')
        ->take(10)
        ->get()
        ->map(function($blog) {
            return [
                'id' => $blog->id,
                'title' => $blog->title,
                'excerpt' => $blog->excerpt ?? \Illuminate\Support\Str::limit(strip_tags($blog->content), 80),
                'image' => $blog->featured_image ? asset('storage/' . $blog->featured_image) : 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?q=80&w=2072&auto=format&fit=crop',
                'url' => route('blog.show', $blog->slug),
                'tempId' => $blog->id
            ];
        });

    if($blogs->isEmpty()) {
        // Fallback for demo
        $blogs = collect([
            ['id' => 1, 'title' => 'Starting your Business', 'excerpt' => 'Learn the fundamentals of starting a successful business in 2026.', 'image' => 'https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=2070&auto=format&fit=crop', 'url' => '#', 'tempId' => 1],
            ['id' => 2, 'title' => 'Tax Compliance 101', 'excerpt' => 'Everything you need to know about staying tax-compliant this year.', 'image' => 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?q=80&w=2070&auto=format&fit=crop', 'url' => '#', 'tempId' => 2],
            ['id' => 3, 'title' => 'Scaling your Startup', 'excerpt' => 'Practical advice for founders looking to reach their next milestone.', 'image' => 'https://images.unsplash.com/photo-1559136555-9303baea8ebd?q=80&w=2070&auto=format&fit=crop', 'url' => '#', 'tempId' => 3],
        ]);
    }
@endphp

<div x-data="{
    blogs: {{ json_encode($blogs) }},
    cardSize: 450,
    updateSize() {
        this.cardSize = window.innerWidth > 640 ? 450 : 320;
    },
    handleMove(steps) {
        if (steps > 0) {
            for (let i = steps; i > 0; i--) {
                const item = this.blogs.shift();
                this.blogs.push({...item, tempId: Math.random()});
            }
        } else {
            for (let i = steps; i < 0; i++) {
                const item = this.blogs.pop();
                this.blogs.unshift({...item, tempId: Math.random()});
            }
        }
    }
}" 
x-init="updateSize(); window.addEventListener('resize', () => updateSize())"
class="relative w-full overflow-hidden bg-white/3 py-20" 
style="height: 750px;">
    
    <template x-for="(blog, index) in blogs" :key="blog.tempId">
        @php
            // Logic for position calculation
        @endphp
        <div 
            @click="handleMove(index - Math.floor(blogs.length / 2))"
            class="absolute left-1/2 top-1/2 cursor-pointer border-2 transition-all duration-500 ease-in-out overflow-hidden group shadow-2xl"
            :class="index === Math.floor(blogs.length / 2) ? 'z-20 bg-emerald border-emerald scale-110' : 'z-10 bg-slate-900 border-white/5 opacity-40 hover:opacity-100'"
            :style="`
                width: ${cardSize}px;
                height: 520px;
                transform: translate(-50%, -50%) 
                           translateX(${(cardSize / 1.5) * (index - Math.floor(blogs.length / 2))}px)
                           translateY(${index === Math.floor(blogs.length / 2) ? -50 : (index % 2 === 0 ? 20 : -20)}px)
                           rotate(${index === Math.floor(blogs.length / 2) ? 0 : (index % 2 === 0 ? 3 : -3)}deg);
            `">
            
            <!-- Blog Card Image -->
            <div class="h-64 w-full overflow-hidden">
                <img :src="blog.image" :alt="blog.title" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
            </div>

            <!-- Blog Card Content -->
            <div class="p-8 flex flex-col h-full">
                <h3 class="text-xl font-bold mb-3 line-clamp-2" :class="index === Math.floor(blogs.length / 2) ? 'text-white' : 'text-slate-200'" x-text="blog.title"></h3>
                <p class="text-sm leading-relaxed mb-6 line-clamp-3" :class="index === Math.floor(blogs.length / 2) ? 'text-white/80' : 'text-white/40'" x-text="blog.excerpt"></p>
                
                <div class="mt-auto">
                    <a :href="blog.url" class="inline-flex items-center gap-2 text-xs font-black uppercase tracking-[0.2em]" 
                       :class="index === Math.floor(blogs.length / 2) ? 'text-white' : 'text-emerald'">
                        Read Article
                        <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.5" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </template>

    <!-- Navigation -->
    <div class="absolute bottom-12 left-1/2 -translate-x-1/2 flex gap-4 z-30">
        <button @click="handleMove(-1)" class="w-14 h-14 bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-emerald hover:border-emerald transition-all rounded-full group">
            <svg class="w-6 h-6 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/></svg>
        </button>
        <button @click="handleMove(1)" class="w-14 h-14 bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-emerald hover:border-emerald transition-all rounded-full group">
            <svg class="w-6 h-6 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
        </button>
    </div>
</div>