@extends('layouts.app')

@section('title', __('nav.blog'))

@section('content')
    <!-- Hero Section -->
    <section class="bg-gray-900 py-16">
        <div class="container mx-auto px-4">
            <div class="text-center max-w-3xl mx-auto">
                <h1 class="text-4xl font-bold text-white mb-6">{{ __('home.blog_title') }}</h1>
                <p class="text-xl text-gray-300">{{ __('home.blog_subtitle') }}</p>
            </div>
        </div>
    </section>

    <!-- Blog Grid -->
    <section class="bg-gray-800 py-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Blog Post 1 -->
                <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700 hover:border-blue-500 transition">
                    <img src="{{ asset('images/blog-1.jpg') }}" alt="Blog Post" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="bg-blue-600 text-xs text-white px-2 py-1 rounded-md">Web Development</span>
                            <span class="text-gray-500 text-sm ml-auto">June 15, 2025</span>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-2">5 Ways to Improve Your Website's Performance</h3>
                        <p class="text-gray-400 mb-4">Learn how to optimize your website for better speed and user experience.</p>
                        <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => 'improve-website-performance']) }}" class="text-blue-400 hover:text-blue-300 transition">{{ __('general.read_more') }}</a>
                    </div>
                </div>
                
                <!-- Blog Post 2 -->
                <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700 hover:border-blue-500 transition">
                    <img src="{{ asset('images/blog-2.jpg') }}" alt="Blog Post" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="bg-blue-600 text-xs text-white px-2 py-1 rounded-md">Digital Strategy</span>
                            <span class="text-gray-500 text-sm ml-auto">June 10, 2025</span>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-2">The Importance of Digital Sovereignty</h3>
                        <p class="text-gray-400 mb-4">Why owning your digital presence matters in today's online landscape.</p>
                        <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => 'digital-sovereignty']) }}" class="text-blue-400 hover:text-blue-300 transition">{{ __('general.read_more') }}</a>
                    </div>
                </div>
                
                <!-- Blog Post 3 -->
                <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700 hover:border-blue-500 transition">
                    <img src="{{ asset('images/blog-3.jpg') }}" alt="Blog Post" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="bg-blue-600 text-xs text-white px-2 py-1 rounded-md">Business</span>
                            <span class="text-gray-500 text-sm ml-auto">June 5, 2025</span>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-2">Building a Strong Local Business Network</h3>
                        <p class="text-gray-400 mb-4">How collaboration and cross-promotion can help local businesses thrive.</p>
                        <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => 'local-business-network']) }}" class="text-blue-400 hover:text-blue-300 transition">{{ __('general.read_more') }}</a>
                    </div>
                </div>
                
                <!-- Blog Post 4 -->
                <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700 hover:border-blue-500 transition">
                    <img src="{{ asset('images/blog-4.jpg') }}" alt="Blog Post" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="bg-blue-600 text-xs text-white px-2 py-1 rounded-md">E-Commerce</span>
                            <span class="text-gray-500 text-sm ml-auto">May 28, 2025</span>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-2">Setting Up Your First Online Store</h3>
                        <p class="text-gray-400 mb-4">A step-by-step guide to launching your e-commerce business.</p>
                        <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => 'first-online-store']) }}" class="text-blue-400 hover:text-blue-300 transition">{{ __('general.read_more') }}</a>
                    </div>
                </div>
                
                <!-- Blog Post 5 -->
                <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700 hover:border-blue-500 transition">
                    <img src="{{ asset('images/blog-5.jpg') }}" alt="Blog Post" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="bg-blue-600 text-xs text-white px-2 py-1 rounded-md">SEO</span>
                            <span class="text-gray-500 text-sm ml-auto">May 20, 2025</span>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-2">SEO Strategies for Small Businesses</h3>
                        <p class="text-gray-400 mb-4">Practical SEO tips that small businesses can implement today.</p>
                        <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => 'seo-small-business']) }}" class="text-blue-400 hover:text-blue-300 transition">{{ __('general.read_more') }}</a>
                    </div>
                </div>
                
                <!-- Blog Post 6 -->
                <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700 hover:border-blue-500 transition">
                    <img src="{{ asset('images/blog-6.jpg') }}" alt="Blog Post" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="bg-blue-600 text-xs text-white px-2 py-1 rounded-md">Security</span>
                            <span class="text-gray-500 text-sm ml-auto">May 15, 2025</span>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-2">Essential Website Security Measures</h3>
                        <p class="text-gray-400 mb-4">Protect your website and customer data with these security best practices.</p>
                        <a href="{{ route('blog.show', ['locale' => app()->getLocale(), 'slug' => 'website-security']) }}" class="text-blue-400 hover:text-blue-300 transition">{{ __('general.read_more') }}</a>
                    </div>
                </div>
            </div>
            
            <!-- Pagination -->
            <div class="mt-12 flex justify-center">
                <nav class="inline-flex rounded-md shadow-sm">
                    <a href="#" class="px-3 py-2 rounded-l-md border border-gray-700 bg-gray-900 text-gray-400 hover:bg-gray-700 hover:text-white">
                        <span class="sr-only">Previous</span>
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                    </a>
                    <a href="#" class="px-4 py-2 border border-gray-700 bg-blue-600 text-white">1</a>
                    <a href="#" class="px-4 py-2 border border-gray-700 bg-gray-900 text-gray-400 hover:bg-gray-700 hover:text-white">2</a>
                    <a href="#" class="px-4 py-2 border border-gray-700 bg-gray-900 text-gray-400 hover:bg-gray-700 hover:text-white">3</a>
                    <span class="px-4 py-2 border border-gray-700 bg-gray-900 text-gray-400">...</span>
                    <a href="#" class="px-4 py-2 border border-gray-700 bg-gray-900 text-gray-400 hover:bg-gray-700 hover:text-white">8</a>
                    <a href="#" class="px-3 py-2 rounded-r-md border border-gray-700 bg-gray-900 text-gray-400 hover:bg-gray-700 hover:text-white">
                        <span class="sr-only">Next</span>
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </nav>
            </div>
        </div>
    </section>

    <!-- Categories Section -->
    <section class="bg-gray-900 py-16">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto">
                <h2 class="text-2xl font-bold text-white mb-6 text-center">Categories</h2>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="#" class="px-4 py-2 bg-gray-800 text-gray-300 rounded-md hover:bg-blue-600 hover:text-white transition">Web Development</a>
                    <a href="#" class="px-4 py-2 bg-gray-800 text-gray-300 rounded-md hover:bg-blue-600 hover:text-white transition">E-Commerce</a>
                    <a href="#" class="px-4 py-2 bg-gray-800 text-gray-300 rounded-md hover:bg-blue-600 hover:text-white transition">SEO</a>
                    <a href="#" class="px-4 py-2 bg-gray-800 text-gray-300 rounded-md hover:bg-blue-600 hover:text-white transition">Digital Strategy</a>
                    <a href="#" class="px-4 py-2 bg-gray-800 text-gray-300 rounded-md hover:bg-blue-600 hover:text-white transition">Business</a>
                    <a href="#" class="px-4 py-2 bg-gray-800 text-gray-300 rounded-md hover:bg-blue-600 hover:text-white transition">Security</a>
                    <a href="#" class="px-4 py-2 bg-gray-800 text-gray-300 rounded-md hover:bg-blue-600 hover:text-white transition">Marketing</a>
                    <a href="#" class="px-4 py-2 bg-gray-800 text-gray-300 rounded-md hover:bg-blue-600 hover:text-white transition">Design</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Newsletter Section -->
    <section class="bg-blue-600 py-16">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-3xl font-bold text-white mb-4">Subscribe to Our Newsletter</h2>
                <p class="text-xl text-white opacity-90 mb-8">
                    Stay updated with the latest articles, tips, and insights on web development and digital strategy.
                </p>
                <form class="flex flex-col md:flex-row gap-4 justify-center">
                    <input type="email" placeholder="Your email address" class="px-4 py-3 rounded-md w-full md:w-96 focus:outline-none">
                    <button type="submit" class="bg-gray-900 text-white px-6 py-3 rounded-md font-medium hover:bg-gray-800 transition">
                        Subscribe
                    </button>
                </form>
            </div>
        </div>
    </section>
@endsection