@extends('layouts.frontend')

@section('title', 'Blog - Tirumalarao Naidu')

@section('content')
<!-- Hero Section -->
<section class="pt-32 pb-16 bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <p class="text-primary-500 font-medium mb-4">BLOG</p>
            <h1 class="font-display text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
                Insights & Articles
            </h1>
            <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                Thoughts on data engineering, cloud architecture, transit technology, and technical leadership
            </p>
        </div>
        
        <!-- Search -->
        <form action="{{ route('blog.search') }}" method="GET" class="max-w-xl mx-auto mt-8">
            <div class="relative">
                <input type="text" name="q" placeholder="Search articles..." value="{{ request('q') }}" class="w-full px-5 py-3 pl-12 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-full text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                <i class="fas fa-search absolute left-5 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>
        </form>
    </div>
</section>

<!-- Blog Grid -->
<section class="py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- Main Content -->
            <div class="lg:col-span-3">
                @if($posts->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    @foreach($posts as $post)
                    <article class="card-hover bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-sm">
                        @if($post->featured_image)
                        <img src="{{ asset('storage/' . $post->featured_image) }}" alt="{{ $post->title }}" class="w-full h-48 object-cover">
                        @else
                        <div class="w-full h-48 bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center">
                            <i class="fas fa-newspaper text-white text-4xl opacity-50"></i>
                        </div>
                        @endif
                        
                        <div class="p-6">
                            @if($post->category)
                            <a href="{{ route('blog.category', $post->category->slug) }}" class="inline-block px-3 py-1 bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium rounded-full mb-3 hover:bg-primary-200 dark:hover:bg-primary-800/40 transition-colors">
                                {{ $post->category->name }}
                            </a>
                            @endif
                            
                            <h2 class="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
                                <a href="{{ route('blog.show', $post->slug) }}" class="hover:text-primary-500 transition-colors">
                                    {{ $post->title }}
                                </a>
                            </h2>
                            
                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">
                                {{ $post->excerpt ?? Str::limit(strip_tags($post->content), 120) }}
                            </p>
                            
                            <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
                                <span>{{ $post->published_at->format('M d, Y') }}</span>
                                <span>{{ $post->reading_time }}</span>
                            </div>
                        </div>
                    </article>
                    @endforeach
                </div>
                
                <!-- Pagination -->
                <div class="mt-12">
                    {{ $posts->links() }}
                </div>
                @else
                <div class="text-center py-16">
                    <i class="fas fa-newspaper text-6xl text-gray-300 dark:text-gray-700 mb-4"></i>
                    <p class="text-gray-500 dark:text-gray-400">No posts found.</p>
                </div>
                @endif
            </div>
            
            <!-- Sidebar -->
            <div class="lg:col-span-1">
                <!-- Categories -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6 mb-6">
                    <h3 class="font-semibold text-gray-900 dark:text-white mb-4">Categories</h3>
                    <ul class="space-y-2">
                        @foreach($categories as $category)
                        <li>
                            <a href="{{ route('blog.category', $category->slug) }}" class="flex items-center justify-between text-gray-600 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
                                <span>{{ $category->name }}</span>
                                <span class="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-full">{{ $category->posts_count }}</span>
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
                
                <!-- Tags -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6 mb-6">
                    <h3 class="font-semibold text-gray-900 dark:text-white mb-4">Tags</h3>
                    <div class="flex flex-wrap gap-2">
                        @foreach($tags as $tag)
                        <a href="{{ route('blog.tag', $tag->slug) }}" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded-full hover:bg-primary-100 hover:text-primary-600 dark:hover:bg-primary-900/30 dark:hover:text-primary-400 transition-colors">
                            {{ $tag->name }}
                        </a>
                        @endforeach
                    </div>
                </div>
                
                <!-- Newsletter -->
                <div class="bg-primary-500 rounded-2xl p-6 text-white">
                    <h3 class="font-semibold mb-2">Subscribe</h3>
                    <p class="text-primary-100 text-sm mb-4">Get notified when I publish new articles.</p>
                    <form action="{{ route('subscriber.store') }}" method="POST">
                        @csrf
                        <input type="email" name="email" placeholder="Your email" required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/60 focus:outline-none focus:border-white mb-2">
                        <button type="submit" class="w-full px-4 py-2 bg-white text-primary-600 font-medium rounded-lg hover:bg-primary-50 transition-colors">
                            Subscribe
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection