@extends('layouts.nova')

@section('content')

{{-- Inline props for the React component --}}
<script id="latest-comments-props" type="application/json">
    {!! json_encode($props, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP) !!}
</script>

<div id="latest-comments-root" class="min-h-screen">
    {{-- SSR skeleton replaced on React hydration --}}
    <div class="px-4 pt-10 pb-20 sm:px-6 lg:px-8 max-w-5xl mx-auto">
        <div class="mb-8">
            <p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Community</p>
            <h1 class="text-3xl font-bold text-white leading-tight">{{ $page_title }}</h1>
            <p class="mt-1 text-sm text-white/50">Most recent artwork comments from the community.</p>
        </div>
        <div class="h-8 w-8 animate-spin rounded-full border-4 border-nova-500 border-t-transparent mx-auto mt-20"></div>
    </div>
</div>

@vite(['resources/js/Pages/Community/LatestCommentsPage.jsx'])

@endsection