

<?php $__env->startSection('content'); ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<?php if($sliders->isEmpty()): ?>
    <section class="hero">
        <div class="container hero-container">
            <div class="hero-text">
                <span class="tagline">Empowering Communities</span>
                <h1>Where Kindness Meets Action</h1>
                <p>Join us in transforming lives through education, events, and volunteer action.</p>
                <div class="hero-buttons">
                    <a href="<?php echo e(route('join')); ?>" class="button button-primary">Donate Now</a>
                    <a href="<?php echo e(route('about')); ?>" class="button button-secondary">Get Involved</a>
                </div>
            </div>
            <?php if(auth()->guard()->check()): ?>
                <div style="position: absolute; bottom: 40px; right: 40px; z-index: 10;">
                    <a href="<?php echo e(route('slider.index')); ?>" class="button button-secondary" style="background: rgba(0,0,0,0.5); border: none; color: #fff;">✏️ Setup Slider</a>
                </div>
            <?php endif; ?>
        </div>
    </section>
<?php else: ?>
    <section class="hero-slider">
        <div class="swiper">
            <div class="swiper-wrapper">
                <?php $__currentLoopData = $sliders; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $slider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="swiper-slide" style="background-image: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%), url('<?php echo e(asset('storage/' . $slider->image_path)); ?>'); background-size: cover; background-position: center;">
                        <div class="container hero-container">
                            <div class="hero-text">
                                <?php if($slider->subtitle): ?>
                                    <span class="tagline"><?php echo e($slider->subtitle); ?></span>
                                <?php endif; ?>
                                <h1><?php echo e($slider->title); ?></h1>
                                <?php if($slider->description): ?>
                                    <p><?php echo e($slider->description); ?></p>
                                <?php endif; ?>
                                <div class="hero-buttons">
                                    <?php if($slider->button_text): ?>
                                        <a href="<?php echo e($slider->button_link ?? '#'); ?>" class="button button-primary"><?php echo e($slider->button_text); ?></a>
                                    <?php endif; ?>
                                    <a href="<?php echo e(route('about')); ?>" class="button button-secondary">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <?php if(auth()->guard()->check()): ?>
            <div style="position: absolute; bottom: 40px; right: 40px; z-index: 100;">
                <a href="<?php echo e(route('slider.index')); ?>" class="button button-secondary" style="background: rgba(0,0,0,0.5); border: none; color: #fff; font-size: 0.85rem;">✏️ Manage Slider</a>
            </div>
        <?php endif; ?>
    </section>
<?php endif; ?>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    const swiper = new Swiper('.swiper', {
        loop: true,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },
    });
</script>

<section class="section">
    <div class="container">
        <div style="text-align: center; margin-bottom: 60px;">
            <h1 style="font-size: 3rem;">What We Do</h1>
            <p>Making a real difference in the lives of people and communities</p>
        </div>
        
        <div class="page-grid">
            <div class="card">
                <div style="font-size: 3rem; margin-bottom: 15px;">📚</div>
                <h2>Education</h2>
                <p>Quality education and skill development programs for underprivileged communities</p>
                <a href="<?php echo e(route('blog')); ?>">Learn More →</a>
            </div>
            <div class="card">
                <div style="font-size: 3rem; margin-bottom: 15px;">🎯</div>
                <h2>Events</h2>
                <p>Community events and workshops that bring people together for positive change</p>
                <a href="<?php echo e(route('events')); ?>">View Events →</a>
            </div>
            <div class="card">
                <div style="font-size: 3rem; margin-bottom: 15px;">🤝</div>
                <h2>Volunteering</h2>
                <p>Join our volunteer network and make a direct impact in your community</p>
                <a href="<?php echo e(route('join')); ?>">Get Involved →</a>
            </div>
        </div>
    </div>
</section>

