@extends('frontend.layout.main')
@section('title', 'Our Blogs & Insights | AMEYA PEB - PEB Industry Education, Case Studies, and Trends')

@section('meta_description', 'Explore insightful blogs on Pre-Engineered Buildings (PEBs). Industry education, technical insights, case studies, guides, and innovations in PEBs.')

@section('meta_keywords', 'PEB blogs, Pre-Engineered Buildings, Industry Education, Technical Insights, PEB Case Studies, PEB Trends')

@push('head')
<!-- Canonical -->
<link rel="canonical" href="{{ url()->current() }}">
<link rel="stylesheet" href="{{ asset('assets/css/blog.css') }}">


<!-- Robots -->
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:title" content="Our Blogs & Insights | AMEYA PEB">
<meta property="og:description" content="Explore insightful blogs on Pre-Engineered Buildings including education, technical insights, case studies, guides, and trends.">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ url()->current() }}">
<meta property="og:site_name" content="AMEYA PEB">
<meta property="og:image" content="{{ asset('assets/images/blogs/blogs-cover.jpg') }}">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Our Blogs & Insights | AMEYA PEB">
<meta name="twitter:description" content="Industry education, technical insights, case studies, and trends in Pre-Engineered Buildings.">
<meta name="twitter:image" content="{{ asset('assets/images/blogs/blogs-cover.jpg') }}">
@endpush


@section('main-container')



<!-- Blog Section Start -->

<!-- ===== AMEYA PEB INDUSTRIAL INSIGHTS INDEX ===== -->
<section class="blog-index-section py-5">
  <div class="container">
    
    <!-- Heavy Duty Centered Header -->
    <div class="text-center mb-5 project-header-wrap">
      <span class="industrial-badge">Technical Library</span>
      <h1 class="section-title">Our Blogs & Insights</h1>
      <p class="section-subtitle mx-auto">
        Explore industry education, technical insights, case studies, guides, and future trends in Pre-Engineered Buildings (PEBs).
      </p>
    </div>

    <div class="row g-4 align-items-start"> <!-- Fixes the height stretching of the sidebar -->
    
      <!-- LEFT CONTENT COLUMN (FEED) -->
      <div class="col-lg-8">
        <div class="blog-feed-framework">

          @foreach($blogs as $blog)
          <div class="ameya-blog-row">
            <div class="row g-0 align-items-stretch">

              <!-- Component Image Box -->
              <div class="col-md-5">
                <div class="blog-image-container">
                  <a href="{{ url('/blogs/'.$blog->slug) }}" class="blog-img-link">
                    <img src="{{ asset('uploads/blogs/'.$blog->cover_image) }}" alt="{{ $blog->title }}">
                  </a>
                  <div class="blog-date-badge">
                    <span class="date-icon">//</span> {{ date('d M Y', strtotime($blog->created_at)) }}
                  </div>
                </div>
              </div>

              <!-- Component Metadata & Text Details -->
              <div class="col-md-7 d-flex">
                <div class="ameya-blog-content">
                  
                  @php
                    $wordCount = str_word_count(strip_tags($blog->content));
                    $readingTime = ceil($wordCount / 200);
                  @endphp

                  <div class="tech-spec-bar">
                    <span class="spec-tag"><i class="spec-indicator"></i> {{ $readingTime }} Min Analysis</span>
                    <span class="spec-tag"><i class="spec-indicator"></i> 👁 {{ $blog->views }} Engagements</span>
                  </div>

                  <h4 class="blog-row-title">
                    <a href="{{ url('/blogs/'.$blog->slug) }}">{{ $blog->title }}</a>
                  </h4>
                  
                  <p class="blog-row-desc">
                    {{ $blog->description }}
                  </p>

                  <a href="{{ url('/blogs/'.$blog->slug) }}" class="read-more-link">
                    <span>Analyze Blueprint Report</span>
                    <span class="link-arrow">→</span>
                  </a>

                </div>
              </div>

            </div>
          </div>
          @endforeach

        </div>
      </div>

      <!-- RIGHT CONTENT COLUMN (SIDEBAR MODULE) -->
      <div class="col-lg-4">
        <aside class="industrial-sidebar">
          
          <h5 class="sidebar-framework-heading">Trending Knowledge</h5>

          <div class="trending-posts-stack">
            @foreach($trendingBlogs as $item)
            <div class="sidebar-post-card">
              <div class="sidebar-img-wrap">
                <img src="{{ asset('uploads/blogs/'.$item->cover_image) }}" alt="{{ $item->title }}">
              </div>
              <div class="sidebar-post-details">
                <a href="{{ url('/blogs/'.$item->slug) }}" class="post-link-title">
                  {{ \Illuminate\Support\Str::limit($item->title, 50) }}
                </a>
                <div class="post-metrics">
                  <span>{{ $item->views }} Views</span>
                  <a href="{{ url('/blogs/'.$item->slug) }}" class="action-arrow">Review Specs →</a>
                </div>
              </div>
            </div>
            @endforeach
          </div>

        </aside>
      </div>

    </div>
  </div>
</section>
<!-- Blog Section End -->

@endsection