@extends('frontend.layouts.app')

@section('content')
<section class="max-w-5xl mx-auto px-6 py-20">
    @if($post->featured_image)
        <div class="h-[420px] rounded-[2rem] bg-cover bg-center mb-10 border border-red-950"
             style="background-image:url('{{ asset('storage/'.$post->featured_image) }}')"></div>
    @endif

    <div class="mb-8">
        <p class="text-red-500 uppercase tracking-[0.35em] text-sm mb-3">News Article</p>
        <h1 class="text-5xl md:text-7xl mb-4">{{ $post->title }}</h1>
        <p class="text-gray-500">
            {{ $post->published_at ? $post->published_at->format('F d, Y') : $post->created_at->format('F d, Y') }}
        </p>
    </div>

    @if($post->excerpt)
        <div class="text-xl text-gray-300 leading-9 mb-8 border-l-4 border-red-600 pl-6">
            {{ $post->excerpt }}
        </div>
    @endif

    <div class="prose prose-invert max-w-none text-gray-300 leading-8">
    {!! $post->content !!}
</div>

    <div class="mt-12 flex flex-wrap gap-3">
        <a href="https://wa.me/?text={{ urlencode(route('news.show', $post->slug)) }}" target="_blank" class="border border-green-600 px-5 py-3 rounded-full text-sm">
            Share on WhatsApp
        </a>

        <a href="https://twitter.com/intent/tweet?url={{ urlencode(route('news.show', $post->slug)) }}&text={{ urlencode($post->title) }}" target="_blank" class="border border-white/30 px-5 py-3 rounded-full text-sm">
            Share on X
        </a>

        <a href="{{ route('news') }}" class="border border-red-600 px-5 py-3 rounded-full text-sm">
            Back to News
        </a>
    </div>
</section>

<section class="max-w-5xl mx-auto px-6 pb-12">
    <div class="rounded-[2rem] border border-red-950 bg-[#101010] p-8">
        <h2 class="text-4xl mb-6">Leave a Comment</h2>

        @if(session('success'))
            <div class="bg-green-600/20 border border-green-600 text-green-300 p-4 rounded-xl mb-6">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('news.comment', $post->slug) }}" method="POST" class="space-y-4">
            @csrf

            <input type="text" name="name" placeholder="Your Name" class="w-full bg-black border border-gray-700 rounded-xl px-4 py-3 text-white" value="{{ old('name') }}">
            <input type="email" name="email" placeholder="Your Email" class="w-full bg-black border border-gray-700 rounded-xl px-4 py-3 text-white" value="{{ old('email') }}">
            <textarea name="message" rows="6" placeholder="Write your comment..." class="w-full bg-black border border-gray-700 rounded-xl px-4 py-3 text-white">{{ old('message') }}</textarea>

            <button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-full font-semibold">
                Submit Comment
            </button>
        </form>
    </div>
</section>

<section class="max-w-5xl mx-auto px-6 pb-24">
    <h2 class="text-4xl mb-8">Comments</h2>

    <div class="space-y-6">
        @forelse($post->comments as $comment)
            <div class="rounded-[1.5rem] border border-red-950 bg-[#111] p-6">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-xl font-semibold">{{ $comment->name }}</h3>
                    <span class="text-sm text-gray-500">{{ $comment->created_at->format('F d, Y') }}</span>
                </div>
                <p class="text-gray-300 leading-8">{{ $comment->message }}</p>
            </div>
        @empty
            <div class="text-gray-500">No comments yet.</div>
        @endforelse
    </div>
</section>
@endsection