<div class="mt-12 rounded-3xl border border-lime-100 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 sm:p-8">
    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
        <div>
            <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">Reader reviews</h2>
            @if ($reviewCount > 0 && $averageRating !== null)
                <div class="mt-2 flex flex-wrap items-center gap-2 text-slate-600 dark:text-slate-400">
                    <span class="flex items-center gap-0.5 text-amber-500" aria-hidden="true">
                        @for ($s = 1; $s <= 5; $s++)
                            <i class="fas fa-star text-sm {{ $s <= round($averageRating) ? '' : 'opacity-25' }}"></i>
                        @endfor
                    </span>
                    <span class="text-sm font-semibold text-slate-800 dark:text-slate-200">{{ $averageRating }} out of 5</span>
                    <span class="text-sm">· {{ $reviewCount }} {{ Str::plural('review', $reviewCount) }}</span>
                </div>
            @else
                <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">No reviews yet — be the first to share your rating.</p>
            @endif
        </div>
    </div>

    @if ($reviews->isNotEmpty())
        <ul class="mt-8 space-y-6 divide-y divide-slate-100 dark:divide-slate-800">
            @foreach ($reviews as $review)
                <li class="pt-6 first:pt-0 first:border-0 border-t border-slate-100 dark:border-slate-800" wire:key="review-{{ $review->id }}">
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="flex items-center gap-0.5 text-amber-500" aria-label="{{ $review->rating }} out of 5 stars">
                            @for ($s = 1; $s <= 5; $s++)
                                <i class="fas fa-star text-xs {{ $s <= $review->rating ? '' : 'opacity-25' }}"></i>
                            @endfor
                        </span>
                        <span class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ $review->reviewerDisplayName() }}</span>
                        <span class="text-xs text-slate-500 dark:text-slate-400">{{ $review->created_at?->diffForHumans() }}</span>
                    </div>
                    @if (filled($review->body))
                        <p class="mt-2 text-sm text-slate-600 dark:text-slate-300 leading-relaxed">{{ $review->body }}</p>
                    @endif
                </li>
            @endforeach
        </ul>
    @endif

    <div class="mt-10 pt-8 border-t border-slate-100 dark:border-slate-800">
        <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Your review</h3>

        @if (session('blog_review_saved'))
            <p class="mt-2 text-sm font-medium text-lime-700 dark:text-lime-400" role="status">
                Thanks — your review was submitted. It will appear on this page after a quick check.
            </p>
        @endif

        <form wire:submit="submit" class="mt-4 space-y-4">
            @guest
                <flux:field>
                    <flux:label>Name</flux:label>
                    <flux:input wire:model="guestName" type="text" autocomplete="name" placeholder="Your name" />
                    <flux:error name="guestName" />
                </flux:field>

                <flux:field>
                    <flux:label>Email (optional)</flux:label>
                    <flux:input wire:model="guestEmail" type="email" autocomplete="email" placeholder="you@example.com" />
                    <flux:error name="guestEmail" />
                </flux:field>
            @else
                <p class="text-sm text-slate-600 dark:text-slate-400">Posting as <span class="font-semibold text-slate-800 dark:text-slate-200">{{ auth()->user()->name }}</span>.</p>
            @endguest

            <div>
                <p class="text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Rating</p>
                <div class="flex items-center gap-1" role="group" aria-label="Star rating">
                    @for ($s = 1; $s <= 5; $s++)
                        <button
                            type="button"
                            wire:click="$set('rating', {{ $s }})"
                            class="p-1 rounded-lg hover:bg-lime-50 dark:hover:bg-slate-800 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-lime-500"
                            aria-pressed="{{ $rating === $s ? 'true' : 'false' }}"
                            aria-label="{{ $s }} stars"
                        >
                            <i class="fas fa-star text-lg {{ $s <= $rating ? 'text-amber-500' : 'text-slate-300 dark:text-slate-600' }}"></i>
                        </button>
                    @endfor
                </div>
                @error('rating')
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <flux:field>
                <flux:label>Comments (optional)</flux:label>
                <flux:textarea wire:model="body" rows="4" placeholder="What did you think of this article?" />
                <flux:error name="body" />
            </flux:field>

            <flux:button type="submit" variant="primary" wire:loading.attr="disabled">
                <span wire:loading.remove wire:target="submit">Submit review</span>
                <span wire:loading wire:target="submit">Saving…</span>
            </flux:button>
        </form>
    </div>
</div>
