@extends('layouts.app')

@section('title', 'Corporate News & Media - Khmer Foundation Appraisals')

@section('content')
    <x-page-header title="News & Media" />

    <section class="py-24 bg-white overflow-hidden">
        <div class="container-custom">
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-16">
                <!-- News List -->
                <div class="lg:col-span-3 reveal reveal-fade">
                    <!-- Loading State -->
                    <div id="news-loading" class="text-center py-20">
                        <div
                            class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-primary border-r-transparent">
                        </div>
                        <p class="mt-4 text-gray-500 font-bold uppercase tracking-widest">Loading latest updates...</p>
                    </div>

                    <!-- Dynamic List Container -->
                    <div id="news-container" class="space-y-20 hidden">
                        <!-- Content loaded by JS -->
                    </div>

                    <!-- Single Report/News Detail Container -->
                    <div id="report-detail-container" class="hidden">
                        <button onclick="window.history.back()"
                            class="flex items-center text-gray-500 hover:text-primary mb-8 transition-colors font-bold uppercase tracking-widest text-xs">
                            <span class="mr-2">&larr;</span> Back to List
                        </button>
                        <div id="report-content" class="prose prose-lg max-w-none">
                            <!-- Detail content loaded by JS -->
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="lg:col-span-1 reveal reveal-right">
                    <div class="bg-gray-50 p-10 rounded-3xl border border-gray-100 shadow-sm mb-12 sticky top-32">
                        <h3 class="text-xs font-black text-secondary mb-8 uppercase tracking-widest">Categories</h3>
                        <ul class="space-y-6 text-sm font-bold text-gray-400">
                            <li><a href="#"
                                    class="hover:text-primary transition-all flex justify-between group"><span>Corporate
                                        News</span> <span
                                        class="text-gray-200 group-hover:text-secondary transition-colors">(12)</span></a>
                            </li>
                            <li><a href="#"
                                    class="hover:text-primary transition-all flex justify-between group"><span>Market
                                        Trends</span> <span
                                        class="text-gray-200 group-hover:text-secondary transition-colors">(8)</span></a>
                            </li>
                            <li><a href="#"
                                    class="hover:text-primary transition-all flex justify-between group"><span>Awards &
                                        Events</span> <span
                                        class="text-gray-200 group-hover:text-secondary transition-colors">(5)</span></a>
                            </li>
                            <li><a href="#" class="hover:text-primary transition-all flex justify-between group"><span>Press
                                        Release</span> <span
                                        class="text-gray-200 group-hover:text-secondary transition-colors">(3)</span></a>
                            </li>
                        </ul>

                        <div class="mt-12 pt-12 border-t border-gray-200">
                            <x-property-sidebar />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection