<?php $__env->startSection('title', 'Health Advocacy - Community Engagement & Impact'); ?>
<?php $__env->startSection('meta-description', 'Join our health advocacy initiatives. Explore campaigns, share your success stories, and participate in community polls to make a difference.'); ?>

<?php $__env->startSection('content'); ?>
<!-- Hero Section with Featured Campaign -->
<?php if($featuredCampaign): ?>
    <div class="relative bg-gradient-to-r from-teal-600 to-emerald-700 shadow-xl">
        <?php if($featuredCampaign->banner_image): ?>
            <div class="absolute inset-0">
                <img src="<?php echo e(asset('storage/' . $featuredCampaign->banner_image)); ?>" 
                     alt="<?php echo e($featuredCampaign->title); ?>"
                     class="w-full h-full object-cover opacity-30">
            </div>
        <?php endif; ?>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="text-center">
                <span class="inline-block px-4 py-1 bg-white/20 text-white rounded-full text-sm font-semibold mb-4">
                    <i class="fas fa-star mr-2"></i>Featured Campaign
                </span>
                <h1 class="text-4xl md:text-5xl font-serif font-bold text-white mb-4">
                    <?php echo e($featuredCampaign->title); ?>

                </h1>
                <p class="text-xl text-teal-100 max-w-3xl mx-auto mb-8">
                    <?php echo e(Str::limit($featuredCampaign->description, 200)); ?>

                </p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="<?php echo e(route('advocacy.public.campaigns.show', $featuredCampaign)); ?>" 
                       class="px-8 py-3 bg-white text-teal-700 rounded-lg font-semibold hover:bg-teal-50 transition shadow-lg">
                        <i class="fas fa-bullhorn mr-2"></i>
                        Join Campaign
                    </a>
                    <a href="#campaigns" 
                       class="px-8 py-3 bg-teal-500 text-white rounded-lg font-semibold hover:bg-teal-400 transition">
                        <i class="fas fa-th-large mr-2"></i>
                        View All Campaigns
                    </a>
                </div>
            </div>
        </div>
    </div>
<?php else: ?>
    <div class="bg-gradient-to-r from-teal-600 to-emerald-700 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-heartbeat mr-3"></i>
                Health Advocacy
            </h1>
            <p class="text-xl text-teal-100 max-w-3xl mx-auto mb-8">
                Empowering communities through health awareness, impactful stories, and collective action.
            </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-teal-700 rounded-lg font-semibold hover:bg-teal-50 transition shadow-lg">
                    <i class="fas fa-share-alt mr-2"></i>
                    Share Your Story
                </a>
                <a href="#campaigns" 
                   class="px-8 py-3 bg-teal-500 text-white rounded-lg font-semibold hover:bg-teal-400 transition">
                    <i class="fas fa-bullhorn mr-2"></i>
                    Explore Campaigns
                </a>
            </div>
        </div>
    </div>
<?php endif; ?>

<!-- Breadcrumb -->
<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-teal-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>
            <span class="text-gray-900 font-medium">Health Advocacy</span>
        </nav>
    </div>
</div>

