@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

@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="{{ route('join') }}" class="button button-primary">Donate Now</a>
                    <a href="{{ route('about') }}" class="button button-secondary">Get Involved</a>
                </div>
            </div>
            @auth
                <div style="position: absolute; bottom: 40px; right: 40px; z-index: 10;">
                    <a href="{{ route('slider.index') }}" class="button button-secondary" style="background: rgba(0,0,0,0.5); border: none; color: #fff;">✏️ Setup Slider</a>
                </div>
            @endauth
        </div>
    </section>
@else
    <section class="hero-slider">
        <div class="swiper">
            <div class="swiper-wrapper">
                @foreach($sliders as $slider)
                    <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('{{ asset('storage/' . $slider->image_path) }}'); background-size: cover; background-position: center;">
                        <div class="container hero-container">
                            <div class="hero-text">
                                @if($slider->subtitle)
                                    <span class="tagline">{{ $slider->subtitle }}</span>
                                @endif
                                <h1>{{ $slider->title }}</h1>
                                @if($slider->description)
                                    <p>{{ $slider->description }}</p>
                                @endif
                                <div class="hero-buttons">
                                    @if($slider->button_text)
                                        <a href="{{ $slider->button_link ?? '#' }}" class="button button-primary">{{ $slider->button_text }}</a>
                                    @endif
                                    <a href="{{ route('about') }}" class="button button-secondary">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        @auth
            <div style="position: absolute; bottom: 40px; right: 40px; z-index: 100;">
                <a href="{{ 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>
        @endauth
    </section>
@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="{{ 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="{{ 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="{{ 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>
            @auth
                <div style="margin-top: 20px;">
                    <a href="{{ route('impact.edit') }}" class="button button-secondary" style="font-size: 0.85rem; padding: 8px 20px;">✏️ Edit Stats</a>
                </div>
            @endauth
        </div>
        
        <div class="stats-grid">
            @foreach($impacts as $impact)
                <div class="stat-card">
                    <h3>{{ $impact->value }}</h3>
                    <p>{{ $impact->label }}</p>
                </div>
            @endforeach
        </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">
                @forelse($latestPosts as $post)
                    <article class="post-card scroll-card">
                        @if($post->image_path)
                            <div class="post-card-image">
                                <a href="{{ route('blog.show', $post) }}">
                                    <img src="{{ asset('storage/' . $post->image_path) }}" alt="{{ $post->title }}">
                                </a>
                            </div>
                        @endif
                        <div class="post-card-content">
                            <h2><a href="{{ route('blog.show', $post) }}">{{ $post->title }}</a></h2>
                            <p>{{ Str::limit(strip_tags($post->content), 100) }}</p>
                            <div class="post-meta">
                                <span style="font-size: 0.85rem; color: #999;">{{ $post->created_at->format('M d, Y') }}</span>
                                <a href="{{ route('blog.show', $post) }}" class="read-more">Read More →</a>
                            </div>
                        </div>
                    </article>
                @empty
                    <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="{{ route('blog') }}">View Blog →</a>
                    </article>
                @endforelse
            </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">
                @forelse($upcomingEvents as $event)
                    <article class="post-card scroll-card">
                        @if($event->image_path)
                            <div class="post-card-image">
                                <img src="{{ asset('storage/' . $event->image_path) }}" alt="{{ $event->title }}">
                            </div>
                        @endif
                        <div class="post-card-content">
                            <div style="font-size: 0.85rem; color: #00bcd4; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">
                                {{ $event->event_date->format('M d, Y') }}
                            </div>
                            <h2>{{ $event->title }}</h2>
                            <p>{{ Str::limit($event->description, 100) }}</p>
                            <a href="{{ route('events') }}" class="read-more">Event Details →</a>
                        </div>
                    </article>
                @empty
                    <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="{{ route('events') }}">See Calendar →</a>
                    </article>
                @endforelse
            </div>
        </div>
    </div>
</section>
@endsection