@extends('layouts.user')

@section('title', 'La Classe Blogs | Translation Insights, Language & Localization')
@section('description',  'Explore La Classe blogs for expert insights on translation, localization, multilingual content, language trends, global communication, and professional translations.')
@section('keywords', 'La Classe blogs, La Classe Translation Services, translation blog, localization blog, language industry insights, multilingual content, translation tips, professional translation articles')
@section('canonical', url()->current())
@section('og_image', asset('images/favicon.webp'))
@section('schema')
@verbatim
{
  "@context": "https://schema.org",
  "@type": "Blog",
  "name": "La Classe Translation Blog",
  "description": "Explore our blog for helpful tips, resources, and guides related to translation, apostille services, and multilingual document solutions.",
  "url": "https://www.laclasse.in/blogs",
  "publisher": {
    "@type": "Organization",
    "name": "La Classe Translation Pvt. Ltd.",
    "url": "https://www.laclasse.in",
    "logo": {
      "@type": "ImageObject",
      "url": "https://laclasse.in/images/Logo-1.webp"
    }
  },
  "mainEntity": {
    "@type": "ItemList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "url": "https://www.laclasse.in/blogs",
        "name": "Latest Blog Posts"
      }
    ]
  }
}
@endverbatim
@endsection

@section('content')
<div class="container py-5">
    <h1 class="mb-5">La Classe Blog</h1>
    <h2 class="mb-5">Latest Updates, News, & Articles</h2>
    <div class="row">
        @foreach($blogs as $blog)
            <div class="col-md-4 mb-4 d-flex">
                <div class="card flex-fill d-flex flex-column">
                    @if($blog->image)
                        <img src="{{ asset($blog->image) }}" class="card-img-top" alt="{{ $blog->title }}" style="height:200px; object-fit:cover;">
                    @else
                        <img src="{{ asset('default-blog.jpg') }}" class="card-img-top" alt="Default Image" style="height:200px; object-fit:cover;">
                    @endif

                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">{{ $blog->title }}</h5>
                        <p class="card-text">
                            <small>{{ $blog->created_at->format('d M Y') }}</small>
                        </p>

                        <p class="card-text flex-grow-1">
                            {!! Str::limit(strip_tags($blog->description), 100) !!}
                        </p>

                        <a href="{{ route('blogs.show', $blog->slug) }}" class="btn btn-primary mt-auto">Read More</a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection