@extends('layouts.public')
@section('title', 'Repair Services | Anywhere Phone Repair')
@section('content')
<div class="bg-zinc-950 py-24 text-white text-center">
    <div class="container mx-auto px-4">
        <h1 class="text-4xl md:text-6xl font-black mb-6 tracking-tight">Our Services</h1>
        <p class="text-zinc-400 font-medium text-lg max-w-2xl mx-auto">Expert repairs for all your devices, backed by our nationwide 90-day warranty.</p>
    </div>
</div>
<div class="bg-zinc-50 py-16">
    <div class="container mx-auto px-4 md:px-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($services as $s)
                <div class="bg-white border border-zinc-200 p-8 rounded-3xl hover:shadow-xl hover:border-primary transition-all">
                    <h3 class="font-bold text-zinc-900 text-xl mb-3">{{ $s->name }}</h3>
                    <p class="text-zinc-500 font-medium text-sm mb-6">{{ $s->description ?? 'Professional repair service.' }}</p>
                    <div class="flex items-end justify-between mt-auto">
                        <div>
                            <p class="text-[10px] font-bold uppercase tracking-widest text-zinc-400 mb-0.5">Starts At</p>
                            <p class="text-primary font-black text-2xl">${{ number_format($s->price, 2) }}</p>
                        </div>
                        <a href="{{ url('/book') }}" class="text-sm font-bold bg-zinc-100 hover:bg-zinc-200 text-zinc-900 px-4 py-2 rounded-xl transition-colors">Book Now</a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection