@extends('layouts.public')

@section('title', 'Updates & Neuigkeiten — TacForce Pro')
@section('meta_description', 'Changelog von TacForce Pro: alle neuen Funktionen und Verbesserungen am Discord-Bot — Tickets, Bewerbungen, Server-Aufbau, Logs, Musik, Moderation und mehr.')

@section('content')
  <section class="border-b border-zinc-200 dark:border-zinc-800">
    <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-16 text-center">
      <span class="inline-flex items-center gap-2 rounded-full border border-zinc-200 dark:border-zinc-800 bg-white/60 dark:bg-zinc-900/60 px-3.5 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-300">Changelog</span>
      <h1 class="mt-5 text-4xl font-extrabold tracking-tight text-zinc-900 dark:text-white sm:text-5xl">Updates & Neuigkeiten</h1>
      <p class="mx-auto mt-4 max-w-xl text-lg text-zinc-600 dark:text-zinc-400">Was wir zuletzt an TacForce Pro verbessert haben. Neue Funktionen kommen laufend — und automatisch als Benachrichtigung in deinen Server.</p>
    </div>
  </section>

  <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-12">
    @forelse ($news as $n)
      @php
        $html = nl2br(preg_replace('/\*\*(.+?)\*\*/', '<strong>$1</strong>', e($n->body)));
      @endphp
      <article class="relative border-l-2 border-zinc-200 dark:border-zinc-800 pl-6 pb-10 last:pb-0">
        <span class="absolute -left-[7px] top-1 h-3 w-3 rounded-full bg-blue-500 ring-4 ring-zinc-50 dark:ring-zinc-950"></span>
        <div class="flex flex-wrap items-center gap-2">
          @if ($n->tag)
            <span class="rounded-full bg-blue-500/10 px-2 py-0.5 text-[11px] font-semibold text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/20">{{ $n->tag }}</span>
          @endif
          <time class="font-mono text-[11px] text-zinc-400 dark:text-zinc-500">{{ optional($n->published_at)->format('d.m.Y') }}</time>
        </div>
        <h2 class="mt-1.5 text-lg font-semibold text-zinc-900 dark:text-white">{{ $n->title }}</h2>
        <div class="mt-1.5 text-[14px] leading-relaxed text-zinc-600 dark:text-zinc-400">{!! $html !!}</div>
      </article>
    @empty
      <p class="text-center text-zinc-500 dark:text-zinc-400">Noch keine Einträge.</p>
    @endforelse
  </div>
@endsection