<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>
        <h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">Community 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 }} avg · {{ $reviewCount }} {{ Str::plural('review', $reviewCount) }}</span>
            </div>
        @else
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">No approved community reviews yet.</p>
        @endif
    </div>

    @if ($reviews->isNotEmpty())
        <ul class="mt-8 space-y-6">
            @foreach ($reviews as $review)
                <li class="pt-6 border-t border-slate-100 dark:border-slate-800 first:border-0 first:pt-0" wire:key="wrev-{{ $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">
                            @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>
                        @if (filled($review->user_verdict))
                            <span class="text-xs rounded-full bg-slate-100 dark:bg-slate-800 px-2 py-0.5 text-slate-600 dark:text-slate-300">{{ $verdictLabels[$review->user_verdict] ?? $review->user_verdict }}</span>
                        @endif
                        <span class="text-xs text-slate-500">{{ $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>

        @if ($reviews->hasPages())
            <div class="mt-8">
                <flux:pagination :paginator="$reviews" />
            </div>
        @endif
    @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">Share your experience</h3>
        <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Submissions are moderated before they appear and affect the trust score.</p>

        @if (session('website_review_notice'))
            <flux:callout variant="warning" class="mt-4" icon="exclamation-triangle">{{ session('website_review_notice') }}</flux:callout>
        @endif

        @if (session('website_review_saved'))
            <p class="mt-3 text-sm font-medium text-lime-700 dark:text-lime-400" role="status">Thanks — your review was received and is awaiting moderation.</p>
        @endif

        @if ($hasApprovedUserReview)
            <flux:callout variant="success" class="mt-4" icon="check-circle">You already have a published review for this site.</flux:callout>
        @else
            <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

                <flux:field>
                    <flux:label>Your verdict</flux:label>
                    <flux:select wire:model="userVerdict" variant="listbox">
                        @foreach ($verdictLabels as $value => $label)
                            <flux:select.option value="{{ $value }}">{{ $label }}</flux:select.option>
                        @endforeach
                    </flux:select>
                    <flux:error name="userVerdict" />
                </flux:field>

                <div>
                    <p class="text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Star rating (1–5)</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-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>Details (optional)</flux:label>
                    <flux:textarea wire:model="body" rows="4" placeholder="What happened? Keep it factual and avoid personal data of others." />
                    <flux:error name="body" />
                </flux:field>

                <flux:button type="submit" variant="primary" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="submit">Submit for moderation</span>
                    <span wire:loading wire:target="submit">Sending…</span>
                </flux:button>
            </form>
        @endif
    </div>
</div>
