@extends('layouts.web')

@php
    $app = \App\Support\Superficie::base();
    $catColors = ['teal' => '#3E7C77', 'amber' => '#D0A03A', 'purple' => '#8A5BB0', 'blue' => '#3F6FB0', 'coral' => '#B5503A', 'gray' => '#79847B'];
    $pageTitle = ($category ?? null) ? $category->name : 'Blog';
    $pageDesc  = ($category ?? null) ? ($category->description ?: 'Artículos sobre ' . $category->name) : 'Recetas, ciencia de la fermentación y novedades de Fermenty.';
@endphp

@section('seo')
<x-seo :title="$pageTitle" :description="$pageDesc" :canonical="$activeSlug ? ruta('blog.category', $activeSlug) : ruta('blog.index')" />
@endsection

@push('head')
<link rel="stylesheet" href="{{ asset_v('landing/pages/blog.css') }}">
@endpush

@section('content')
<section class="section--tight" style="padding-top:48px">
  <div class="wrap">
    <div class="section-head center reveal">
      <p class="eyebrow">Blog de Fermenty</p>
      <h1>{{ ($category ?? null) ? $category->name : 'Desde la bodega' }}</h1>
      <p class="lede">{{ $pageDesc }}</p>
    </div>
  </div>
</section>

<section class="section" style="padding-top:0">
  <div class="wrap">

    {{-- Filter tabs --}}
    <div class="blog-tabs reveal">
      <a href="{{ ruta('blog.index') }}" class="blog-tab {{ $activeSlug ? '' : 'is-active' }}">Todo</a>
      @foreach($categories as $cat)
        <a href="{{ ruta('blog.category', $cat->slug) }}" class="blog-tab {{ $activeSlug === $cat->slug ? 'is-active' : '' }}">{{ $cat->name }}</a>
      @endforeach
    </div>

    {{-- Featured --}}
    @if(!empty($featured))
      @php $fc = $catColors[$featured->category->color_key ?? 'gray'] ?? '#79847B'; @endphp
      <a href="{{ ruta('blog.show', $featured->slug) }}" class="blog-card reveal" style="margin-bottom:26px;display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch;">
        {{-- El destacado ES el LCP de /blog: <img> real con prioridad, no un
             background-image invisible al preload scanner (fase 5). --}}
        <div class="blog-card__cover" style="aspect-ratio:auto;min-height:240px;">
          <img src="{{ $featured->cover_webp_url }}" alt="" fetchpriority="high" decoding="async">
        </div>
        <div class="blog-card__body" style="justify-content:center;padding:28px;">
          @if($featured->category)<span class="blog-badge" style="background:{{ $fc }}1a;color:{{ $fc }}">{{ $featured->category->name }}</span>@endif
          <div class="blog-card__title" style="font-size:24px;">{{ $featured->title }}</div>
          <div class="blog-card__ex" style="-webkit-line-clamp:3;">{{ $featured->excerpt }}</div>
          <div class="blog-card__meta">{{ $featured->readable_published_at }} · {{ $featured->read_time_minutes }} min de lectura</div>
        </div>
      </a>
    @endif

    {{-- Grid --}}
    @if($posts->isEmpty() && empty($featured))
      <div class="center"><p class="lede">Pronto publicaremos por aquí. Vuelve un poco más tarde 🌱</p></div>
    @else
      <div class="blog-grid reveal">
        @foreach($posts as $post)
          @php $pc = $catColors[$post->category->color_key ?? 'gray'] ?? '#79847B'; @endphp
          <a href="{{ ruta('blog.show', $post->slug) }}" class="blog-card">
            <div class="blog-card__cover">
              <img src="{{ $post->cover_webp_url }}" alt="" loading="lazy" decoding="async">
            </div>
            <div class="blog-card__body">
              @if($post->category)<span class="blog-badge" style="background:{{ $pc }}1a;color:{{ $pc }}">{{ $post->category->name }}</span>@endif
              <div class="blog-card__title">{{ $post->title }}</div>
              <div class="blog-card__ex">{{ $post->excerpt }}</div>
              <div class="blog-card__meta">{{ $post->readable_published_at }} · {{ $post->read_time_minutes }} min</div>
            </div>
          </a>
        @endforeach
      </div>

      <div class="blog-pager">
        @if($posts->previousPageUrl())<a class="btn btn--ghost" href="{{ $posts->previousPageUrl() }}">← Anteriores</a>@endif
        @if($posts->nextPageUrl())<a class="btn btn--ghost" href="{{ $posts->nextPageUrl() }}">Siguientes →</a>@endif
      </div>
    @endif
  </div>
</section>

{{-- CTA --}}
<section class="section" style="background:var(--bg-canvas-deep)">
  <div class="wrap center">
    <div class="section-head center reveal" style="margin-bottom:18px">
      <h2>¿Quieres probar Fermenty?</h2>
      <p class="lede">Crea tu cuenta gratis y acompaña cada fermento hasta su punto.</p>
    </div>
    <a class="btn btn--primary btn--lg" href="{{ $app }}/register" data-app-link>Crea tu cuenta gratis</a>
  </div>
</section>
@endsection