<!-- Main Content -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Main Column -->
        <div class="lg:col-span-2 space-y-12">
            <!-- Active Campaigns -->
            <section id="campaigns">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-serif font-bold text-gray-900">
                        <i class="fas fa-bullhorn text-teal-600 mr-2"></i>
                        Active Campaigns
                    </h2>
                    <a href="#campaigns" class="text-teal-600 hover:text-teal-800 font-medium">
                        View All <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>

                <?php if($campaigns->count() > 0): ?>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <?php $__currentLoopData = $campaigns; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $campaign): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition group">
                                <?php if($campaign->thumbnail): ?>
                                    <div class="h-40 overflow-hidden">
                                        <img src="<?php echo e(asset('storage/' . $campaign->thumbnail)); ?>" 
                                             alt="<?php echo e($campaign->title); ?>"
                                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                                    </div>
                                <?php else: ?>
                                    <div class="h-40 bg-gradient-to-br from-teal-400 to-emerald-500 flex items-center justify-center">
                                        <i class="fas fa-bullhorn text-white text-4xl"></i>
                                    </div>
                                <?php endif; ?>
                                <div class="p-5">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="px-2 py-1 text-xs font-semibold rounded-full 
                                            <?php echo e($campaign->status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'); ?>">
                                            <?php echo e(ucfirst($campaign->status)); ?>

                                        </span>
                                        <?php if($campaign->is_featured): ?>
                                            <span class="text-yellow-500"><i class="fas fa-star"></i></span>
                                        <?php endif; ?>
                                    </div>
                                    <h3 class="font-serif font-bold text-lg text-gray-900 mb-2 line-clamp-1">
                                        <?php echo e($campaign->title); ?>

                                    </h3>
                                    <p class="text-gray-600 text-sm line-clamp-2 mb-4">
                                        <?php echo e(Str::limit($campaign->description, 100)); ?>

                                    </p>
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-gray-500">
                                            <i class="fas fa-book-open mr-1"></i>
                                            <?php echo e($campaign->stories->count()); ?> stories
                                        </span>
                                        <a href="<?php echo e(route('advocacy.public.campaigns.show', $campaign)); ?>" 
                                           class="text-teal-600 hover:text-teal-800 font-medium text-sm">
                                            Learn More <i class="fas fa-arrow-right ml-1"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>

                    <!-- Pagination -->
                    <?php if($campaigns->hasPages()): ?>
                        <div class="mt-8">
                            <?php echo e($campaigns->withQueryString()->links()); ?>

                        </div>
                    <?php endif; ?>
                <?php else: ?>
                    <div class="bg-gray-50 rounded-xl p-8 text-center">
                        <i class="fas fa-bullhorn text-4xl text-gray-300 mb-4"></i>
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">No Active Campaigns</h3>
                        <p class="text-gray-500">Check back soon for new health advocacy campaigns!</p>
                    </div>
                <?php endif; ?>
            </section>

            <!-- Success Stories Masonry -->
            <section id="stories">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-serif font-bold text-gray-900">
                        <i class="fas fa-heart text-rose-500 mr-2"></i>
                        Impact Stories
                    </h2>
                    <a href="<?php echo e(route('advocacy.public.stories.index')); ?>" 
                       class="text-teal-600 hover:text-teal-800 font-medium">
                        View All <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>

                <?php if($stories->count() > 0): ?>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <?php $__currentLoopData = $stories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $story): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div 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 endif; ?>
                                <div class="p-5">
                                    <div class="flex items-center gap-2 mb-3">
                                        <?php if($story->campaign): ?>
                                            <span class="px-2 py-1 bg-teal-100 text-teal-700 text-xs rounded-full">
                                                <?php echo e($story->campaign->title); ?>

                                            </span>
                                        <?php endif; ?>
                                        <?php if($story->is_featured): ?>
                                            <span class="text-yellow-500"><i class="fas fa-star"></i></span>
                                        <?php endif; ?>
                                    </div>
                                    <h3 class="font-serif font-bold text-lg text-gray-900 mb-2 line-clamp-2">
                                        <?php echo e($story->title); ?>

                                    </h3>
                                    <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">
                                        <div class="flex items-center gap-2">
                                            <div class="w-8 h-8 bg-teal-100 rounded-full flex items-center justify-center">
                                                <span class="text-teal-600 font-semibold text-xs">
                                                    <?php echo e(Str::substr($story->author_name, 0, 1)); ?>

                                                </span>
                                            </div>
                                            <span class="text-gray-700"><?php echo e($story->author_name); ?></span>
                                        </div>
                                        <div class="flex items-center gap-3 text-gray-500">
                                            <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>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                <?php else: ?>
                    <div class="bg-gray-50 rounded-xl p-8 text-center">
                        <i class="fas fa-heart text-4xl text-gray-300 mb-4"></i>
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">No Stories Yet</h3>
                        <p class="text-gray-500 mb-4">Be the first to share your health journey!</p>
                        <a href="<?php echo e(route('advocacy.public.stories.create')); ?>" 
                           class="inline-flex items-center px-6 py-3 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition">
                            <i class="fas fa-pen mr-2"></i>
                            Share Your Story
                        </a>
                    </div>
                <?php endif; ?>
            </section>
        </div>

        <!-- Sidebar -->
        <div class="space-y-8">
            <!-- Submit Story CTA -->
            <div class="bg-gradient-to-br from-rose-500 to-pink-600 rounded-xl shadow-lg p-6 text-white">
                <h3 class="font-serif font-bold text-xl mb-3">
                    <i class="fas fa-pen-alt mr-2"></i>
                    Share Your Story
                </h3>
                <p class="text-rose-100 mb-4">
                    Your health journey can inspire others. Share your success story with our community.
                </p>
                <a href="<?php echo e(route('advocacy.public.stories.create')); ?>" 
                   class="block w-full px-6 py-3 bg-white text-rose-600 rounded-lg font-semibold text-center hover:bg-rose-50 transition">
                    Submit Your Story
                </a>
            </div>

            <!-- Active Polls -->
            <?php if($activePolls->count() > 0): ?>
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h3 class="font-serif font-bold text-lg text-gray-900 mb-4">
                        <i class="fas fa-poll text-purple-600 mr-2"></i>
                        Community Poll
                    </h3>
                    
                    <?php $__currentLoopData = $activePolls->take(1); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $poll): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div x-data="pollComponent(<?php echo e($poll->id); ?>)" class="space-y-4">
                            <p class="font-medium text-gray-800"><?php echo e($poll->question); ?></p>
                            
                            <!-- Options -->
                            <div class="space-y-2">
                                <?php $__currentLoopData = $poll->options; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $option): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <button @click="vote(<?php echo e($option->id); ?>)"
                                            :disabled="hasVoted"
                                            :class="hasVoted ? 'cursor-default' : 'hover:border-purple-500 hover:bg-purple-50'"
                                            class="w-full flex items-center justify-between px-4 py-3 border rounded-lg transition text-left">
                                        <span class="text-gray-700"><?php echo e($option->option_text); ?></span>
                                        <template x-if="hasVoted">
                                            <span class="text-sm font-medium text-purple-600" x-text="results[<?php echo e($option->id); ?>] + '%'"></span>
                                        </template>
                                    </button>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>

                            <!-- Results Bar -->
                            <template x-if="hasVoted">
                                <div class="pt-4 border-t">
                                    <p class="text-sm text-gray-500 mb-2">Results:</p>
                                    <?php $__currentLoopData = $poll->options; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $option): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <div class="mb-2">
                                            <div class="flex justify-between text-sm mb-1">
                                                <span class="text-gray-600"><?php echo e($option->option_text); ?></span>
                                                <span class="text-gray-500" x-text="results[<?php echo e($option->id); ?>] + '%'"></span>
                                            </div>
                                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                                <div class="h-full bg-purple-500 rounded-full transition-all duration-500"
                                                     :style="'width: ' + results[<?php echo e($option->id); ?>] + '%'"></div>
                                            </div>
                                        </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    <p class="text-xs text-gray-400 mt-3">
                                        <i class="fas fa-users mr-1"></i>
                                        Total responses: <span x-text="totalVotes"></span>
                                    </p>
                                </div>
                            </template>

                            <p x-show="message" x-text="message" class="text-sm text-center py-2 rounded" 
                               :class="hasVoted ? 'text-green-600 bg-green-50' : 'text-red-600 bg-red-50'"></p>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            <?php endif; ?>

            <!-- Statistics -->
            <div class="bg-white rounded-xl shadow-md p-6">
                <h3 class="font-serif font-bold text-lg text-gray-900 mb-4">
                    <i class="fas fa-chart-line text-teal-600 mr-2"></i>
                    Our Impact
                </h3>
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-3 bg-teal-50 rounded-lg">
                        <span class="text-gray-700">Active Campaigns</span>
                        <span class="font-bold text-teal-600"><?php echo e($campaigns->total()); ?></span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-rose-50 rounded-lg">
                        <span class="text-gray-700">Impact Stories</span>
                        <span class="font-bold text-rose-600"><?php echo e($stories->count()); ?></span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
                        <span class="text-gray-700">Active Polls</span>
                        <span class="font-bold text-purple-600"><?php echo e($activePolls->count()); ?></span>
                    </div>
                </div>
            </div>

            <!-- Newsletter -->
            <div class="bg-gray-50 rounded-xl p-6 border">
                <h3 class="font-serif font-bold text-lg text-gray-900 mb-3">
                    <i class="fas fa-envelope text-gray-600 mr-2"></i>
                    Stay Updated
                </h3>
                <p class="text-gray-600 text-sm mb-4">
                    Get the latest health advocacy news and campaign updates.
                </p>
                <form class="space-y-3">
                    <input type="email" 
                           placeholder="Your email address"
                           class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent">
                    <button type="submit" 
                            class="w-full px-4 py-3 bg-teal-600 text-white rounded-lg font-semibold hover:bg-teal-700 transition">
                        Subscribe
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
function pollComponent(pollId) {
    return {
        pollId: pollId,
        hasVoted: false,
        results: {},
        totalVotes: 0,
        message: '',
        
        vote(optionId) {
            if (this.hasVoted) return;
            
            fetch(`/advocacy/polls/${this.pollId}/vote`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ option_id: optionId })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.hasVoted = true;
                    this.message = data.message;
                    
                    // Calculate results
                    const total = data.results.reduce((sum, r) => sum + r.votes, 0);
                    this.totalVotes = total;
                    data.results.forEach(r => {
                        this.results[r.id] = r.percentage;
                    });
                } else {
                    this.message = data.message;
                }
            })
            .catch(error => {
                this.message = 'An error occurred. Please try again.';
            });
        }
    }
}
</script>
<?php $__env->stopPush(); ?>
<?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/index.blade.php ENDPATH**/ ?>