@extends('layouts.app')

@section('content')
<div class="py-16">
    @foreach($homepageBlocks as $block)
        @php
            $isFullWidth = !empty($block['data']['is_full_width']);
            $containerClass = $isFullWidth ? 'w-full px-6 mb-24' : 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24';
        @endphp

        @switch($block['type'])
            @case('hero')
                <div class="{{ $containerClass }}">
                    @if(!empty($block['data']['bg_image']))
                        <!-- Premium Hero with Background Image Overlay -->
                        <div class="relative rounded-[40px] overflow-hidden shadow-2xl bg-slate-900 py-24 md:py-32 px-8 md:px-16 text-center my-8">
                            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('{{ Storage::url($block['data']['bg_image']) }}');" role="img" aria-label="{{ !empty($block['data']['bg_image_alt']) ? $block['data']['bg_image_alt'] : $block['data']['title'] }}"></div>
                            <div class="absolute inset-0 bg-slate-950/60 backdrop-blur-[1px]"></div>
                            <div class="relative z-10 max-w-3xl mx-auto">
                                <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white mb-6">
                                    {{ $block['data']['title'] }}
                                </h1>
                                @if(!empty($block['data']['subtitle']))
                                    <p class="text-lg md:text-xl text-slate-200 mb-8 leading-relaxed">
                                        {{ $block['data']['subtitle'] }}
                                    </p>
                                @endif
                                @if(!empty($block['data']['cta_text']) && !empty($block['data']['cta_url']))
                                    <a href="{{ $block['data']['cta_url'] }}" class="inline-flex items-center justify-center px-8 py-4 bg-brand text-white font-bold rounded-full shadow-lg hover:bg-brand-hover transition-all transform hover:-translate-y-0.5">
                                        {{ $block['data']['cta_text'] }}
                                    </a>
                                @endif
                            </div>
                        </div>
                    @else
                        <!-- Clean text-only centered Hero -->
                        <div class="text-center mb-16">
                            <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
                                {!! preg_replace('/Success Stories/i', '<span class="gradient-text">Success Stories</span>', e($block['data']['title'])) !!}
                            </h1>
                            @if(!empty($block['data']['subtitle']))
                                <p class="text-xl text-slate-600 max-w-2xl mx-auto leading-relaxed">
                                    {{ $block['data']['subtitle'] }}
                                </p>
                            @endif
                            @if(!empty($block['data']['cta_text']) && !empty($block['data']['cta_url']))
                                <div class="mt-8">
                                    <a href="{{ $block['data']['cta_url'] }}" class="inline-flex items-center justify-center px-8 py-4 bg-brand text-white font-bold rounded-full shadow-lg hover:bg-brand-hover transition-all transform hover:-translate-y-0.5">
                                        {{ $block['data']['cta_text'] }}
                                    </a>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
                @break

            @case('featured_stories')
                @php
                    $limit = $block['data']['limit'] ?? 6;
                    $displayStories = $featuredStories->take($limit);
                    $isCarousel = !empty($block['data']['is_carousel']);
                @endphp
                <div class="{{ $containerClass }}">
                    <div class="flex justify-between items-end mb-12">
                        <div>
                            <h2 class="text-3xl font-bold mb-2">{{ $block['data']['title'] ?? 'Featured Stories' }}</h2>
                            <div class="h-1 w-20 bg-brand rounded-full"></div>
                        </div>
                        <a href="{{ route('stories.index') }}" class="text-brand font-semibold hover:underline flex items-center space-x-2">
                            <span>View all stories</span>
                            <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="M9 5l7 7-7 7"></path></svg>
                        </a>
                    </div>
                    @if(!empty($block['data']['description']))
                        <p class="text-slate-600 mb-8 max-w-2xl -mt-6">{{ $block['data']['description'] }}</p>
                    @endif

                    @if($displayStories->isEmpty())
                        <div class="bg-white rounded-3xl p-12 text-center border border-slate-100 shadow-sm">
                            <p class="text-slate-500 italic">No featured stories at the moment. Browse our projects to see more impact stories.</p>
                        </div>
                    @else
                        @if($isCarousel)
                            <div class="relative group">
                                <div class="swiper featured-stories-swiper pb-16">
                                    <div class="swiper-wrapper">
                                        @foreach($displayStories as $story)
                                            @php
                                                $firstTextBlock = collect($story->content)->firstWhere('type', 'text');
                                                $summary = $firstTextBlock ? Str::limit(strip_tags($firstTextBlock['data']['content']), 150) : 'Click to read this success story...';
                                            @endphp
                                            <div class="swiper-slide h-auto flex">
                                                <div class="story-card group bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm flex flex-col w-full h-full">
                                                    <div class="relative aspect-video overflow-hidden">
                                                        @if($story->image)
                                                            <img src="{{ Storage::url($story->image) }}" alt="{{ $story->image_alt ?: $story->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                                        @else
                                                            <div class="w-full h-full bg-slate-100 flex items-center justify-center text-slate-300">
                                                                <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                                            </div>
                                                        @endif
                                                        @if($story->project)
                                                            <div class="absolute top-4 left-4">
                                                                <span class="px-3 py-1 bg-white/90 backdrop-blur-sm text-brand text-xs font-bold rounded-full uppercase tracking-wider">
                                                                    {{ $story->project->short_name ?? $story->project->name }}
                                                                </span>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <div class="p-8 flex-1 flex flex-col">
                                                        <div class="flex items-center space-x-2 text-slate-600 text-xs mb-3 font-bold uppercase tracking-widest">
                                                            <span>Published {{ $story->published_date ? $story->published_date->format('M d, Y') : $story->created_at->format('M d, Y') }}</span>
                                                        </div>
                                                        <h3 class="text-xl font-bold mb-4 line-clamp-2 group-hover:text-brand transition-colors">{{ $story->title }}</h3>
                                                        <p class="text-slate-700 line-clamp-3 mb-6 text-sm">
                                                            {{ $summary }}
                                                        </p>
                                                        <div class="mt-auto">
                                                            <a href="{{ route('stories.show', $story->slug) }}" class="inline-flex items-center space-x-2 text-blue-800 hover:text-blue-950 font-bold group" aria-label="Read Full Story: {{ $story->title }}">
                                                                <span>Read Full Story</span>
                                                                <svg class="w-4 h-4 transform 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" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="swiper-pagination !bottom-2"></div>
                                </div>
                                <!-- Navigation buttons -->
                                <div class="swiper-button-prev featured-stories-prev !text-brand hover:scale-110 transition-all opacity-0 group-hover:opacity-100 hidden md:flex !left-0 after:!text-xl bg-white/95 backdrop-blur-sm w-12 h-12 rounded-full shadow-lg border border-slate-100/50 absolute top-[40%] -translate-y-1/2 z-10 cursor-pointer items-center justify-center"></div>
                                <div class="swiper-button-next featured-stories-next !text-brand hover:scale-110 transition-all opacity-0 group-hover:opacity-100 hidden md:flex !right-0 after:!text-xl bg-white/95 backdrop-blur-sm w-12 h-12 rounded-full shadow-lg border border-slate-100/50 absolute top-[40%] -translate-y-1/2 z-10 cursor-pointer items-center justify-center"></div>
                            </div>
                        @else
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                                @foreach($displayStories as $story)
                                    @php
                                        $firstTextBlock = collect($story->content)->firstWhere('type', 'text');
                                        $summary = $firstTextBlock ? Str::limit(strip_tags($firstTextBlock['data']['content']), 150) : 'Click to read this success story...';
                                    @endphp
                                    <div class="story-card group bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm flex flex-col">
                                        <div class="relative aspect-video overflow-hidden">
                                            @if($story->image)
                                                <img src="{{ Storage::url($story->image) }}" alt="{{ $story->image_alt ?: $story->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                            @else
                                                <div class="w-full h-full bg-slate-100 flex items-center justify-center text-slate-300">
                                                    <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                                </div>
                                            @endif
                                            @if($story->project)
                                                <div class="absolute top-4 left-4">
                                                    <span class="px-3 py-1 bg-white/90 backdrop-blur-sm text-brand text-xs font-bold rounded-full uppercase tracking-wider">
                                                        {{ $story->project->short_name ?? $story->project->name }}
                                                    </span>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="p-8 flex-1 flex flex-col">
                                            <div class="flex items-center space-x-2 text-slate-600 text-xs mb-3 font-bold uppercase tracking-widest">
                                                <span>Published {{ $story->published_date ? $story->published_date->format('M d, Y') : $story->created_at->format('M d, Y') }}</span>
                                            </div>
                                            <h3 class="text-xl font-bold mb-4 line-clamp-2 group-hover:text-brand transition-colors">{{ $story->title }}</h3>
                                            <p class="text-slate-700 line-clamp-3 mb-6 text-sm">
                                                {{ $summary }}
                                            </p>
                                            <div class="mt-auto">
                                                <a href="{{ route('stories.show', $story->slug) }}" class="inline-flex items-center space-x-2 text-blue-800 hover:text-blue-950 font-bold group" aria-label="Read Full Story: {{ $story->title }}">
                                                    <span>Read Full Story</span>
                                                    <svg class="w-4 h-4 transform 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" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    @endif
                </div>
                @break

            @case('projects_grid')
                @php
                    $isCarousel = !empty($block['data']['is_carousel']);
                @endphp
                <div class="{{ $containerClass }}">
                    <div class="mb-12">
                        <h2 class="text-3xl font-bold mb-2">{{ $block['data']['title'] ?? 'Our Projects' }}</h2>
                        <div class="h-1 w-20 bg-brand rounded-full"></div>
                    </div>
                    @if(!empty($block['data']['description']))
                        <p class="text-slate-600 mb-8 max-w-2xl -mt-6">{{ $block['data']['description'] }}</p>
                    @endif

                    @if($isCarousel)
                        <div class="relative group">
                            <div class="swiper projects-swiper pb-16">
                                <div class="swiper-wrapper">
                                    @foreach($projects as $project)
                                        <div class="swiper-slide h-auto flex">
                                            <a href="{{ route('projects.show', $project->slug) }}" class="group bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300 w-full h-full flex flex-col justify-between">
                                                <div>
                                                    <div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center text-brand mb-6 group-hover:bg-brand group-hover:text-white transition-colors">
                                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                                                    </div>
                                                    <h3 class="font-bold text-lg mb-1 group-hover:text-brand transition-colors">{{ $project->name }}</h3>
                                                    <div class="flex flex-wrap items-center gap-2 mb-2">
                                                        @if($project->short_name)
                                                            <span class="text-xs text-slate-600 font-bold uppercase">{{ $project->short_name }}</span>
                                                        @endif
                                                        @if($project->is_completed)
                                                            <span class="px-2 py-0.5 bg-emerald-50 text-emerald-700 border border-emerald-200/50 text-[10px] font-bold rounded-full uppercase tracking-wider">Completed</span>
                                                        @else
                                                            <span class="px-2 py-0.5 bg-sky-50 text-sky-700 border border-sky-200/50 text-[10px] font-bold rounded-full uppercase tracking-wider">Ongoing</span>
                                                        @endif
                                                    </div>
                                                </div>
                                                <p class="text-sm text-slate-700 mt-4">{{ $project->success_stories_count }} Success Stories</p>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-pagination !bottom-2"></div>
                            </div>
                            <!-- Navigation buttons -->
                            <div class="swiper-button-prev projects-prev !text-brand hover:scale-110 transition-all opacity-0 group-hover:opacity-100 hidden md:flex !left-0 after:!text-xl bg-white/95 backdrop-blur-sm w-12 h-12 rounded-full shadow-lg border border-slate-100/50 absolute top-[40%] -translate-y-1/2 z-10 cursor-pointer items-center justify-center"></div>
                            <div class="swiper-button-next projects-next !text-brand hover:scale-110 transition-all opacity-0 group-hover:opacity-100 hidden md:flex !right-0 after:!text-xl bg-white/95 backdrop-blur-sm w-12 h-12 rounded-full shadow-lg border border-slate-100/50 absolute top-[40%] -translate-y-1/2 z-10 cursor-pointer items-center justify-center"></div>
                        </div>
                    @else
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                            @foreach($projects as $project)
                                <a href="{{ route('projects.show', $project->slug) }}" class="group bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
                                    <div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center text-brand mb-6 group-hover:bg-brand group-hover:text-white transition-colors">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                                    </div>
                                    <h3 class="font-bold text-lg mb-1 group-hover:text-brand transition-colors">{{ $project->name }}</h3>
                                    <div class="flex flex-wrap items-center gap-2 mb-2">
                                        @if($project->short_name)
                                            <span class="text-xs text-slate-600 font-bold uppercase">{{ $project->short_name }}</span>
                                        @endif
                                        @if($project->is_completed)
                                            <span class="px-2 py-0.5 bg-emerald-50 text-emerald-700 border border-emerald-200/50 text-[10px] font-bold rounded-full uppercase tracking-wider">Completed</span>
                                        @else
                                            <span class="px-2 py-0.5 bg-sky-50 text-sky-700 border border-sky-200/50 text-[10px] font-bold rounded-full uppercase tracking-wider">Ongoing</span>
                                        @endif
                                    </div>
                                    <p class="text-sm text-slate-700">{{ $project->success_stories_count }} Success Stories</p>
                                </a>
                            @endforeach
                        </div>
                    @endif
                </div>
                @break

            @case('thematic_areas_grid')
                <div class="{{ $containerClass }}">
                    <div class="mb-12">
                        <h2 class="text-3xl font-bold mb-2">{{ $block['data']['title'] ?? 'Thematic Areas' }}</h2>
                        <div class="h-1 w-20 bg-brand rounded-full"></div>
                    </div>
                    @if(!empty($block['data']['description']))
                        <p class="text-slate-600 mb-8 max-w-2xl -mt-6">{{ $block['data']['description'] }}</p>
                    @endif

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                        @foreach($thematicAreas as $area)
                            <a href="{{ route('thematic-areas.show', $area->slug) }}" class="group bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
                                <div class="w-12 h-12 rounded-full mb-6 group-hover:scale-110 transition-transform duration-300 shadow-md" style="background: conic-gradient(#E5243B 0deg 21.18deg, #DDA63A 21.18deg 42.35deg, #4C9F38 42.35deg 63.53deg, #C5192D 63.53deg 84.7deg, #FF3A21 84.7deg 105.88deg, #26BDE2 105.88deg 127.06deg, #FCC30B 127.06deg 148.23deg, #A21942 148.23deg 169.41deg, #FD6925 169.41deg 190.59deg, #DD1367 190.59deg 211.76deg, #FD9D24 211.76deg 232.94deg, #BF8B2E 232.94deg 254.12deg, #3F7E44 254.12deg 275.29deg, #0A97D9 275.29deg 296.47deg, #56C02B 296.47deg 317.65deg, #00689D 317.65deg 338.82deg, #19486A 338.82deg 360deg); position: relative;">
                                    <div class="absolute inset-[3px] bg-white rounded-full flex items-center justify-center font-bold text-slate-800 text-[10px] tracking-wider">
                                        SDG
                                    </div>
                                </div>
                                <h3 class="font-bold text-lg mb-2 group-hover:text-brand transition-colors">{{ $area->name }}</h3>
                                <p class="text-sm text-slate-700">{{ $area->success_stories_count }} Success Stories</p>
                            </a>
                        @endforeach
                    </div>
                </div>
                @break

            @case('newsletters')
                @php
                    $limit = $block['data']['limit'] ?? 6;
                    $displayNewsletters = $newsletters->take($limit);
                    $isCarousel = !empty($block['data']['is_carousel']);
                @endphp
                <div class="{{ $containerClass }}">
                    <div class="flex justify-between items-end mb-12">
                        <div>
                            <h2 class="text-3xl font-bold mb-2">{{ $block['data']['title'] ?? 'Newsletters' }}</h2>
                            <div class="h-1 w-20 bg-brand rounded-full"></div>
                        </div>
                        <a href="{{ route('newsletters.index') }}" class="text-brand font-semibold hover:underline flex items-center space-x-2">
                            <span>View all newsletters</span>
                            <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="M9 5l7 7-7 7"></path></svg>
                        </a>
                    </div>
                    @if(!empty($block['data']['description']))
                        <p class="text-slate-600 mb-8 max-w-2xl -mt-6">{{ $block['data']['description'] }}</p>
                    @endif

                    @if($displayNewsletters->isEmpty())
                        <div class="bg-white rounded-3xl p-12 text-center border border-slate-100 shadow-sm">
                            <p class="text-slate-500 italic">No newsletters available at the moment.</p>
                        </div>
                    @else
                        @if($isCarousel)
                            <div class="relative group">
                                <div class="swiper newsletters-swiper pb-16">
                                    <div class="swiper-wrapper">
                                        @foreach($displayNewsletters as $newsletter)
                                            @php
                                                $firstTextBlock = collect($newsletter->content)->firstWhere('type', 'text');
                                                $summary = $firstTextBlock ? Str::limit(strip_tags($firstTextBlock['data']['content']), 150) : 'Explore the details of this newsletter issue...';
                                            @endphp
                                            <div class="swiper-slide h-auto flex">
                                                <div class="story-card group bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm hover:shadow-2xl hover:-translate-y-1 transition-all duration-500 flex flex-col w-full h-full">
                                                    <div class="relative aspect-[16/10] overflow-hidden">
                                                        @if($newsletter->cover_image)
                                                            <img src="{{ Storage::url($newsletter->cover_image) }}" alt="{{ $newsletter->cover_image_alt ?: $newsletter->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                                                        @else
                                                            <div class="w-full h-full bg-slate-50 flex items-center justify-center text-slate-300">
                                                                <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                                                            </div>
                                                        @endif
                                                        @if($newsletter->category)
                                                            <div class="absolute top-4 left-4">
                                                                <span class="px-3 py-1 bg-white/90 backdrop-blur-sm text-brand text-xs font-bold rounded-full uppercase tracking-wider">
                                                                    {{ $newsletter->category->name }}
                                                                </span>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <div class="p-8 flex-1 flex flex-col">
                                                        <div class="flex items-center space-x-2 text-slate-600 text-xs mb-3 font-bold uppercase tracking-widest">
                                                            <span>Published {{ $newsletter->published_date ? $newsletter->published_date->format('M d, Y') : $newsletter->created_at->format('M d, Y') }}</span>
                                                        </div>
                                                        <h3 class="text-xl font-bold mb-4 line-clamp-2 group-hover:text-brand transition-colors">{{ $newsletter->title }}</h3>
                                                        <p class="text-slate-700 line-clamp-3 mb-6 text-sm">
                                                            {{ $summary }}
                                                        </p>
                                                        <div class="mt-auto pt-4 border-t border-slate-50 flex items-center justify-between">
                                                            <a href="{{ route('newsletters.show', $newsletter->slug) }}" class="inline-flex items-center space-x-2 text-blue-800 hover:text-blue-950 font-bold group/btn" aria-label="View Details: {{ $newsletter->title }}">
                                                                <span>View Details</span>
                                                                <svg class="w-4 h-4 transform group-hover/btn:translate-x-1 transition-transform" 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>
                                                            @if($newsletter->file_path || $newsletter->external_link)
                                                                <a href="{{ $newsletter->file_path ? Storage::url($newsletter->file_path) : $newsletter->external_link }}" 
                                                                   target="_blank"
                                                                   class="inline-flex items-center space-x-1 text-slate-700 hover:text-brand transition-colors text-xs font-semibold"
                                                                   title="Download Newsletter"
                                                                   aria-label="Download Newsletter: {{ $newsletter->title }}">
                                                                    <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                                                                    <span>Download</span>
                                                                </a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="swiper-pagination !bottom-2"></div>
                                </div>
                                <!-- Navigation buttons -->
                                <div class="swiper-button-prev newsletters-prev !text-brand hover:scale-110 transition-all opacity-0 group-hover:opacity-100 hidden md:flex !left-0 after:!text-xl bg-white/95 backdrop-blur-sm w-12 h-12 rounded-full shadow-lg border border-slate-100/50 absolute top-[40%] -translate-y-1/2 z-10 cursor-pointer items-center justify-center"></div>
                                <div class="swiper-button-next newsletters-next !text-brand hover:scale-110 transition-all opacity-0 group-hover:opacity-100 hidden md:flex !right-0 after:!text-xl bg-white/95 backdrop-blur-sm w-12 h-12 rounded-full shadow-lg border border-slate-100/50 absolute top-[40%] -translate-y-1/2 z-10 cursor-pointer items-center justify-center"></div>
                            </div>
                        @else
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                                @foreach($displayNewsletters as $newsletter)
                                    @php
                                        $firstTextBlock = collect($newsletter->content)->firstWhere('type', 'text');
                                        $summary = $firstTextBlock ? Str::limit(strip_tags($firstTextBlock['data']['content']), 150) : 'Explore the details of this newsletter issue...';
                                    @endphp
                                    <div class="story-card group bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm hover:shadow-2xl hover:-translate-y-1 transition-all duration-500 flex flex-col">
                                        <div class="relative aspect-[16/10] overflow-hidden">
                                            @if($newsletter->cover_image)
                                                <img src="{{ Storage::url($newsletter->cover_image) }}" alt="{{ $newsletter->cover_image_alt ?: $newsletter->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                                            @else
                                                <div class="w-full h-full bg-slate-50 flex items-center justify-center text-slate-300">
                                                    <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                                                </div>
                                            @endif
                                            @if($newsletter->category)
                                                <div class="absolute top-4 left-4">
                                                    <span class="px-3 py-1 bg-white/90 backdrop-blur-sm text-brand text-xs font-bold rounded-full uppercase tracking-wider">
                                                        {{ $newsletter->category->name }}
                                                    </span>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="p-8 flex-1 flex flex-col">
                                            <div class="flex items-center space-x-2 text-slate-600 text-xs mb-3 font-bold uppercase tracking-widest">
                                                <span>Published {{ $newsletter->published_date ? $newsletter->published_date->format('M d, Y') : $newsletter->created_at->format('M d, Y') }}</span>
                                            </div>
                                            <h3 class="text-xl font-bold mb-4 line-clamp-2 group-hover:text-brand transition-colors">{{ $newsletter->title }}</h3>
                                            <p class="text-slate-700 line-clamp-3 mb-6 text-sm">
                                                {{ $summary }}
                                            </p>
                                            <div class="mt-auto pt-4 border-t border-slate-50 flex items-center justify-between">
                                                <a href="{{ route('newsletters.show', $newsletter->slug) }}" class="inline-flex items-center space-x-2 text-blue-800 hover:text-blue-950 font-bold group/btn" aria-label="View Details: {{ $newsletter->title }}">
                                                    <span>View Details</span>
                                                    <svg class="w-4 h-4 transform group-hover/btn:translate-x-1 transition-transform" 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>
                                                @if($newsletter->file_path || $newsletter->external_link)
                                                    <a href="{{ $newsletter->file_path ? Storage::url($newsletter->file_path) : $newsletter->external_link }}" 
                                                       target="_blank"
                                                       class="inline-flex items-center space-x-2 text-slate-700 hover:text-blue-600 transition-colors text-sm font-semibold"
                                                       title="Download Newsletter"
                                                       aria-label="Download Newsletter: {{ $newsletter->title }}">
                                                        <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                                                        <span>Download</span>
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    @endif
                </div>
                @break

            @case('parallax')
                @php
                    $isParallaxFullWidth = filter_var($block['data']['is_full_width'] ?? true, FILTER_VALIDATE_BOOLEAN);
                    $titleColor = $block['data']['title_color'] ?? '#ffffff';
                    $subtitleColor = $block['data']['subtitle_color'] ?? '#ffffff';
                    $height = $block['data']['height'] ?? 'medium';
                    $heightStyle = $height == 'small' ? '300px' : ($height == 'large' ? '700px' : '500px');
                @endphp
                <div class="my-12 relative overflow-hidden bg-fixed bg-center bg-cover flex items-center justify-center {{ $isParallaxFullWidth ? 'w-full' : 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 rounded-3xl' }}" 
                     style="background-image: url('{{ Storage::url($block['data']['image']) }}'); height: {{ $heightStyle }};"
                     role="img" aria-label="{{ !empty($block['data']['image_alt']) ? $block['data']['image_alt'] : ($block['data']['title'] ?? '') }}">
                    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-[1px]"></div>
                    <div class="relative z-10 text-center px-6">
                        @if(!empty($block['data']['title']))
                            <h3 class="text-3xl md:text-5xl font-black mb-2" style="color: {{ $titleColor }};">{{ $block['data']['title'] }}</h3>
                        @endif
                        @if(!empty($block['data']['subtitle']))
                            <p class="text-lg md:text-xl font-medium" style="color: {{ $subtitleColor }}; opacity: 0.9;">{{ $block['data']['subtitle'] }}</p>
                        @endif
                    </div>
                </div>
                @break

            @case('custom_html')
                <div class="{{ $containerClass }}">
                    @if(!empty($block['data']['title']))
                        <div class="mb-12">
                            <h2 class="text-3xl font-bold mb-2">{{ $block['data']['title'] }}</h2>
                            <div class="h-1 w-20 bg-brand rounded-full"></div>
                        </div>
                    @endif
                    <div class="prose max-w-none">
                        {!! $block['data']['content'] !!}
                    </div>
                </div>
                @break
        @endswitch
    @endforeach
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (typeof Swiper !== 'undefined') {
            new Swiper('.featured-stories-swiper', {
                slidesPerView: 1,
                spaceBetween: 30,
                autoplay: {
                    delay: 2000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.featured-stories-next',
                    prevEl: '.featured-stories-prev',
                },
                breakpoints: {
                    640: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 3,
                    },
                },
            });

            new Swiper('.projects-swiper', {
                slidesPerView: 1,
                spaceBetween: 24,
                autoplay: {
                    delay: 2000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.projects-next',
                    prevEl: '.projects-prev',
                },
                breakpoints: {
                    640: {
                        slidesPerView: 2,
                    },
                    768: {
                        slidesPerView: 3,
                    },
                    1024: {
                        slidesPerView: 4,
                    },
                },
            });

            new Swiper('.newsletters-swiper', {
                slidesPerView: 1,
                spaceBetween: 30,
                autoplay: {
                    delay: 2000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.newsletters-next',
                    prevEl: '.newsletters-prev',
                },
                breakpoints: {
                    640: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 3,
                    },
                },
            });
        }
    });
</script>
@endsection