@extends('layouts.app')
@section('title', $blog->name)
@section('content')
<section class="relative about-banner">
        <div
            class="bannerInner bg-[url({{ asset($blog->image) }})] bg-cover bg-center px-4 sm:px-8 md:px-20 py-12 sm:py-16 md:pt-32 md:pb-32 w-[95%] sm:w-[90%] md:w-[85%] lg:w-[75%] mx-auto rounded-3xl">
            <div class="container">
                <div class="flex items-center justify-center">
                    <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-white font-extrabold text-center leading-tight">
                        {{$blog->name}}
                    </h1>
                </div>
            </div>
        </div>
    </section>

<section class="w-full sm:w-[95%] md:w-[90%] lg:w-[80%] xl:w-[70%] mt-8 sm:mt-12 md:mt-16 mx-auto px-4 sm:px-6">
    <div class="container">
        <article class="max-w-4xl mx-auto">
            <div class="description mt-8 sm:mt-12">
                <div class="prose prose-base sm:prose-lg lg:prose-xl max-w-none mx-auto">
                    <div class="text-gray-800 leading-relaxed">
                        {!! $blog->description !!}
                    </div>
                </div>
            </div>
            
            <!-- Back to blogs button -->
            <div class="mt-12 sm:mt-16 text-center">
                <a href="{{ route('blogs') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-secondary text-white rounded-full hover:bg-primary hover:text-black transition-all font-medium">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Back to Blogs
                </a>
            </div>
        </article>
    </div>
</section>
@endsection