<section class="section light">
    <div class="container">
        <div style="text-align: center; margin-bottom: 60px;">
            <h1 style="font-size: 3rem;">Our Impact</h1>
            <p>See the difference we're making in communities</p>
            <?php if(auth()->guard()->check()): ?>
                <div style="margin-top: 20px;">
                    <a href="<?php echo e(route('impact.edit')); ?>" class="button button-secondary" style="font-size: 0.85rem; padding: 8px 20px;">✏️ Edit Stats</a>
                </div>
            <?php endif; ?>
        </div>
        
        <div class="stats-grid">
            <?php $__currentLoopData = $impacts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $impact): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="stat-card">
                    <h3><?php echo e($impact->value); ?></h3>
                    <p><?php echo e($impact->label); ?></p>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div style="text-align: center; margin-bottom: 60px;">
            <h1 style="font-size: 3rem;">Latest Updates</h1>
            <p>Stories and news from our community</p>
        </div>
        
        <div class="horizontal-scroll-container">
            <div class="blog-grid scroll-grid">
                <?php $__empty_1 = true; $__currentLoopData = $latestPosts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $post): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <article class="post-card scroll-card">
                        <?php if($post->image_path): ?>
                            <div class="post-card-image">
                                <a href="<?php echo e(route('blog.show', $post)); ?>">
                                    <img src="<?php echo e(asset('storage/' . $post->image_path)); ?>" alt="<?php echo e($post->title); ?>">
                                </a>
                            </div>
                        <?php endif; ?>
                        <div class="post-card-content">
                            <h2><a href="<?php echo e(route('blog.show', $post)); ?>"><?php echo e($post->title); ?></a></h2>
                            <p><?php echo e(Str::limit(strip_tags($post->content), 100)); ?></p>
                            <div class="post-meta">
                                <span style="font-size: 0.85rem; color: #999;"><?php echo e($post->created_at->format('M d, Y')); ?></span>
                                <a href="<?php echo e(route('blog.show', $post)); ?>" class="read-more">Read More →</a>
                            </div>
                        </div>
                    </article>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <article class="card">
                        <div style="font-size: 3rem; margin-bottom: 15px;">✍️</div>
                        <h2>Our Stories</h2>
                        <p>Read about our impact, volunteer experiences, and latest community updates.</p>
                        <a href="<?php echo e(route('blog')); ?>">View Blog →</a>
                    </article>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<section class="section light">
    <div class="container">
        <div style="text-align: center; margin-bottom: 60px;">
            <h1 style="font-size: 3rem;">Upcoming Events</h1>
            <p>Join us and be part of the change</p>
        </div>
        
        <div class="horizontal-scroll-container">
            <div class="blog-grid scroll-grid">
                <?php $__empty_1 = true; $__currentLoopData = $upcomingEvents; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $event): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <article class="post-card scroll-card">
                        <?php if($event->image_path): ?>
                            <div class="post-card-image">
                                <img src="<?php echo e(asset('storage/' . $event->image_path)); ?>" alt="<?php echo e($event->title); ?>">
                            </div>
                        <?php endif; ?>
                        <div class="post-card-content">
                            <div style="font-size: 0.85rem; color: #00bcd4; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">
                                <?php echo e($event->event_date->format('M d, Y')); ?>

                            </div>
                            <h2><?php echo e($event->title); ?></h2>
                            <p><?php echo e(Str::limit($event->description, 100)); ?></p>
                            <a href="<?php echo e(route('events')); ?>" class="read-more">Event Details →</a>
                        </div>
                    </article>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <article class="card">
                        <div style="font-size: 3rem; margin-bottom: 15px;">📅</div>
                        <h2>Event Calendar</h2>
                        <p>Check our calendar for workshops, fundraisers, and community meetups. Register now!</p>
                        <a href="<?php echo e(route('events')); ?>">See Calendar →</a>
                    </article>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\wamp64\www\Touchfoundation\resources\views/pages/home.blade.php ENDPATH**/ ?>