

<?php $__env->startSection('title', 'Health Impact Stories'); ?>
<?php $__env->startSection('meta-description', 'Read inspiring health impact stories from our community. Real journeys, real change.'); ?>

<?php $__env->startSection('content'); ?>


<div class="bg-gradient-to-r from-rose-500 to-pink-600 shadow-xl">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
        <h1 class="text-4xl md:text-5xl font-serif font-bold text-white mb-4">
            <i class="fas fa-heart mr-3"></i>Health Impact Stories
        </h1>
        <p class="text-xl text-rose-100 max-w-3xl mx-auto mb-8">
            Real journeys, real change. Read inspiring stories from our community and share your own.
        </p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="<?php echo e(route('advocacy.public.stories.create')); ?>"
               class="px-8 py-3 bg-white text-rose-600 rounded-lg font-semibold hover:bg-rose-50 transition shadow-lg">
                <i class="fas fa-pen mr-2"></i>Share Your Story
            </a>
            <a href="<?php echo e(route('advocacy.public.index')); ?>"
               class="px-8 py-3 bg-rose-400 text-white rounded-lg font-semibold hover:bg-rose-300 transition">
                <i class="fas fa-bullhorn mr-2"></i>View Campaigns
            </a>
        </div>
    </div>
</div>


<div class="bg-gray-50 border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
            <a href="<?php echo e(url('/')); ?>" class="hover:text-rose-600 transition flex items-center">
                <i class="fas fa-home mr-1"></i>Home
            </a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="<?php echo e(route('advocacy.public.index')); ?>" class="hover:text-rose-600 transition">Advocacy</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-900 font-medium">Health Stories</span>
        </nav>
    </div>
</div>


<div class="bg-white border-b border-gray-200 shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <form method="GET" action="<?php echo e(route('advocacy.public.stories.index')); ?>"
              class="flex flex-wrap items-center gap-3">

            
            <div class="flex-1 min-w-[180px]">
                <select name="campaign"
                        onchange="this.form.submit()"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                    <option value="">All Campaigns</option>
                    <?php $__currentLoopData = $campaigns; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $campaign): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($campaign->id); ?>"
                                <?php echo e(request('campaign') == $campaign->id ? 'selected' : ''); ?>>
                            <?php echo e($campaign->title); ?>

                        </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>

            
            <div class="flex-1 min-w-[180px]">
                <input type="text"
                       name="location"
                       value="<?php echo e(request('location')); ?>"
                       placeholder="Filter by location…"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-rose-500 focus:border-transparent">
            </div>

            <button type="submit"
                    class="px-5 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium hover:bg-rose-700 transition">
                <i class="fas fa-search mr-1"></i>Filter
            </button>

            <?php if(request()->hasAny(['campaign', 'location'])): ?>
                <a href="<?php echo e(route('advocacy.public.stories.index')); ?>"
                   class="px-5 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition">
                    <i class="fas fa-times mr-1"></i>Clear
                </a>
            <?php endif; ?>
        </form>
    </div>
</div>


<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

    <?php if($stories->count() > 0): ?>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <?php $__currentLoopData = $stories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $story): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition group">

                    
                    <?php if($story->featured_image): ?>
                        <div class="h-48 overflow-hidden">
                            <img src="<?php echo e(asset('storage/' . $story->featured_image)); ?>"
                                 alt="<?php echo e($story->title); ?>"
                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                        </div>
                    <?php else: ?>
                        <div class="h-48 bg-gradient-to-br from-rose-400 to-pink-500 flex items-center justify-center">
                            <i class="fas fa-heart text-white text-5xl opacity-50"></i>
                        </div>
                    <?php endif; ?>

                    <div class="p-5">
                        
                        <div class="flex items-center gap-2 mb-3 flex-wrap">
                            <?php if($story->campaign): ?>
                                <span class="px-2 py-1 bg-teal-100 text-teal-700 text-xs rounded-full">
                                    <?php echo e(Str::limit($story->campaign->title, 30)); ?>

                                </span>
                            <?php endif; ?>
                            <?php if($story->is_featured): ?>
                                <span class="text-yellow-500 text-xs">
                                    <i class="fas fa-star"></i> Featured
                                </span>
                            <?php endif; ?>
                        </div>

                        
                        <h2 class="font-serif font-bold text-lg text-gray-900 mb-2 line-clamp-2 group-hover:text-rose-600 transition">
                            <?php echo e($story->title); ?>

                        </h2>

                        
                        <p class="text-gray-600 text-sm line-clamp-3 mb-4">
                            <?php echo e($story->excerpt ?? Str::limit(strip_tags($story->content), 150)); ?>

                        </p>

                        
                        <div class="flex items-center justify-between text-sm border-t border-gray-100 pt-4">
                            <div class="flex items-center gap-2">
                                <div class="w-8 h-8 bg-rose-100 rounded-full flex items-center justify-center flex-shrink-0">
                                    <span class="text-rose-600 font-semibold text-xs">
                                        <?php echo e(Str::substr($story->author_name, 0, 1)); ?>

                                    </span>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-800 leading-tight"><?php echo e($story->author_name); ?></p>
                                    <?php if($story->location): ?>
                                        <p class="text-xs text-gray-400">
                                            <i class="fas fa-map-marker-alt mr-1"></i><?php echo e($story->location); ?>

                                        </p>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <div class="flex items-center gap-3 text-gray-400 text-xs">
                                <span><i class="fas fa-eye mr-1"></i><?php echo e($story->views_count); ?></span>
                                <span><i class="fas fa-share-alt mr-1"></i><?php echo e($story->shares_count); ?></span>
                            </div>
                        </div>

                        
                        <a href="<?php echo e(route('advocacy.public.stories.show', $story)); ?>"
                           class="mt-4 block w-full px-4 py-2 bg-rose-600 text-white rounded-lg text-center text-sm font-medium hover:bg-rose-700 transition">
                            Read Story <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </article>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        
        <?php if($stories->hasPages()): ?>
            <div class="mt-10">
                <?php echo e($stories->withQueryString()->links()); ?>

            </div>
        <?php endif; ?>

    <?php else: ?>
        <div class="text-center py-20">
            <div class="w-20 h-20 bg-rose-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fas fa-heart text-rose-400 text-3xl"></i>
            </div>
            <h3 class="text-xl font-semibold text-gray-700 mb-2">No Stories Found</h3>
            <p class="text-gray-500 mb-6">
                <?php if(request()->hasAny(['campaign', 'location'])): ?>
                    No stories match your current filters. Try adjusting them.
                <?php else: ?>
                    No stories have been published yet. Be the first to share yours!
                <?php endif; ?>
            </p>
            <div class="flex flex-wrap justify-center gap-3">
                <?php if(request()->hasAny(['campaign', 'location'])): ?>
                    <a href="<?php echo e(route('advocacy.public.stories.index')); ?>"
                       class="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
                        <i class="fas fa-times mr-2"></i>Clear Filters
                    </a>
                <?php endif; ?>
                <a href="<?php echo e(route('advocacy.public.stories.create')); ?>"
                   class="px-6 py-3 bg-rose-600 text-white rounded-lg hover:bg-rose-700 transition">
                    <i class="fas fa-pen mr-2"></i>Share Your Story
                </a>
            </div>
        </div>
    <?php endif; ?>

</div>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.site', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/www/sshia.org/sshia/resources/views/advocacy/stories/index.blade.php ENDPATH**/ ?>