@extends('layouts.tech')

@section('content')
<div class="min-h-screen bg-gray-50 pb-28 md:pb-12">
    <section class="mx-auto max-w-5xl px-4 py-8 sm:px-6">
        <div class="text-center">
            <h1 class="text-3xl font-black md:text-5xl text-gray-900">What customers say</h1>
            <p class="mt-2 text-gray-500 font-bold">Real reviews from real Instafix24 bookings.</p>
        </div>

        <div class="mt-6 grid gap-4 rounded-2xl border border-gray-100 bg-white p-6 shadow-sm sm:grid-cols-[auto_1fr]">
            <div class="text-center flex flex-col items-center justify-center">
                <div class="text-5xl font-black text-[#109E38]">4.8</div>
                <div class="mt-2 flex justify-center gap-0.5">
                    <i data-lucide="star" class="h-5 w-5 fill-[#109E38] text-[#109E38]"></i>
                    <i data-lucide="star" class="h-5 w-5 fill-[#109E38] text-[#109E38]"></i>
                    <i data-lucide="star" class="h-5 w-5 fill-[#109E38] text-[#109E38]"></i>
                    <i data-lucide="star" class="h-5 w-5 fill-[#109E38] text-[#109E38]"></i>
                    <i data-lucide="star" class="h-5 w-5 fill-[#109E38] text-[#109E38]"></i>
                </div>
                <p class="mt-2 text-xs font-bold text-gray-400">128 reviews</p>
            </div>
            
            <div class="space-y-2 flex flex-col justify-center">
                <div class="flex items-center gap-2 text-xs font-bold text-gray-500">
                    <span class="w-6 text-right">5★</span>
                    <div class="h-2 flex-1 overflow-hidden rounded-full bg-gray-100">
                        <div class="h-full bg-[#109E38] rounded-full" style="width: 85%;"></div>
                    </div>
                    <span class="w-8 text-gray-400">105</span>
                </div>
                <div class="flex items-center gap-2 text-xs font-bold text-gray-500">
                    <span class="w-6 text-right">4★</span>
                    <div class="h-2 flex-1 overflow-hidden rounded-full bg-gray-100">
                        <div class="h-full bg-[#109E38] rounded-full" style="width: 10%;"></div>
                    </div>
                    <span class="w-8 text-gray-400">15</span>
                </div>
                <div class="flex items-center gap-2 text-xs font-bold text-gray-500">
                    <span class="w-6 text-right">3★</span>
                    <div class="h-2 flex-1 overflow-hidden rounded-full bg-gray-100">
                        <div class="h-full bg-[#109E38] rounded-full" style="width: 3%;"></div>
                    </div>
                    <span class="w-8 text-gray-400">5</span>
                </div>
                <div class="flex items-center gap-2 text-xs font-bold text-gray-500">
                    <span class="w-6 text-right">2★</span>
                    <div class="h-2 flex-1 overflow-hidden rounded-full bg-gray-100">
                        <div class="h-full bg-[#109E38] rounded-full" style="width: 1%;"></div>
                    </div>
                    <span class="w-8 text-gray-400">2</span>
                </div>
                <div class="flex items-center gap-2 text-xs font-bold text-gray-500">
                    <span class="w-6 text-right">1★</span>
                    <div class="h-2 flex-1 overflow-hidden rounded-full bg-gray-100">
                        <div class="h-full bg-[#109E38] rounded-full" style="width: 1%;"></div>
                    </div>
                    <span class="w-8 text-gray-400">1</span>
                </div>
            </div>
        </div>

        <form action="#" class="mt-6 space-y-4 rounded-2xl border border-gray-100 bg-white p-6 shadow-sm">
            <h2 class="text-lg font-black text-gray-900">Share your experience</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1">Your name</label>
                    <input type="text" value="Rahul Tech" class="flex h-10 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#109E38] outline-none" />
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1">Service</label>
                    <select class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm focus:ring-2 focus:ring-[#109E38] outline-none">
                        <option>AC Repair</option>
                        <option>AC Installation</option>
                        <option>Gas Refill</option>
                    </select>
                </div>
            </div>
            
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-1">Review</label>
                <textarea rows="3" placeholder="How was your experience?" class="flex w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#109E38] outline-none"></textarea>
            </div>
            
            <button type="submit" class="w-full sm:w-auto px-6 h-10 bg-gray-900 hover:bg-black text-white font-black rounded-md shadow-md">
                Post review
            </button>
        </form>

        <div class="mt-8 grid gap-4 md:grid-cols-2">
            <article class="relative rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
                <i data-lucide="quote" class="absolute right-4 top-4 h-6 w-6 text-[#109E38]/20"></i>
                <div class="flex items-center gap-3">
                    <div class="grid h-10 w-10 place-items-center rounded-full text-sm font-black text-white bg-gradient-to-br from-[#109E38] to-green-900">
                        A
                    </div>
                    <div>
                        <div class="text-sm font-black text-gray-900">Amit Kumar</div>
                        <div class="text-[11px] font-bold text-gray-400">AC Repair · 04/06/2026</div>
                    </div>
                </div>
                <div class="mt-2 flex gap-0.5">
                    <i data-lucide="star" class="h-3.5 w-3.5 fill-[#109E38] text-[#109E38]"></i>
                    <i data-lucide="star" class="h-3.5 w-3.5 fill-[#109E38] text-[#109E38]"></i>
                    <i data-lucide="star" class="h-3.5 w-3.5 fill-[#109E38] text-[#109E38]"></i>
                    <i data-lucide="star" class="h-3.5 w-3.5 fill-[#109E38] text-[#109E38]"></i>
                    <i data-lucide="star" class="h-3.5 w-3.5 fill-[#109E38] text-[#109E38]"></i>
                </div>
                <p class="mt-3 text-sm font-medium text-gray-600">Bohot badhiya service thi. Technician time par aaya aur AC ekdum naya jaisa kar diya. Rate bhi bilkul transparent the.</p>
            </article>
        </div>
    </section>
</div>
@endsection