@extends('layouts.public')

@section('title', 'Practice Areas - ' . config('app.name'))
@section('meta_description', 'Legal practice areas at Shavhani Attorneys — civil litigation, road accidents, PRASA, labour, family law, estates, and more.')

@section('content')
<x-page-hero title="Practice Areas" subtitle="Experienced legal representation across civil, personal injury, labour, family, and commercial matters." image="images/sections/courthouse.jpg" />

<section class="section-spacing bg-white">
    <div class="firm-container">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            @forelse(\App\Models\Service::where('is_active', true)->get() as $service)
            <article class="practice-card group">
                @if($service->image_path)
                <a href="{{ route('services.show', $service->slug) }}" class="practice-card-media block" tabindex="-1" aria-hidden="true">
                    <img src="{{ asset($service->image_path) }}" alt="{{ $service->name }}" loading="lazy">
                    <div class="practice-card-overlay"></div>
                    <h2 class="absolute bottom-0 left-0 right-0 p-5 font-serif text-xl font-bold text-white">{{ $service->name }}</h2>
                </a>
                @endif
                <div class="practice-card-body">
                    @unless($service->image_path)
                    <h2 class="font-serif text-xl font-bold text-firm-ink mb-3">
                        <a href="{{ route('services.show', $service->slug) }}" class="hover:text-firm-red-500">{{ $service->name }}</a>
                    </h2>
                    @endunless
                    <p class="text-slate-600 mb-4 leading-relaxed text-sm">{{ Str::limit($service->description, 140) }}</p>
                    @if($service->duration)
                    <p class="text-sm text-slate-500 mb-4">Typical consultation: {{ $service->duration }} min</p>
                    @endif
                    <a href="{{ route('services.show', $service->slug) }}" class="inline-flex items-center gap-1 text-firm-red-500 font-semibold text-sm group-hover:gap-2 transition-all">
                        Read more
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                </div>
            </article>
            @empty
            <p class="col-span-full text-center text-slate-500 py-12">Practice areas coming soon.</p>
            @endforelse
        </div>
    </div>
</section>

<section class="bg-firm-ink text-white border-t-4 border-firm-red-500">
    <div class="firm-container py-14 text-center">
        <h2 class="font-serif text-3xl font-bold mb-4">Ready to discuss your matter?</h2>
        <p class="text-white/90 mb-8 max-w-xl mx-auto">Request a consultation and we'll advise on the best way forward.</p>
        <a href="{{ route('book.index') }}" class="btn-primary">Request a Consultation</a>
    </div>
</section>
@endsection