@extends('layouts.marketing')

@section('title', 'Fotospiel - Blog')

@section('content')
    <!-- Hero for Blog -->
    <section class="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] text-white py-20 px-4">
        <div class="container mx-auto text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-4">Fotospiel Blog</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Tipps, News und Anleitungen zu perfekten Event-Fotos mit QR-Codes, PWA und mehr. Bleib informiert!</p>
            <a href="/marketing#how-it-works" class="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition">Mehr über Fotospiel</a>
        </div>
    </section>

    <!-- Blog Posts Section -->
    <section class="py-20 px-4 bg-white">
        <div class="container mx-auto max-w-4xl">
            <h2 class="text-3xl font-bold text-center mb-12">Aktuelle Blog-Posts</h2>
            @if ($posts->count() > 0)
                <div class="grid md:grid-cols-2 gap-8">
                    @foreach ($posts as $post)
                    <div class="bg-gray-50 p-6 rounded-lg">
                        @if ($post->featured_image)
                        <img src="{{ $post->featured_image }}" alt="{{ $post->title }}" class="w-full h-48 object-cover rounded mb-4">
                        @endif
                        <h3 class="text-xl font-semibold mb-2"><a href="{{ route('blog.show', $post->slug) }}" class="hover:text-[#FFB6C1]">{{ $post->title }}</a></h3>
                        <p class="mb-4">{{ Str::limit($post->excerpt, 150) }}</p>
                        <p class="text-sm text-gray-500 mb-4">Veröffentlicht am {{ $post->published_at->format('d.m.Y') }}</p>
                        <a href="{{ route('blog.show', $post->slug) }}" class="text-[#FFB6C1] font-semibold">Lesen</a>
                    </div>
                    @endforeach
                </div>
                @if ($posts->hasPages())
                <div class="mt-12 text-center">
                    {{ $posts->links() }}
                </div>
                @endif
            @else
                <p class="text-center text-gray-600">Noch keine Posts verfügbar. Bleib dran!</p>
            @endif
        </div>
    </section>
@endsection