@section('title', $berita->judul)

@extends('Frontend.Layouts.app2')
@section('content')
    {{-- Header Section --}}
    <x-header-section-page title="Detail Berita" breadcrumb-home="Home" breadcrumb-current="Berita" />

    <div class="py-12 bg-gray-50">
        <div class="container mx-auto px-4 lg:px-24">
            
            {{-- Main Article Card --}}
            <article class="bg-white rounded-2xl overflow-hidden shadow-xl border border-gray-200" data-aos="fade-up">
                
                {{-- Meta & Judul Berita --}}
                <div class="p-8 md:p-12 pb-4">
                    <div class="flex items-center gap-3 mb-4" data-aos="fade-up" data-aos-delay="100">
                        <span class="bg-green-600 text-white text-[11px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">Berita</span>
                        <span class="text-gray-500 text-sm flex items-center gap-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                <line x1="16" y1="2" x2="16" y2="6"></line>
                                <line x1="8" y1="2" x2="8" y2="6"></line>
                                <line x1="3" y1="10" x2="21" y2="10"></line>
                            </svg>
                            {{ \Carbon\Carbon::parse($berita->tanggal_berita)->translatedFormat('d F Y') }}
                        </span>
                    </div>
                    
                    <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight mb-0 font-poppins" data-aos="fade-up" data-aos-delay="200">
                        {{ $berita->judul }}
                    </h1>
                </div>

                {{-- Thumbnail Berita (Foto Utama) --}}
                @if($berita->file_foto)
                <div class="flex justify-center px-8 md:px-12 mt-8 mb-4" data-aos="zoom-in" data-aos-delay="300">
                    <div class="relative group overflow-hidden rounded-xl shadow-md border border-gray-200 w-full max-w-sm bg-gray-100">
                        <img src="{{ asset('storage/berita/' . $berita->file_foto) }}"
                             class="w-full h-auto max-h-[160px] object-cover object-center transition-transform duration-500 group-hover:scale-105" 
                             alt="{{ $berita->judul }}">
                    </div>
                </div>
                @endif

                {{-- Isi Konten Berita --}}
                <div class="p-8 md:p-12 md:px-16 pt-6" data-aos="fade-up" data-aos-delay="400">
                    <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed berita-content">