@extends('layouts.public')
@section('title', 'Locations | Anywhere Phone Repair')
@section('content')
<div class="bg-zinc-50 py-16 flex-1">
    <div class="container mx-auto px-4 md:px-8">
        <h1 class="text-3xl md:text-5xl font-black text-zinc-900 mb-4 tracking-tight text-center">Find a Location</h1>
        <p class="text-zinc-500 font-medium text-lg mb-12 text-center max-w-2xl mx-auto">Drop off your device at any of our nationwide locations for fast, professional service.</p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($stores as $store)
                <a href="{{ route('public.stores.show', $store->id) }}" class="bg-white border border-zinc-200 p-8 rounded-3xl hover:shadow-xl hover:border-primary transition-all">
                    <h3 class="font-black text-zinc-900 text-xl mb-2">{{ $store->name }}</h3>
                    <p class="text-zinc-500 font-medium text-sm mb-6">{{ $store->address ?? 'Address not available' }}</p>
                    <span class="text-sm font-bold text-primary">View Details &rarr;</span>
                </a>
            @endforeach
        </div>
    </div>
</div>
@endsection