@extends('layouts.frontend')

@section('title', $article->title . ' - Tempe Zhi')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800;900&display=swap" rel="stylesheet">

<style>
    body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #ffffff; }
    
    .article-container {
        max-width: 900px; /* Ukuran ideal untuk kenyamanan membaca */
    }

    .image-frame {
        border: 4px solid #064e3b;
        border-radius: 24px;
    }

    .prose-custom {
        line-height: 1.8;
        color: #334155;
        font-size: 1.1rem;
    }

    .prose-custom p {
        margin-bottom: 1.5rem;
    }

    .meta-tag {
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #94a3b8;
    }
</style>

<div class="pt-20 pb-32">
    <article class="article-container mx-auto px-6">
        
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
            <a href="{{ url()->previous() }}" class="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-[#064e3b] group">
                <span class="p-2 bg-slate-50 rounded-lg group-hover:bg-yellow-400 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                </span>
                Kembali
            </a>

            <div class="flex items-center gap-3">
                <span class="meta-tag">Diterbitkan pada</span>
                <span class="font-bold text-slate-900 text-sm italic">{{ $article->created_at->translatedFormat('d F Y') }}</span>
            </div>
        </div>

        <header class="mb-16">
            <h1 class="text-4xl md:text-6xl font-[900] text-[#064e3b] leading-[1.1] tracking-tighter mb-8 uppercase">
                {{ $article->title }}
            </h1>
            <div class="w-24 h-2 bg-yellow-400 rounded-full"></div>
        </header>

        <div class="mb-20">
            <div class="image-frame aspect-video overflow-hidden bg-slate-100">
                <img src="{{ asset('storage/' . $article->image) }}" 
                     class="w-full h-full object-cover" 
                     alt="{{ $article->title }}">
            </div>
        </div>

        <div class="flex flex-col lg:flex-row gap-16">
            <div class="w-full">
                <h3 class="text-xs font-black uppercase tracking-[0.4em] text-yellow-500 mb-6 block">Detail Artikel</h3>
                
                <div class="prose-custom text-justify">
                    {!! nl2br(e($article->content)) !!}
                </div>

                <div class="mt-20 pt-10 border-t-2 border-dashed border-slate-100 flex flex-col md:flex-row justify-between items-center gap-6">
                    @if($article->source_url)
                        <div class="bg-slate-50 px-6 py-3 rounded-2xl border border-slate-100">
                            <span class="text-[9px] font-black uppercase text-slate-400 block mb-1">Referensi Sumber</span>
                            <a href="{{ $article->source_url }}" target="_blank" class="text-sm font-bold text-blue-600 hover:text-[#064e3b] flex items-center gap-2 transition-colors">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                                </svg>
                                {{ parse_url($article->source_url, PHP_URL_HOST) }}
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </article>
</div>
@endsection