@extends('layouts.public')
@section('title', 'Devices We Repair | 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">Devices We Repair</h1>
        <p class="text-zinc-400 font-medium text-lg max-w-2xl mx-auto">From smartphones to gaming consoles, our experts can fix it all.</p>
    </div>
</div>
<div class="bg-zinc-50 py-16">
    <div class="container mx-auto px-4 md:px-8 max-w-5xl">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            @foreach($deviceTypes as $dt)
                <div class="bg-white border border-zinc-200 p-6 rounded-3xl text-center flex flex-col items-center justify-center aspect-square hover:shadow-lg transition-all">
                    <h3 class="font-bold text-zinc-900 text-lg">{{ $dt->name }}</h3>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection