@extends('frontend::layouts.master')

@section('title', $article['name'] . ' | บทความ | ศูนย์ความรู้ อ.อ๊อบ')

@section('content')
<main class="pt-[80px] sm:pt-[88px] bg-gradient-to-b from-white to-kru-light-strong min-h-screen">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    <a href="{{ $url ?? '' }}" class="inline-flex items-center gap-2 text-kru-blue hover:underline text-sm font-medium mb-8">
      <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
      </svg>
      @lang('frontend::lang.back_to_news')
    </a>

    <article class="overflow-hidden rounded-xl border-2 border-gray-200 shadow-lg bg-white">
      {{-- Hero --}}
      <div class="relative h-[15rem] sm:h-[30rem] overflow-hidden bg-gray-100">
        @if(!empty($article['image']))
          <img src="{{ str_starts_with($article['image'], 'http') ? $article['image'] : asset($article['image']) }}" alt="{{ $article['name'] ?? ''}}" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" loading="lazy">
        @endif
      </div>

      <div class="p-6 sm:p-8">
        <div class="flex items-center gap-2 text-sm text-gray-500 mb-4">
          <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
          </svg>
          {{ $article['publish_at'] ?? ''}}
        </div>
        <h1 class="text-2xl sm:text-3xl font-bold text-kru-dark mb-6">
          {{ $article['name'] ?? '' }}
        </h1>

        {!! $article['desc'] ?? '' !!}
        
        <div class="text-editor-reset">
          {!! $article['detail'] ?? '' !!}
        </div>

        <div class="mt-8 pt-6 border-t border-gray-200">
          <a href="{{ $url ?? '' }}" class="inline-flex items-center gap-2 text-kru-green hover:underline font-medium">
              <svg class="w-4 h-4 shrink-0" 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"/>
              </svg>
              @lang('frontend::lang.read_other_article')
          </a>
        </div>
      </div>
    </article>
  </div>
</main>
@endsection